HTML5新增語義化標(biāo)簽

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

<header>頁眉</header>
<footer>頁腳</footer>
<main>網(wǎng)頁主體</main>
<nav>導(dǎo)航欄</nav>
<article>文檔獨(dú)立區(qū)域</article>
<section>文章的一個章節(jié)<section>
<aside>側(cè)邊欄</aside>
<figure>文檔獨(dú)立流內(nèi)容</figure>
<address>文檔中的聯(lián)系信息</address>
<hgroup>標(biāo)題分組</hgroup>

其他標(biāo)簽

<figure>標(biāo)題</figure>
<mark>標(biāo)記,自帶黃色背景</mark>
<time>時間</time>

表單標(biāo)簽

新增input的type類型

  • number 只能輸入數(shù)字嘿般,它并附帶兩個值
    max 最大值
    min 最小值
    value 最小

  • url 只能輸入網(wǎng)址靡菇,在提交表單時會自帶驗(yàn)證

  • email 只能輸入郵箱,在提交表單時會自帶驗(yàn)證

  • color 顏色選擇框拔创,添加value屬性可以設(shè)置顏色默認(rèn)值(#FF0000)

  • date 日期選擇框呢诬,默認(rèn)值(yyyy-mm-dd)

  • time 時間選擇框涌哲,默認(rèn)值(hh:mm)

  • range 滑塊

  • search 搜索框

  • week/month 周/年

新增屬性

  • autofocus 自動獲取焦點(diǎn)
  • required 必填項(xiàng)目
  • pattern 匹配正則表單式
  • placeholder 占位符

多媒體標(biāo)簽

  • 音頻

<audio src="music.mp3 controls="controls">當(dāng)瀏覽器不支持時顯示我</audio>

  1. 目前的主流瀏覽器都支持,IE8及以下不支持
  2. 支持音頻格式尚镰,MP3阀圾、Wav(IE不支持)、Ogg(Safari钓猬、IE不支持)
  3. 相關(guān)屬性(屬性名和屬性值相同時,值可以省略)
    controls="controls" 顯示播放按鈕
    loop="loop" 循環(huán)播放
    muted="muted" 靜音播放
    preload="none/auto/meta" 是否需要預(yù)加載撩独;不需要/需要/預(yù)加載元數(shù)據(jù)
    src="url" 設(shè)置音頻地址
  • 視頻
    <video src="movie.mp4" controls="controls"></video>
  1. 瀏覽器支持和格式
    MP4:IE9+敞曹,Chrome 6+,Safari 5+
    WebM:Chrome 6+综膀,F(xiàn)irefox 3.6+
    Ogg:Chrome 6+澳迫,F(xiàn)irefox 3.6+
  2. 屬性,除了audio的屬性外加width和height
  • 資源標(biāo)簽
<audio>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的瀏覽器不支持audio標(biāo)簽播放音樂
</audio>

source 標(biāo)簽可以為媒體元素指定多個媒體資源剧劝,當(dāng)?shù)谝粋€資源不支持時自動識別下一個橄登,多用于解決瀏覽器兼容問題

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市讥此,隨后出現(xiàn)的幾起案子拢锹,更是在濱河造成了極大的恐慌,老刑警劉巖萄喳,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件卒稳,死亡現(xiàn)場離奇詭異,居然都是意外死亡他巨,警方通過查閱死者的電腦和手機(jī)充坑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來染突,“玉大人捻爷,你說我怎么就攤上這事》萜螅” “怎么了也榄?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長司志。 經(jīng)常有香客問我手蝎,道長榕莺,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任棵介,我火速辦了婚禮钉鸯,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘邮辽。我一直安慰自己唠雕,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布吨述。 她就那樣靜靜地躺著岩睁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪揣云。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天,我揣著相機(jī)與錄音点弯,去河邊找鬼。 笑死捡絮,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的灵寺。 我是一名探鬼主播略板,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼赂韵!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤带饱,失蹤者是張志新(化名)和其女友劉穎教寂,沒想到半個月后穷躁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體问潭,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡灾茁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了拓颓。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片语婴。...
    茶點(diǎn)故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出砰左,到底是詐尸還是另有隱情匿醒,我是刑警寧澤,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布缠导,位于F島的核電站廉羔,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏酬核。R本人自食惡果不足惜蜜另,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望嫡意。 院中可真熱鬧举瑰,春花似錦、人聲如沸蔬螟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽旧巾。三九已至耸序,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鲁猩,已是汗流浹背坎怪。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留廓握,地道東北人搅窿。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像隙券,于是被迫代替她去往敵國和親男应。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評論 2 354

推薦閱讀更多精彩內(nèi)容