資訊專欄INFORMATION COLUMN
摘要：標(biāo)簽用于表示代碼塊。而所有行的單元格都是表格的主要內(nèi)容，因此都在標(biāo)簽中。引入表格結(jié)構(gòu)標(biāo)簽，是為了更好的區(qū)分出各個(gè)單元格的含義。
本篇文章已授權(quán)微信公眾號(hào) dasu_Android（大蘇）獨(dú)家發(fā)布
本系列文章內(nèi)容全部梳理自以下四個(gè)來(lái)源：
作為一個(gè)前端小白，入門(mén)跟著這四個(gè)來(lái)源學(xué)習(xí)，感謝作者的分享，在其基礎(chǔ)上，通過(guò)自己的理解，梳理出的知識(shí)點(diǎn)，或許有遺漏，或許有些理解是錯(cuò)誤的，如有發(fā)現(xiàn)，歡迎指點(diǎn)下。
本文接著來(lái)學(xué)習(xí) HTML 的基本標(biāo)簽，下面是我自己對(duì)標(biāo)簽進(jìn)行的劃分，《HTML權(quán)威指南》中將標(biāo)簽類別劃分成了很多種，比如：內(nèi)容分組，文檔分節(jié)，表單七七八八等等。
但我按照自己個(gè)人的理解習(xí)慣，對(duì)總的標(biāo)簽劃分成三類：修飾文檔結(jié)構(gòu)的標(biāo)簽、修飾文本內(nèi)容標(biāo)簽、容器類標(biāo)簽。
修飾文檔結(jié)構(gòu)的標(biāo)簽大多用于表示一份標(biāo)準(zhǔn)、完整的HTML文檔的一些標(biāo)簽，以及可放于
內(nèi)的一些標(biāo)簽。修飾文本內(nèi)容標(biāo)簽，大意是說(shuō)，這些標(biāo)簽是直接用于標(biāo)記文本內(nèi)容，賦予文本內(nèi)容某些語(yǔ)義行為，比如 賦予超鏈接語(yǔ)義， 賦予了一級(jí)標(biāo)題語(yǔ)義等等。這個(gè)類別有些類似于 Android 中表示某個(gè) View 的標(biāo)簽，通俗來(lái)講，這些標(biāo)簽可直接使用在文本內(nèi)容上了。
容器類標(biāo)簽，并不是真正意義上的容器，而是說(shuō)，這類標(biāo)簽主要的作用是用來(lái)包含其他標(biāo)簽的，但并不是說(shuō)，只能用來(lái)包含其他標(biāo)簽，也可直接對(duì)文本內(nèi)容標(biāo)記。如
我自己個(gè)人將其常用的標(biāo)簽劃分成三大類，當(dāng)然不是很準(zhǔn)確，書(shū)中劃分得更細(xì)，但結(jié)合 Android 中一些共性的概念，我個(gè)人覺(jué)得劃分成這三類后，我較容易理解各個(gè)標(biāo)簽用途：
首先來(lái)看份 HTML 的大體上的基本結(jié)構(gòu)：
所以，這些標(biāo)簽用途基本就是用于構(gòu)建一份基本的 HTML 文檔結(jié)構(gòu)，下面看看具體介紹：
準(zhǔn)確的說(shuō)， 并不是 HTML 標(biāo)簽，它是聲明 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫(xiě)的指令。
在 HTML 4.01 中， 聲明引用 DTD，因?yàn)?HTML 4.01 基于 SGML。DTD 規(guī)定了標(biāo)記語(yǔ)言的規(guī)則，這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。
HTML5 不基于 SGML，所以不需要引用 DTD。
如 H5中用法：
HTML 4 中用法：
每一份 HTML 文檔內(nèi)容的根節(jié)點(diǎn)，表示文檔內(nèi)容的開(kāi)始
文檔內(nèi)容包括兩部分：頭部聲明
和文本內(nèi)容HTML 文檔的頭部聲明，用于聲明該文檔的一些屬性，以及一些元數(shù)據(jù)，
內(nèi)部的內(nèi)容是用于給瀏覽器看的，并不是用于給用戶看的，瀏覽器通過(guò) 信息，知曉這份文檔引用了哪些外部資源文件，使用的哪些屬性。可在
中使用的標(biāo)簽并不多：
Title
元數(shù)據(jù)標(biāo)簽，可用于聲明文檔所使用的一些元數(shù)據(jù)，用途蠻多，如下：
標(biāo)簽用于指定 HTML 文檔使用了哪些外部資源文件，可以是外部的 CSS 文件，或者網(wǎng)頁(yè)圖標(biāo)，或者說(shuō)明文檔等等，如下：
--外部CSS
-網(wǎng)頁(yè)圖標(biāo)
--預(yù)先加載page2.html文件
…標(biāo)簽的作用是引導(dǎo)用戶從一張頁(yè)面鏈接到另一張頁(yè)面，互聯(lián)網(wǎng)說(shuō)到底就是一張張網(wǎng)頁(yè)通過(guò)超鏈接 互相關(guān)聯(lián)起來(lái)的。
所以，只要不是單個(gè)頁(yè)面，只要頁(yè)面支持跳轉(zhuǎn)，那么 HTML 文檔中就肯定有 標(biāo)簽的存在，用于指定下個(gè)頁(yè)面的跳轉(zhuǎn)。
百度
首頁(yè)
標(biāo)題5以上是 標(biāo)簽的三種用法，指定絕對(duì)路徑的鏈接，指定相對(duì)路徑的鏈接，指定文檔內(nèi)的鏈接。
也就是說(shuō)， 標(biāo)簽既可以用于指定頁(yè)面間的跳轉(zhuǎn)關(guān)聯(lián)，也可以指定頁(yè)面內(nèi)的跳轉(zhuǎn)。
另外新頁(yè)面的打開(kāi)方式也支持多種形式配置，如：
百度通過(guò) target 屬性來(lái)聲明新頁(yè)面的打開(kāi)方式，target可以取值如下：
| target | 含義 |
|---|---|
| _blank | 在新頁(yè)面或標(biāo)簽頁(yè)中打開(kāi)文檔 |
| _parent | 在父窗框組（frameset）中打開(kāi)文檔 |
| _self | 在當(dāng)前窗口中打開(kāi)文檔（默認(rèn)行為） |
| _top | 在頂層窗口打開(kāi)文檔 |
| 在指定窗框中打開(kāi)文檔 |
換行標(biāo)簽
:表示將后續(xù)內(nèi)容轉(zhuǎn)移到新行上
兩者都是換行，前者是強(qiáng)制換行，后者是建議在這里換行，但什么時(shí)候換行，由瀏覽器根據(jù)當(dāng)前窗口大小決定，后者通常用于指定單詞的換行。
I am dasu, and i am coding.
I am ...
標(biāo)簽用于表示段落，標(biāo)簽圍起來(lái)的文本內(nèi)容表示一個(gè)段落。
因?yàn)闉g覽器會(huì)忽略所有的空格、縮進(jìn)、換行，最多只會(huì)解析成一個(gè)空格，所以，即使文本內(nèi)容的段落結(jié)構(gòu)很好，但經(jīng)由瀏覽器解析出來(lái)后的文本內(nèi)容全部都擠到一堆。
因此，
段落標(biāo)簽還是很有必要的。
可以用此來(lái)標(biāo)記哪些文本內(nèi)容作為一個(gè)段落。
用法見(jiàn)上例。
& 標(biāo)簽用于保留源文檔中的格式。
標(biāo)簽用于表示代碼塊。由于瀏覽器會(huì)合并空白字符，忽略掉換行，導(dǎo)致如果文檔中含有代碼塊時(shí)顯示不符合開(kāi)發(fā)工具下的代碼格式風(fēng)格。
此時(shí)，可以借助
標(biāo)簽和一起使用，來(lái)阻止瀏覽器合并空白字符，達(dá)到保留代碼格式的目的。
- 用法
protected final void setMeasuredDimension(int measuredWidth, int measuredHeight) { boolean optical = isLayoutModeOptical(this); if (optical != isLayoutModeOptical(mParent)) { Insets insets = getOpticalInsets(); int opticalWidth = insets.left + insets.right; int opticalHeight = insets.top + insets.bottom; measuredWidth += optical ? opticalWidth : -opticalWidth; measuredHeight += optical ? opticalHeight : -opticalHeight; } setMeasuredDimensionRaw(measuredWidth, measuredHeight); }
&
標(biāo)簽用于表示有序列表，
- 標(biāo)簽用于表示列表中的每一項(xiàng)。
- 用法
既然是有序列表項(xiàng)，那么序號(hào)的起始以及樣式是支持通過(guò)屬性設(shè)定的，如下：
通過(guò) start 屬性設(shè)置起始的編號(hào)，通過(guò) type 屬性設(shè)置編號(hào)的樣式，可設(shè)置的 type 樣式如下 :
如果要實(shí)現(xiàn)編號(hào)是非連續(xù)的，那么可以借助
- 標(biāo)簽的 value 屬性實(shí)現(xiàn) ：
注：每個(gè) ol 列表項(xiàng)都是獨(dú)立存在，編號(hào)默認(rèn)都從 0 開(kāi)始，如果想實(shí)現(xiàn)不同列表項(xiàng)的編號(hào)連貫，或者想以跨度 2 或其他數(shù)遞增，那么只用標(biāo)簽屬性實(shí)現(xiàn)局限很多。這時(shí)，可考慮通過(guò) CSS 的 ::before 選擇器實(shí)現(xiàn)，具體實(shí)現(xiàn)后續(xù)再說(shuō)。
&
標(biāo)簽用于表示無(wú)序列表，
- 標(biāo)簽表示列表里的每一項(xiàng).
- 用法
因?yàn)槭菬o(wú)序列表，所以用法比起有序列表
簡(jiǎn)單很多，無(wú)需使用任何屬性，直接用無(wú)序標(biāo)簽
包含一系列子項(xiàng)
- 即可。
至于，每一項(xiàng)前的樣式，可通過(guò) CSS 樣式，通過(guò) list-style-type 屬性實(shí)現(xiàn)，以上樣式對(duì)應(yīng)的 CSS：
ul { list-style-type: disc}
~
標(biāo)題標(biāo)簽，對(duì)應(yīng)一級(jí)到六級(jí)標(biāo)題。
至于每個(gè)標(biāo)題具體字號(hào)樣式如何，取決于各個(gè)瀏覽器或者網(wǎng)站。
表格標(biāo)簽，但貌似現(xiàn)在不常用了。
HTML 文檔做一個(gè)表格挺復(fù)雜的，涉及的標(biāo)簽很多，如 ,
, 等等。但根節(jié)點(diǎn)總是
，一份表格無(wú)外乎就是各種單元格組成，而單元格標(biāo)簽為
，另外，瀏覽器解析表格文本時(shí)，是以行為單位來(lái)構(gòu)建表格，并不是列，所以每個(gè)單元格都需要指定位于哪一行中，行標(biāo)簽為 。而所有行的單元格都是表格的主要內(nèi)容，因此都在 標(biāo)簽中。以上是表格的最基本要素，因此一張最簡(jiǎn)單的表格，至少需要
，，
， 時(shí)，會(huì)將 省略，但這并不是說(shuō)就可以不用 標(biāo)簽，而是很多瀏覽器會(huì)自動(dòng)將 填補(bǔ)上，所以如果有省略 的場(chǎng)景下，使用 css 選擇器時(shí)得稍微注意一下。三種標(biāo)簽。 有時(shí)候，寫(xiě)表格標(biāo)簽時(shí)，如果沒(méi)有其他表頭 部分，或者表腳
& & 由于瀏覽器是以行為單位構(gòu)建表格，所以一個(gè)表格有多少行就是通過(guò)
標(biāo)簽來(lái)控制，哪些單元格屬于哪一行，就放在那一行的 標(biāo)簽中。 雖然說(shuō)表格都是由一個(gè)個(gè)的單元格組成，但單元格之間還可以繼續(xù)劃分含義，有些單元格是表示內(nèi)容，而有些單元格則是表示屬性值，或者說(shuō)列頭或行頭。
通常來(lái)說(shuō)，這些標(biāo)題類型的表格都是在第一行或第一列的單元格：
這是一個(gè)很常見(jiàn)的二維表格，通過(guò)
和 來(lái)將表格的單元格含義區(qū)分開(kāi)。 ：標(biāo)簽用于表示單元格的表頭 ：標(biāo)簽用于表格單元格的內(nèi)容 既然是單元格，那么就會(huì)存在合并單元格的現(xiàn)象，通俗的講也就是有些表格的大小并不是只占據(jù)一格，而是有可能多行多列。此時(shí)，可通過(guò)屬性來(lái)實(shí)現(xiàn)：
屬性 含義 colspan 單位數(shù)值，如1表示占據(jù)1列 rowspan 單位數(shù)值，如2表示占據(jù)2行
- & &
類似于 HTML 文檔有一些專門(mén)用于表明文檔結(jié)構(gòu)的標(biāo)簽，表格同樣有一些用于指示表格結(jié)構(gòu)的標(biāo)簽。引入表格結(jié)構(gòu)標(biāo)簽，是為了更好的區(qū)分出各個(gè)單元格的含義。
比如，
標(biāo)簽用來(lái)表示表頭類型的單元格，但不管是第一行的表頭，還是第一列的表頭，用的都是 ，那如果還想繼續(xù)劃分這個(gè)表頭是屬于第一行或者第一列時(shí)該怎么做呢？ 所以，引入了一些結(jié)構(gòu)性標(biāo)簽有便于對(duì)表格各個(gè)單元格更加具體的細(xì)分，以滿足各種復(fù)雜場(chǎng)景。
: 是表格的根節(jié)點(diǎn)
: 用來(lái)標(biāo)記表格的標(biāo)題行
: 用來(lái)標(biāo)記組成腳的行。不用 ，表格最終效果也一樣，但用了 之后，如果 CSS 想分別作用第一行，或者第一列，這時(shí)就可以很容易的通過(guò) thread th 以及 tbody th 來(lái)達(dá)到目的了。
所以，結(jié)合表格結(jié)構(gòu)性標(biāo)簽的使用，可以讓表格的結(jié)構(gòu)更加明確。
表格除了一張表格內(nèi)容外，通常還會(huì)需要有表格的標(biāo)題，此時(shí)用
標(biāo)簽來(lái)標(biāo)記。
- 完整示例
工作記錄表 日期 姓名 記錄 2018-07-24 suxq 單元格 2018-07-25 單元格