h5有哪些新特性?


html5新增標簽

mark 標記

meter 表示度量

progress 進度條

ruby 注釋

rt 對ruby元素內容的解釋

rp 當瀏覽器不支持ruby元素的時候顯示的內容

 

time 表示一個時間點

 

datalist:配合input使用,並且通過input的list屬性和datalist的id屬性進行綁定

datalist相對於select多了一個自動查詢的功能

 

h5新增的表單元素

新增的類型

  email:可以自動驗證輸入的字符串是否是一個合法的郵箱地址

  url:自動驗證文本框內容是否是一個合法的URL地址

  number:可以指定最大最小值以及數字改變的幅度,並且可以校驗輸入的數字是否在指定范圍內,文本框只能輸入數字

  range:表示一個范圍

  Date Picker:

    date:選取日、月、年

    month:選取月、年

    week:選取周和年

    time:選取時間(小時和分鍾)

    datetime:選取時間、日、月、年(本地時間)

  search:搜索

  在移動端可以調取鍵盤的搜索按鈕

 

output用法

<form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
    0 <input type="range" id="a" value="50"> 100
    + <input type="number" id="b" value="50">
    = <output name="x" for="a b"></output>
</form>

 

<canvas></canvas>標簽

canvas的詳細用法還需配合JavaScript使用

 

audio:音頻

  src:音頻的資源位置

  controls:控制條

  autoplay:自動播放

  loop:循環播放

  preload:預加載

video:視頻

 

視頻和音頻支持的格式

用於視頻:

  video / ogg

  video / mp4

  video / webm

用於音頻:

  audio / ogg

  audio / mpeg

 

source:導入視頻或者音頻資源

 

h5新增的語義標簽

header 定義section或page的頁眉

footer 定義section或page的頁腳

section 定義section

article 定義文章

aside 定義頁面內容之外的內容  側邊欄

都跟div的用法一模一樣

唯一的區別就是這些標簽具備語義

 

summary 為details元素定義可見的標題

details 定義元素的細節

示例:

<details>
    <summary>點擊展開</summary>
    文本詳細內容···
</details>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM