進(jìn)入我的主頁(yè)肄梨，查看更多HTML的分享阻荒！
一. 結(jié)構(gòu)標(biāo)簽
1. 頁(yè)面布局：
<aside>定義頁(yè)面內(nèi)容之外的內(nèi)容</aside>
<footer>定義文檔或節(jié)的頁(yè)腳</footer>
<header>定義文檔或節(jié)的頁(yè)眉</header>
<main>定義文檔的主內(nèi)容</main>
<nav>定義文檔內(nèi)的導(dǎo)航鏈接</nav>
<!-- 示例： -->
<header>我是導(dǎo)航欄</header>
<nav>我是導(dǎo)航欄</nav>
<aside>我是側(cè)邊欄</aside>
<main>我是內(nèi)容</main>
<footer>我是頁(yè)腳</footer>
2. details、summary（折疊）
可配合CSS實(shí)現(xiàn)漂亮的折疊面板众羡。
<details>定義用戶可查看或隱藏的額外細(xì)節(jié)</details>
<summary>定義 <details> 元素的可見(jiàn)標(biāo)題</summary>
<!-- 示例： -->
<details>
<summary>HTML 5</summary>
這是展開(kāi)后看到的內(nèi)容
</details>
3. 進(jìn)度條（progress）
可以實(shí)現(xiàn)行業(yè)占比顯示侨赡、任務(wù)進(jìn)度、動(dòng)態(tài)進(jìn)度條等粱侣。
<progress>定義任務(wù)進(jìn)度</progress>
<!-- 示例： -->
<style>
progress {
-webkit-appearance: none;
width: 180px;
height: 18px;
background-color: transparent;
}
progress::-webkit-progress-bar {
border-radius: 4px;
background-color: #efefef;
border: thin solid #efefef;
}
progress::-webkit-progress-value {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: teal;
}
progress::-moz-progress-bar {
background: #34538b;
}
progress::-ms-fill {
background: #34538b;
}
</style>
<progress value="40" max="100"></progress>
4. dialog（彈窗）
- close() 關(guān)閉
- open() 打開(kāi)（注意css樣式的定位不變）
- showModal() 打開(kāi)（注意css樣式的定位變?yōu)閍bsolute羊壹，建議自定義樣式）
<dialog>定義對(duì)話框或窗口</dialog>
<!--
示例：
與form配合，這時(shí)點(diǎn)擊兩個(gè)按鈕都會(huì)自動(dòng)關(guān)閉
不與form配合齐婴，可手動(dòng)調(diào)用close()關(guān)閉油猫，從而避免自動(dòng)關(guān)閉
-->
<style>
dialog:not([open]) {
display: none;
}
dialog{}
dialog::backdrop{}
</style>
<dialog id="dialog">
<form method="dialog">
<p>
要關(guān)閉？
</p>
<button type="submit" value="false">取消</button>
<button type="submit" value="true">確定</button>
</form>
</dialog>
<script>
let d = document.getElementById("dialog");
let s = d.showModal();
d.addEventListener("close", function() {
console.log(d.returnValue); //returnValue對(duì)應(yīng)button上的value
});
</script>
5. figcaption（包含的容器）
<figcaption>定義 <figure> 元素的標(biāo)題</figcaption>
<figure>定義自包含內(nèi)容柠偶，比如圖示情妖、圖表、照片诱担、代碼清單等等</figure>
<!-- 示例： -->
<figure>
<img src="" alt="" width="200" height="200" />
<figcaption>我是圖片的描述內(nèi)容</figcaption>
</figure>
6. mark（標(biāo)記）
<mark>定義重要或強(qiáng)調(diào)的內(nèi)容</mark>
/*示例：*/
<style>
mark {
background-color: red;
padding: 0 4px;
margin: 0 4px;
border-radius: 3px;
font-size: 15px;
color: #fff;
}
</style>
<p>今天加班了鲫售，下班時(shí)記得<mark>打卡</mark></p>
7. meter
IE 瀏覽器不支持 meter 標(biāo)簽。
<meter>定義已知范圍（尺度）內(nèi)的標(biāo)量測(cè)量</meter>
<!-- 示例： -->
<meter value="0.6"></meter>
<meter value="6" min="0" low="5" max="10"></meter>
8. article该肴、section
article：定義來(lái)自外部（引用）的論壇帖子、報(bào)紙文章藐不、博客條目匀哄、用戶評(píng)論等秦效，通常包含標(biāo)題、頁(yè)腳等標(biāo)簽涎嚼，對(duì)比<section>更具體阱州。
<article>定義頁(yè)面內(nèi)的文章</article>
<section>定義文檔中的節(jié)</section>
<!-- 示例： -->
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9（簡(jiǎn)稱 IE9）于 2011 年 3 月 14 日發(fā)布.....</p>
</article>
<section>
<h1>WWF</h1>
<p>
The World Wide Fund for Nature (WWF) is an international organization working on
issues regarding the conservation, research and restoration of the environment,
formerly named the World Wildlife Fund. WWF was founded in 1961.
</p>
</section>
9. 其它
/* 僅Firefox 8.0 以及更高的版本支持 */
<menuitem>定義用戶能夠從彈出菜單調(diào)用的命令/菜單項(xiàng)目</menuitem>
二、文本標(biāo)簽
1. h-（標(biāo)題）
<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h4>四級(jí)標(biāo)題</h4>
<h5>五級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>
2. bdo（方向）
<bdo dir="rtl">定義相反的的文本方向</bdo></p>
3. ruby法梯、rp苔货、rt（注釋）
<rp>定義在不支持 ruby 注釋的瀏覽器中顯示什么</rp>
<rt>定義關(guān)于字符的解釋/發(fā)音（用于東亞字體）</rt>
<ruby>定義 ruby 注釋（用于東亞字體）</ruby>
<!-- 示例： -->
<ruby> 漢 <rp>(</rp><rt>Han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp> </ruby>
4. time
<time>定義日期/時(shí)間</time>
<!-- 示例： -->
<article>
<time datetime="2011-09-28" pubdate="pubdate"></time>
Hello world. This is an article....
</article>
5. wbr（單詞換行時(shí)機(jī)）
IE不支持。
<wbr>定義可能的折行（line-break）</wbr>
6. abbr立哑、acronym （縮寫(xiě)）
IE 6 或更早版本的 IE 瀏覽器不支持 <abbr> 標(biāo)簽
<abbr title=""></abbr>
<acronym title=""></acronym>
7. del（刪除線）
<del>位于中間的刪除線</del>
三夜惭、表單
1. fieldset（帶標(biāo)題的邊框）
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
體重：<input type="text" />
</fieldset>
</form>
2. output（存放輸出內(nèi)容）
Internet Explorer 8 以及更早的版本不支持 <output> 標(biāo)簽。
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
四铛绰、媒體
1. video（視頻）
- controls="controls"诈茧，控制面板
- autoplay="autoplay"，自動(dòng)播放
- width捂掰、height 寬高
- loop="loop" 無(wú)限循環(huán)敢会，loop="1"只循環(huán)播放1次
- muted="muted" 靜音
- poster="" 預(yù)覽圖（包括下載的文件）
- preload 預(yù)加載，與autoplay沖突（只使用其中一個(gè)）
<video src="">
您的瀏覽器不支持 video 標(biāo)簽这嚣。
</video>
2. audio（音頻）
- controls="controls"鸥昏，控制面板
- autoplay="autoplay"，自動(dòng)播放
- loop="loop" 無(wú)限循環(huán)姐帚，loop="1"只循環(huán)播放1次
- muted="muted" 靜音
- preload 預(yù)加載吏垮，與autoplay沖突（只使用其中一個(gè)）
<audio src="">
您的瀏覽器不支持 audio 標(biāo)簽。
</audio>
3. source（源文件****）
Internet Explorer 8 以及更早的版本不支持 <source> 標(biāo)簽卧土。
<video controls>
<source src="" type="video/mp4">
<source src="" type="video/ogg">
Your browser does not support the audio element.
</video>
五惫皱、文檔
MDN(https://developer.mozilla.org/zh-CN/docs/Web/HTML)
W3Cschool(https://www.w3cschool.cn/html5)
菜鳥(niǎo)教程(https://www.runoob.com/html/html5-intro.html)
后續(xù)會(huì)完善，添加一些常用的元素（如input）尤莺；如果有補(bǔ)充內(nèi)容旅敷，請(qǐng)?jiān)谠u(píng)論區(qū)留言。
