HTML5新增語義化標籤

結構化標籤

<header>頁眉</header>
<footer>頁腳</footer>
<main>網頁主體</main>
<nav>導航欄</nav>
<article>文檔獨立區域</article>
<section>文章的一個章節<section>
<aside>側邊欄</aside>
<figure>文檔獨立流內容</figure>
<address>文檔中的聯繫信息</address>
<hgroup>標題分組</hgroup>

其他標籤

<figure>標題</figure>
<mark>標記,自帶黃色背景</mark>
<time>時間</time>

表單標籤

新增input的type類型

  • number 只能輸入數字,它並附帶兩個值
    max 最大值
    min 最小值
    value 最小

  • url 只能輸入網址,在提交表單時會自帶驗證

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

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

  • date 日期選擇框,默認值(yyyy-mm-dd)

  • time 時間選擇框,默認值(hh:mm)

  • range 滑塊

  • search 搜索框

  • week/month 周/年

新增屬性

  • autofocus 自動獲取焦點
  • required 必填項目
  • pattern 匹配正則表單式
  • placeholder 佔位符

多媒體標籤

  • 音頻

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

  1. 目前的主流瀏覽器都支持,IE8及以下不支持
  2. 支持音頻格式,MP3、Wav(IE不支持)、Ogg(Safari、IE不支持)
  3. 相關屬性(屬性名和屬性值相同時,值可以省略)
    controls="controls" 顯示播放按鈕
    loop="loop" 循環播放
    muted="muted" 靜音播放
    preload="none/auto/meta" 是否需要預加載;不需要/需要/預加載元數據
    src="url" 設置音頻地址
  • 視頻
    <video src="movie.mp4" controls="controls"></video>
  1. 瀏覽器支持和格式
    MP4:IE9+,Chrome 6+,Safari 5+
    WebM:Chrome 6+,Firefox 3.6+
    Ogg:Chrome 6+,Firefox 3.6+
  2. 屬性,除了audio的屬性外加width和height
  • 資源標籤
<audio>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的瀏覽器不支持audio標籤播放音樂
</audio>

source 標籤可以爲媒體元素指定多個媒體資源,當第一個資源不支持時自動識別下一個,多用於解決瀏覽器兼容問題

其他標籤

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章