--- theme: v-green --- 本文已参与「[掘力星计划](https://juejin.cn/post/7012210233804079141/)」，赢取创作大礼包，挑战创作激励金。 ## 为什么不要盲目使用`

`？先看一个例子： ```

这是一个xx

xxxx

``` 如果你看到一个这样的html页面结构，你能想到这是什么吗？如果你接手了这个页面，那么进行维护的时候，可能工作感受不亚于理清一个缠在一起的耳机线... ![u=1246804759,678220043&fm=26&fmt=auto.webp](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31da6183aa6c4ae4ada34d634b1a0395~tplv-k3u1fbpfcp-watermark.image?) 那么接下来的这个页面结构呢？ ```

这是一个页面

页面内容

``` 是不是能很自然的想到这样的网页结构？(~~不许说想不到😋~~) 通过这样的网页结构，需要修改哪一部分，只要对症下药就好，妈妈再也不用担心我头秃了。 ![屏幕截图 2021-10-21 164924.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aee3d6a4f62f4d7b933d3e1a9bb961e9~tplv-k3u1fbpfcp-watermark.image?) 这就是今天要说的语义化标签在开发中最直观的作用。它更加直观的表现出了网页结构。可能在一个人开发的时候害体现不太出来，但是当多人合作或者回看自己写的页面时，就很容易体现出这一特点。除此之外，语义化标签的作用一共大体有这几大点： - 优化了代码结构，在不看css的情况下，也能够呈现出很好的内容结构 - 爬虫依赖标签来确定关键字的权重，更多的语义化标签，帮助爬虫抓取更多的有效信息，也增加了页面权重 - 增加了无障碍阅读的体验，让每一部分都附有其意义 ## 常见的语义化标签 `

`网页的页眉部分 ```

这是一个页面

``` `

`网页的主要部分 ```

页面内容

``` `

`网页的页脚部分 ``` ``` `

`可用于侧边栏的广告，链接或者与附近内容相关的内容 ``` ``` `

` 标签定义导航链接的部分。 ``` ``` `

`定义页面独立的内容，其中可以嵌套`

`,`

`,``等 ```

小页面标题

内容

``` `

`网页文档部分，长表单或者文章 ```

xxxx

``` `