HTML基础不好怎么办？别慌！快看看这8个语义标签！

HTML基础不好怎么办？别慌！快看看这8个语义化标签！

哈喽，小伙伴们，我是你们的老朋友，隔壁，今天要给大家介绍的是HTML语义化标签，简单来说，也就是标签的含义。

那么，语义化标签的目的又是什么呢？当然有以下三个好处：

1，方便代码的维护和阅读

2，便于浏览器或者爬虫易于解析，从而更好的分析其中的内容。

3，有利于搜索引擎的优化

首先要跟小伙伴们介绍的是第1个标签，也就是标题标签。说到标题标签，HTML给咱们提供了6个等级标题标签呢，也就是h1~h6，主要用于文本的大小效果修改。它的语法格式呢，是内容，内容......内容，不过需要小伙伴们值得注意的是右下角的数字角标，在使用的时候，角标的数字越小，代表等级越低，但显示的文本效果是越来越大的，所以大家可以看到如下图所示效果：

标题标签效果示意图

第2个和第3个，第4个要跟大家介绍的分别是段落标签，水平线标签和换行标签。顾名思义，就是把内容分为若跟个段落。而段落的英文单词小伙伴们还记得不？嗯，没错了，就是paragraph（不知道的小伙伴记得复习哦）。所以呢，段落标签的书写就是取自首字母p，语法格式是

内容

。而水平线标签则是，正如大家所看到的，它是单标签，比较特别。还有一个是换行标签，也就是

，一旦使用，内容将强制换行。三个标签的显示效果如下图：

段落标签，水平线标签，换行标签效果示意图

第5个和第6个要跟大家介绍的是div标签和span标签。两者都是用来给网页布局的，div是division的缩写，即分割，分区的意思，一行只能放一个div，将会单独一行显示；而span则是跨度，跨距，范围的含义，一行可以放多个span。这两个标签本身并没有语义化，不过小伙伴们可以叫它们盒子标签。div标签的语法格式是

内容

，span标签的语法格式是内容。两者效果如下图所示：

div标签和span标签效果对比效果图

拓展标签1补充：

在网页中，有时为了可以让文本元素可以显示更多的效果，也会用到一些其他的文本标签。例如文本加粗，是内容和内容，文本将以粗体显示。文本斜体，是内容，内容，文本将以斜体显示。文本加删除线，是内容，内容，文本中部将有一条线穿过。文本加下划线，内容内容，文本下方将加上下划线。（至于效果，小伙伴们可以自行进行测试哦~）

下面接着给大家介绍第7个标签和第8个标签，分别是图像标签和超链接标签。图像标签，也就是图片标签，语法格式是，即插入图片。而超链接标签，即通常所看到的网页中点击跳转的效果，语法格式是内容，默认文本显示效果颜色是蓝色。两者效果如下图：

图像标签和超链接标签测试效果示意图

拓展标签补充2：

网页有时候方便别的同事阅读，需要添加一些注释性语言，这时候就用到了注释标签，语法格式是，快捷键是ctrl + / 或者 ctrl + shift + /。

好了，小伙伴们，今天语义化标签就介绍到这儿了，如果有疑问，记得及时留言哦~