H5經常使用新特性

html5新特性

【注意】這些新特性都有兼容性的問題，基本是IE9+以上版本的瀏覽器才支持，若是不考兼容性問題，能夠大量使用這些新特性

1. html5新增的語義話標籤

   • <header> :頭部標籤
   • <nav> 導航欄標籤
   • <article> 內容標籤
   • <section> 定義文檔某個區域
   • <aside> 側邊欄標籤
   • <footer> 尾部標籤
   • 【注意】
     • 這種語義化標準主要是針對搜索引擎的
     • 這些新標籤頁面中能夠使用屢次
     • 在IE9中，須要把這些元素轉換爲塊級元素
     • 更多移動端使用

2. HTML新增的多媒體標籤

   • 音頻：<autio>

     瀏覽器	MP3	Wav	Ogg
     Internet Explorer	YES	NO	NO
     Chorme	YES	YES	YES
     Firefox	YES	YES	YES
     Safari	YES	YES	YES
     Opera	YES	YES	YES

     屬性	值	描述
     autoplay	autoplay	若是出現該屬性，則音頻就緒後立刻播放
     controls	controls	若是出現該屬性，則向用戶顯示控件，好比播放按鈕
     loop	loop	在音頻結束時從新開始播放
     src	url	要播放音頻的URL

   • 視頻：<video>

     • 瀏覽器	mp4	webm	ogg
       Internet Explorer	yes	no	no
       Chrome	YES	YES	YES
       Firefox	yes	YES	YES
       Safari	yes	no	no
       opera	yes	yes	yes

   • <video src="文件地址" controls="controls"></video>

     屬性	值	描述
     autoplay	autoplay	視頻就緒自動播放（谷歌瀏覽器須要添加muted來解決自動播放的問題）
     controls	controls	向用戶顯示播放控件
     width	pixels	設置播放器寬度
     height	px	設置播放器高度
     loop	loop	是否循環播放
     preload	auto（預先加載視頻）none（不預先加載視頻）	規定是否預先加載視頻（若是有了auto play，就忽略該屬性）
     src	url	視頻url地址
     poster	imgurl	加載等待的畫面圖片
     muted	muted	靜音播放

3. 新增表單

   屬性值	說明
   type="email"	用戶輸入的必須爲Email類型
   type=「url」	限制用戶必須輸入爲URL類型
   type=「date」	限制用戶必須輸入日期類型
   type=「time」	限制用戶必須輸入時間類型
   type=「month」	限制用戶必須輸入月份
   type=「week」	限制用戶必須輸入周
   type=「number」	限制用戶輸入數字
   type=「tel」	限制用戶輸入手機號
   type=「search」	搜索框
   type=「color」	生成一個顏色選擇表單

4. 新增的表單屬性

   屬性	值	說明
   required	required	表單擁有該屬性表示其內容不能爲空必填
   placeholder	提示文本	表單的提示信息，存在默認值將不顯示
   autofocus	autofocus	自動聚焦屬性，頁面加載完成自動聚焦到指定表單
   auto complete	off\on	當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出字段中填寫的選項。默認已經打開，如autocomplete=「on」，關閉auto complete=「off」須要放在表單內，同時加上name屬性，同時成功提交
   multiple	multiple	能夠多選文件提交