1、HTML5新語義化標簽
html4.01：div span h1 img…
css2.1：width height background…
css3：transform border-radius…
h5新語義化標簽：header footer main…
注：header footer main 語義化標簽在一個頁面中只能出現一次。
h5新語義化標簽：hgroup nav article aside section figure figcaption datalist details/summary progress/meter mark…

hgrop:標題組合； section:區域(div) nav:導航； figure:描述圖像或視頻 article:獨立內容； figcaption:描述圖像或視頻的標題部分 aside:輔助信息； datalist:選項列表——>涉及到的語法：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、新表單控件

email : 電子郵件地址輸入框
url : 網址輸入框
number : 數值輸入框
range : 滑動條
date / month / week : 日期控件
search : 搜索框 ( 跟普通框的區別，會多一個關閉按鈕 )
color : 顏色控件
tel : 電話號碼輸入框 ( 跟普通框的區別，在移動端，會調起帶數字的軟鍵盤 )
time : 時間控件

表單怎么把值傳給后端的？

name -> 卡value -> 錢后端根據 name 拿到 value 傳輸方式？ method : 數據傳輸方式GET （ 默認的 ）POST 傳輸類型? enctype : 數據傳輸類型application/x-www-form-urlencoded 默認傳輸的是文本multipart/form-data 傳輸的是文件 表單的新屬性？autocomplete="off" 關閉表單的默認提示信息autofocus : 自動獲取焦點required : 值不能為空pattern : 正則驗證 ( JS的內容了 )

分欄布局？

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

偽類與偽元素？

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

link標簽的擴展學習？

<link rel="dns-prefetch" href="//static.360buyimg.com"> 提前去進行域名的dns解析<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico"> 給頭標簽頁添加小圖標

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

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><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="">每隔多長時間可以對瀏覽器進行刷新 <meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"> 在指定的時間內，請求資源會走緩存。

CSS Hack?
我們一直用的就是chrome瀏覽器，但是還有很多其他瀏覽器，當然這些瀏覽器都可以稱為高級瀏覽器。

CSS Hack 解決那些古老的瀏覽器兼容性問題。
Hack分類
下載：ieTester工具 , 測試在服務器環境下。

CSS屬性前綴法
_ + * \9 \0 …

選擇器前綴法
*html

IE條件注釋法

<!--[if IE]>…<![endif]-->

IE6 BUG 非常多：
1. IE6高度的最小值是19px ,解決 overflow:hidden;
2. IE6雙邊距問題margin和float，解決 display:inline;

總結

以上是生活随笔為你收集整理的h5新语义化标签(重要)的全部內容，希望文章能夠幫你解決所遇到的問題。

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