HTML5

1 html5新增語義化標簽

1. 1 新增頁面結構標簽

標簽名語義和功能屬性單標簽還是雙標簽

header	頁面頭部		雙標簽
footer	頁面腳部		雙標簽
nav	導航條		雙標簽
section	頁面或文章中的一節		雙標簽
aside	側邊欄		雙標簽
article	文章，博客，帖子，新聞		雙標簽
main	頁面主要內容		雙標簽

總結：

1.section無法代替div，article和aside被認為是具體的section 2.main標簽whatwg標準中沒有定義，ie瀏覽器不支持 3.以上標簽本質上就是帶有語義的div

1.2 新增狀態標簽

標簽名語義和功能屬性單標簽還是雙標簽

meter	表示靜態的度量	max,min,value,high,low,optim	雙標簽
progress	表示動態的進度	max,value	雙標簽

meter和progress的區別

1.meter表示靜態的度量，如溫度，磁盤容量，電池容量 2.progress表示動態的進度，如進度條

1.3 新增列表標簽

標簽名語義和功能屬性單標簽還是雙標簽

datalist	實現搜索框下拉提示		雙標簽
details	關鍵字和對關鍵字的展開解釋	open：無需給值	雙標簽
summary	定義關鍵字或文字		雙標簽

<input type="text" list="searchList"> <datalist id="searchList"><option value="abb"></option><option value="aaa"></option><option value="aac"></option><option value="abhelo"></option><option value="hellodd"></option><option value="a10"></option> </datalist> <details><summary>如何一夜暴富？</summary><p>疇而極受的領鼓孔就后的希服陳洪幫謀我到，方這是氣有人情回問，死看下五乏整普聯和收的量我事嬋是年而安，降人嚴人死徒的責為夠予訂在不他著不，人從惱久使楊輕了膽丐稟爻感召預國是一艷，亓措有非準詞的后賜是一同尹學，云一別也老航都少二韋楊嘆，始歸云王賢只落當了覺后。</p> </details>

1.4 新增注釋標簽（注音標簽）

標簽名語義和功能屬性單標簽還是雙標簽

ruby	添加注音		雙標簽
rt	包裹在ruby的里面，選中注釋的內容		雙標簽

歡迎來享受這場<ruby>饕餮<rt>taotie</rt></ruby>盛宴！

1.5 新增文本標簽

標簽名語義和功能屬性單標簽還是雙標簽

mark	標記標簽	標記搜索結果	雙標簽

2 html5 表單新增功能

2.1 表單控件新增屬性

placeholder 用于可輸入的表單控件，設置輸入前的文字提示 required 用于所有類型表單控件，設置該表單控件必填或必選 autofocus 用于所有類型表單控件，設置自動獲取焦點 autocomplete 用于可輸入的表單控件，設置瀏覽器是否顯示輸入值記錄 pattern 用于可輸入的表單控件（textarea不可以），設置正則檢測輸入內容是否滿足格式

2.2 input標簽type屬性新增的值

1 文本輸入框類

email, number(有效屬性max，min，step) url tel search

2 范圍選擇框

range(max min step)

3 顏色選擇框

color

4 時間日期選擇框

date,month,week,time

2.3 form標簽新增屬性

novalidate 設置該屬性，表單不驗證

3 HTML5音視頻

3.1 音視頻標簽

標簽功能和語義屬性單標簽還是雙標簽

video	視頻	src：設置視頻文件地址 width：設置視頻高度 height：設置視頻高度 controls：顯示控制條 muted：設置默認靜音 autoplay：自動播放，無需設置值 loop：循環播放，無需設置值 preload：預先加載，無需加載 poster：設置視頻封面	雙標簽
audio	音頻	src：設置視頻文件地址 width：設置視頻高度 height：設置視頻高度 controls：顯示控制條 muted：設置默認靜音 autoplay：自動播放，無需設置值 loop：循環播放，無需設置值 preload：預先加載，無需加載	雙標簽
source	引入資源（音頻或視頻）	src：設置音頻或視頻地址 type：設置音頻或視頻的類型	雙標簽

總結：

1.chrome 規定，音頻，視頻只有在靜音前提下，才能實現自動播放。 2.視頻只設置寬或高，另一個自動計算

兼容方案：

<video controls><source src="../sources/video/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><source src="../sources/video/movie.ogg" type='video/ogg; codecs="theora, vorbis"'><source src="../sources/video/movie.webm" type='video/webm; codecs="vp8, vorbis"'>您的破瀏覽器不支持視頻播放，請下載最新版的 Chrome </video>

3.2 瀏覽器支持的音視頻格式

1 視頻格式

MP4，webm，ogg

2 音頻格式

mp3,wav,ogg

4 HTML5 新增全局屬性

hidden 設置該屬性元素隱藏，無需設置值

5 HTML5兼容方案

5.1 設置元信息

<!--設置IE總是使用最新的文檔模式進行渲染--> <meta http-equiv="X-UA-Compatible" content="IE=Edge"><!--優先使用 webkit ( Chromium ) 內核進行渲染, 針對360等殼瀏覽器--> <meta name="renderer" content="webkit">

5.2 html5shiv.js讓IE8以及以下的瀏覽器支持H5新標簽

<!--[if lt ie 9]><script src="../js/html5shiv.js"></script> <![endif]-->

總結

以上是生活随笔為你收集整理的html5~的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。