H5新标簽&新功能

1. H5新标簽

語義标簽：

<article>定義文章</article>

<aside>定義文章側邊欄</aside>

<figure>定義一組媒體對象以及文字内容</figure>

<figcaption>定義figure的标題</figcaption>

布局頁面時用的語義标簽：

<nav>定義導航</nav>

<header>頭部</header>

<section>定義文檔中的區段 區域</section>

<footer>尾部</footer>

input其他的類型：

1. text 文本輸入框

2. password 密碼

3. button 按鈕

4. checkbox 複選

5. radio 單選

6. submit 送出

7. reset 重置

8. file 檔案

9. email 輸入郵箱位址 檢測@

10. url URL位址

11. number 隻能輸入數字 還有e

12. range 範圍 預設0~100

required 必須填寫

placeholder 占位符

功能标簽：

<video src="" autoplay自動播放 controls控制播放 loop是否重複播放 preload是否自動加載>定義視訊</video>

<audio src="">定義音頻</audio>

<mark>标記</mark>

<iframe src="" frame>内嵌網頁架構</iframe>

<canvas>定義圖形提供畫布</canvas>

2.流式布局

即百分比布局。（寬度， 高度，邊距，rem，定位值）

尺寸百分比 = 目标元素的寬度（高度）/ 父級的寬高

定位值百分比 = 目标元素的定位值 / 父級的寬高

margin和padding / 父級的寬度

em rem

em: 針對父級來設定自身

rem: 針對html

3.媒體查詢

可以根據不同螢幕尺寸，動态的修改網頁布局以及樣式，是響應式網站不可缺少的一部分

only 可以省略 多個條件用and相連

@media only screen and (min-width:500px) and (max-width:700px){......}

link:

<link rel="stylesheet" href="" target="_blank" rel="external nofollow" media="screen and (min-width:500px) and (max-width:700px)">

響應式網站：由兩種辦法完成響應式網站, 流式布局和媒體查詢，通常情況下相輔相成共同完成響應式網站。

4.字首

騰訊：國内唯一有自己核心的公司，X5。（X5的浏覽器核心是基于早起的webkit核心開發出來的，而後自己優化。QQ浏覽器 微信）

-webkit-: 谷歌字首，谷歌核心（獵豹 360 safari）

-o-: 歐朋 （已經摒棄自己的核心，轉戰谷歌的陣營）

-ms-: 微軟 ie 斯巴達

-moz-: 火狐 ff