语义化
解释它的概念前，应该首先了解“结构 - 绩效 - 行为”是什么?
如果解耦是高级代码，那么“结构 - 性能行为”的原则就是前端的基准。
随着前端代码的增长，每个代码执行自己的功能变得越来越重要。
众所周知，前端代码是通过HTML + CSS + JS实现的。他们负责“结构 - 绩效 - 行为”。
HTML负责结构。什么是结构？
简而言之，结构是HTML节点之间的层次和嵌套关系。例如：
<header>
<h1></h1>
</header>
<section></section>
<footer></footer>
// *********************比较**********************//
<div>
<span style="font-size:16px;font-weight:bold;"></span>
</div>
<div></div>
<div></div>
这些代码是否显示结构？与第一个没有不同的结构（这里我假设h1默认为16px，粗体样式）。那么第一个与这个相比有什么优势？
事实上，优点就是语义化！
第一段代码不仅显示了结构，而且告诉我们，标题，块，页脚都在同一个级别，标题中有一个大标题。第二个是否反映了这种结构？
因此，结论是 - 语义化是使标签与其内容保持一致，代码更简洁，重用性更高。
通过使用适当的标签，我们将会写出更少的css或js。
很明显，代码更简洁。
我们可以看到第二个代码（在理解HTML语义中）定义的样式，但第一个没有。
更高的可重用性：如果HTML结构在许多地方使用，那么第一个更常用。
例如，第二个代码段固定16个像素加粗，而第一段只需说它是个h1，不用重写一大堆代码，就能使用第二段同样的风格，
写少css：如上面例子
接下来写更少的js：这是值得讨论的。
例如，请参阅以下代码：
<！ - 语义化的形式 - >
<form>
<input type =“submit”/>
</ form>
-
<！ - 非语义化的形式 - >
<form>
<a href="javascript:document.forms[0].submit()">提交</a>
</ form>
在非语义表单代码中，标签“a”和“js”可以实现提交功能。但是，这种形式需要写更多的js代码; 其次，语义形式可以通过“Enter”提交，但不能通过“Enter”提交带有标签“a”的非语义表单。当然，你可以写很多js来实现完美的模拟，但是这有什么意义呢？
更好的可及性
这主要是针对屏幕阅读器或其他对CSS不了解的浏览器。可以通过脱离CSS来读取语义HTML，但在非语义化中实现是相当困难的。
总结有3种:
- 易于理解的机器代码，这将有助于SEO
- 还要以上面几个代码为例。特别是第一段的第二个代码不能被人读取，更不用说机器了。而第一段代码很容易被人和机器人理解。
- 如果搜索引擎抓取工具了解您的代码，您的网站排名自然会上升。
最后，重要的是如何使自己的代码语义？
W3c验证无法验证您的代码是否为语义，并且没有工具来测试代码是否是语义。
这是什么意思？
这意味着您无法使用学习语言的方式解决语义代码问题。
关于如何使自己的代码语义，我认为有一个可行的方法。
首先，您需要知道常用标签，包括标签的含义。
点击这里查看参考标签
其次，当你写html时，你需要考虑：如果写的话如何满足语义要求。
最后，经常搜索一些大公司的网站（特别是新站），开源项目代码;
我知道你通常会这样做，但是每次看到如何编写CSS，或者如何编写js，请花一点时间看看他们如何写html，并想想他们为什么这么写。
这样，我相信你的HTML代码语义越来越好一步一步。
简而言之，语义HTML代码不是一个永远不会学到的知识，而是一个持续改进的问题;
它不需要你花费大量的时间来学习它，但需要你每天积累经验来提高技能。
