什么是语义化？
语义化（Semantic）是指在编程和网页开发中使用具有明确含义的元素、类名或标识，使代码不仅能被计算机正确执行或识别，还能被人类开发者直观理解其功能和目的。
在程序设计中，语义指的是一段代码的含义。
例如：“运行这行 JavaScript 代码会产生怎样的影响？”、“这个 HTML 的元素有什么作用，扮演了什么样的角色”（而不只是“它看上去像是什么？”）
语义化的核心概念
- 表达意图：代码元素能够清晰表达其设计目的
- 自我描述：通过名称就能理解其功能或内容
- 结构清晰：反映内容的逻辑结构和层次关系
HTML中的语义
<!-- 非语义化 -->
<div>一级标题</div>
<!-- 语义化 -->
<h1>一级标题</h1>
分析：
-
在w3c的规范中，div是一个没有特定的语义的元素。浏览器在识别的过程中，会认为它是一个div元素，因此会忽略掉div元素中的内容，而直接将div元素中的内容作为文本内容来渲染，而不是作为一个“一级标题”来渲染。所以将表达“一级标题”的内容用div来包裹，并不能让浏览器识别出它是标题内容。
-
而h1~h6元素，在规范中，是用来呈现不同级别的标题的，h1为最高级，h6为最低级。h1元素表达的意思是：此元素包含的内容为 “一级标题”。因此浏览器在识别的过程中，会认为它是一个一级标题，因此会按照h1的样式来渲染。
HTML元素的语义化有以下两个特性：
- 大多数的HTML元素都有具体的含义。
- 所有元素与展示效果无关，元素展示到页面中的效果，应该由CSS决定。
重要点
内容需要选择什么元素来包裹，应该取决于内容的含义，而不是元素的显示效果。
HTML元素在网页中的默认效果，是浏览器厂商为HTML元素设置的默认样式表所展示的。
CSS中的语义
CSS中的语义，多是让CSS选择器的名字更具含义。
例：给一个水果种类列表设置样式，使用li元素来代表不同的水果名。如果是使用 ul > li 来做选择器名去设置样式，单独看CSS，并不能直观的看出它设置的什么内容的样式，但使用.fruit-item之类的选择器名，就可以非常直观的看出来。
JavaScript中的语义
JavaScript中的语义，跟CSS同理，使用更直观的变量名、函数名等等来描述该变量名或者函数名的作用。
例：const num = 3.1415926; 和 const PI = 3.1415926;，很明显PI更能表达该变量的作用。
语义化的好处
- 可读性强：代码更容易维护和理解。
- 开发效率高：减少团队的沟通成本，使团队协作更顺畅。
- 搜索引擎优化（SEO）：搜索引擎能更好理解网页的内容和结构。
- 无障碍访问：如：浏览器的阅读模式、语音模式等能更正确的解析网页中的内容，帮助视力受损的用户导航页面。
