1.什么是H5?
超文本標(biāo)記語(yǔ)言的第五個(gè)版本
html:xt html:xs(xml) html:4s(strict) html:4t(過(guò)渡)
2.H5有哪些增強(qiáng)
<1>標(biāo)簽語(yǔ)義化增強(qiáng)
<2>連通性增強(qiáng)(協(xié)議)web socket 建立長(zhǎng)連接
<3>離線和存儲(chǔ)
<4>多媒體增強(qiáng)
<5>3D 圖像 效果
<6>性能集成web worker js操作線程
<7>樣式 css3
h5+
總結(jié):H5是一個(gè)大的概念 包含了HTML的增強(qiáng) css的增強(qiáng) 瀏覽器API的增強(qiáng)
3.新增的提綱標(biāo)簽(H5將這些常見(jiàn)語(yǔ)義div升級(jí)為標(biāo)簽)
<section>標(biāo)簽脂男,?? ?定義文檔中的節(jié)旅赢。比如章節(jié)借宵、頁(yè)眉茫经、頁(yè)腳或文檔中的其它部分娱局。一般用于成節(jié)的內(nèi)容了嚎,會(huì)在文檔流中開(kāi)始一個(gè)新的節(jié)硝训。它用來(lái)表現(xiàn)普通的文檔內(nèi)容或應(yīng)用區(qū)塊,通常由內(nèi)容及其標(biāo)題組成
<article>是一個(gè)特殊的section標(biāo)簽新思,它比section具有更明確的語(yǔ)義窖梁,它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊夹囚,可獨(dú)立于頁(yè)面其它內(nèi)容使用纵刘。例如一篇完整的論壇帖子,一篇博客文章荸哟,一個(gè)用戶評(píng)論等等
<nav>標(biāo)簽代表頁(yè)面的一個(gè)部分假哎,是一個(gè)可以作為頁(yè)面導(dǎo)航的鏈接組,其中的導(dǎo)航元素鏈接到其它頁(yè)面或者當(dāng)前頁(yè)面的其它部分鞍历,使html代碼在語(yǔ)義化方面更加精確
<aside>標(biāo)簽用來(lái)裝載非正文的內(nèi)容舵抹,被視為頁(yè)面里面一個(gè)單獨(dú)的部分。它包含的內(nèi)容與頁(yè)面的主要內(nèi)容是分開(kāi)的劣砍,可以被刪除惧蛹,而不會(huì)影響到網(wǎng)頁(yè)的內(nèi)容、章節(jié)或是頁(yè)面所要傳達(dá)的信息。例如廣告香嗓,成組的鏈接迅腔,側(cè)邊欄等等。
<header>標(biāo)簽定義文檔的頁(yè)眉靠娱,通常是一些引導(dǎo)和導(dǎo)航信息
<footer>標(biāo)簽定義section或document的頁(yè)腳
<hgroup>標(biāo)簽是對(duì)網(wǎng)頁(yè)或區(qū)段section的標(biāo)題元素(h1-h6)進(jìn)行組合沧烈。例如,在一區(qū)段中你有連續(xù)的h系列的標(biāo)簽元素像云,則可以用hgroup將他們括起來(lái)
<figure>用于對(duì)元素進(jìn)行組合锌雀。多用于圖片與圖片描述組合。
<figcaption>圖片的標(biāo)題
<progress value="20" max="100">進(jìn)度條標(biāo)簽?? ?
<address>地址標(biāo)簽
<mark>標(biāo)記標(biāo)簽
<code>編碼標(biāo)簽
<time>時(shí)間標(biāo)簽
注釋標(biāo)簽:
<ruby>
rb是注釋對(duì)象
rt是注釋內(nèi)容
兩個(gè)rp( 包含rt )
</ruby>
總結(jié):
使用心得標(biāo)簽標(biāo)準(zhǔn)讓HTML文檔更加清晰 可閱讀行強(qiáng) 更加利于SEO(搜索引擎化)也更利于視障人員閱讀
這些標(biāo)簽的語(yǔ)義都比div大 也就是它們能夠包含div div不能包含它們
4.新的表單元素
親輸入年齡:number (min max)
請(qǐng)輸入郵箱:email
請(qǐng)輸入網(wǎng)址:url
輸入電話:tel
日期:date
顏色:color
搜索:search autofocus
滑塊:range (step滑塊位置)
提示:list='title'
??datalist id='title'>option
文件:file
file.name:文件名稱(chēng)
file.size:文件大小
file.type:文件類(lèi)型
file.lastModifiedDate:文件最后一次修改時(shí)間
讀取圖片資源
FileReader對(duì)象
將文件以base64的格式讀入頁(yè)面
FileReader.readAsDataURL()
返回文件的內(nèi)容迅诬。只有在讀取操作完成后汤锨,此屬性才有效,返回的數(shù)據(jù)的格式取決于是使用哪種讀取方法來(lái)執(zhí)行讀取操作的百框。
FileReader.result
用js獲取顏色 ?: .value
5.表單的新屬性
<!--提示文字-->
placeholder
<!--必填項(xiàng)-->
required
<!--自動(dòng)獲取焦點(diǎn)屬性-->
autofocus
<!--min最小值 max是最大值 step 是間隔步數(shù)-->
<!--最大長(zhǎng)度 最小長(zhǎng)度-->
maxlength minlength
6.其他新屬性
<!--內(nèi)容是否可編輯-->
contenteditable
<!--異步運(yùn)行腳本-->(外鏈)
<script type="text/javascript" async="async">
7.HTML5兼容問(wèn)題
[if lt IE 9]-->
????????<!--<script type="text/javascript" src="respond.js"></script>-->
????????<!--<script type="text/javascript" src="html5.js"></script>-->
????????<!--![endif]-->
????????<!--respond.js:作用:讓IE6-8,支持css3媒體查詢-->
????????<!--讓IE6-8支持HTML5新標(biāo)簽
8.H5桌面推送Notification特性 - Web的桌面通知功能