TML 塊元素

大多數 HTML 元素被定義為塊級元素或內聯元素。

編者注：“塊級元素”譯為 block level element，“內聯元素”譯為 inline element。

塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。

例子：<h1>, <p>, <ul>, <table>

HTML 內聯元素

內聯元素在顯示時通常不會以新行開始。

例子：<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器。

<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。

如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。

<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。

定義和用法

<div> 可定義文檔中的分區或節（division/section）。

<div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。

如果用 id 或 class 來標記 <div>，那么該標簽的作用會變得更加有效。

用法

<div> 是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現。可以通過 <div> 的 class 或 id 應用額外的樣式。

不必為每一個 <div> 都加上類或 id，雖然這樣做也有一定的好處。

可以對同一個 <div> 元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標識單獨的唯一的元素。

HTML <span> 元素

HTML <span> 元素是內聯元素，可用作文本的容器。

<span> 元素也沒有特定的含義。

當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性。

定義和用法

<span> 標簽被用來組合文檔中的行內元素。

如果不對 span 應用樣式，那么 span 元素中的文本與其他文本不會任何視覺上的差異。盡管如此。

可以為 span 應用 id 或 class 屬性，這樣既可以增加適當的語義，又便于對 span 應用樣式。

可以對同一個 <span> 元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標識單獨的唯一的元素。

HTML:

<p class="tip"><span>提示：</span>... ... ...</p>

CSS:

p.tip span {
	font-weight:bold;
	color:#ff9955;
	}

希望以上可以解決你們心中的一些疑惑，其中可能會有不對的地方或是需要改進的地方，歡迎留言糾正。感覺還不錯歡迎關注收藏轉載哦

TML中的span標記和div標記

在使用css排版網頁時，span和div常用的兩個的標記。利用這個兩個標記，加上css樣式控制，可以實現很復雜的網頁效果，下面為大家詳細講解一下他們區別和使用。

span和div概念區別和相似點

div標記是html3.0時提出來的，但是不常用，直到css的出現才慢慢變得應用廣泛起來。HTML4.0以后span才被引入，主要針對樣式表設計的。div與之間可以理解成一個容器，這個容器可以放段落、標題、圖片等各種HTML元素。div與之前的內容可看做一個獨立內容的對象，對于css的控制。先需要對div控制，再對div中各標記的元素再進行控制。

span標記與div標記一樣，作為容器標記廣泛應用在HTML中。span與中間同樣可以容納各種html元素，span與中間也可以視為獨立的對象。span和div兩個標記都可以獨立出區塊，這一點沒有很大的區別。

span和div功能區別

span和div區別在于，div是一個塊級元素，它包含的元素會自動換行。而span是行內元素，在它的前后不會換行。span沒有結構上的意義，只是單純的應用樣式，其他元素不適合時，就可以使用span元素。span可以作為div的子元素，但div不能是span的子元素，如果出現span中出現div不符合ws3c的頁面標準。

span和div使用區別

span元素寬度是被包圍的內容寬度決定，不建議給span設置寬度屬性width，可以給span設置margin值，設置與父元素之前的距離。span可以通過css聲明（display:block）轉換為塊元素，想對一行中的文字或圖片單獨設置樣式，而又由不需要換行的條件下又不影響其他行內其他內容，span可以很好解決這些問題。

每天一個知識點，每日寄語“不論你在什么時候開始，重要的是開始之后就不要停止。”

天這篇是我們正式開篇的第一篇文章，我想和你聊聊 HTML。

我猜屏幕那一邊的你估計會說：“HTML 我很熟悉了，每天寫，這不是初級程序員才學的內容

么，這我還能不會嗎？”

其實在我看來，HTML 并不簡單，它是典型的“入門容易，精通困難”的一部分知識。深刻理

解 HTML 是成為優秀的前端工程師重要的一步。

我們在上一篇文章中講到了，HTML 的標簽可以分為很多種，比如 head 里面的元信息類標

簽，又比如 img、video、audio 之類的替換型媒體標簽。我今天要講的標簽是：語義類標簽。

語義類標簽是什么，使用它有什么好處？

語義類標簽也是大家工作中經常會用到的一類標簽，它們的特點是視覺表現上互相都差不多，

主要的區別在于它們表示了不同的語義，比如大家會經常見到的 section、nav、p，這些都是

語義類的標簽。

語義是我們說話表達的意思，多數的語義實際上都是由文字來承載的。語義類標簽則是純文字

的補充，比如標題、自然段、章節、列表，這些內容都是純文字無法表達的，我們需要依靠語

義標簽代為表達。

在講語義之前，我們來說說為什么要用語義。

現在我們很多的前端工程師寫起代碼來，多數都不用復雜的語義標簽， 只靠 div 和 span 就能

走天下了。

這樣做行不行呢？毫無疑問答案是行。那這樣做好不好呢？按照正確的套路，我應該說不好，

但是在很多情況下，答案其實是好。

這是因為在現代互聯網產品里，HTML 用于描述“軟件界面”多過于“富文本”，而軟件界面

里的東西，實際上幾乎是沒有語義的。比如說，我們做了一個購物車功能，我們一定要給每個

購物車里的商品套上 ul 嗎？比如說，加入購物車這個按鈕，我們一定要用 Button 嗎？

實際上我覺得沒必要，因為這個場景里面，跟文本中的列表，以及表單中的 Button，其實已

經相差很遠了，所以，我支持在任何“軟件界面”的場景中，直接使用 div 和 span。

不過，在很多工作場景里，語義類標簽也有它們自己無可替代的優點。正確地使用語義標簽可

