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)用對標籤 --> 即標籤語義化:
- 有利於SEO(搜索引擎優化)
- 有利於屏幕閲讀器閲讀(無障礙性)
- 容易修改和維護代碼
- 手機顯示時會有針對性的渲染
(2)用對特性:
特性:元素開標籤特有屬性,用以進一步描述標籤含義,例如<a href="www.google.com">to google</a>,這裏href特性説明了鏈接的跳轉方向。一些特性是每個元素都可以使用的,如id特性,而另一些則只有特定元素可以使用,如何使用好特性豐富標籤含義,也是我們關注的重點。
(3)正確嵌套:
例如<p>標籤不可以被<a>標籤嵌套,熟悉標籤嵌套規則,有利於寫出規範的HTML代碼。