語義化
解釋它的概念前，應該首先了解“結構 - 績效 - 行為”是什么?
如果解耦是高級代碼，那么“結構 - 性能行為”的原則就是前端的基準。
隨著前端代碼的增長，每個代碼執行自己的功能變得越來越重要。
眾所周知，前端代碼是通過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代碼不是一個永遠不會學到的知識，而是一個持續改進的問題;
它不需要你花費大量的時間來學習它，但需要你每天積累經驗來提高技能。
