【Hello CSS】第四章-HTML的標籤與語意

piny發表於2021-09-09
CSSHTML

上一篇分享了CSS的邏輯屬性與盒子模型中分享了一些有關裝置螢幕的知識以及瀏覽器視口的座標構成。本篇則會分享HTML相關的一些知識。

我們在序章的開頭就簡單的講解了HTML的誕生歷史，本篇不作詳細講解，有興趣的可以去看wikipedia。

HTML大事記

首先我們簡單地來看一下HTML的發展歷程（具體各個版本的區別亦不做講解）。

  1. 1982年Tim Berners-Lee建立了html；
  2. 1989年Tim Berners-Lee規定HTML並在1990年底寫出瀏覽器和伺服器軟體；
  3. 1991年底Tim Berners-Lee提及HTML標籤（它描述18個元素，包括HTML初始的、相對簡單的設計）；
  4. 1993年網際網路工程任務組（IETF）釋出首個HTML規範的提案；
  5. 1994年IETF建立一個HTML工作組；
  6. 1995年11月24日HTML 2.0作為IETF RFC 1866釋出；
  7. IETF於1996年9月12日關閉它的HTML工作組；
  8. 1997年1月14日HTML 3.2作為W3C推薦標準釋出。這是首個完全由W3C開發並標準化的版本；
  9. 1997年12月18日HTML 4.0作為W3C推薦標準釋出；
  10. 1998年4月24日進行微調，不增加版本號；
  11. 1999年12月24日HTML 4.01作為W3C推薦標準釋出；
  12. 2000年5月ISO/IEC 15445:2000（"ISO HTML"，基於HTML 4.01嚴格版）作為ISO/IEC國際標準釋出。
  13. 2014年10月28日HTML 5作為W3C推薦標準釋出；
  14. 2015年3月20日HTML6作為提案被W3C提出；
  15. 2016年11月HTML5.1作為W3C推薦標準釋出；
  16. 2017年12月14日HTML5.2作為W3C推薦標準釋出；
  17. 2018年10月18日HTML5.3作為W3C推薦標準釋出。

魚頭注：上面某些資訊看得真讓人發愁。。。。。。

HTML標籤

對於應付日常的業務，寫在同一行的就用span，需要換行的就用div，如果有超連結就用a。長得醜？加color啊，不夠大？用font-size: xx-large啊。嗯，沒有任何問題，精通HTML。: )

此刻正在看這篇文章的你估計會覺得：“HTML有什麼好說的，每天都寫，鍵盤上div那幾個字母都要被我按爛了，這隻有初學者才需要學。”

嗯，說得對。那本篇結束，再見！

咦，不對，其實在魚頭看來HTML並不簡單，作為一門原本是為了學者們的交流而誕生的語言，本身就是充滿嚴謹性的，加上又已經發展了37個年頭，更是不簡單。

魚頭注：本篇不會對HTML的標籤結構跟檔案組成進行介紹，有需要了解的童鞋可以參考MDN跟W3school

首先我們來看一個基本的HTML頁面會有什麼東西：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello world</title>
  </head>
  <body>
    <h1>hello world</h1>
  </body>
</html>
複製程式碼

從上面我們可以知道一個基本的HTML頁面會有定義文件型別的<!DOCTYPE html>，告知瀏覽器這是一個HTML文件的<html></html>，定義各種文件屬性的<head></head>，以及定義內容主體的<body></body>。

首先我們一起來看看這幾大標籤的具體情況以及子標籤詳情。

DOCTYPE

<!DOCTYPE>是個宣告而不是標籤，它必須在HTML 文件的第一行，位於 <html> 標籤之前。它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。必須始終向 HTML 文件新增<!DOCTYPE>宣告，這樣瀏覽器才能獲知文件型別。詳情請參考HTML 元素和有效的 DTD。

html

<html></html>限定了文件的開始點和結束點，在它們之間是文件的頭部和主體。我們來看看在<html></html>標籤中可新增的專屬屬性有哪些：

屬性 值 描述
manifest url 定義一個 URL，在這個 URL 上描述了文件的快取資訊。（已廢棄）
xmlns www.w3.org/1999/xhtml 定義 XML namespace 屬性。

全域性屬性

HTML 屬性賦予元素意義和語境。下面的全域性屬性可用於任何 HTML 元素。