以帶來很多好處。語義類標簽對開發者更為友好，使用語義類標簽增強了可讀性，即便是在沒

有 CSS 的時候，開發者也能夠清晰地看出網頁的結構，也更為便于團隊的開發和維護。除了

對人類友好之外，語義類標簽也十分適宜機器閱讀。它的文字表現力豐富，更適合搜索

引擎檢索（SEO），也可以讓搜索引擎爬蟲更好地獲取到更多有效信息，有效提升網頁的搜

索量，并且語義類還可以支持讀屏軟件，根據文章可以自動生成目錄等等。不過，不恰當地使

用語義標簽，反而會造成負面作用。這里我們舉一個常見的誤區作為例子。我們都知道 ul 是

無序列表，ol 是有序列表，所以很多接觸過語義這個概念，半懂不懂的前端工程師，特別喜歡

給所有并列關系的元素都套上 ul。實際上， ul 是長成下面的這種樣子的 (以下來自 HTML 標準)。

I have lived in the following countries:

• Switzerland
• Norway
• United Kingdom
• United States

ul 多數出現正在行文中間，它的上文多數在提示：要列舉某些項。但是，如果所有并列關系都

用 ul，會造成大量冗余標簽。錯誤地使用語義標簽，會給機器閱讀造成混淆、增加嵌套，給

CSS 編寫加重負擔。所以，對于語義標簽，我的態度是：“用對”比“不用”好，“不

用”比“用錯”好。當然了，我覺得有理想的前端工程師還是應該去追求“用對”它們。

與 JavaScript 這樣嚴格的編程語言相比，HTML 中語義標簽的使用更接近我們平常說話用的

自然語言。我們說話并沒有唯一的標準措辭，語義標簽的使用也是一樣。下面，我挑選了幾種

（我認為）比較重要的語義標簽使用場景，來為你介紹一下。

作為自然語言延伸的語義類標簽其實語義問題不僅僅屬于理科，它還是個文科問題。所以我們

這里講語義標簽的使用的第一個場景，也是最自然的使用場景，就是：作為自然語言和

純文本的補充，用來表達一定的結構或者消除歧義。

我們先來看看“表達一定的結構”這個場景。在日語中，有一個語法現象叫做：ルビ，它的讀

音是 ruby（著名的 ruby 語言就是據此命名的），它中文的意思大約類似于注音或者意思的注

解，它的形式可以看下圖：圖中的例子選自動畫片《某科學的超電磁炮》第二季第一話。圖中

把 teleport 放在空間移動上方的用法，就是日文中 ruby 的用法。“空間移動”是動畫中白井

黑子的技能，這里動畫字幕上寫的是“空間移動”，動畫里的臺詞則用了英文發

音“Teleport”，這里就形成了一個使用

ruby 的場景。ruby 的這個形式，在中國的網友中間最近被玩出了新花樣，比如表情包。

有時候微信聊天，不能用 ruby 這樣的東西真的是好急啊，只好用括號代替，效果真是差了不

少。在 HTML5 中，就引入了這個表示 ruby 的標簽，它由 ruby、rt、rp 三個標簽來實現。

所以說，這些情況里存在的語義，其實原本就存在了，只是我們用純文字是沒法表達的，

HTML作為一種“超文本”語言，支持這些文字表達就是必要的了。還有一種情況是，HTML

的有些標簽實際上就是必要的，甚至必要的程度可以達到：如果沒有這個標簽，文字會產生歧

義的程度。

這里我們可以介紹一下 em 標簽。

我們看看這句話，

1. 今天我吃了一個蘋果.

再比如：

昨天我吃了一個香蕉。

今天我吃了一個蘋果。

看上去它很清楚，但是實際上，這句話放到不同上下文中，可能表達完全不

同的意思。

昨天我吃了兩個蘋果。

今天我吃了一個蘋果。

試著讀一讀，這兩段里面的“今天我吃了一個蘋果”，你是不是發現讀音不自覺地發生了變化？

實際上，不僅僅是讀音，這里的意思也發生了變化。前一段中，表示我今天吃的是蘋果，而不是別的什么東西，后一段中，則表示我今天只吃了一個蘋果，沒有多吃。

當沒有上下文時，如何消除歧義呢？這就要用到我們的 em 標簽了。em 表示重音：

通過 em 標簽，我們可以消除這樣的歧義。

一些文章常常會拿 em 和 strong 做對比，實際上，我們只要理解了 em 的真正意思，它和

strong 可謂天差地別，并沒有任何混淆的可能。

作為標題摘要的語義類標簽

介紹完自然語言的語義場景后，我想介紹的另一個語義重要使用場景，就是文章的結構。中國古

代小說就形成了“章 - 回”的概念，西方的戲劇也有幕的區分，所以人類的自然語言作品也是如出一轍。

HTML 也應該支持這樣的需求。HTML 語義標簽中，有不少是用于支持這樣的結構的標簽。

語義化的 HTML 能夠支持自動生成目錄結構，HTML 標準中還專門規定了生成目錄結構的算

法，即使我們并不打算深入實踐語義，也應該盡量在大的層面上保證這些元素的語義化使用。

首先我們需要形成一個概念，一篇文檔會有一個樹形的目錄結構，它由各個級別的標題組成。這

個樹形結構可能不會跟 HTML 元素的嵌套關系一致。

這段 HTML 幾乎是平鋪的元素，但是它的標題結構是：

HTML 語義

弱語義

今天我吃了一個 <em> 蘋果 </em>。

今天我吃了 <em> 一個 </em> 蘋果。

例如：