HTML5的新特性——語義化標籤、多媒體標籤(video、audio)、input型別、表單屬性

辣味蓓蓓醬發表於2020-12-15

HTML5新增的語義化標籤

  • <header>:頭部標籤
  • <nav>:導航標籤
  • <article>:內容標籤
  • <setion>:定義文件某個區域
  • <aside>:側邊欄標籤
  • <footer>:尾部標籤

注意: 

  • 這種語義化標準主要是針對搜尋引擎
  • 這些新標籤頁面中可以使用多次
  • 在IE9,需要把這些元素轉換為塊級元素
  • 移動端更喜歡使用這些標籤

HTML5新增的多媒體標籤

新增的多媒體標籤主要包含兩個:

  • 音訊:<audio>
  • 視訊:<video>

使用它們可以很方便地在頁面中嵌入音訊和視訊,而不再去使用flash和其他瀏覽器外掛。

1. 視訊<video>

<video src="檔案地址" control="controls"></video>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支援 video 標籤。
</video>
屬性描述
autoplayautoplay視訊就緒自動播放(谷歌瀏覽器需要新增muted來解決自動播放)
controlscontrols向使用者顯示播放控制元件
widthpixels(畫素)設定播放寬度
heightpixels(畫素)設定播放高度
looploop播放完是否繼續播放該視訊,迴圈播放
preload

auto(預先載入視訊)

none(不應載入視訊)

規定是否載入視訊(如果有了autoplay就忽略該屬性)
srcurl視訊url地址
posterimgurl載入等待的畫面圖片
mutedmuted靜音播放

 2.  音訊<audio>

<audio src="檔案地址" controls="controls"></audio>
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的瀏覽器不支援 audio 元素。
</audio>
屬性描述
autoplayautoplay音訊就緒自動播放
controlscontrols向使用者顯示播放控制元件,如播放按鈕
looploop音訊結束時重新開始播放
srcurl音訊url地址
  • 谷歌瀏覽器把音訊和視訊自動播放禁止了

HTML5新增的input型別

屬性值說明
color生成一個顏色選擇表單
date定義 date 控制元件(包括年、月、日,不包括時間)。
email定義用於 e-mail 地址的欄位。
month定義 month 和 year 控制元件(不帶時區)。
number限制使用者輸入必須為數字型別
search搜尋框
tel電話號碼
time限制使用者輸入必須輸入為時間型別
url限制使用者輸入必須輸入為URL 型別
week限制使用者輸入必須輸入為周型別

 HTML5新增的表單屬性

屬性說明
requiredrequired表單擁有該屬性表示其內容不能為空,必填
placeholder提示文字表單的提示資訊,存在預設值將不顯示
autofocusautofocus自動聚焦屬性,頁面載入完成自動聚焦到指定表單
autocompleteoff/on

當使用者在欄位開始鍵入時,瀏覽器基於之前鍵入過的值,應該顯示出在欄位中填寫的選項。

multiplemultiple可以多選檔案提交

 

 

 

 

相關文章