屬性 描述
accesskey 規定啟用元素的快捷鍵。
class 規定元素的一個或多個類名（引用樣式表中的類）。
contenteditable 規定元素內容是否可編輯。
contextmenu 規定元素的上下文選單。上下文選單在使用者點選元素時顯示。
data-* 用於儲存頁面或應用程式的私有定製資料。
dir 規定元素中內容的文字方向。
draggable 規定元素是否可拖動。
dropzone 規定在拖動被拖動資料時是否進行復制、移動或連結。
hidden 規定元素仍未或不再相關。
id 規定元素的唯一 id。
lang 規定元素內容的語言。
spellcheck 規定是否對元素進行拼寫和語法檢查。
style 規定元素的行內 CSS 樣式。
tabindex 規定元素的 tab 鍵次序。
title 規定有關元素的額外資訊。
translate 規定是否應該翻譯元素內容。

head

<head>標籤用於定義文件的頭部，它是所有頭部元素的容器。<head>描述了文件的各種屬性和資訊，包括文件的標題、在 Web 中的位置以及和其他文件的關係等。

那麼有哪些標籤是可以放在<head></head>內的呢？

首先是<base>

<base>是個很實用但是很多人會忽略的標籤。

<base> 標籤為頁面上的所有連結規定預設地址或預設目標。

通常情況下，瀏覽器會從當前文件的 URL 中提取相應的元素來填寫相對 URL 中的空白。

使用 <base> 標籤可以改變這一點。瀏覽器隨後將不再使用當前文件的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括<a>、<img>、<link>、<form> 標籤中的 URL。

屬性 值 描述
href URL 規定頁面中所有相對連結的基準 URL。（必選）
target _blank
_parent
_self
_top
framename		 在何處開啟頁面中所有的連結。（可選）

程式碼如下：

<!DOCTYPE html>
<html>
  <head>
    <base href="https://user-gold-cdn.xitu.io/" />
    <base target="_blank" />
  </head>
  <body>
    <img src="2018/12/25/167e378b5af48d99?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1" />
    <a href="2018/12/25/167e378b5af48d99?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1">跳轉</a>
  </body>
</html>
複製程式碼

根據上面的DEMO我們可以發現，在設定了<base>的url跟target之後，<img>跟<a>即使不設定base url跟跳轉行為，也可以得到預期的效果。

然後是<link>、<style>、<title>

<link>、<style>、<title>可以算是非常常用的屬性了，所以也就不多做講解，只列個屬性表就好。

<link>

<link>主要用於style檔案引入

屬性 值 描述
charset char_encoding HTML5 中不支援。
href URL 規定被連結文件的位置。
hreflang language_code 規定被連結文件中文字的語言。
media media_query 規定被連結文件將被顯示在什麼裝置上。
rel alternate
author
help
icon
licence
next
pingback
prefetch
prev
search
sidebar
stylesheet
tag		 規定當前文件與被連結文件之間的關係。
rev reversed relationship HTML5 中不支援。
sizes *height
xwidth
*any		 規定被連結資源的尺寸。僅適用於 rel="icon"。
target _blank
_self
_top
_parent
frame_name		 HTML5 中不支援。
type MIME_type 規定被連結文件的 MIME 型別。

<style>

屬性 值 描述
type text/css 規定樣式表的 MIME 型別。（必選）
media screen
tty
tv
projection
handheld
print
braille
aural
all		 為樣式表規定不同的媒介型別。（可選）

<title>

可定義文件的標題。

但是有一點可能大家不知道，或者都這麼做了，或者沒有，但是 <title> 標籤是 <head> 標籤中唯一要求包含的東西。

<meta>

最後是 <meta>，這是非常重要的一個標籤，它提供了有關當前HTML元素的元資訊 (meta-information)，比如描述、針對搜尋引擎的關鍵詞以及重新整理頻率。

<meta> 的屬性物件如下：

屬性 描述
content 設定或返回 元素的 content 屬性的值。
http-equiv 把 content 屬性連線到一個 HTTP 頭部。
name 把 content 屬性連線到某個名稱。
scheme 設定或返回用於解釋 content 屬性的值的格式。

我們首先來看content，此屬性包含http-equiv 或name 屬性的值，具體取決於所使用的值。

<meta name="keywords" content="WEB,CSS,魚頭" />
複製程式碼

其次是scheme，此屬性是用來設定或返回用於解釋 content 屬性的值的格式。例子如下：

<meta name="revised" content="2019-04-03" scheme="YYYY-MM-DD" />
複製程式碼

有趣的是，MDN上有這麼一段描述：

Notes: Do not use this attribute as it is obsolete. There is no replacement for it as there was no real usage for it. Omit it altogether.

