HTML的结构化和语义化应该怎么做？

[yankewei]

为什么我们需要结构化？

• 可以提升用户体验，文档的结构有助于用户找到自己想要的内容，以及快速浏览文档的概要。
• 对SEO友好，搜索引擎可以通过文档的结构进行相关的索引。
• 可以更好的使用css/js。

  为什么我们需要语义化？

  基本上和上述一样，语义化是使用对应的元素来实现对应的展示，标题应该用h标签，段落应该用p标签，等等。

  文字处理元素

  标题

  文档的标题， 我们一般使用<h1>，另外还有<h2><h3><h4>，每个元素代表文档的标题级别。<h1>是主标题，<h2>是二级子标题，<h3>是三级自标题，等等。

  段落

  有标题就有段落，段落一般使用<p>标签，例如文章的一段话，应该使用这个元素。

  示例：

  <h1>绝句</h1>
  <p>两个黄鹂鸣翠柳，一行白鹭上青天。</p>
  <p>窗含西岭千秋雪，门泊东吴万里船。</p>

  效果可以复制到https://codepen.io/查看。

  列表List

  无序列表

  <ul><li>表示列表是没有先后顺序的。

  示例

  <p>早餐吃什么</p>
  <ul>
  <li>面包</li>
  <li>鸡蛋</li>
  <li>牛奶</li>
  <ul>

  有序列表

  <ol><li>：表示列表是有顺序的。

  示例：

  <p>如何学习前端</p>
  <ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  </ol>

  另外这些列表都是可以嵌套的。

  重点强调

  在一段文本中，经常会对某些次进行强调，或者加下划线，删除线等等。

  强调

  <em></em>：起到强调的作用，会让内容变成斜体。

  非常重要

  <strong></strong>：起到强调文本的重要性，通常文本会加粗。

  斜体字

  <i></i>：文本会变成斜体，通常用于专有词汇、外国文字、分类名称、技术术语、一种思想等等。

  粗体字

  <b></b>：文本会变成粗体，关键字，产品名称，引导句……

  下划线

  <u></u>：文本会出现下弧线，用来表达专有名词、错词等。

  超链接

  <a></a>：这个元素可以把内容转换为一个链接，可以跳转到其它页面或者页面的指定地方。

  属性

  href：这个属性就是链接的跳转地址可以是一个网址，也可以其它元素的ID属性值。

• 可以是一个网站地址，直接跳转页面。如：http://www.google.com
• 可以一个电子邮件地址，方便用户直接跳转的邮件app来发送邮件。 如：mailto:y947102435@gmail.com
• 可以是一个电话，方便用户在手机上直接进行打电话。如：tel:+123456789

title：这个属性可以在用户的鼠标停留在元素内容的时候进行展示。 download：这个属性可以设置用户下载文件的名字，下载地址必须和当前页面的网页同源才可以 当然还有其它属性，可以参考a元素

示例：

<!--跳转到另一个网站-->
<a href="https://www.google.com">谷歌</a>
<!-- 跳转到网页的指定地方-->
<a href="#sub_title">简介</a>
<h2 id="sub_title" title="COVID-19">新冠病毒简介</h2>

参考资料

• HTML文字基础