Web前端開發最佳實踐（6）：過期的塊狀元素和行內元素

時間 2019-11-20

標籤 web 前端開發最佳實踐過期塊狀元素欄目 HTML 简体版

原文原文鏈接

前言

前端程序員在學習HTML的過程當中，確定接觸過頁面元素的兩個基本類型：塊狀元素和行內元素，也有大量的技術文章或者教程在介紹這兩個概念。但這兩個HTML元素相關的概念從字面上卻和CSS樣式有着很深的聯繫，這種聯繫有悖於Web規範中一直倡導的表現和樣式分離這一核心思想。在HTML5新規範中，已經淡化了元素的這兩種分類，取而代之的方案是更具備語義的HTML元素分類方式。在介紹新分類以前，先來談談塊狀元素和行內元素這兩個概念。html

塊元素和行內元素

在W3C制定的HTML4.01規範中，有關內容模型部分詳細地介紹了塊狀元素和行內元素。對於這兩種類型的元素，能夠從元素在瀏覽器中的默認渲染樣式上來進行區分，塊狀元素在頁面中單獨佔一行，即display樣式的默認值爲block，而行內元素則顯示在行中，display樣式的默認值爲inline或者inline-block。前端

常見的塊狀元素有：html5

<div>、<p>、<table>、<ul>、<ol>、<h1>~<h6> 等。常見的行內元素有：<span>、<img>、<a>、<em>、<input>、<select>等。程序員

從默認樣式上區分塊狀元素和行內元素不難，但要理解它們，還得從語義角度出發。塊狀元素能夠包含其它元素，好比p元素能夠包含文本和行內元素，<div>能夠包含文本、塊狀元素和行內元素。行內元素表示頁面內容，只能包含行內元素，不能包含塊狀元素。儘管能夠經過設置display樣式來改變行內元素和塊狀元素的默認樣式，可是其所具備的語義並不會隨着樣式的更改而更改，即行內元素設置了display樣式爲block並無把行內元素更改成塊狀元素。canvas

從字面意思來看，這兩個概念很容易混淆，不少新手並無深刻地理解這兩種元素類型的實際含義，因此不少狀況下並無正確的應用，僅僅是從頁面佈局的角度出發使用塊狀元素和行內元素。大量的技術文章也誤導了不少新手，搜索有關塊狀元素和行內元素的文章，基本上都是在討論這兩種類型元素的外在默認樣式，其實質上討論的是兩個display樣式值block和inline的區別。從樣式角度理解原生的元素，這有點本末倒置。在前面的章節中反覆強調，在構建頁面HTML過程當中，首先考慮的是語義，判斷使用的元素合適與否，就是要判斷元素對應的標籤是否符合當前元素所要表達的語義，而不是元素的樣式是否是更符合當前的UI設計。瀏覽器

HTML5中的定義了內容模型，淡化了塊元素和行內元素

爲了消除塊狀元素和行內元素這兩個概念引發的混淆，在HTML5規範中刻意淡化了塊狀元素和行內元素的定義，並按照元素具體的語義從新劃分了元素的類型。HTML5中的分類比HTML4.01中的分類更具體，總共分爲七類，每種元素並不限定於某一類型，有可能某個元素屬於多個類型，如下是具體的分類：ide

元數據式內容（Metadata content）：<base>、<command>、<link>、<meta>等
流式內容（Flow content）：<span>、<div>等。這個分類基本包括了HTML4.01中的塊狀元素和行內元素。
章節式內容：<article>、<aside>、<nav>以及<section>
標題式內容：<h1>~<h6>、<hgroup>。
段落式內容：<span>、<img>等。基本上等同於HTML4.01中行內元素的範圍。
嵌入式內容：<img>、<iframe>、<svg>、<audio>、<video>、<canvas>等。
交互式內容：<a>、<button>、<select>、<input>等。

規範中還提供了一張各元素類型之間的包含關係圖，如圖4-11所示。svg

圖 HTML5規範中，標籤類型關係圖佈局

從內容模型上來講，在HTML4.01規範的內容模型部分還規定了塊狀元素和行內元素中內容的限制，好比行內元素不能夠包含塊狀元素，某些塊狀元素只能包含行內元素和文字，某些塊狀元素則能夠包含塊狀元素、行內元素和文字等。更混亂的是在HTML4.01 Transitional模式下和Strict模式下的規則還不徹底相同。HTML5規範中結束了這種混亂的局面，而且從實際應用需求出發從新定義了內容模型。舉一個例子，假設在頁面中有一塊區域須要整個添加連接，應該怎麼辦？a元素在HTML4.01中屬於行內元素，按照HTML4.01定義的內容模型規則，行內元素是不可以包含塊狀元素的，假設區域的HTML代碼以下：學習

<h1>標題<h1>
<div>正文內容</div>

在HTML4.01規範中，只能在<h1>元素和<div>元素內部添加<a>元素，並把文本放置在<a>元素內。

<h1><a href=detail.html>標題</a><h1>
<div><a href=detail.html>正文內容</a></div>

但在HTML5中，能夠這樣添加：

<a href=detail.html>
    <h1>標題<h1>
    <div>正文內容</div>
</a>

結論

HTML5中<a>元素能夠包含塊狀元素了，這樣的定義徹底是爲了解決現實問題，拋棄了HTML4.01中規定的內容模型。更多有關內容模型的差別，能夠查看W3C官網上有關HTML5規範和以前規範的差別的文章。

前端開發者在之後的前端開發中無須受這兩個概念對應的內容模型規則的束縛，應該結合實際的頁面設計需求從新認識HTML5規範中的內容模型，並完全拋棄塊狀元素和行內元素這兩個概念。

Web前端開發最佳實踐（6）：過期的塊狀元素和行內元素

前言

塊元素和行內元素

HTML5中的定義了內容模型，淡化了塊元素和行內元素

結論

附錄