新增標(biāo)簽
結(jié)構(gòu)標(biāo)簽
塊狀元素,有意義的div
<article> 標(biāo)記定義一篇文章
<header> 標(biāo)記定義一個(gè)頁(yè)面或一個(gè)區(qū)域的頭部
<nav> 標(biāo)記定義導(dǎo)航鏈接
<section> 標(biāo)記定義一個(gè)區(qū)域
<aside> 標(biāo)記定義頁(yè)面內(nèi)容部分的側(cè)邊欄
<hgroup> 標(biāo)記定義文件中一個(gè)區(qū)塊的相關(guān)信息
<hgroup>
<h1>1</h1>
<h2>2</h2>
</hgroup>
<figure> 標(biāo)記定義一組多媒體內(nèi)容以及它們的標(biāo)題
<figcaption> 標(biāo)簽定義 figure 元素的標(biāo)題
<footer> 標(biāo)記定義一個(gè)頁(yè)面或一個(gè) 區(qū)域的底部
<dialog> 標(biāo)記定義一個(gè)對(duì)話框(會(huì)話框)類似微信
第一點(diǎn)補(bǔ)充:此5個(gè)標(biāo)簽不要嵌套到內(nèi)部
header/section/aside/article/footer
第二點(diǎn)補(bǔ)充:標(biāo)簽優(yōu)先級(jí)排列如下且互不嵌套
優(yōu)先級(jí)在前的在外側(cè)
header/section/footer > aside/article/figure/hgroup/nav > div/figcaption
多媒體標(biāo)簽
- <video> 標(biāo)記定義一個(gè)視頻
<video src = "video.mp4" autoplay="autoplay" controls="controls"></video>
<video autoplay="autoplay" width="1024" height="600">
<source src = "video.mp4" type="video/mp4">
</video>
- <audio> 標(biāo)記定義音頻內(nèi)容
<audio src = "music.mp4" autoplay="autoplay" loop="-1" controls="controls">
您的瀏覽器不支持音頻播放
</audio>
- <source> 標(biāo)記定義媒體資源
<audio autoplay="autoplay">
<source src = "music.mp4" type="audio/mpeg">
</audio>
- <canvas> 標(biāo)記定義畫(huà)布
- <embed> 標(biāo)記定義外部的可交互的內(nèi)容或插件(比如flash)
<embed src="video.swf" width="1024" height="768"></embed>
- 多媒體標(biāo)簽的意義
提升用戶體驗(yàn)
Web應(yīng)用標(biāo)簽
- <meter> 狀態(tài)標(biāo)簽(實(shí)時(shí)狀態(tài)顯示:氣壓绽诚、氣溫)
安全用電
最好值 optimum = 220
<meter value="220" min="20" max="380" low="200" high=240" optimum="220"></meter>
<meter value="0.75">75%</meter>
- <progress> 狀態(tài)標(biāo)簽(任務(wù)過(guò)程:安裝典徊、加載)
<progress value="30" max="100"></progress>
<progress max="100"></progress>
- 瀏覽器兼容
<meter> Firefox, Chrome, Opera以及 Safari 6 支持
<progress> Ie 10+, Firefox, Opera, Chrome 以及 Safari 6 支持
列表標(biāo)簽
- <datalist> 為input 標(biāo)記定義一個(gè)下拉列表,配合 option
<input placeholder="請(qǐng)選擇手機(jī)品牌" list="phoneList" />
<datalist id="phoneList">
<option value="1">小米</option>
<option value="2">iphone</option>
<option value="3">華為</option>
</datalist>
-<details> 標(biāo)記定義一個(gè)元素的詳細(xì)內(nèi)容恩够,配合summary
<datails open="open">
<summary>php是世界上最好的語(yǔ)言</summary>
<p>...................................................................</p>
</datails>
- 瀏覽器兼容
<datalist> Firefox, Chrome, Ie10及更改版本支持
<details> Firefox, Chrome 以及 Safari 6 支持
其它標(biāo)簽
注釋標(biāo)簽
- <ruby> 標(biāo)記定義注釋或音標(biāo)
- <rt> 標(biāo)記定義對(duì)ruby的注釋內(nèi)容文本
- <rp> 告訴哪些不支持 ruby 元素的瀏覽器如何去顯示
<rp>不要放在<rt>標(biāo)簽內(nèi)
<p>我們來(lái)
<ruby>夼
<rp>(</rp>
</rt>Kuang 3</rt>
<rp>)</rp>
</ruby>
一個(gè)話題
</p>
- <mark> 標(biāo)記定義有標(biāo)記的文本(黃色選中狀態(tài))
<p>記坠汀:下班記得<mark>打卡</mark></p>
- <output> 標(biāo)記定義一些輸出類型,計(jì)算表單結(jié)果配合oninput事件
- <keygen> 標(biāo)記定義表單里一個(gè)生成的鍵值(加密信息傳送)
- <time> 標(biāo)記定義一個(gè)日期/事件玫鸟,目前所有主流瀏覽器都不支持
刪除的標(biāo)簽
- 純表現(xiàn)的元素
basefont导绷、big、center屎飘、font妥曲、s、strike钦购、tt檐盟、u
- 對(duì)可用性產(chǎn)生負(fù)面影響的元素
frame、frameset押桃、noframes
- 產(chǎn)生混淆的元素
acronym葵萎、applet、isindex唱凯、dir
重定義標(biāo)簽
顯示不變羡忘,只是表達(dá)的含義進(jìn)行了重新定義的標(biāo)簽
- <b>
- <i>
- <dd> 描述,可以同 details 與 figure 一同使用磕昼,定義包含文本卷雕, dialog 也可用
- <dt> 標(biāo)題,可以同 detailds 與 figure 一同使用票从,匯總細(xì)節(jié)漫雕, dialog 也可用
- '<'hr>
- <menu> 重新定義用戶界面的菜單滨嘱,配合 commond 或者 menuitem 使用
- <small>
- <strong>