意思就是不要用這屬性，因為這屬性並沒什麼用處。: )

然後是name，此屬性定義文件級後設資料的名稱。值得注意的是，如果定義的後設資料設定了itemprop, http-equiv or charset ，就不能再設定name了。

name的值含義如下

值 描述
application-name 定義正執行在該網頁上的網路應用名稱
author 文件作者
description 其中包含頁面內容的簡短和精確的描述。一些瀏覽器，如Firefox和Opera，將其用作書籤頁面的預設描述。
generator 包含生成頁面的軟體的識別符號。
keywords 包含與逗號分隔的頁面內容相關的單詞。
referrer 控制所有從該文件發出的 HTTP 請求中HTTP Referer 首部的內容。
others 其他的內容。

詳細name值，可以訪問developer.mozilla.org/zh-CN/docs/…。

最後我們來看看http-equiv，此屬性把content屬性連線到HTTP頭部。

值 描述
content-security-policy 允許站點管理者在指定的頁面控制使用者代理的資源。除了少數例外，這條政策將極大地指定服務源 以及指令碼端點。這將幫助防止跨站指令碼攻擊。
default-style 這個屬性指定了在頁面上使用的首選樣式表. content屬性必須包含<link> 元素的標題, href屬性連結到CSS樣式表或包含CSS樣式表的<style>元素的標題。
refresh 這個屬性指定如果<content>只包含一個正整數，則是重新載入頁面的時間間隔(秒)，包含一個正整數並且跟著一個字串,則是重定向到指定連結的時間間隔(秒)。

詳細http-equiv值，可以訪問developer.mozilla.org/zh-CN/docs/…。

body

<body>標籤記憶體放文件的內容。<html>內可使用的標籤大概有357個，其中MDN給**<body>**內的元素分了11類。有需要了解的可參考developer.mozilla.orgzh-CN/docs/Web/HT…。

按照MDN的劃分，一共有以下11類標籤：

1. 內容分割槽：

內容分割槽元素允許你將文件內容從邏輯上進行組織劃分。

2. 文字內容

使用 HTML 文字內容元素來組織在開標籤 `` 和閉標籤 </body> 裡的塊或章節的內容。這些元素能標識內容的宗旨或結構，而這對於 accessibility 和 SEO 很重要。

3. 內聯文字語義

使用 HTML 內聯文字語義（Inline text semantics）定義一個單詞、一行內容，或任意文字的語義、結構或樣式。

4. 圖片和多媒體

HTML 支援各種多媒體資源，例如影像，音訊和視訊。

5. 內嵌內容

除了常規的多媒體內容，HTML 可以包括各種其他的內容，即使它並不容易互動。

6. 指令碼

為了建立動態內容和 Web 應用程式，HTML 支援使用指令碼語言，最突出的就是 JavaScript。某些元素支援此功能。

7. 編輯標識

這些元素能標示出某個文字被更改過的部分。

8. 表格內容

這裡的元素用於建立和處理表格資料。

9. 表單

HTML 提供了許多可一起使用的元素，這些元素能用來建立一個使用者可以填寫並提交到網站或應用程式的表單。

10. 互動元素

HTML 提供了一系列有助於建立互動式使用者介面物件的元素。

11. Web元件

Web 元件是一種與 HTML 相關聯（HTML-related）的技術，簡單來說，它允許建立自定義元素，並如同普通的 HTML 一樣使用它們。此外，你甚至可以建立經過自定義的標準 HTML 元素。

標籤語義化

語義化到底重不重要？

有的人認為，在可以“競價排名”以及“軟體介面”的場景多於“富文字”的前提下，HTML語意並不重要。只要div、span、a標籤差不多就能走天下了，最有意思的是，百度百科跟維基百科這類文件類網站，HTML結構大多數都是上述的情況。

但是，標籤語義化真的不重要嗎？

這個問題魚頭暫時不回答，但會在後續的文章中體現並實踐魚頭的想法。如果你對這個問題感興趣，也可以通過留言或者加魚頭好友或者進魚頭的微信群來討論，聯絡方式在文章底部。

我們知道，在HTML中，每個標題是通過標題標籤來定義的，標題標籤一共有6個，分別是：h1~6。例子如下：

<h1>我是一級標題</h1>
<h2>我是二級標題</h2>
<h3>我是三級標題</h3>
<h4>我是四級標題</h4>
<h5>我是五級標題</h5>
<h6>我是六級標題</h6>
複製程式碼

如果是連續的標題，則可以用 <hgroup> 來連線：

