深入浅出的web语义化理解

末蓝、 2022-12-19 03:50 148阅读 0赞

### 写目录 ###

*  前言
 *  一：什么是语义元素？
 *  二：为什么要语义化？
 *  三：常用的语义元素
 *  四：文档结构标签
 *  五：参考

# 前言 #

很多面试官会问：

> 谈谈你对 HTML5语义化标签的理解。

那么本篇博客可以对你理解HTML5语义化标签有所帮助。

# 一：什么是语义元素？ #

语义元素清楚地向浏览器和开发者描述其意义。

**非语义**元素的例子：`<div>` 和 `<span>` \- 无法提供关于其内容的信息。

**语义**元素的例子：`<form>`、`<table>` 以及 `<img>` 清晰地定义其内容。

# 二：为什么要语义化？ #

*  **代码结构**: 使页面没有css的情况下，也能够呈现出很好的内容结构
 *  **有利于SEO**: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
 *  **提升用户体验**： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
 *  **便于团队开发和维护**: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
 *  **方便其他设备解析**: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

# 三：常用的语义元素 #

**HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”，如图所示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]

# 四：文档结构标签 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]

> [HTML 标签列表（功能排序） | 菜鸟教程 https://www.runoob.com/tags/ref-byfunc.html][HTML _ _ _ https_www.runoob.com_tags_ref-byfunc.html]

# 五：参考 #

*  [HTML5 语义元素 https://www.w3school.com.cn/html/html5\_semantic\_elements.asp][HTML5 _ https_www.w3school.com.cn_html_html5_semantic_elements.asp]
 *  [html语义化标签\_越努力，越幸运！-CSDN博客 https://blog.csdn.net/qq\_38128179/article/details/80811339][html_-CSDN_ https_blog.csdn.net_qq_38128179_article_details_80811339]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ff2f0741081c4ca5a76469310bbb53f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/45b003fcfe104c97801c84d6fa86df46.png
[HTML _ _ _ https_www.runoob.com_tags_ref-byfunc.html]: https://www.runoob.com/tags/ref-byfunc.html
[HTML5 _ https_www.w3school.com.cn_html_html5_semantic_elements.asp]: https://www.w3school.com.cn/html/html5_semantic_elements.asp
[html_-CSDN_ https_blog.csdn.net_qq_38128179_article_details_80811339]: https://blog.csdn.net/qq_38128179/article/details/80811339