HTML5常用的语义元素

1. h1~h6元素：用于定义页面的标题元素。

<h1>一级标题(最高等级)</h1>
...
<h6>六级标题(最低等级)</h6>
复制代码

2. header元素：用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。在一个文档中，您可以定义多个元素，但需要注意的是header元素不能作为address、footer 或 header元素的子元素。

<header></header>
复制代码

3. nav元素：用于定义页面的导航链接部分区域，不是所有的链接都需要包含在nav中，除了页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。 在一个文档中，可定义多个nav元素。

<nav></nav>
复制代码

4. main元素：定义页面的主要内容，一个页面只能使用一次（不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能））。如果是web应用，则包围其主要功能。

<main>...</main>
<!--常用方式-->
<main>
<h1>...</h1>
<p>.....</p>
</main>
复制代码

5. article元素：定义页面独立（可独立分配的、可复用的结构）的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章、博客、用户提交的评论、交互式组件。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。(注意与section和div区分)。

• 通俗来说就是article元素比section元素更具有独立性、完整性。可通过该段内容脱离了所在的语境，是否完整、独立来判断。
• 当article元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的article元素可嵌套在代表博客文章的article元素中。
• article和section从属关系，article是大主体，section是构成这个大主体的一部分。很多博客网站的文章都是article嵌套一个个section章节，可以让浏览器更容易区分各个章节所包括的内容。

<article> </article>
<!--常用方式-->
<article>
<header>    <h2><a href="">标题</a></h2>    </header>
<section>   <p>内容</p>    </section>
<footer>    <small> xxx发布于 <time>xxx时间</time> 于<a href="">xxxx</a>    </small>  </footer>
</article>
复制代码

6. section元素：用于标记文档的各个部分（区域），例如长表单文章的章节或主要部分。

• 如果元素内容可以分为几个部分的话，应该使用 article 而不是 section 。
• 不要把 section元素作为一个普通的容器来使用，特别是当section仅仅是为了美化样式或方便脚本使用的时候，应使用div。
• 因为文章内section部分虽然也是独立的部分，但是它门只能算是组成整体的一部分，

<section></section>
<!--常用方式-->
<section>
<h2>...</h2>
<p>......</p>
</section>
复制代码

7. aside元素：定义与主要内容相关和其余页面内容几乎无关的内容块。被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

<aside> </aside> 
<!--常用方式-->
<aside> 
<h2>...</h2>
<p>......</p>
</aside>
复制代码

8. footer元素：定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。使用footer插入联系信息时，应在 footer 元素内使用 address 元素。注意不能包含footer或者header。

<footer></footer>
复制代码

9. small元素：定义文档较不重要的内容为小字体。如果被包围的字体已经是字体模型所支持的最小字号，那么 small>标签将不起任何作用。

<small></small>
复制代码

10. strong元素：定义文档语气更强的强调的内容，以表示内容的重要性。

<strong></strong>
<!--常用方式-->
看看看<strong>这里这里重要</strong>.
复制代码

11. em元素：定义文档标记内容着重点（大量用于提升段落文本语义），通常呈现为斜体文字。

 <em></em>
<!--常用方式-->
看看看<em>这里这里是重点</em>.
复制代码

12. mark元素：在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。

<mark></mark>

复制代码

13. blockquote元素：定义块引用，浏览器会在 blockquote 元素前后添加换行，并增加外边距。cite属性可用来规定引用的来源

 <blockquote></blockquote>
<!--常用方式-->
<blockquote cite="https://...">xxx</blockquote>
复制代码

14. abbr元素：解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。

 <abbr></abbr>
<!--常用方式-->
xxx<abbr title="xxxx">xx</abbr> xxx.
复制代码

区别一下div、section、article

• div元素（无语义）：是一个常用的块级元素，在文档中充当一个分区或节。常常作为布局以及样式化时使用；

• section元素：一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。

• article元素（语义最强）:在结构上和内容上来说，article本身上就是独立的且完整的。

div 无语义，仅仅用作样式或者脚本；对于一段有主题性的内容，则用 section；如果有一段主题性内容脱离上下文后仍是一段完整且独立存在的内容，则用 article。

1. 什么是语义元素？

• 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
• HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”。

2. 为什么要语义化？

• 方便用户阅读，提升用户体验，在没有css样式的情况下也能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎等是根据标签来确定上下文和各个关键字的权重，有助于爬虫抓取更多的有效信息
• 还方便其他设备解析，如（盲人）阅读器等设备根据语义来渲染网页。
• 最后有利于开发和维护，语义化更好的具可读性，代码更好维护，以减少差异化。

3. 写HTML代码时应注意什么？

• 尽可能少的使用无语义的标签div和span；在语义不明显时可以尽量用p（在默认情况下有上下间距），对兼容特殊终端有利。
• 不要使用纯样式的标签，改用css进行设置。
• 使用表格时有很多要注意的啊

第一次写博客，请大家多提意见，一起加油哦...

冲鸭!!!我想要实习机会啊...