<hgroup>
  <h1>我是一級標題</h1>
    <h2>我是二級標題</h2>
    <h3>我是三級標題</h3>
    <h4>我是四級標題</h4>
    <h5>我是五級標題</h5>
    <h6>我是六級標題</h6>
</hgroup>
複製程式碼

如果是段落內容，則用 <p>：

<p>我是段落內容</p>
複製程式碼

如果我們要列一個列表則可以用 <ol></ol> 或 <li></li> 。如果只是要標記專案，我們可以用 <li></li> ，例子如下：

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>奧特曼</li>
  <li>橙子</li>
</ul>
複製程式碼

若是標記順序，則用 <ol></ol> ，例子如下：

<ol>
  <li>向前走300米</li>
  <li>右轉</li>
  <li>向前走300米</li>
  <li>右轉</li>
  <li>向前走300米</li>
</ol>
複製程式碼

當然我們也可以按需巢狀。

<ol>
<li>先用蛋白一個、鹽半茶匙及澱粉兩大匙攪拌均勻，調成“醃料”，雞胸肉切成約一釐米見方的碎丁並用“醃料”攪拌均勻，醃漬半小時。</li>
  <li>用醬油一大匙、澱粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調拌均勻，調成“綜合調味料”。</li>
  <li>雞丁醃好以後，色拉油下鍋燒熱，先將雞丁倒入鍋內，用大火快炸半分鐘，炸到變色之後，撈出來瀝乾油汁備用。</li>
  <li>在鍋裡留下約兩大匙油，燒熱後將切好的幹辣椒下鍋，用小火炒香後，再放入花椒粒和蔥段一起爆香。隨後雞丁重新下鍋，用大火快炒片刻後，再倒入“綜合調味料”繼續快炒。</li>
  <ul>
    <li>如果你採用正宗川菜做法，最後只需加入花生米，炒拌幾下就可以起鍋了。</li>
    <li>如果你在北方，可加入黃瓜丁、胡蘿蔔丁和花生米，翻炒後起鍋。</li>
  </ul>
</ol>
複製程式碼

在我們平常說話的時候，為了突出重點，我們往往會強調某些詞，就如如下的例子：

<p>我<em>非常</em>喜歡加班</p>
複製程式碼

如果是重音強調，則：

<p>魚頭，明天<strong>別遲到</strong>了</p>
複製程式碼

在我們身邊任何的地方都是非常需要語義學的，我們依靠過去的學習經驗，通過所見的物體就可以知道它代表的意義。例如“紅燈停，綠燈行”。如果這個語義出錯或者弄反了，造成的影響是不堪設想的。

同樣的道理，我們需要確保使用了正確的元素來給予內容正確的意思、作用以及外形。

每個標籤都有自己的使用場景，如果要全部列出來，也不是一篇文章能寫得完的。更多的需要能堅持看到這裡的你來探索，當然也非常歡迎你來跟魚頭一起討論標籤語義化的問題。

參考資料：

HTML

HTML（超文字標記語言）

HTML元素參考

HTML元素

HTML 文書處理基礎

HTML 元素和有效的 DTD

HTML全域性屬性

HTML <head> 標籤

HTML DOM Meta 物件

MDN <meta> 標籤

重學前端

HTML4

HTML5

HTML5.1

10個HTML 5.1的新功能

HTML5.2

HTML5.3

html6test

HTML6提案

ARIA in HTML

文件物件模型

如果存在呢？HTML6-廣義概念

【Hello CSS】系列

【Hello CSS】是以CSS基礎概念為主題的系列文章，旨在幫助大家更深刻地瞭解並且提高CSS在各位開發者心目中的地位。由於魚頭我水平有限，文筆有限，如果各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收穫，這就讓魚頭我喜不自勝了！



如果你也喜歡`CSS`，喜歡探討技術，或者對本文，本系列有任何的意見或建議，魚頭非常希望你能加入一個有趣的微信群 — “進擊的CSS”。你可以掃描下方二維碼，新增魚頭微信，新增時註明 “加群”，如果你覺得我的文章有趣，歡迎關注微信公眾號“魚頭的Web海洋”。衷心希望可以遇見你。

【Hello CSS】第四章-HTML的標籤與語意

下一篇

第五章-CSS的選擇器與函式

歷史文章傳送門

  1. 序章-起源

  2. 第一章-CSS的語法與工作流

  3. 第二章-CSS的邏輯屬性與盒子模型

  4. 第三章-瀏覽器的檢視與座標

  5. 第四章-HTML的標籤與語意

相關文章