HTML5新語義化標簽 ( 很重要的 )

新舊對比：

width height background -> css2.1transform border-radius -> css3div span h1 img -> html4.01header footer main -> html5 注：很多新的HTML5語義化標簽，跟div類似。

1.新語義化標簽(都是雙標簽)

header : 頁眉 footer : 頁腳 main : 主體 *注：header footer main 語義化標簽在一個頁面中只能出現一次。*hgroup : 標題組合 nav : 導航 article : 獨立的內容論壇帖子報紙文章博客條目用戶評論 aside : 輔助信息的內容 section : 區域 , 跟div的功能以及語義是一樣的figure : 描述圖像或視頻 figcaption : 描述圖像或視頻的標題部分datalist : 選項列表（跟seclect下拉菜單用處相同）涉及到的語法：list id value ...<input type="text" list="elems"><datalist id="elems"><option value="a"></option><option value="ab"></option><option value="abc"></option><option value="abcd"></option><option value="apple"></option><option value="around"></option></datalist>details / summary : 文檔細節 / 文檔標題相關語法：open屬性<details open><summary>HTML</summary><p>超文本標記語言</p></details>progress / meter : 定義進度條 / 定義度量范圍<progress min="0" max="100" value="50"></progress><meter min="0" max="100" value="80" low="30" high="70"></meter>time : 定義日期或時間<p>今天是 <time>3月3日</time></p><p>今天是 <time title="2月14日">情人節</time></p>mark : 帶有記號的文本

2. 音頻與視頻標簽(都是雙標簽)

audio ：音頻 以下是可能需要添加的控件屬性controls : 顯示控件loop : 循環播放autoplay : 自動播放 ( 很多瀏覽器已經禁止這個功能，因為考慮到用戶體驗的問題 )muted : 靜音video : 視頻 object-fit: cover; 可以讓視頻覆蓋整個父容器。

注：音頻和視頻的默認控件是隱藏的。
注：如果想做出跟QQ音樂一樣的效果：audio標簽 + 隱藏控件（默認的，控件的樣式用HTML+CSS模擬）+ JavaScript來實現交互功能。
注：在視頻中，可以通過 autoplay + muted 可以在靜音的情況下進行自動播放。
注：默認情況下，視頻是不能進行拉伸的，必須成比例。
注：為了能夠支持多個備選文件的兼容支持，可以配合source標簽。

3. 新的表單控件？

<input type="email">，加在type中的屬性控件 email : 電子郵件地址輸入框 url : 網址輸入框 number : 數值輸入框 range : 滑動條 date / month / week : 日期控件 search : 搜索框 ( 跟普通框的區別，會多一個關閉按鈕 ) color : 顏色控件 tel : 電話號碼輸入框 ( 跟普通框的區別，在移動端，會調起帶數字的軟鍵盤 ) time : 時間控件表單怎么把值傳給后端的？后端通過獲取表單中的的name，就可以得到value值，這也叫做鍵值對；相當于name是銀行卡，value是錢，后端拿的是銀行卡取得錢后端根據 name 拿到 value表單傳輸方式？method : 數據傳輸方式GET （ 默認的，獲取的時候網址后面會帶有你輸入的東西 ）POST （從網址上看不到你提交成功沒）傳輸類型?enctype : 數據傳輸類型application/x-www-form-urlencoded 默認傳輸的是文本multipart/form-data 傳輸的是文件表單的新屬性？autocomplete="off" 關閉表單的默認提示信息autofocus : 自動獲取焦點required : 值不能為空pattern : 正則驗證 ( JS的內容了 )

4. 分欄布局？

column-count : 分欄的個數 column-width : 分欄的寬度注：column-count column-width 不要一起去寫。 column-gap : 分欄的間距 column-rule : 分欄的邊線 column-span : num | all （合并分欄）

5. 偽類與偽元素？

#elem:after{} #elem:hover{} 以上兩種寫法在舊版本中是對的規范的，但在新版本css3中第一個不規范。在 CSS2.1的時候 : #elem:after{} √ 在 CSS3的時候 : #elem:after{} × #elem::after{} √#elem:hover{} √ #elem::hover{} × **寫法區別**：偽類： 單冒號 -> :hover :active :visited :link ...偽元素： 雙冒號 -> ::after ::before ... **功能區別**：偽類只會對操作的元素起作用，相當于樣式添加到了元素身上而偽元素是對創建出來的虛擬容器起作用，相當于樣式添加到了這個虛擬容器上。

6. link標簽的擴展學習？

<link rel="dns-prefetch" href="//static.360buyimg.com"> 提前去進行域名的dns解析，這樣在進入網址時就會加快速度<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico"> 給網頁頭部添加小圖標，格式固定的只能是.ico或.cur，跟制作鼠標小手文件類型一樣。

7. 擴展meta標簽？元信息（輔助信息）

<meta charset="UTF-8"> 編碼格式，必須要寫<meta name="viewport" content="width=device-width, initial-scale=1.0"> 這是用于移動端的可視窗口設置，可以加上屬性user-scalable=no使用戶在移動端不能進行縮放。<meta name="description" content="大連美團網精選大連美食餐廳,酒店預訂,電影票,旅游景點,外賣訂餐,大連團購信息,您可查詢商家評價店鋪信息。大連生活,下載美團官方APP ,吃喝玩樂1折起。"> <meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪">以上兩個都是網頁的描述信息，有助于搜索引擎搜索，即是搜索關鍵詞。<meta name="renderer" content="webkit">用哪個引擎去渲染頁面。有的瀏覽器可能有多個引擎，chrome : webkit blink ..<meta http-equiv="X-UA-Compatible" content="ie=edge">ie瀏覽器已什么方式渲染edge最新版進行渲染，ie9 ie10 -> edge<meta http-equiv="refresh" content="3" url="">每隔多長時間可以對瀏覽器進行刷新，3就是3秒刷新一次<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"> 在指定的時間內，請求資源會走緩存，提高進入網址的速度。

8. CSS Hack?

我們一直用的就是chrome瀏覽器，但是還有很多其他瀏覽器，當然這些瀏覽器都可以稱為高級瀏覽器。CSS Hack 解決那些古老的瀏覽器兼容性問題。Hack分類下載：下載ieTester工具 , 可以在服務器環境下進行測試新舊版本瀏覽器的測試。1. CSS屬性前綴法_ + * \9 \0 ... div {_background: red;} div {_background: red \9;}等2. 選擇器前綴法（選擇器前加*）*html3. IE條件注釋法<!--[if IE]>…<![endif]-->IE6 BUG 非常多：1. IE6高度的最小值是19px ,解決 overflow:hidden;2. IE6雙邊距問題margin和float，解決 display:inline;

總結

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

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