深度剖析HTML的語意和與其相關的前端框架_HTML/Xhtml_網頁制作

語義研究的是標志與符號之間的關系，以及它們所代表的意義。在語言學中，它主要是研究這些標志（如單詞，短語，或者聲音）在語言中的意義。而在前端開發領域，語義主要涉及的是HTML元素、屬性和屬性值（包括像Microdata這樣的擴展）所約定的意義。這些在規范中常用的正式約定語義，可以幫助程序（以及后來參與開發的人）更好地理解一個網站各方面的信息。然而，即使這些元素、屬性和屬性值的語義是正式化的，它們依然得服從于開發者的適應程度以及共同選擇的結果。這使得正式的約定語義也可能會在今后被修改（而這正是HTML設計原則之一）。
區分不同類型的HTML語義

遵守編寫“語義化的HTML”這個原則，是現代專業前端開發的基礎之一。絕大多數的語義都與當前或預期的內容性質有關（如：h1元素，lang屬性，type屬性的email值，Microdata）。

然而，并非所有的語義都需要以內容為導向。類名不能“無語義”。不管是用什么名字命名，它們都必須要有意義與目的。類名的語義可以和那些HTML元素不同。我們可以借助HTML元素、某些HTML屬性、Microdata等所具有的“全局性”語義，然后利用網站或應用的“局部性”特定語義加以區分，這些特定語義通常包含在屬性值中，比如class屬性。

盡管在HTML5規范的class屬性這一章節中重申了這個假定的“最佳實踐”…

…鼓勵開發者使用class屬性值描述實際內容，而不是描述期望展現的內容。

…并沒有什么內在的原因非這樣做不可。事實上，當這種方法在大型網站或者應用中運用時，它往往會成為一種障礙。

HTML元素和其它屬性已經提供了內容層的語義
對于機器或訪問者來說，類名所能透露的有用的語義信息非常少，甚至沒有。除非它是已經約定的那一小部分名稱（機器同樣可讀） —— Mircoformats
類名的主要用途是成為CSS和JavaScript的鉤子。如果你不需要為你的頁面添加表現和行為，那么你或許不必在你的HTML里添加類名
類名應該為開發者傳達有用的信息。當你閱讀一個DOM片段時，它將有助于理解某個類名的具體作用。尤其是在多人協作的開發團隊里，與HTML組件打交道的可不光只有前端開發者。

舉一個非常簡單的例子：

總的來說，可擴展的HTML/CSS必須依賴HTML中的class，以便創建可重用的組件。一個靈活的、可重用的組件，既不依賴DOM樹中的某一部分，也不需要使用特定類型的元素。它應該能適應不同的容器，并且可以很容易地更換主題。如果有必要，額外的HTML元素（超出標記內容所必須的元素之外的元素）可以讓組件更加強壯。Nicole Sullivan所說的media object就是一個很好的例子。
避免用類型選擇器支持class，可以讓組件更容易合并。下面這個例子中，btn組件與uilist組件不易于合并。問題在于.btn的權重比.uilist a要小（這將覆蓋任何共享屬性）。而且ulist組件需要錨點作為子節點。
輸出的小10%。但是當所有的文件都通過gzip壓縮后，預處理程序

深度剖析HTML的語意和與其相關的前端框架_HTML/Xhtml_網頁制作

深度剖析HTML的語意和與其相關的前端框架_HTML/Xhtml_網頁制作:關于語義 語義研究的是標志與符號之間的關系，以及它們所代表的意義。在語言學中，它主要是研究這些標志（如單詞，短語，或者聲音）在語言中的意義。而在前端開發領域，語義主要涉及的是HTML元素、屬性和屬性值（包括像Microdata這樣的擴展）所約定的意義。這

推薦度：

點擊下載本文 文檔為doc格式