天這篇是我們正式開(kāi)篇的第一篇文章,我想和你聊聊 HTML。
我猜屏幕那一邊的你估計(jì)會(huì)說(shuō):“HTML 我很熟悉了,每天寫(xiě),這不是初級(jí)程序員才學(xué)的內(nèi)容
么,這我還能不會(huì)嗎?”
其實(shí)在我看來(lái),HTML 并不簡(jiǎn)單,它是典型的“入門(mén)容易,精通困難”的一部分知識(shí)。深刻理
解 HTML 是成為優(yōu)秀的前端工程師重要的一步。
我們?cè)谏弦黄恼轮兄v到了,HTML 的標(biāo)簽可以分為很多種,比如 head 里面的元信息類標(biāo)
簽,又比如 img、video、audio 之類的替換型媒體標(biāo)簽。我今天要講的標(biāo)簽是:語(yǔ)義類標(biāo)簽。
語(yǔ)義類標(biāo)簽是什么,使用它有什么好處?
語(yǔ)義類標(biāo)簽也是大家工作中經(jīng)常會(huì)用到的一類標(biāo)簽,它們的特點(diǎn)是視覺(jué)表現(xiàn)上互相都差不多,
主要的區(qū)別在于它們表示了不同的語(yǔ)義,比如大家會(huì)經(jīng)常見(jiàn)到的 section、nav、p,這些都是
語(yǔ)義類的標(biāo)簽。
語(yǔ)義是我們說(shuō)話表達(dá)的意思,多數(shù)的語(yǔ)義實(shí)際上都是由文字來(lái)承載的。語(yǔ)義類標(biāo)簽則是純文字
的補(bǔ)充,比如標(biāo)題、自然段、章節(jié)、列表,這些內(nèi)容都是純文字無(wú)法表達(dá)的,我們需要依靠語(yǔ)
義標(biāo)簽代為表達(dá)。
在講語(yǔ)義之前,我們來(lái)說(shuō)說(shuō)為什么要用語(yǔ)義。
現(xiàn)在我們很多的前端工程師寫(xiě)起代碼來(lái),多數(shù)都不用復(fù)雜的語(yǔ)義標(biāo)簽, 只靠 div 和 span 就能
走天下了。
這樣做行不行呢?毫無(wú)疑問(wèn)答案是行。那這樣做好不好呢?按照正確的套路,我應(yīng)該說(shuō)不好,
但是在很多情況下,答案其實(shí)是好。
這是因?yàn)樵诂F(xiàn)代互聯(lián)網(wǎng)產(chǎn)品里,HTML 用于描述“軟件界面”多過(guò)于“富文本”,而軟件界面
里的東西,實(shí)際上幾乎是沒(méi)有語(yǔ)義的。比如說(shuō),我們做了一個(gè)購(gòu)物車(chē)功能,我們一定要給每個(gè)
購(gòu)物車(chē)?yán)锏纳唐诽咨?ul 嗎?比如說(shuō),加入購(gòu)物車(chē)這個(gè)按鈕,我們一定要用 Button 嗎?
實(shí)際上我覺(jué)得沒(méi)必要,因?yàn)檫@個(gè)場(chǎng)景里面,跟文本中的列表,以及表單中的 Button,其實(shí)已
經(jīng)相差很遠(yuǎn)了,所以,我支持在任何“軟件界面”的場(chǎng)景中,直接使用 div 和 span。
不過(guò),在很多工作場(chǎng)景里,語(yǔ)義類標(biāo)簽也有它們自己無(wú)可替代的優(yōu)點(diǎn)。正確地使用語(yǔ)義標(biāo)簽可
以帶來(lái)很多好處。語(yǔ)義類標(biāo)簽對(duì)開(kāi)發(fā)者更為友好,使用語(yǔ)義類標(biāo)簽增強(qiáng)了可讀性,即便是在沒(méi)
有 CSS 的時(shí)候,開(kāi)發(fā)者也能夠清晰地看出網(wǎng)頁(yè)的結(jié)構(gòu),也更為便于團(tuán)隊(duì)的開(kāi)發(fā)和維護(hù)。除了
對(duì)人類友好之外,語(yǔ)義類標(biāo)簽也十分適宜機(jī)器閱讀。它的文字表現(xiàn)力豐富,更適合搜索
引擎檢索(SEO),也可以讓搜索引擎爬蟲(chóng)更好地獲取到更多有效信息,有效提升網(wǎng)頁(yè)的搜
索量,并且語(yǔ)義類還可以支持讀屏軟件,根據(jù)文章可以自動(dòng)生成目錄等等。不過(guò),不恰當(dāng)?shù)厥?/p>
用語(yǔ)義標(biāo)簽,反而會(huì)造成負(fù)面作用。這里我們舉一個(gè)常見(jiàn)的誤區(qū)作為例子。我們都知道 ul 是
無(wú)序列表,ol 是有序列表,所以很多接觸過(guò)語(yǔ)義這個(gè)概念,半懂不懂的前端工程師,特別喜歡
給所有并列關(guān)系的元素都套上 ul。實(shí)際上, ul 是長(zhǎng)成下面的這種樣子的 (以下來(lái)自 HTML 標(biāo)準(zhǔn))。
I have lived in the following countries:
ul 多數(shù)出現(xiàn)正在行文中間,它的上文多數(shù)在提示:要列舉某些項(xiàng)。但是,如果所有并列關(guān)系都
用 ul,會(huì)造成大量冗余標(biāo)簽。錯(cuò)誤地使用語(yǔ)義標(biāo)簽,會(huì)給機(jī)器閱讀造成混淆、增加嵌套,給
CSS 編寫(xiě)加重負(fù)擔(dān)。所以,對(duì)于語(yǔ)義標(biāo)簽,我的態(tài)度是:“用對(duì)”比“不用”好,“不
用”比“用錯(cuò)”好。當(dāng)然了,我覺(jué)得有理想的前端工程師還是應(yīng)該去追求“用對(duì)”它們。
與 JavaScript 這樣嚴(yán)格的編程語(yǔ)言相比,HTML 中語(yǔ)義標(biāo)簽的使用更接近我們平常說(shuō)話用的
自然語(yǔ)言。我們說(shuō)話并沒(méi)有唯一的標(biāo)準(zhǔn)措辭,語(yǔ)義標(biāo)簽的使用也是一樣。下面,我挑選了幾種
(我認(rèn)為)比較重要的語(yǔ)義標(biāo)簽使用場(chǎng)景,來(lái)為你介紹一下。
作為自然語(yǔ)言延伸的語(yǔ)義類標(biāo)簽其實(shí)語(yǔ)義問(wèn)題不僅僅屬于理科,它還是個(gè)文科問(wèn)題。所以我們
這里講語(yǔ)義標(biāo)簽的使用的第一個(gè)場(chǎng)景,也是最自然的使用場(chǎng)景,就是:作為自然語(yǔ)言和
純文本的補(bǔ)充,用來(lái)表達(dá)一定的結(jié)構(gòu)或者消除歧義。
我們先來(lái)看看“表達(dá)一定的結(jié)構(gòu)”這個(gè)場(chǎng)景。在日語(yǔ)中,有一個(gè)語(yǔ)法現(xiàn)象叫做:ルビ,它的讀
音是 ruby(著名的 ruby 語(yǔ)言就是據(jù)此命名的),它中文的意思大約類似于注音或者意思的注
解,它的形式可以看下圖:圖中的例子選自動(dòng)畫(huà)片《某科學(xué)的超電磁炮》第二季第一話。圖中
把 teleport 放在空間移動(dòng)上方的用法,就是日文中 ruby 的用法。“空間移動(dòng)”是動(dòng)畫(huà)中白井
黑子的技能,這里動(dòng)畫(huà)字幕上寫(xiě)的是“空間移動(dòng)”,動(dòng)畫(huà)里的臺(tái)詞則用了英文發(fā)
音“Teleport”,這里就形成了一個(gè)使用
ruby 的場(chǎng)景。ruby 的這個(gè)形式,在中國(guó)的網(wǎng)友中間最近被玩出了新花樣,比如表情包。
有時(shí)候微信聊天,不能用 ruby 這樣的東西真的是好急啊,只好用括號(hào)代替,效果真是差了不
少。在 HTML5 中,就引入了這個(gè)表示 ruby 的標(biāo)簽,它由 ruby、rt、rp 三個(gè)標(biāo)簽來(lái)實(shí)現(xiàn)。
所以說(shuō),這些情況里存在的語(yǔ)義,其實(shí)原本就存在了,只是我們用純文字是沒(méi)法表達(dá)的,
HTML作為一種“超文本”語(yǔ)言,支持這些文字表達(dá)就是必要的了。還有一種情況是,HTML
的有些標(biāo)簽實(shí)際上就是必要的,甚至必要的程度可以達(dá)到:如果沒(méi)有這個(gè)標(biāo)簽,文字會(huì)產(chǎn)生歧
義的程度。
這里我們可以介紹一下 em 標(biāo)簽。
我們看看這句話,
1. 今天我吃了一個(gè)蘋(píng)果.
再比如:
昨天我吃了一個(gè)香蕉。
今天我吃了一個(gè)蘋(píng)果。
看上去它很清楚,但是實(shí)際上,這句話放到不同上下文中,可能表達(dá)完全不
同的意思。
昨天我吃了兩個(gè)蘋(píng)果。
今天我吃了一個(gè)蘋(píng)果。
試著讀一讀,這兩段里面的“今天我吃了一個(gè)蘋(píng)果”,你是不是發(fā)現(xiàn)讀音不自覺(jué)地發(fā)生了變化?
實(shí)際上,不僅僅是讀音,這里的意思也發(fā)生了變化。前一段中,表示我今天吃的是蘋(píng)果,而不是別的什么東西,后一段中,則表示我今天只吃了一個(gè)蘋(píng)果,沒(méi)有多吃。
當(dāng)沒(méi)有上下文時(shí),如何消除歧義呢?這就要用到我們的 em 標(biāo)簽了。em 表示重音:
通過(guò) em 標(biāo)簽,我們可以消除這樣的歧義。
一些文章常常會(huì)拿 em 和 strong 做對(duì)比,實(shí)際上,我們只要理解了 em 的真正意思,它和
strong 可謂天差地別,并沒(méi)有任何混淆的可能。
作為標(biāo)題摘要的語(yǔ)義類標(biāo)簽
介紹完自然語(yǔ)言的語(yǔ)義場(chǎng)景后,我想介紹的另一個(gè)語(yǔ)義重要使用場(chǎng)景,就是文章的結(jié)構(gòu)。中國(guó)古
代小說(shuō)就形成了“章 - 回”的概念,西方的戲劇也有幕的區(qū)分,所以人類的自然語(yǔ)言作品也是如出一轍。
HTML 也應(yīng)該支持這樣的需求。HTML 語(yǔ)義標(biāo)簽中,有不少是用于支持這樣的結(jié)構(gòu)的標(biāo)簽。
語(yǔ)義化的 HTML 能夠支持自動(dòng)生成目錄結(jié)構(gòu),HTML 標(biāo)準(zhǔn)中還專門(mén)規(guī)定了生成目錄結(jié)構(gòu)的算
法,即使我們并不打算深入實(shí)踐語(yǔ)義,也應(yīng)該盡量在大的層面上保證這些元素的語(yǔ)義化使用。
首先我們需要形成一個(gè)概念,一篇文檔會(huì)有一個(gè)樹(shù)形的目錄結(jié)構(gòu),它由各個(gè)級(jí)別的標(biāo)題組成。這
個(gè)樹(shù)形結(jié)構(gòu)可能不會(huì)跟 HTML 元素的嵌套關(guān)系一致。
這段 HTML 幾乎是平鋪的元素,但是它的標(biāo)題結(jié)構(gòu)是:
HTML 語(yǔ)義
弱語(yǔ)義
今天我吃了一個(gè) <em> 蘋(píng)果 </em>。
今天我吃了 <em> 一個(gè) </em> 蘋(píng)果。
例如:
剛發(fā)現(xiàn),HTML第四章節(jié)沒(méi)有說(shuō)刪除線的標(biāo)簽,趁著馬上要12點(diǎn)的時(shí)候,趕快將刪除線標(biāo)簽補(bǔ)上。
刪除線標(biāo)簽使用 <del>和<s>, 不用多說(shuō),一般用的多的就是<del>
先上效果:
然后看下代碼:
<!DOCTYPE html>
<html lang = "en">
<title>我是江湖最后的大佬</title>
<body>
<br />
<h>我是一個(gè)<del>刪除線</del>的人</h>
<br />
</body>
</html>
然后我們用下<s>,效果是一樣的
代碼如下:
<!DOCTYPE html>
<html lang = "en">
<title>我是江湖最后的大佬</title>
<body>
<br />
<h>我是一個(gè)<s>刪除線</s>的人</h>
<br />
</body>
</html>
看看效果:
刪除線說(shuō)完了,還沒(méi)有說(shuō)下劃線。下劃線是用<ins>和<u>標(biāo)簽來(lái)實(shí)現(xiàn)的。
先看看效果:
然后看下代碼:
<!DOCTYPE html>
<html lang = "en">
<title>我是江湖最后的大佬</title>
<body>
<br />
<h>我是一個(gè)<ins>下劃線</ins>的人</h>
<br />
</body>
</html>
再使用<u>來(lái)試下:
看代碼:
<!DOCTYPE html>
<html lang = "en">
<title>我是江湖最后的大佬</title>
<body>
<br />
<h>我是一個(gè)<ins>下劃線</ins>的人</h>
<br />
<h>我是一個(gè)<u>下劃線</u>的人</h>
</body>
</html>
再看看效果:
都是一樣的展示
好了,今天先到這里
接著,我們學(xué)習(xí)下<div>和<span>標(biāo)簽的功能
<html>
<head>
<title>這是網(wǎng)頁(yè)標(biāo)題</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="keywords" content="這是關(guān)鍵字"/>
<link href="css文件路徑" rel="stylesheet"/>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
</body>
</html>
標(biāo)簽 | 含義 | 常用屬性 |
a | 超鏈接 | href / target / title |
img | 圖片 | src / alt / title / width / heiht |
h1-h6 | ||
p | ||
br | ||
hr | ||
em | ||
strong | ||
i | ||
span | ||
div |
ID | CLASS | 標(biāo)簽 |
100 | 10 | 1 |
樣式 | 含義 | 屬性值 |
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。