HTML5的新特性:
表單驗(yàn)證
placeholder自動(dòng)聚焦
移除的元素:
不能識(shí)別HTML5新標(biāo)簽而不能使用,解決辦法有兩種:
通過(guò)document.createElement(tagName)方法即可讓瀏覽器識(shí)別新標(biāo)簽,瀏覽器支持新標(biāo)簽后,還可以為新標(biāo)簽添加CSS樣式。
在<head>中調(diào)用以下代碼:
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
當(dāng)然也可以直接把這個(gè)文件下載到自己的網(wǎng)站上,但這個(gè)文件必須在head標(biāo)簽中調(diào)用。
在</body>之前調(diào)用以下代碼:
<!--if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->
區(qū)分HTML和HTML5:
要為大家詳細(xì)介紹了HTML5拖放效果的實(shí)現(xiàn)代碼,拖放即抓取對(duì)象以后拖到另一個(gè)位置。感興趣的小伙伴們可以參考一下:
在 HTML5 中,拖放是標(biāo)準(zhǔn)的一部分,任何元素都能夠拖放。
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動(dòng)。但 Safari 5.1.2不支持拖動(dòng)。
下面看看實(shí)現(xiàn)效果:
拖拽前
拖拽后
代碼實(shí)現(xiàn):
把draggable屬性設(shè)置為true ,才能使元素可拖動(dòng)。
然后,規(guī)定當(dāng)元素被拖動(dòng)時(shí),會(huì)發(fā)生什么。
在上面的例子中,ondragstart 屬性調(diào)用了一個(gè)函數(shù),drag(event),它規(guī)定了被拖動(dòng)的數(shù)據(jù)。
dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值:
在這個(gè)例子中,數(shù)據(jù)類型是 "Text",值是可拖動(dòng)元素的 id ("drag1")。
ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。
默認(rèn)地,無(wú)法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置,我們必須阻止對(duì)元素的默認(rèn)處理方式。
這要通過(guò)調(diào)用 ondragover 事件的 event.preventDefault() 方法:event.preventDefault()
當(dāng)放置被拖數(shù)據(jù)時(shí),會(huì)發(fā)生 drop 事件。
在上面的例子中,ondrop 屬性調(diào)用了一個(gè)函數(shù),drop(event):
調(diào)用 preventDefault() 來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理(drop 事件的默認(rèn)行為是以鏈接形式打開(kāi))
通過(guò) dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。
被拖數(shù)據(jù)是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目標(biāo)元素)中
若要實(shí)現(xiàn)來(lái)回拖動(dòng):
若要在兩個(gè)地方來(lái)回拖動(dòng),只需將上面代碼稍作修改就行了.將body中的代碼改成:
然后在style樣式中加上#div2就可以了:
個(gè)安卓瀏覽器體積可以小到什么程度?5M?1M?幾百K?現(xiàn)在這款H5瀏覽器給出了驚人的答案——只要20K!沒(méi)錯(cuò),這款H5瀏覽器就是一款體積僅有20K的安卓瀏覽器,在App普遍臃腫化的安卓生態(tài)當(dāng)中,顯得如此鶴立雞群。如此小的體積里面,蘊(yùn)藏著怎樣的能量?一起來(lái)看看H5瀏覽器的體驗(yàn)如何吧!
軟件名稱: | H5瀏覽器 |
軟件版本: | 0.1.15 |
軟件大小: | 21KB |
軟件授權(quán): | 免費(fèi) |
適用平臺(tái): | Android |
下載地址: | http://dl.pconline.com.cn/download/365516.html |
其實(shí)H5這個(gè)名字,某些朋友可能會(huì)有些耳熟,筆者倒是很陌生,畢竟不玩黃油。H5瀏覽器和某個(gè)黃油論壇,估計(jì)也沒(méi)什么關(guān)系,名字應(yīng)該只是個(gè)巧合。這款H5瀏覽器的體積是最大的亮點(diǎn),僅有21K左右,安裝速度和運(yùn)行速度都快得驚人。開(kāi)啟后,可以看到它的布局也是非常簡(jiǎn)單,除了地址欄/搜索框外,基本就沒(méi)有什么元素了。
H5瀏覽器的界面,除了地址欄就只有一些簡(jiǎn)單的導(dǎo)航按鈕
帶有天氣和網(wǎng)頁(yè)導(dǎo)航
H5瀏覽器的功能是比較簡(jiǎn)單的,它開(kāi)啟網(wǎng)頁(yè)后只能通過(guò)菜單鍵進(jìn)行刷新、關(guān)閉和收藏網(wǎng)頁(yè)等操作,甚至不能切換多個(gè)網(wǎng)頁(yè)(日后的版本應(yīng)該會(huì)加上)。不過(guò),它的速度倒是不錯(cuò),排版也沒(méi)有什么大問(wèn)題,流暢度也挑不出什么毛病。H5瀏覽器的原理應(yīng)該是調(diào)用了安卓系統(tǒng)的WebView組件,然后給WebView套個(gè)殼,原理類似PC平臺(tái)的IE加殼瀏覽器。
H5瀏覽器開(kāi)啟網(wǎng)頁(yè)的效果,功能非常簡(jiǎn)單,地址欄都沒(méi)有
長(zhǎng)按右下角的菜單按鈕可以顯示網(wǎng)頁(yè)地址,但不能切換多個(gè)網(wǎng)頁(yè),下個(gè)版本應(yīng)該就會(huì)加入了
H5瀏覽器的功能目前比較少,但也不是一無(wú)所有——對(duì)比20K的體積,它的功能還是有點(diǎn)出乎筆者的意料的。在主界面右上方點(diǎn)擊“更多”按鈕,可以進(jìn)入到更多功能的界面,在其中,可以找到更新日志、插件中心、高級(jí)設(shè)置等模塊。插件中心目前仍是個(gè)雛形,反正筆者是沒(méi)法下載到相應(yīng)的功能插件,但從中也可以看到日后會(huì)推出屏蔽廣告、更換皮膚等插件。而在高級(jí)測(cè)試中,用戶可以切換日間和夜間皮膚,可以自定義搜索引擎,還能夠更改手勢(shì)噩耗隱藏按鈕,還是相當(dāng)不錯(cuò)的。
功能很有潛力,插件中心日后應(yīng)該會(huì)越來(lái)越豐富,但目前還不可用
可以對(duì)手勢(shì)、搜索引擎等作一些設(shè)置
比較有意思的是,H5瀏覽器還自帶了HTML5(調(diào)用HTML5TEST的頁(yè)面)和UA設(shè)置。不同手機(jī)的WebView引擎會(huì)有差異,所以測(cè)出來(lái)的結(jié)果也不同。在這里,也可以看到H5瀏覽器的確是調(diào)用系統(tǒng)WebView來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)瀏覽的功能的。
自帶HTML5測(cè)試和UA查閱
總的來(lái)說(shuō),H5瀏覽器是一款相當(dāng)有意思的瀏覽器。它極小的體積給人留下了深刻的印象,同時(shí)插件中心的引入,以及一些未完成的功能,也令人驚嘆于它的潛力。在PC平臺(tái)上,傲游(MyIE)靠套殼受到了極大歡迎,H5瀏覽器或許也能贏得大量粉絲。
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。