HTML(HyperText Markup Language),用來向瀏覽器標示文檔的所有“內容”與“結構”。

抱着温故而知新的態度,在這裏通過“回到HTML”系列文章,重新梳理一下HTML的相關知識。

1.HTML分類

對於HTML元素有以下幾種分類方法:

(1)元素類型:

1> 普通元素: <h1>元素,<p>元素...

2>void元素:<br />元素,<hr />元素..

(【注】:何為元素?這裏列一個簡單的公式:普通元素=開標籤+內容+閉標籤,void元素=開標籤。普通元素之間可以按規則進行嵌套的,而void元素不可嵌套其他元素的。)

(2)樣式類型:

1>塊級元素:<div>元素,<table>元素...

2>內聯元素:<span>元素,<a>元素...

3>內聯-塊級元素:<img>元素...

等等..

(【注】:瀏覽器默認塊級元素會在顯示中佔滿整行。)

 

(3)*對於HTML標籤,我自己將其梳理分類為以下5個類別:

(1)結構標籤:用來表示頁面結構,佈局,如<div>,<nav>等;

(2)排版標籤:用來標註文字,進行排版,如<h1>,<time>等;

(3)組合標籤:需要組合使用的標籤,需要標籤嵌套,又可再分為列表,表格,表單三種類型;

(4)引用標籤:由於HTML文檔是文本類型,因此凡是要引入文本之外類型的標籤均歸為此類,如鏈接,圖像,音頻,視頻等;

(5)其他標籤:指無法歸入上述五種類別的其他標籤,如:<meta>,<canvans>等。

 

2.HTML標籤使用要求:

用對標籤,用對特性,正確嵌套。

(1)用對標籤 --> 即標籤語義化:

  1. 有利於SEO(搜索引擎優化)
  2. 有利於屏幕閲讀器閲讀(無障礙性)
  3. 容易修改和維護代碼
  4. 手機顯示時會有針對性的渲染

(2)用對特性:

特性:元素開標籤特有屬性,用以進一步描述標籤含義,例如<a href="www.google.com">to google</a>,這裏href特性説明了鏈接的跳轉方向。一些特性是每個元素都可以使用的,如id特性,而另一些則只有特定元素可以使用,如何使用好特性豐富標籤含義,也是我們關注的重點。

(3)正確嵌套:

例如<p>標籤不可以被<a>標籤嵌套,熟悉標籤嵌套規則,有利於寫出規範的HTML代碼。