一、新增標(biāo)簽

結(jié)構(gòu)標(biāo)簽

相當(dāng)于有意義的div標(biāo)簽
article：用于定義一篇文章
header：定義頁(yè)面的頭部
footer：
nav：導(dǎo)航條鏈接
section：定義一個(gè)區(qū)域
aside：定義頁(yè)面內(nèi)容的側(cè)邊欄
hgroup：定義文件中一個(gè)區(qū)塊的相關(guān)信息
例如：

<hgroup>
<h1>標(biāo)題一</h1>
<h2>標(biāo)題二</h2>
</hgroup>

figure：定義一組媒體內(nèi)容以及它們的標(biāo)題（可以用于包裹c(diǎn)anvas，video等多媒體標(biāo)簽）
figcaption：用于figure標(biāo)簽內(nèi)定義媒體的標(biāo)題
footer：定義一個(gè)頁(yè)面區(qū)域的底部
dialog：定義一個(gè)對(duì)話框（例如微信的對(duì)話框）
補(bǔ)充一：header/section/footer/aside/article/footer這幾個(gè)標(biāo)簽最好不要嵌套在里面，放在最外邊
補(bǔ)充二：使用層級(jí)(header=section=footer：寫在外層)>(aside/article/figure/hgroup/nav：寫在內(nèi)層)

多媒體標(biāo)簽

第一類

• video：定義一個(gè)視頻
  video標(biāo)簽和audio標(biāo)簽使用差不多
  1.autoplay：是否自動(dòng)播放
  2.controls：是否展示控制器
  4.可以用css控制視頻框的寬度和高度
  3.可以包裹source標(biāo)簽

• audio：定義一個(gè)音頻
  1.autoplay：是否自動(dòng)播放（autoplay="autoplay"：自動(dòng)播放，不寫則默認(rèn)不自動(dòng)播放）
  2.loop：是否重復(fù)以及重復(fù)幾次（loop='-1'時(shí)無(wú)限重復(fù)，=數(shù)字時(shí)重復(fù)數(shù)字次數(shù)）
  3.controls：是否顯示控制器（controls="controls"時(shí)顯示，不寫則默認(rèn)不顯示）
  4.可以包裹source標(biāo)簽

• source：定義媒體資源
  可以用于audio和video標(biāo)簽內(nèi)部，并且可以添加不同格式的媒體文件，type屬性用于填寫轉(zhuǎn)碼格式，如下：

    <audio>
        <source src='音頻資源' type='audio/轉(zhuǎn)碼格式'>
    </audi>

第二類

• canvas（圖片標(biāo)簽）：定義圖片

第三類

• embed：定義外部可交互內(nèi)容和插件，例如flash
  使用方法和audio和video標(biāo)簽類似
  1.可以使用css控制資源顯示的大小

<embed src="資源路徑" type="">

多媒體標(biāo)簽出現(xiàn)的意義：不使用插件就能控制媒體文件，極大地提升了用戶的體驗(yàn)

Web應(yīng)用標(biāo)簽

• 第一類：狀態(tài)標(biāo)簽
  • meter：實(shí)時(shí)狀態(tài)顯示：氣壓、氣溫等（目前只支持谷歌和opera）
    屬性：
    1.value：定義目前所處狀態(tài)（數(shù)值）
    2.min：最低數(shù)值
    3.max：最高數(shù)值
    4.low：最低顯示（低于該值為為黃色）
    5.high：最高顯示（高于該值為黃色）
    6.optimum：最優(yōu)值

用法一

<meter value='220' min='20' max='380' low='200' high='240' optimum='220'></meter>

image.png

<meter value='0.75'>75%</meter>

image.png

• progress：顯示任務(wù)過(guò)程：安裝、加載等（目前只支持谷歌，火狐和opera）
  屬性
  1.value：當(dāng)前的狀態(tài)值
  2.max：最大狀態(tài)值

用法一：顯示正在加載狀態(tài)

<progress max='100'></progress>

image.png

用法二：顯示當(dāng)前加載的百分比

<progress max='100' value='50'></progress>

image.png

列表標(biāo)簽

• datalist：為input標(biāo)簽定義一個(gè)下拉列表，配合option（兼容火狐和谷歌）
  用法：input標(biāo)簽中的list屬性的值和datalist標(biāo)簽中的id必須相同，才能進(jìn)行下拉拓展

    <input type="text" placeholder="111" list='phonelist'>
    <datalist id="phonelist">
        <option value="三星"></option>
        <option value="華為"></option>
        <option value="蘋果"></option>
        <option value="小米"></option>
        <option value="大春"></option>
    </datalist>

image.png

• details：定義一個(gè)元素的詳細(xì)內(nèi)容，配合summary標(biāo)簽，用于展示省略的信息（兼容谷歌和其他一些高版本瀏覽器）
  用法：

image.png

顯示（未點(diǎn)擊展開時(shí)候）：

image.png

點(diǎn)擊展開后：

image.png

另外可以配合summary標(biāo)簽修改標(biāo)題的顯示

<details>
    <summary>很多的a</summary>
</details>

image.png

open屬性：可以設(shè)置為open='open'用于設(shè)置默認(rèn)打開

Menu標(biāo)簽（很多瀏覽器都不支持，建議少用或不用）

• menu：命令列表
• menuitem：menu命令列表標(biāo)簽（只有火狐8.0以上支持）
• command：menu標(biāo)簽定義的一個(gè)命令按鈕（只有IE9支持，以上或以下都不支持）

注釋標(biāo)簽（不是平時(shí)的注釋，這個(gè)標(biāo)簽主要用于類似注釋拼音之類，會(huì)顯示出來(lái)）

• ruby和rt標(biāo)簽
  用法：用ruby標(biāo)簽將字括起來(lái)，然后rt標(biāo)簽填寫注釋信息

<p>注<ruby>釋<rt>shi</rt></ruby>標(biāo)簽</p>

[圖片上傳中。。。（10）]

image.png

• mark：用于標(biāo)黃（所有主流瀏覽器都支持，IE要9以上）

<p><mark>aaaaa</mark>aaaaa</p>

image.png

二、刪除的標(biāo)簽

純表現(xiàn)元素（刪除后利于表現(xiàn)與結(jié)構(gòu)分離）

1.Basefont
2.big
3.center
4.font
5.s
6.strike
7.tt
8.u

可能有負(fù)面影響的元素

1.frame
2.frameset（使用該標(biāo)簽時(shí)會(huì)將body標(biāo)簽去掉，破壞原始結(jié)構(gòu)，并且將網(wǎng)頁(yè)拆分，不利于搜索）
3.noframes
因?yàn)镠TML5詳細(xì)兼容，所以以上標(biāo)簽還是可以使用，但是最好不要用

產(chǎn)生混淆的元素

1.acronym
2.applet
3.isindex
4.dir
完全沒(méi)用過(guò)....

三、使用HTML5新標(biāo)簽進(jìn)行布局的意義

1.提升語(yǔ)義化特性和網(wǎng)頁(yè)的質(zhì)量
2.減少了用于css調(diào)用的class和id屬性
3.對(duì)搜索引擎更友好