HTML学习笔记三——HTML常见标签一及Web语义化

一、Web语义化

web语义化，指的是在没有CSS时让页面能呈现一定的结构，即段落明显、标题突出。其优点在于：一是爬虫喜欢，在SEO搜索引擎中更容易被抓取关键词；二是便于维护，方便项目交接。

二、常用标签

1.文本标题（h1~h6）

特点：自带加粗，有自己的文本大小，且独占一行，有默认间距，其中，h1标签最具语义化

格式：<h1>一级标题</h1>

2.段落文本（p）

特点：标识段落，段落之间有段间距

格式：<p>段落内容</p>

3.换行（br）

特点：空标记（强制换行）

格式：<br />

4.水平线（hr）

hr标签属于单标签，属性包含：

1. color：水平线颜色
2. width：线宽
3. align：水平对齐方式，取值包括了left、center、right
4. noshade：取消阴影，取值为noshade
   取值与名称一样时，可省略值，直接写noshade即可

格式一：<hr />
格式二：<hr color=“属性值” width=“属性值” align=“属性值” noshade />
可根据自己需求删除部分属性

5.加粗

有两种标签，b标签以及strong标签。
区别：b标签只是文字加粗，并无实际含义；而strong标签注重突出文本内容，具备语义化，更推荐使用。

格式：<b>加粗内容</b>
<strong>强调内容</strong>

6.倾斜

有两种标签，i标签以及em标签。
区别：i标签只是文字倾斜，并无实际含义；而em标签强调文本内容，具备语义化，更推荐使用。

格式：<i>倾斜内容</i>
<em>强调内容</em>

7.删除

有两种标签，s标签以及del标签。
区别：s标签只是文字有删除线，并无实际含义；而del标签强调文本内容，具备语义化，更推荐使用。

格式：<s>删除内容</s>
<del>强调内容</del>

8.扩展（下划线、上标、下标）

下划线：u标签
上标：sup标签
下标：sub标签
代码如下：

<u>文本内容</u>
文本<sup>上标内容</sup>
文本<sub>下标内容</sub>

三、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！