H5语义化标签

最近公司的网站强烈考虑SEO，恰当地使用html标签有利于搜索引擎的识别，特别是灵活使用语义化标签，对此做一个常用总结以及理解

1、什么是HTML语义化标签？

• 语义化标签，就是让标签有自己的含义，利用本身传达它所包含内容的一些信息，使浏览器和搜索引擎直观的认识标签和属性的用途和作用。

2、为什么要用H5语义化标签？

背景：

• DIV标签本身就是一个容器，并没有独特的含义，当大量使用div会使文档结构不够清晰，同时影响对页面的读取
• 在没有CSS的时候，开发者不能够清晰地看出网页的结构，不利于于团队的开发和维护。

优点及特性

• 对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合 搜索引擎检索(SEO)，也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量。
• 在页面没有加载CSS的情况下，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
• 代码结构清晰，可读性高，减少差异化，便于团队开发和维护。
• 网语义类可以支持读屏软件，根据文章可以自动生成目录等等。

3. 常用纯语义化标签布局

4. 常用纯语义化标签

纯语义: 指其实并没有实质性的作用，主要是纯语义化标签，用来标记当前内容块主要是写什么内容。

< header >

• 语法：

<header>
    <h1>这是标题1</h1>
    <p>这是标题1的相关介绍</p>
</header>

<article>
    <header>
    	   <h2>这是标题2</h2>
    	   <p>这是标题2的相关介绍</p>
    </header>
    <p>文章内容</p>
</article>

• 用于定义文档的页眉（介绍信息）
• 使用场景：
  • 包裹顶部的导航栏
• 注意事项：
  • header标签通常至少包含（但不限于）一个标题标记（< h1 >–< h6 >）一个页面只能有一个h1，
  • header标签并不引入新的内容区块，而是一个区块的头部
  • header标签中必须包含一个标题标签，并且子元素不唯一，否则不适用header标签。如果仅是为了样式，请使用DIV标签，避免header标签的滥用
  • 一个页面内并没有限制header的出现次数，每一个不同内容区块，都可以使用一个header标签来定义它的头部

< nav >

• 语法：

<nav>
  <ul>
    <li>首页</li>
    <li>导航1</li>
    <li>导航2</li>
  </ul>
</nav>

• 表示页面中导航的链接部分
• 使用场景
  • 网站导航条，侧边栏导航条，页内导航，前页后页翻页等
• 注意事项
  • 一个页面最好只有一个nav标签(一般是网站导航条)
• SEO：
  • 让搜索引擎快速定位，避免误导

< section >

• 语法：

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

• 表示页面中的一个独立内容区块，里面有自己的大纲结构，比如章节，页眉，页脚或页面的其他部分
• 一个 section 元素通常由内容以及标题组成，表示一个内容区块。
• 理解：
  • section中可以包含h1h1、h2…h6标签，表示文档结构
  • section标签用于标识页面上重要内容部分
  • 该标签类似将一本书分成几个章节
• 注意事项：
  • section 元素中，一定包含一个标题元素，而一般不用包含头部（header元素）或者底部（footer元素）。

< article >

• 语法：

// 官方：
<article>
  <h1>article</h1>
  <p>article在xxxx年xx月xx日xx:xx 发布。</p>
</article>

// 灵活使用：
<article>
  <header>
    <h1>主标题</h1>
  </header>
  <aside id="entry-meta">作者:xxx 时间:<time datetime="xxxx-xx-xx">xxxx-xx-xx</time></aside>
  <div id="entry-content"><p>内容描述</P></div>
</article>

• 表示页面中一块与上下文不相关的独立内容（主要是来自其它外部源的内容）
• 使用场景：
  • 来自外部提供的一遍新文章，博客，论坛的文本等等
• 与header搭配使用
  • 标记博客文章摘要列表：article包含自己的标题（通常h2,h3放在header里边）
• 与aside搭配使用
  • 描述这篇文章摘要的相关信息(例如文章发布时间、文章作者、文章标签、分类目录等等)
• 与section的区别：
  • aticle与section相似，只是article更强调独立性、完整性。section更强调独立性

< aside >

• 语法：

<p>My family and I visited The Epcot center this summer.</p>
 
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

