HTML標籤和CSS樣式列表

今天我們來認識一下HTML標籤和CSS樣式，到底他們有什麼功能和作用，在學web的下夥伴們值得一看，如果你在從事網站建設行業更該看看。

還有一些編寫高語義HTML代碼的最佳實踐，下面是四個最重要的原則。

(1)熟悉所有規範中的HTML標記，理解每個標記的語義，並在適當的地方使用適當的標記

如果不考慮HTML的語義，那麼使用它就足以在頁面上構建大部分布局，但是這兩個標記沒有語義標記，不推薦使用。語義HTML首先應該從HTML標籤語義開始，HTML標籤是頁面內容的載體，語義標籤則是包含一個完整的語句頁面的內容，這也使得整個結構變得清晰。Web開發人員應該熟悉所有標準的HTML標記使用場景，並在適當的位置使用適當的標記。例如，label系列代表標題，用於在web頁面的不同級別顯示標題。表示列表，用於顯示各種數據列表或菜單;其他高使用率的語義標籤包括:、、、、等。此外，HTML5中增加了一些新的標籤，包括:、、、、等。W3C規範對所有標籤都有詳細的解釋和使用場景，前端開發人員應該熟悉最基本的標籤使用場景。

(2)熟悉每個標籤上的規範化屬性，為HTML標籤設置必要的屬性

與標記語義一樣重要的是，某些屬性的設置也是HTML語義的重要組成部分。許多前端編碼規範中提到的兩個屬性是Alt和title。這兩個屬性也被設置為改進HTML的語義。在標記中，Alt是必須設置的屬性，因為它是一個自閉標記，不包含解釋圖像的其他信息。title屬性是一個可選屬性，當標籤沒有包含足夠內容來說明語義時，可以通過標題添加其他信息。下面的示例展示了如何使用這兩個屬性:

另一個重要的屬性是標記中的for屬性。元素是為元素定義的注釋，在語義上綁定到元素和表單元素。在編寫高度語義的表單代碼的章節中，詳細描述了標籤的作用。

(3)風格與結構的分離

上面提到的樣式和結構分離主要是關於CSS樣式代碼和HTML代碼的分離。通過刪除HTML代碼中用於表示HTML外觀的部分，並以CSS樣式實現這些部分，這就更進一步了。簡單的HTML代碼使語義更加清晰。下面是上面示例中所示的分隔符的HTML代碼:

從實際的需求分析,分離器不是web內容的一部分,只有為內容的分割,因此,應該從HTML代碼分離,然後使用CSS樣式來達到相同的效果,在這種情況下,您可以引用的實現CSS樣式的第三條道路在上面的例子中顯示的代碼。

兩個CSS偽類:before和:after非常適合在這樣的場景中使用，即在開始或結束時添加符合條件的單詞或外觀元素，同時添加內容不破壞語義HTML代碼。這裡有一個常見的場景，許多人編寫了這樣的代碼來清除浮動:

這是側邊欄。

這是主要內容。

相應的CSS樣式如下:

側邊欄

容器

。明確

為了清除浮動，上面的代碼為元素添加了一個元素和一個清晰的樣式。很多人可能會認為這是一種正常的做法，但是寫作已經破壞了語義HTML代碼，不是一個好的解決方案，你應該刪除冗餘的元素，並使用CSS樣式來實現，代碼如下:

劉志隆

劉志隆

this is the side bar.this is the main content.對應的CSS樣式為：.sidebar { float: left;width:150px;}.container { float:right;width:450px;}.clear { clear:both;}為了清除元素的浮動，上面代碼添加了一個元素，並給此元素添加了clear樣式。可能很多人覺得這是一個常規的做法，但是這種寫法破壞了HTML代碼的語義，並不是一種好的方案，應該刪除這個多餘的元素，並改用CSS樣式來實現，代碼如下：this is the side bar.this is the main content.對應的CSS類clearfix的聲明為：.clearfi x {*zoom: 1;}.clearfi x:before,.clearfi x:after .clearfi x:after 上面的示例使用了:before和:after偽類，很好地解決了由於多餘的元素而破壞HTML代碼語義的問題。另外一個濫用的標籤就是換行符標籤。很多新手經常會使用此標籤來讓元素換行顯示，甚至會連續使用多個元素來加大元素之間的行距，示例如下。titleitem1item2item3這算是很初級的錯誤了，完全沒有理解標籤的語義。標籤僅僅用於文本內容中的換行。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！