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

hgrop:標(biāo)題組合； section:區(qū)域(div) nav:導(dǎo)航； figure:描述圖像或視頻 article:獨(dú)立內(nèi)容； figcaption:描述圖像或視頻的標(biāo)題部分 aside:輔助信息； datalist:選項(xiàng)列表——>涉及到的語法：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：文檔細(xì)節(jié) / 文檔標(biāo)題相關(guān)語法：open屬性<details open><summary>HTML</summary><p>超文本標(biāo)記語言</p></details> progress / meter : 定義進(jìn)度條 / 定義度量范圍<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日">情人節(jié)</time></p> mark : 帶有記號的文本

2、音頻和視頻
audio ：音頻 ，雙標(biāo)簽

controls : 顯示控件loop : 循環(huán)播放autoplay : 自動播放 ( 很多瀏覽器已經(jīng)禁止這個功能，因?yàn)榭紤]到用戶體驗(yàn)的問題 )muted : 靜音

video : 視頻 ， 雙標(biāo)簽

object-fit: cover; 可以讓視頻覆蓋整個父容器。

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

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

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

name -> 卡value -> 錢后端根據(jù) name 拿到 value 傳輸方式？ method : 數(shù)據(jù)傳輸方式GET （ 默認(rèn)的 ）POST 傳輸類型? enctype : 數(shù)據(jù)傳輸類型application/x-www-form-urlencoded 默認(rèn)傳輸?shù)氖俏谋緈ultipart/form-data 傳輸?shù)氖俏募?表單的新屬性？autocomplete="off" 關(guān)閉表單的默認(rèn)提示信息autofocus : 自動獲取焦點(diǎn)required : 值不能為空pattern : 正則驗(yàn)證 ( JS的內(nèi)容了 )

分欄布局？

column-count : 分欄的個數(shù)
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{} × 寫法區(qū)別：偽類： 單冒號 -> :hover :active :visited :link ...偽元素： 雙冒號 -> ::after ::before ... 功能區(qū)別：偽類只會對操作的元素起作用，相當(dāng)于樣式添加到了元素身上而偽元素是對創(chuàng)建出來的虛擬容器起作用，相當(dāng)于樣式添加到了這個虛擬容器上。

link標(biāo)簽的擴(kuò)展學(xué)習(xí)？

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

擴(kuò)展meta標(biāo)簽？元信息（輔助信息）

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="大連美團(tuán)網(wǎng)精選大連美食餐廳,酒店預(yù)訂,電影票,旅游景點(diǎn),外賣訂餐,大連團(tuán)購信息,您可查詢商家評價(jià)店鋪信息。大連生活,下載美團(tuán)官方APP

,吃喝玩樂1折起。">

<meta name="keyword" content="淘寶,掏寶,網(wǎng)上購物,C2C,在線交易,交易市場,網(wǎng)上交易,交易市場,網(wǎng)上買,網(wǎng)上賣,購物網(wǎng)站,團(tuán)購,網(wǎng)上貿(mào)易,安全購物,電子商務(wù),放心買,供應(yīng),買賣信息,網(wǎng)店,一口價(jià),拍賣,網(wǎng)上開店,網(wǎng)絡(luò)購物,打折,免費(fèi)開店,網(wǎng)購,頻道,店鋪">注：網(wǎng)頁的描述信息，有助于搜索引擎搜索。<meta name="renderer" content="webkit">以哪個引擎去渲染頁面。有的瀏覽器可能有多個引擎，chrome : webkit blink .. <meta http-equiv="X-UA-Compatible" content="ie=edge">ie瀏覽器以什么方式渲染edge最新版進(jìn)行渲染，ie9 ie10 -> edge <meta http-equiv="refresh" content="3" url="">每隔多長時間可以對瀏覽器進(jìn)行刷新 <meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"> 在指定的時間內(nèi)，請求資源會走緩存。

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

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

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

選擇器前綴法
*html

IE條件注釋法

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。