1.根元素
<html> 元素 表示一个HTML文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。
- lang属性，将有助于屏幕阅读技术确定要陈述的正确语言。标识语言标签应描述页面大部分内容使用的语言。没有它，屏幕阅读器通常会默认使用操作系统的设置语言，这可能会导致错误陈述
<html lang="zh"></html>
2.文档元元素
元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件（例如 搜索引擎、浏览器 等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。
<base>元素 规定了网站的根路径，其他使用外链都会采用这个根路径
- target属性 base中设置了此属性，那么页面中所有的链接都将遵循这个方式来打开网页
- _blank：在新窗口打开链接页面。
- _parent:在上一级窗口中打开链接。
- _self： 在当前窗口打开链接,此为默认值，可以省略。
- _top： 在浏览器的整个窗口打开链接，忽略任何框架。
<base target="_blank" href="http://www.example.com/">
<head> 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
<head>
<title>文档标题</title>
</head>
<link> 规定了外部资源与当前文档的关系。 这个元素可用来为导航定义一个关系框架。这个元素最常于链接样式表，只能出现再<head>中
- href属性 此属性指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的
- rel属性 指明被链接文档对于当前文档的关系。 这个属性最通常的用法是指向一个连接到外部样式表的链接：将rel的值设置为stylesheet，href属性设置为外部样式表的URL来构造网页。
- type属性 这个属性被用于定义链接的内容的类型。这个属性的值应该是像text/html，text/css等MIME类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了CSS的text/css
*media属性 媒体查询应用 - title属性
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" type="text/css" media="(max-width: 800px)">
<meta> 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息
- charset 此特性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。此特性的值必须是一个符合由IANA所定义的字符编码首选MIME.鼓励使用UTF-8
- http-equiv 这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义
- name 该属性定义文档级元数据的名称。如果以下其中一个属性设置了itemprop, http-equiv or charset ，就不能在设置这个属性了。
- 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 包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式
- type 该属性以MIME类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 text/css(写不写其实无所谓的)
- scoped 如果该属性存在，则样式应用于其父元素；如果不存在，则应用于整个文档。（原来vue里面的scoped是这样的）
<style type="text/css">
body {
color:red;
}
</style>
<title>定义文档的标题,显示在浏览器的标题栏或标签页上
<title>Awesome page title</title>
3.分区根元素
body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。
- onafterprint 用户完成文档打印之后调用的函数。
- onbeforeprint 用户要求打印文档之前调用的函数。
- onbeforeunload 文档即将被关闭之前调用的函数。
- onblur 文档失去焦点时调用的函数。
- onerror 文档加载失败时调用的函数。
- onfocus 文档获得焦点时调用的函数。
- onload 文档完成加载时调用的函数
- onmessage 文档接收到消息时调用的函数。
- onoffline 网络连接失败时调用的函数。
- ononline 网络连接恢复时调用的函数。
- onpopstate 用户回退历史记录时调用的函数。
- onredo 用户重做操作时调用的函数。
- onresize 文档尺寸发生改变时调用的函数。
- onstorage 存储内容（localStorage / sessionStorage）发生改变时调用的函数。
- onundo 用户撤销操作时调用的函数。
- onunload 文档关闭时调用的函数。
<body>
<p>This is a paragraph</p>
</body>
4.内容分区
<address> 作者提供联系信息
<address>
You can contact author at <a href="http://www.somedomain.com/contact">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>文章，表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目
注：个人理解你可以把它当作div嵌套，但是article更适合嵌套纯文本文章，而div则是布局
<article class="film_review">
<header>
<h2>Jurassic Park</h2>
</header>
<article>
<h2>welcome to Jurassic Park </h2>
</article>
</article>
<aside>所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。
<article>
<p>
迪斯尼电影 <em>海的女儿</em> 于1989年首次搬上银屏
</p>
<aside>
这个电影在首次发行期间就赚得了8千7百万美元.
</aside>
<p>
该电影更多信息...
</p>
</article>
<footer> 表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<footer>
xsdream@com.cn xusheng 1996.08.04
</footer>
<header> 用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
<header class="page-header">
<h1>welcome to xsdream!</h1>
</header>
<h1>~<h6>呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
- 用户代理可以使用标题信息，例如，自动构建文档的目录。
- 不要使用较低级别来减少标题字体大小：请改用CSS font-size属性。
- 避免跳过标题级别：始终从<h1>下次使用开始，<h2>等等。
- 您应该考虑避免<h1>在页面上多次使用。见定义部分中使用HTML部分，并概述了解更多信息。
** <main>元素呈现了文档<body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站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> 描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section></section> 表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点 来 辨识每一个<section>(个人理解为文档中的部分内容)
<section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section>
<dl> list描述列表，通常用于展示词汇表或者元数据 (键-值对列表)
<dt> 描述列表的标题
<dd> 描述列表的内容
<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>
内联文本语义
<a>元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接</a>
- download 此属性指示浏览器下载URL而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么它将在Save提示符中作为预填充的文件名使用（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是/和\会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名。
- href 包含超链接指向的URL或URL片段。锚点：可以使用 href="#top" 或者 href="#" 链接返回到页面顶部
- ping 包含一个以空格分隔的url列表，当跟随超链接时，将由浏览器(在后台)发送带有正文PING的POST请求。通常用于跟踪ping是网络诊断的一个工具,html5引入这个属性，可以是用户在浏览页面的时候就知道 这个链接（也就是你上面的URL）是否真实有效，如果这个链接已经失效了，就用一些通知（W3C还没有定制出来，比如将链接加上删除线）来标识这样的URL[摘自]
- rel 该属性指定了目标对象到链接对象的关系。该值是空格分隔的列表类型值。
使用target时，考虑添加 rel="noopener norefferrer" 以防止针对 window.opener API 的恶意行为
a链接target='_blank'可以造成钓鱼攻击 - target 该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或框架
- _self: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此值是默认的，如果没有指定属性的话。
- _blank: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
- _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。
- _top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
超链接：
<a href="http://www.mozilla.com/">External Link</a>
锚点：
<a href="#属性">Description of Same-Page Links</a>
可点击得图片：
<a href="https://developer.mozilla.org/en-US/">
<img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" />
</a>
mailto打开邮件发送邮件：
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
创建电话链接：
<a href="tel:+491570156">+49 157 0156</a>
假链接：
<a href="javascript:void(0)" onclick="alert(1)">假链接</a>
在网页编程中，一般让一个超链接点击后不链接到任何地方，而鼠标移上去仍然显示手指形状的图标，就用javascript:void(0)，然后真实执行的操作，是在这个a标签后面加onclick="xxxxx"，就是鼠标单击后执行某个Javascript函数进行具体的操作，这样可以做更多的事情，比如根据某个值进行判断跳转到不同的页面等等。
<abbr> 代表缩写，title属性里面是完整得内容，可以鼠标悬浮显示
<abbr title="Laugh Out Loud">LOL</abbr>
<b></b>用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <b> 元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字
如果不是出于语义目的而使用 <b> 元素，那么让文本显示粗体更好的方式是使用将 CSS 的 font-weight 属性设置为 "bold"
整理<bdi>！！！！！！！！！
