html5新增結(jié)構(gòu)標(biāo)簽
header 頭部
nav 導(dǎo)航
section 區(qū)域
article 文章
aside 側(cè)邊欄
figure 一組多媒體內(nèi)容
figcaption 多媒體內(nèi)容的標(biāo)題
footer 底部
hgroup 區(qū)塊的相關(guān)信息
dialog 對(duì)話框 / 會(huì)話框
sublime安裝emmet插件跷跪，可以使用tab鍵快速補(bǔ)全標(biāo)簽
專門建立的學(xué)習(xí)Q-q-u-n： 784783012 馋嗜，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程吵瞻，學(xué)習(xí)工具葛菇，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5</title>
<style> *{ margin:0; padding:0; font-size:14px;
} .container{ background:#ccc;
} .content{ width:1000px; margin:0 auto;
} dl{ width:300px; float:left; text-align:center; margin-right:50px;
} dl:last-child{ margin-right:0;
} dl img{ width:300px;
}
</style>
</head>
<body>
<header>
<div class="logo"></div>
<nav>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
</nav>
</header>
<section>
<hgroup>
<h1>文章標(biāo)題</h1>
<h3>文章作者</h3>
<h4>文章描述</h4>
</hgroup>
<aside>
<a href="#">側(cè)導(dǎo)航1</a>
<a href="#">側(cè)導(dǎo)航2</a>
<a href="#">側(cè)導(dǎo)航3</a>
</aside>
<article> 文章內(nèi)容 </article>
</section>
<section>
<figure>
<figcaption>視頻標(biāo)題</figcaption>
<div class="video">視頻</div>
</figure>
</section>
<section>
<dialog>
<dt>A的評(píng)論</dt>
<dd>B的評(píng)論</dd>
<dt>A的評(píng)論</dt>
<dd>B的評(píng)論</dd>
<dt>A的評(píng)論</dt>
<dd>B的評(píng)論</dd>
</dialog>
<dialog>
<dt>A的評(píng)論</dt>
<dd>B的評(píng)論</dd>
<dt>A的評(píng)論</dt>
<dd>B的評(píng)論</dd>
<dt>A的評(píng)論</dt>
<dd>B的評(píng)論</dd>
</dialog>
<dialog>
<dt>A的評(píng)論</dt>
<dd>B的評(píng)論</dd>
<dt>A的評(píng)論</dt>
<dd>B的評(píng)論</dd>
<dt>A的評(píng)論</dt>
<dd>B的評(píng)論</dd>
</dialog>
</section>
<footer>底部版權(quán)</footer>
</body>
</html>
補(bǔ)充1：header article section footer aside 不建議嵌套使用
補(bǔ)充2：header section footer > aside figure nav... > div
前面3個(gè)級(jí)別較高，習(xí)慣于寫在外層
audio直接使用橡羞，無法播放音樂眯停，必須加上autoplay="autoplay"
loop="-1" 無限循環(huán)
controls="controls" 控制組件
<audio src="audio.wav" autoplay="autoplay" loop="-1" controls="controls">您的瀏覽器不支持該標(biāo)簽</audio>
type表示轉(zhuǎn)碼
<audio controls>
<source src="test.ogg" type="audio/ogg">
<source src="test.mp3" type="audio/mpeg">
<source src="test.wav" type="audio/wav"> 您的瀏覽器不支持音頻播放 </audio>
video標(biāo)簽，必須設(shè)置controls才能播放
<video src="source/pal4.mp4" autoplay="autoplay" controls="controls">您的瀏覽器不支持video標(biāo)簽</video>
多個(gè)src源
<video controls="controls" width="600">
<source src="source/pal4.mp4" type="video/mp4"></source>
</video>
embed可以支持flash動(dòng)畫播放卿泽，然鵝我的谷歌瀏覽器已經(jīng)不支持flash了莺债，應(yīng)該已經(jīng)涼涼了，不去管它
<embed src="source/HappyBirthday.swf">
狀態(tài)標(biāo)簽meter
value代表當(dāng)前值
min 最小值
max 最大值
low 較低值
high 較高值
optimum 標(biāo)準(zhǔn)值
（位于較低較高之間的值签夭，顯示為綠色齐邦；否則顯示為黃色）
不填寫以上參數(shù)，以百分比計(jì)算第租，默認(rèn)為0-100%
專門建立的學(xué)習(xí)Q-q-u-n： 784783012 措拇，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程慎宾，學(xué)習(xí)工具丐吓，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）
<meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="180" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="400" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="0" min="20" max="380" low="200" high="240" optimum="220"></meter>
<br>
<meter value="0.75">75%</meter>
過程標(biāo)簽 progress
不設(shè)置value值浅悉，則顯示為不斷加載的動(dòng)畫
<progress value="30" max="100"></progress>
<progress max="100"></progress>
輸入框下拉提示（可輸入，可選擇）datalist
<input placeholder="選你所愛" list="mylist">
<datalist id="mylist">
<option value="喵1">喵1</option>
<option value="喵2">喵2</option>
<option value="喵3">喵3</option>
<option value="喵4">喵4</option>
<option value="喵5">喵5</option>
</datalist>
內(nèi)容的展開和收攏 details + summary
<details>
<summary>收攏嘍</summary>
<p>
這是展開的內(nèi)容鴨鴨鴨~
</p>
</details>
<hr>
<details open="open">
<summary>收攏嘍</summary>
<p>
這是展開的內(nèi)容鴨鴨鴨~
</p>
</details>
ruby 給文字加注釋
rt 包裹在ruby標(biāo)簽內(nèi)汰蜘，里面寫拼音
rp 解決瀏覽器不兼容問題仇冯，該標(biāo)簽的內(nèi)容不要嵌套在rt標(biāo)簽內(nèi)
讓我們來<ruby>聊<rt>liao</rt></ruby>天叭
<br>
讓我們來<ruby>聊<rp>(</rp><rt>liao</rt><rp>)</rp></ruby>天叭
mark 黃色底色表示強(qiáng)調(diào)
好可愛的小<mark>貓咪</mark>呀
oninput 事件，監(jiān)聽文本框的輸入變化
<form oninput="sum.value=parseInt(price.value)*parseInt(num.value)">
<input type="text" value="1000" name="price" id="price">* <input type="number" value="1" name="num" id="num">= <output name="sum" id="sum" for="price num"></output>
</form>
重定義標(biāo)簽
dd 標(biāo)題
dt 描述
不僅僅是自定義標(biāo)簽dl 中使用
也可在detail figure中使用
也可在dialog中使用
hr 不僅僅是水平線族操，也表示當(dāng)前主題結(jié)束
menu 菜單標(biāo)簽苛坚，可以與command和menuitem搭配使用
small 小字體，表示打印注釋或者法律條款
strong 表示很重要