• 表示页面主区域内容之外的内容（比如侧边栏）。
• 使用场景：
  • 对主区域内容附加的一些广告
  • 侧边栏
• 与article搭配使用：
  • 表示article标签内容之外的，与article标签内容相关的辅助信息。
• 注意事项：
  • aside 标签的内容应与主区域的内容相关.

< footer >

• 语法：

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
  <p>Copyright © 2015 xxx.com All Rights Reserved | 京ICP备 xxxxxxxx号-2</p>
</footer>

• 表示整个页面或页面中一个内容区块的脚注
• 一般来说，它会包含创作者的姓名、创作日期及创作者的联系信息或者公司的备注信息。
• 公司网站底部通常用来说明网站信息的版权，网站所有者，备案等。
• 在一个文档中，您可以定义多个 < footer > 元素。

< address >

• 语法：

<address>
    Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

• 定义文档或者文章的作者/拥有者的联系方式
• 在标签里，表示不同的意义
  • 如果在 < body >元素内，则它表示文档联系信息。
  • 如果在 < article > 元素内，则它表示文章的联系信息。
• 标签特征：该标签的文本通常呈现为斜体
• 注意事项：
  • 不应该用于描述通讯地址，除非它是联系信息的一部分
  • 通常连同其他信息被包含在 < footer > 元素中。

< label >

• 语法：

<label for="name">姓名</label> 
<input type="text" name="name" id="name" />

• 标签用于为 < input > 元素做标题绑定。

< caption >

• 语法：

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

• 定义表格标题，会在< table >中居中显示

5. 常用语义化标签

指拥有语义化作用的同时，拥有它自己独特的作用，例如拥有独特的样式或者功能。

< figure > 和 < figcaption >

• < figure > 标签表示一段独立的内容，经常与说明 < figcaption > 进行配合使用
• 使用场景：
  • 需要有文字说明的图像，表格，代码段等
• 比如图片加文字：

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

• 效果如下：
  

< summary > 和 < detail >

• < detail > 标签可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。
• < summary > 表示点击< detail >后显示的内容，一般用来表示< detail >元素的一个内容的摘要，标题或图例。
• 使用案例：

<details>
  <summary>猜猜我是谁</summary>
  <p>你的一生挚爱</p>
</details>

• 未点击< detail >效果如下：
  

• 点击< detail >，< summary >展开效果如下：
  

< progress >

• 表示进度条
• 有两个属性
  • max： 设置进度条的最大值
  • value: 表示当前值，表示进度达到了多少，如何没有设置，进度条会来回循环
• 使用案例

<progress id="file" max="100" value="65"></progress>

• 效果如下：
  

< sub > 和 < sup >

• < sub > :表示下标，< sup > :表示上标
• 在数学等式、科学符号和化学公式中都非常有用。
• 使用案例：

<p>这段文本包含 <sub>下标</sub></p>
<p>CO<sub>2</sub></b>
<p>x<sup>2</sub></p>

• 效果如下：
  

< del > 和 < ins >

• < del >: 定义文档中已被删除的文本。
• < ins >: 定义已经被插入文档中的文本。
  • 属性cite：指向另外一个文档的 URL，此文档可解释文本被插入的原因。
  • 属性datetime： 定义文本被插入的日期和时间。
• 注意：两者一般配合使用, cite和datetime主流浏览器都不支持
• 使用案例

<del>
  <p>内容1：Here are some eggs</p>
</del>
<ins cite="../desc.html" datetime="2022-08">
  <p>“内容1：Here are some tomatoes</p>
</ins>

• 效果如下：
  

< base >

• 定义页面中所有链接的默认地址或默认目标。
• 注意：该标签位于< base >标签下
• 使用案例

<head>
    <base href="https://www.baidu.com/" />
    <base target="_blank" />
</head>

<body>
    <img src="sample.png" />
    <!--理解：
		因为head下已经定义了base的href，
		所以img中的src会从这个地址 "https://www.baidu.com/sample.png"找图片 
	-->
    <a href="https://www.baidu.com/">baidu</a>
	<!--理解：
		因为head下已经定义了base的target，
		所以点击a链接会从新窗口打开
	-->
</body>

< noscript >

• 表示当前浏览器或者其他环境中，如不支持Javascript的话，显示的替代内容。

<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>