1.根元素
<html> 元素 表示一個HTML文檔的根（頂級元素），所以它也被稱為根元素。所有其他元素必須是此元素的后代娄蔼。
- lang屬性怖喻，將有助于屏幕閱讀技術(shù)確定要陳述的正確語言。標(biāo)識語言標(biāo)簽應(yīng)描述頁面大部分內(nèi)容使用的語言岁诉。沒有它锚沸，屏幕閱讀器通常會默認(rèn)使用操作系統(tǒng)的設(shè)置語言，這可能會導(dǎo)致錯誤陳述
<html lang="zh"></html>
2.文檔元元素
元數(shù)據(jù)（Metadata）含有頁面的相關(guān)信息涕癣，包括樣式哗蜈、腳本及數(shù)據(jù)，能幫助一些軟件（例如 搜索引擎坠韩、瀏覽器 等等）更好地運用和渲染頁面距潘。對于樣式和腳本的元數(shù)據(jù)，可以直接在網(wǎng)頁里定義只搁，也可以鏈接到包含相關(guān)信息的外部文件音比。
<base>元素 規(guī)定了網(wǎng)站的根路徑，其他使用外鏈都會采用這個根路徑
- target屬性 base中設(shè)置了此屬性氢惋，那么頁面中所有的鏈接都將遵循這個方式來打開網(wǎng)頁
- _blank：在新窗口打開鏈接頁面洞翩。
- _parent:在上一級窗口中打開鏈接。
- _self： 在當(dāng)前窗口打開鏈接,此為默認(rèn)值焰望，可以省略骚亿。
- _top： 在瀏覽器的整個窗口打開鏈接，忽略任何框架熊赖。
<base target="_blank" >
<head> 規(guī)定文檔相關(guān)的配置信息（元數(shù)據(jù)）来屠，包括文檔的標(biāo)題，引用的文檔樣式和腳本等秫舌。
<head>
<title>文檔標(biāo)題</title>
</head>
<link> 規(guī)定了外部資源與當(dāng)前文檔的關(guān)系的妖。 這個元素可用來為導(dǎo)航定義一個關(guān)系框架。這個元素最常于鏈接樣式表足陨，只能出現(xiàn)再<head>中
- href屬性 此屬性指定被鏈接資源的URL嫂粟。 URL 可以是絕對的，也可以是相對的
- rel屬性 指明被鏈接文檔對于當(dāng)前文檔的關(guān)系墨缘。 這個屬性最通常的用法是指向一個連接到外部樣式表的鏈接：將rel的值設(shè)置為stylesheet星虹，href屬性設(shè)置為外部樣式表的URL來構(gòu)造網(wǎng)頁。
- type屬性 這個屬性被用于定義鏈接的內(nèi)容的類型镊讼。這個屬性的值應(yīng)該是像text/html宽涌，text/css等MIME類型。這個屬性常用的用法是定義鏈接的樣式表蝶棋，最常用的值是表明了CSS的text/css
*media屬性 媒體查詢應(yīng)用 - title屬性
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" type="text/css" media="(max-width: 800px)">
<meta> 元素表示那些不能由其它HTML元相關(guān)元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元數(shù)據(jù)信息
- charset 此特性聲明當(dāng)前文檔所使用的字符編碼卸亮，但該聲明可以被任何一個元素的 lang 特性的值覆蓋。此特性的值必須是一個符合由IANA所定義的字符編碼首選MIME.鼓勵使用UTF-8
- http-equiv 這個枚舉屬性定義了能改變服務(wù)器和用戶引擎行為的編譯玩裙。這個編譯值使用content 來定義
- name 該屬性定義文檔級元數(shù)據(jù)的名稱兼贸。如果以下其中一個屬性設(shè)置了itemprop, http-equiv or charset 段直，就不能在設(shè)置這個屬性了。
- content 此屬性包含http-equiv 或name 屬性的值溶诞，具體取決于所使用的值
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
style 包含文檔的樣式信息或者文檔的部分內(nèi)容鸯檬。默認(rèn)情況下，該標(biāo)簽的樣式信息通常是CSS的格式
- type 該屬性以MIME類型（不應(yīng)該指定字符集）定義樣式語言螺垢。如果該屬性未指定喧务，則默認(rèn)為 text/css(寫不寫其實無所謂的)
- scoped 如果該屬性存在，則樣式應(yīng)用于其父元素枉圃；如果不存在功茴，則應(yīng)用于整個文檔。（原來vue里面的scoped是這樣的）
<style type="text/css">
body {
color:red;
}
</style>
<title>定義文檔的標(biāo)題,顯示在瀏覽器的標(biāo)題欄或標(biāo)簽頁上
<title>Awesome page title</title>
3.分區(qū)根元素
body 元素表示文檔的內(nèi)容孽亲。document.body 屬性提供了可以輕松訪問文檔的 body 元素的腳本痊土。
- onafterprint 用戶完成文檔打印之后調(diào)用的函數(shù)。
- onbeforeprint 用戶要求打印文檔之前調(diào)用的函數(shù)墨林。
- onbeforeunload 文檔即將被關(guān)閉之前調(diào)用的函數(shù)。
- onblur 文檔失去焦點時調(diào)用的函數(shù)犯祠。
- onerror 文檔加載失敗時調(diào)用的函數(shù)旭等。
- onfocus 文檔獲得焦點時調(diào)用的函數(shù)。
- onload 文檔完成加載時調(diào)用的函數(shù)
- onmessage 文檔接收到消息時調(diào)用的函數(shù)衡载。
- onoffline 網(wǎng)絡(luò)連接失敗時調(diào)用的函數(shù)搔耕。
- ononline 網(wǎng)絡(luò)連接恢復(fù)時調(diào)用的函數(shù)。
- onpopstate 用戶回退歷史記錄時調(diào)用的函數(shù)痰娱。
- onredo 用戶重做操作時調(diào)用的函數(shù)弃榨。
- onresize 文檔尺寸發(fā)生改變時調(diào)用的函數(shù)。
- onstorage 存儲內(nèi)容（localStorage / sessionStorage）發(fā)生改變時調(diào)用的函數(shù)梨睁。
- onundo 用戶撤銷操作時調(diào)用的函數(shù)呈昔。
- onunload 文檔關(guān)閉時調(diào)用的函數(shù)错维。
<body>
<p>This is a paragraph</p>
</body>
4.內(nèi)容分區(qū)
<address> 作者提供聯(lián)系信息
<address>
You can contact author at <a >www.somedomain.com</a>.<br>
If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
You may also want to visit us:<br>
Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA
</address>
<article>文章，表示文檔、頁面榄檬、應(yīng)用或網(wǎng)站中的獨立結(jié)構(gòu)，其意在成為可獨立分配的或可復(fù)用的結(jié)構(gòu)掏导，如在發(fā)布中资盅，它可能是論壇帖子、雜志或新聞文章愿伴、博客肺魁、用戶提交的評論、交互式組件隔节，或者其他獨立的內(nèi)容項目
注：個人理解你可以把它當(dāng)作div嵌套鹅经，但是article更適合嵌套純文本文章寂呛，而div則是布局
<article class="film_review">
<header>
<h2>Jurassic Park</h2>
</header>
<article>
<h2>welcome to Jurassic Park </h2>
</article>
</article>
<aside>所包含的內(nèi)容不是頁面的主要內(nèi)容、具有獨立性瞬雹，是對頁面的補充昧谊。他們通常包含在工具條，例如來自詞匯表的定義酗捌。也可能有其他類型的信息呢诬，例如相關(guān)的廣告、筆者的傳記胖缤、web 應(yīng)用程序尚镰、個人資料信息，或在博客上的相關(guān)鏈接哪廓。
<article>
<p>
迪斯尼電影 <em>海的女兒</em> 于1989年首次搬上銀屏
</p>
<aside>
這個電影在首次發(fā)行期間就賺得了8千7百萬美元.
</aside>
<p>
該電影更多信息...
</p>
</article>
<footer> 表示最近一個章節(jié)內(nèi)容或者根節(jié)點（sectioning root ）元素的頁腳狗唉。一個頁腳通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息涡真。
<footer>
xsdream@com.cn xusheng 1996.08.04
</footer>
<header> 用于展示介紹性內(nèi)容分俯，通常包含一組介紹性的或是輔助導(dǎo)航的實用元素。它可能包含一些標(biāo)題元素哆料，但也可能包含其他元素缸剪，比如 Logo、搜索框东亦、作者名稱杏节，等等。
<header class="page-header">
<h1>welcome to xsdream!</h1>
</header>
<h1>~<h6>呈現(xiàn)了六個不同的級別的標(biāo)題典阵，<h1> 級別最高奋渔，而 <h6> 級別最低。
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
- 用戶代理可以使用標(biāo)題信息壮啊，例如嫉鲸，自動構(gòu)建文檔的目錄。
- 不要使用較低級別來減少標(biāo)題字體大兴蕖：請改用CSS font-size屬性充坑。
- 避免跳過標(biāo)題級別：始終從<h1>下次使用開始，<h2>等等染突。
- 您應(yīng)該考慮避免<h1>在頁面上多次使用捻爷。見定義部分中使用HTML部分，并概述了解更多信息份企。
** <main>元素呈現(xiàn)了文檔<body>或應(yīng)用的主體部分也榄。主體部分由與文檔直接相關(guān)，或者擴展于文檔的中心主題、應(yīng)用的主要功能部分的內(nèi)容組成甜紫。這部分內(nèi)容在文檔中應(yīng)當(dāng)是獨一無二的降宅，不包含任何在一系列文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄囚霸，導(dǎo)航欄鏈接腰根，版權(quán)信息，網(wǎng)站logo拓型，搜索框（除非搜索框作為文檔的主要功能）**
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
</article>
<article>
<h2>Granny Smith</h2>
</article>
</main>
<nav></nav> 描繪一個含有多個超鏈接的區(qū)域额嘿，這個區(qū)域包含轉(zhuǎn)到其他頁面，或者頁面內(nèi)部其他部分的鏈接列表.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section></section> 表示文檔中的一個區(qū)域（或節(jié)）劣挫，比如册养，內(nèi)容中的一個專題組，一般來說會有包含一個標(biāo)題（heading）压固。一般通過是否包含一個標(biāo)題 (<h1>-<h6> element) 作為子節(jié)點 來 辨識每一個<section>(個人理解為文檔中的部分內(nèi)容)
<section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section>
<dl> list描述列表球拦，通常用于展示詞匯表或者元數(shù)據(jù) (鍵-值對列表)
<dt> 描述列表的標(biāo)題
<dd> 描述列表的內(nèi)容
<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
內(nèi)聯(lián)文本語義
<a>元素 (或錨元素) 可以創(chuàng)建一個到其他網(wǎng)頁、文件帐我、同一頁面內(nèi)的位置坎炼、電子郵件地址或任何其他URL的超鏈接</a>
- download 此屬性指示瀏覽器下載URL而不是導(dǎo)航到它，因此將提示用戶將其保存為本地文件拦键。如果屬性有一個值点弯，那么它將在Save提示符中作為預(yù)填充的文件名使用（如果用戶需要，仍然可以更改文件名）矿咕。此屬性對允許的值沒有限制，但是/和\會被轉(zhuǎn)換為下劃線狼钮。大多數(shù)文件系統(tǒng)限制了文件名中的標(biāo)點符號碳柱，故此，瀏覽器將相應(yīng)地調(diào)整建議的文件名熬芜。
- href 包含超鏈接指向的URL或URL片段莲镣。錨點：可以使用 href="#top" 或者 href="#" 鏈接返回到頁面頂部
- ping 包含一個以空格分隔的url列表，當(dāng)跟隨超鏈接時涎拉，將由瀏覽器(在后臺)發(fā)送帶有正文PING的POST請求瑞侮。通常用于跟蹤ping是網(wǎng)絡(luò)診斷的一個工具,html5引入這個屬性，可以是用戶在瀏覽頁面的時候就知道 這個鏈接（也就是你上面的URL）是否真實有效鼓拧，如果這個鏈接已經(jīng)失效了半火，就用一些通知（W3C還沒有定制出來，比如將鏈接加上刪除線）來標(biāo)識這樣的URL[摘自]
- rel 該屬性指定了目標(biāo)對象到鏈接對象的關(guān)系季俩。該值是空格分隔的列表類型值钮糖。
使用target時，考慮添加 rel="noopener norefferrer" 以防止針對 window.opener API 的惡意行為
a鏈接target='_blank'可以造成釣魚攻擊 - target 該屬性指定在何處顯示鏈接的資源。 取值為標(biāo)簽（tab）店归，窗口（window）阎抒，或框架
- _self: 當(dāng)前頁面加載，即當(dāng)前的響應(yīng)到同一HTML 4 frame（或HTML5瀏覽上下文）消痛。此值是默認(rèn)的且叁，如果沒有指定屬性的話。
- _blank: 新窗口打開秩伞，即到一個新的未命名的HTML4窗口或HTML5瀏覽器上下文
- _parent: 加載響應(yīng)到當(dāng)前框架的HTML4父框架或當(dāng)前的HTML5瀏覽上下文的父瀏覽上下文逞带。如果沒有parent框架或者瀏覽上下文，此選項的行為方式相同_self稠歉。
- _top: IHTML4中：加載的響應(yīng)成完整的掰担，原來的窗口，取消所有其它frame怒炸。 HTML5中：加載響應(yīng)進入頂層瀏覽上下文（即带饱，瀏覽上下文，它是當(dāng)前的一個的祖先阅羹，并且沒有parent）勺疼。如果沒有parent框架或者瀏覽上下文，此選項的行為方式相同_self
超鏈接：
<a >External Link</a>
錨點：
<a href="#屬性">Description of Same-Page Links</a>
可點擊得圖片：
<a >
<img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" />
</a>
mailto打開郵件發(fā)送郵件：
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
創(chuàng)建電話鏈接：
<a href="tel:+491570156">+49 157 0156</a>
假鏈接：
<a href="javascript:void(0)" onclick="alert(1)">假鏈接</a>
在網(wǎng)頁編程中捏鱼，一般讓一個超鏈接點擊后不鏈接到任何地方执庐，而鼠標(biāo)移上去仍然顯示手指形狀的圖標(biāo)，就用javascript:void(0)导梆，然后真實執(zhí)行的操作轨淌，是在這個a標(biāo)簽后面加onclick="xxxxx"，就是鼠標(biāo)單擊后執(zhí)行某個Javascript函數(shù)進行具體的操作看尼，這樣可以做更多的事情递鹉，比如根據(jù)某個值進行判斷跳轉(zhuǎn)到不同的頁面等等。
<abbr> 代表縮寫藏斩，title屬性里面是完整得內(nèi)容躏结，可以鼠標(biāo)懸浮顯示
<abbr title="Laugh Out Loud">LOL</abbr>
<b></b>用于吸引讀者的注意到該元素的內(nèi)容上（如果沒有另加特別強調(diào)）。這個元素過去被認(rèn)為是粗體（Boldface）元素狰域，并且大多數(shù)瀏覽器仍然將文字顯示為粗體媳拴。盡管如此，你不應(yīng)將 <b> 元素用于顯示粗體文字兆览；替代方案是使用 CSS font-weight 屬性來創(chuàng)建粗體文字
如果不是出于語義目的而使用 <b> 元素屈溉，那么讓文本顯示粗體更好的方式是使用將 CSS 的 font-weight 屬性設(shè)置為 "bold"
整理<bdi>！Ｌ健Ｓ镉ぁ！！Ｅ樽蟆Ｄ湫选！缠导！
