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

時間 2019-12-05

標籤 Hello CSS 第四 html 標籤語意欄目 HTML 简体版

原文原文鏈接

做者：陳大魚頭

github： KRISACHAN

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

咱們在序章的開頭就簡單的講解了HTML的誕生歷史，本篇不做詳細講解，有興趣的能夠去看wikipedia。html

HTML大事記

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

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

魚頭注：上面某些信息看得真讓人發愁。。。。。。html5

HTML標籤

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

此刻正在看這篇文章的你估計會以爲：「HTML有什麼好說的，天天都寫，鍵盤上div那幾個字母都要被我按爛了，這隻有初學者才須要學。」github

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

咦，不對，其實在魚頭看來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](krissarea.gitee.io/blog/css /head-base.html)咱們能夠發現，在設置了<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>
複製代碼

在咱們身邊任何的地方都是很是須要語義學的，咱們依靠過去的學習經驗，經過所見的物體就能夠知道它表明的意義。例如「紅燈停，綠燈行」。若是這個語義出錯或者弄反了，形成的影響是不堪設想的。

一樣的道理，咱們須要確保使用了正確的元素來給予內容正確的意思、做用以及外形。

每一個標籤都有本身的使用場景，若是要所有列出來，也不是一篇文章能寫得完的。更多的須要能堅持看到這裏的你來探索，固然也很是歡迎你來跟魚頭一塊兒討論標籤語義化的問題。

參考資料：

【Hello CSS】系列

【Hello CSS】是以CSS基礎概念爲主題的系列文章，旨在幫助你們更深入地瞭解而且提升CSS在各位開發者心目中的地位。因爲魚頭我水平有限，文筆有限，若是各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會很是感謝的；若是經過文章有任何想法或疑問，也但願各位能積極留言，咱們互相探討；若是經過本系列文章有所收穫，這就讓魚頭我喜不自勝了！

若是你也喜歡 CSS，喜歡探討技術，或者對本文，本系列有任何的意見或建議，你能夠掃描下方二維碼，關注微信公衆號「 魚頭的Web海洋」，隨時與魚頭互動。歡迎！衷心但願能夠碰見你。