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:[email protected]
• 可以是一个电话，方便用户在手机上直接进行打电话。如：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文字基础