HTML-语义化

任务没完成....需要继续码

语义化

---

解释它的概念前，应该首先了解“结构 - 绩效 - 行为”是什么?
如果解耦是高级代码，那么“结构 - 性能行为”的原则就是前端的基准。
随着前端代码的增长，每个代码执行自己的功能变得越来越重要。
众所周知，前端代码是通过HTML + CSS + JS实现的。他们负责“结构 - 绩效 - 行为”。
HTML负责结构。什么是结构？
简而言之，结构是HTML节点之间的层次和嵌套关系。例如：

---

      




// *********************比较**********************//

     

---

这些代码是否显示结构？与第一个没有不同的结构（这里我假设h1默认为16px，粗体样式）。那么第一个与这个相比有什么优势？
事实上，优点就是语义化！
第一段代码不仅显示了结构，而且告诉我们，标题，块，页脚都在同一个级别，标题中有一个大标题。第二个是否反映了这种结构？
因此，结论是 - 语义化是使标签与其内容保持一致，代码更简洁，重用性更高。

通过使用适当的标签，我们将会写出更少的css或js。
很明显，代码更简洁。
我们可以看到第二个代码（在理解HTML语义中）定义的样式，但第一个没有。
更高的可重用性：如果HTML结构在许多地方使用，那么第一个更常用。
例如，第二个代码段固定16个像素加粗，而第一段只需说它是个h1，不用重写一大堆代码，就能使用第二段同样的风格，

写少css：如上面例子

接下来写更少的js：这是值得讨论的。
例如，请参阅以下代码：

---

<！ - 语义化的形式 - > 
 
 

-
<！ - 非语义化的形式 - > 
 
提交 

---

在非语义表单代码中，标签“a”和“js”可以实现提交功能。但是，这种形式需要写更多的js代码; 其次，语义形式可以通过“Enter”提交，但不能通过“Enter”提交带有标签“a”的非语义表单。当然，你可以写很多js来实现完美的模拟，但是这有什么意义呢？

更好的可及性

这主要是针对屏幕阅读器或其他对CSS不了解的浏览器。可以通过脱离CSS来读取语义HTML，但在非语义化中实现是相当困难的。

总结有3种:

1. 易于理解的机器代码，这将有助于SEO
2. 还要以上面几个代码为例。特别是第一段的第二个代码不能被人读取，更不用说机器了。而第一段代码很容易被人和机器人理解。
3. 如果搜索引擎抓取工具了解您的代码，您的网站排名自然会上升。

最后，重要的是如何使自己的代码语义？

W3c验证无法验证您的代码是否为语义，并且没有工具来测试代码是否是语义。
这是什么意思？
这意味着您无法使用学习语言的方式解决语义代码问题。
关于如何使自己的代码语义，我认为有一个可行的方法。
首先，您需要知道常用标签，包括标签的含义。
点击这里查看参考标签
其次，当你写html时，你需要考虑：如果写的话如何满足语义要求。
最后，经常搜索一些大公司的网站（特别是新站），开源项目代码;
我知道你通常会这样做，但是每次看到如何编写CSS，或者如何编写js，请花一点时间看看他们如何写html，并想想他们为什么这么写。
这样，我相信你的HTML代码语义越来越好一步一步。
简而言之，语义HTML代码不是一个永远不会学到的知识，而是一个持续改进的问题;
它不需要你花费大量的时间来学习它，但需要你每天积累经验来提高技能。

---