聲明本系列文章內容全部梳理自以下四個來源：《HTML5權威指南》《JavaScript權威指南》 "MDN web docs" "Github:smyhvae/web" 作為一個前端小白，入門跟著這四個來源學習，感謝作者的分享，在其基礎上，通過自己的理解，梳理出的知識點，或許有遺漏，或許有些理 ...

本篇文章已授權微信公眾號 dasu_Android（大蘇）獨家發佈

聲明

本系列文章內容全部梳理自以下四個來源：

《HTML5權威指南》
《JavaScript權威指南》
MDN web docs
Github:smyhvae/web

作為一個前端小白，入門跟著這四個來源學習，感謝作者的分享，在其基礎上，通過自己的理解，梳理出的知識點，或許有遺漏，或許有些理解是錯誤的，如有發現，歡迎指點下。

正文-HTML標簽

本文接著來學習 HTML 的基本標簽，下麵是我自己對標簽進行的劃分，《HTML權威指南》中將標簽類別劃分成了很多種，比如：內容分組，文檔分節，表單七七八八等等。

但我按照自己個人的理解習慣，對總的標簽劃分成三類：修飾文檔結構的標簽、修飾文本內容標簽、容器類標簽。

修飾文檔結構的標簽大多用於表示一份標準、完整的HTML文檔的一些標簽，以及可放於<head> 內的一些標簽。

修飾文本內容標簽，大意是說，這些標簽是直接用於標記文本內容，賦予文本內容某些語義行為，比如 <a> 賦予超鏈接語義，<h1> 賦予了一級標題語義等等。這個類別有些類似於 Android 中表示某個 View 的標簽，通俗來講，這些標簽可直接使用在文本內容上了。

容器類標簽，並不是真正意義上的容器，而是說，這類標簽主要的作用是用來包含其他標簽的，但並不是說，只能用來包含其他標簽，也可直接對文本內容標記。如 <nav>, <header> 這類表示某一塊區域的標簽。

我自己個人將其常用的標簽劃分成三大類，當然不是很準確，書中劃分得更細，但結合 Android 中一些共性的概念，我個人覺得劃分成這三類後，我較容易理解各個標簽用途：

1. 修飾文檔結構

首先來看份 HTML 的大體上的基本結構：

<!DOCTYPE html>   <!--聲明這是一份H5文檔-->
<html >           <!--HTML文檔內容開始-->
<head>
    <!--在<head>標簽中聲明文檔的各種元數據-->
    <!--該部分內容是給瀏覽器看的--> 
</head> 
<body>
    <!--<body>標簽內為文檔的文本內容-->    
    <!--該部分內容是給用戶看的-->
</body>
</html>

所以，這些標簽用途基本就是用於構建一份基本的 HTML 文檔結構，下麵看看具體介紹：

<!DOCTYPE>

準確的說，<!DOCTYPE> 並不是 HTML 標簽，它是聲明 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。

在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因為 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。

HTML5 不基於 SGML，所以不需要引用 DTD。

如 H5中用法：

<!DOCTYPE html>

HTML 4 中用法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

每一份 HTML 文檔內容的根節點，表示文檔內容的開始

文檔內容包括兩部分：頭部聲明 <head> 和文本內容 <body>

<head>

HTML 文檔的頭部聲明，用於聲明該文檔的一些屬性，以及一些元數據，<head> 內部的內容是用於給瀏覽器看的，並不是用於給用戶看的，瀏覽器通過 <head> 信息，知曉這份文檔引用了哪些外部資源文件，使用的哪些屬性。

可在 <head> 中使用的標簽並不多：

<head>
<base href="http://www.dasu.">         <!--設置基準URL-->
    <meta charset="UTF-8">             <!--聲明文檔所使用的編碼-->
    <title>Title</title>               <!--聲明文檔的標題-->
    <base href="http://www.baidu.com"> <!--聲明文檔全局的基準URL-->
    <style type="text/css"></style>    <!--聲明內嵌類型的css樣式-->
    <link type="text/css" rel="stylesheet" href="css/nms.css">   <!--外部css-->
<script></script>          <!--JavaScript腳本-->
    <noscript></noscript>  <!--瀏覽器不支持JS情況下的處理-->
</head>

<body>

<body> 標簽用於聲明文本內容，該標簽內的內容都是用於展示給用戶看的，所以基本所有標簽都可以在 <body> 內，瀏覽器解析相應的標簽，並根據 CSS 作用到每個對象上，生成網頁呈現給用戶。

<meta>

元數據標簽，可用於聲明文檔所使用的一些元數據，用途蠻多，如下：

<meta charset="utf-8"/>       <!--聲明文檔編碼格式-->
<meta http-equiv="refresh" content="5"/>   <!--往Http頭部中增加key-value-->
<meta http-equiv="content-type" content="text/html charset=UTF-8"/>

<link>

<link rel=”stylesheet” type=”text/css” href=”styles.css”/> --外部CSS
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”/>-網頁圖標
<link rel=”prefetch” href=”/page2.html”> --預先載入page2.html文件
…

2. 修飾文本內容

<a>

<a> 標簽的作用是引導用戶從一張頁面鏈接到另一張頁面，互聯網說到底就是一張張網頁通過超鏈接 <a> 互相關聯起來的。

所以，只要不是單個頁面，只要頁面支持跳轉，那麼 HTML 文檔中就肯定有 <a> 標簽的存在，用於指定下個頁面的跳轉。

用法

<a href="http://www.baidu.com">百度</a>
<a href="index.html">首頁</a>
<a href="#myId">標題5</a>

以上是 <a> 標簽的三種用法，指定絕對路徑的鏈接，指定相對路徑的鏈接，指定文檔內的鏈接。

也就是說，<a> 標簽既可以用於指定頁面間的跳轉關聯，也可以指定頁面內的跳轉。

<base> 標簽設置的基準 url 會影響到相對路徑的拼接，預設以當前 HTML 文檔的路徑作為基準路徑。

另外新頁面的打開方式也支持多種形式配置，如：

<a href="http://www.baidu.com" target="_blank">百度</a>

通過 target 屬性來聲明新頁面的打開方式，target可以取值如下：

target	含義
_blank	在新頁面或標簽頁中打開文檔
_parent	在父窗框組（frameset）中打開文檔
_self	在當前視窗中打開文檔（預設行為）
_top	在頂層視窗打開文檔
<frame>	在指定窗框中打開文檔

<b> & <wbr>

換行標簽

<br> :表示將後續內容轉移到新行上

<wbr> :H5 新增的，表示當長度超過當前瀏覽器視窗的內容適合在此換行。

兩者都是換行，前者是強制換行，後者是建議在這裡換行，但什麼時候換行，由瀏覽器根據當前視窗大小決定，後者通常用於指定單詞的換行。

用法

<p>
    I am dasu, <wbr> and i am coding.<wbr>
    <br/>
    I am ...
</p>

<p>

<p> 標簽用於表示段落，標簽圍起來的文本內容表示一個段落。

因為瀏覽器會忽略所有的空格、縮進、換行，最多只會解析成一個空格，所以，即使文本內容的段落結構很好，但經由瀏覽器解析出來後的文本內容全部都擠到一堆。

因此，<p> 段落標簽還是很有必要的。

可以用此來標記哪些文本內容作為一個段落。

用法見上例。

<pre> & <code>

<pre> 標簽用於保留源文檔中的格式。

<code> 標簽用於表示代碼塊。

由於瀏覽器會合併空白字元，忽略掉換行，導致如果文檔中含有代碼塊時顯示不符合開發工具下的代碼格式風格。

此時，可以藉助 <pre> 標簽和 <code> 一起使用，來阻止瀏覽器合併空白字元，達到保留代碼格式的目的。

用法

<pre><code>
    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);
    }
</code></pre>

<ol> & <li>

<ol> 標簽用於表示有序列表，<li> 標簽用於表示列表中的每一項。

用法

ol1

既然是有序列表項，那麼序號的起始以及樣式是支持通過屬性設定的，如下：

ol2

通過 start 屬性設置起始的編號，通過 type 屬性設置編號的樣式，可設置的 type 樣式如下 :

ol3

如果要實現編號是非連續的，那麼可以藉助 <li> 標簽的 value 屬性實現：

ol4

註：每個 ol 列表項都是獨立存在，編號預設都從 0 開始，如果想實現不同列表項的編號連貫，或者想以跨度 2 或其他數遞增，那麼只用標簽屬性實現局限很多。這時，可考慮通過 CSS 的 ::before 選擇器實現，具體實現後續再說。

<ul> & <li>

<ul> 標簽用於表示無序列表，<li> 標簽表示列表裡的每一項.

用法

因為是無序列表，所以用法比起有序列表 <ol> 簡單很多，無需使用任何屬性，直接用無序標簽 <ul> 包含一系列子項 <li> 即可。

至於，每一項前的樣式，可通過 CSS 樣式，通過 list-style-type 屬性實現，以上樣式對應的 CSS：

ul { list-style-type: disc}

<h1> ~ <h6>

標題標簽，對應一級到六級標題。

至於每個標題具體字型大小樣式如何，取決於各個瀏覽器或者網站。

<table>

表格標簽，但貌似現在不常用了。

HTML 文檔做一個表格挺複雜的，涉及的標簽很多，如 <thead>, <tfoot>, <tbody> 等等。

但根節點總是 <table>，一份表格無外乎就是各種單元格組成，而單元格標簽為 <td>，另外，瀏覽器解析表格文本時，是以行為單位來構建表格，並不是列，所以每個單元格都需要指定位於哪一行中，行標簽為 <tr>。而所有行的單元格都是表格的主要內容，因此都在 <tbody> 標簽中。

以上是表格的最基本要素，因此一張最簡單的表格，至少需要 <table>，<tbody>，<tr>，<td> 三種標簽。

table

有時候，寫表格標簽時，如果沒有其他表頭 <thead> 部分，或者表腳 <tfoot> 時，會將 <tbody> 省略，但這並不是說就可以不用 <tbody> 標簽，而是很多瀏覽器會自動將 <tbody> 填補上，所以如果有省略 <tbody> 的場景下，使用 css 選擇器時得稍微註意一下。

<tr> & <th> & <td>

由於瀏覽器是以行為單位構建表格，所以一個表格有多少行就是通過 <tr> 標簽來控制，哪些單元格屬於哪一行，就放在那一行的 <tr> 標簽中。

雖然說表格都是由一個個的單元格組成，但單元格之間還可以繼續劃分含義，有些單元格是表示內容，而有些單元格則是表示屬性值，或者說列頭或行頭。

通常來說，這些標題類型的表格都是在第一行或第一列的單元格：

table1

這是一個很常見的二維表格，通過 <th> 和 <td> 來將表格的單元格含義區分開。

<th> ：標簽用於表示單元格的表頭

<td> ：標簽用於表格單元格的內容

既然是單元格，那麼就會存在合併單元格的現象，通俗的講也就是有些表格的大小並不是只占據一格，而是有可能多行多列。此時，可通過屬性來實現：

屬性	含義
colspan	單位數值，如1表示占據1列
rowspan	單位數值，如2表示占據2行

<thead> & <tfoot> & <tbody>

類似於 HTML 文檔有一些專門用於表明文檔結構的標簽，表格同樣有一些用於指示表格結構的標簽。引入表格結構標簽，是為了更好的區分出各個單元格的含義。

比如，<th> 標簽用來表示表頭類型的單元格，但不管是第一行的表頭，還是第一列的表頭，用的都是 <th>，那如果還想繼續劃分這個表頭是屬於第一行或者第一列時該怎麼做呢？

所以，引入了一些結構性標簽有便於對錶格各個單元格更加具體的細分，以滿足各種複雜場景。

table2

<table> : 是表格的根節點

<thead> : 用來標記表格的標題行

<tfoot> : 用來標記組成腳的行。

不用 <thead>，表格最終效果也一樣，但用了 <thead> 之後，如果 CSS 想分別作用第一行，或者第一列，這時就可以很容易的通過 thread th 以及 tbody th 來達到目的了。

所以，結合表格結構性標簽的使用，可以讓表格的結構更加明確。

<caption>

表格除了一張表格內容外，通常還會需要有表格的標題，此時用 <caption> 標簽來標記。

完整示例

table示例

<table border="1">
    <caption>工作記錄表</caption>
    <thead>
    <tr>
        <th>日期</th><th>姓名</th><th>記錄</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <th>2018-07-24</th><td rowspan="2">suxq</td><td>單元格</td>
    </tr>
    <tr>
        <th>2018-07-25</th><td>單元格</td>
    </tr>
    </tbody>
</table>

<form>

表單標簽。

表單在網頁中的角色很重要，因為表單是用來接收用戶輸入的信息並提交發送給伺服器的中間角色。

表單並不是說，流程器就呈現給用戶一張表單，反而通常呈現給用戶的只是各自輸入控制項，比如輸入框，或者勾選控制項之類的。

表單，我的理解是，瀏覽器會將用戶輸入的這些數據收集起來生成一張表單提交給服務端。

<form> 標簽則是表單的根節點。

因為表單需要收集用戶輸入的信息，以及提交服務端的時機，因此，一般來說，表單還需要有 <input> 標簽以及<button> 標簽。

一份基本的表單如下：

form1

<form> 標簽的屬性 method 用來指明發送表單數據時使用哪種方式，有兩種 get, post。

action 屬性用於指明表單數據要發送到哪裡，如果沒有設置，則預設發送到所在 HTML 文檔的地址。

<fieldset>

如果表單過於複雜，需要將各個 <input> 收集的信息進行歸類，可以使用 <fieldset> 標簽。而 <fieldset> 有個子標簽 <legend>，是用來對這個分組提供相關說明使用。

示例：

<form method="get">
    <fieldset>
        <legend>第一個</legend>
        <p>name: <input name="name"/></p>
        <p>city: <input name="city"/></p>
    </fieldset>

    <fieldset>
        <legend>第二個</legend>
        <p>name2: <input name="name1"/></p>
        <p>city2: <input name="city1"/></p>
    </fieldset>

    <button>提交</button>
</form>

form2

<button>

<button> 標簽用來標記在表單中的按鈕，但按鈕的作用有三類，可通過屬性值 type 來設置。如下：

type屬性值	含義
submit	預設值，表示按鈕的用途是提交表單
reset	表示按鈕用途是重置表單
button	表示按鈕是一個普通的按鈕，沒有任何語義

如果 <button> 標簽不放在 <form> 標簽內，那麼它就需要指定綁定的是哪個 <form> 表單，通過 form 屬性綁定 form 表單的 id，所以這種場景下，form 表單必須設置 id 屬性值。

<input>

<input> 標簽是用於收集用戶輸入的標簽，因此它的形態有各自各樣，可通過屬性 type 來設置。

另外，它有很多屬性，每個屬性都有各自的含義，一些基本的屬性需要瞭解一下。

name 屬性，用於設置該 <input> 的 key 值，value 值就是用戶的輸入，key 和 value 組合成表單中的一項用於發送給服務端。如 :

input

表明有兩個 <input> 控制項，一個 key 值為 name，一個 key 值為 city，收集用戶輸入後組成表單上傳。

不同 type 的 <input> 作用不同，分別來看下：

type="text"

預設的 <input> 的 type 值，在瀏覽器中呈現一個單行文本輸入框。

這種類型下，還可以配合一些屬性使用，如

placeholder: 數據提示，類似於 hint 功能

list: 結合 <datalist> 標簽使用，用於給出一系列輸入提示

其他還有一些屬於用於設置 <input> 是否可用，是否聚焦，寬度，輸入最大長度等等。

示例：

input2

type="password"

這類型的 <input> 在瀏覽器上的呈現跟 type=”text” 類型一致，功能也基本一致，唯一的區別就是這是個密碼框，也就是當用戶輸入數據時，在瀏覽器上是以掩飾字元替換，如···

input3

type="submit"
type="reset"
type="button"

這三種類型的用途跟 <button> 標簽一樣，所以想要設置按鈕，用 <input> 也可以，唯一的區別就是，<input> 是虛元素，也就是它沒有標記任何文本內容，而 <button> 是可以標記文本內容的。

input4

type="hidden"

該類型 <input> 瀏覽器會將其隱藏，不顯示在網頁上。通常是用於一些需要傳給服務端的數據，但又沒有必要讓用戶知道的場景下的使用。如：

<input type="hidden" name="name_id" value="123456"/>    
<input name="name"/>

如上，用戶只需輸入名字信息，但提交給服務端時還需要一個 name_id 信息，這個數據沒必要讓用戶知道，此時可以通過 hidden 來實現。

type="image"

該類型的 <input> 其實就是個圖片按鈕。跟 <img> 標簽的區別也就是，這個是可點擊的，<img> 只是將圖片嵌入進來：

<input type="image" src="https://upload-images.jianshu.io/upload_images/5687349-d9d7ce1fec758d8c.png"/>

input5

當在 form 表單中有 type=”image” 類型的 <input> 時，點擊這張圖片，發送給服務端的信息是點擊的坐標點。

type="file"

該類型的 <input> 可以讓用戶選擇本地文件：

input6

type="checkbox"

覆選框，示例：

input7

type="radio"

多選框，通常配合 <fieldset> 一起使用，將同類型的集合管理在一起。當然，不用也可以。

input8

type="number"
type="email"
type="tel"
type="url"
type="color"
...

這類 type 的 <input>，用途只是用於限定用戶的輸入格式，比如 number，這個輸入框就只能輸入數字。

<iframe>

HTML 文檔中是可以嵌入其他 HTML 文檔的，通過 <iframe> 標簽標記。

<iframe src="index.html" width="500" height="500"></iframe>

通過src屬性設定目標HTML文檔地址，width,height設置區域大小。

<img>

基本每個網頁都會有圖片，在 HTML 中嵌入一張圖片用 <img> 標簽，跟 Android 中的 ImageView 控制項很類似，同樣需要指定圖片來源，區域寬高。

<img src="https://upload-images.jianshu.io/upload_images/5687349-d9d7ce1fec758d8c.png" width="300" height="300">

3. 容器類

容器類標簽是我自行對其進行的劃分，並不是說，這類標簽只能用於當容器使用，只能用於包含其他標簽，而是說，常見的用法，這類標簽基本都是表示具有某種含義的某一塊區域，具體這塊區域內既可以包含各種標簽，也可以直接是文本內容。

<span> & <div>

都是通用標簽，沒什麼具體的語義

<span> : 標簽通常用於標記段落中的某塊文本內容，然後通過該標簽，可以單獨為這塊文本內容增加 CSS 樣式

<div> : 標簽一般用於，將屏幕某塊區域劃分出來後，用該標簽標記後可通過選擇器作用自定義的 CSS 樣式。

<section>

<section> 標簽用於表示文檔中的某一節，其實也就是某一塊區域，這塊區域有自己單獨獨立的含義。通俗的理解，有些類似於第一節，第二節的概念。

每一節 <section> 都是相互獨立的，因此方便各節裡面獨自使用 <headler> 和 <footer>。

section

<header> & <footer>

<header> : 標簽表示某一節的首部，像某些網頁通常會有一些 Logo 之類的首部信息。

<footer> : 標簽表示某一節的尾部，最常見的基本每個網頁尾部都會有版權信息，作者介紹，相關鏈接，免責聲明等信息，這部分信息都適用於放在尾部標簽 <footer> 里。

例如：<header>

header

footer

<nav>

<nav> 標簽表示文檔中某一個區域，它包含著到其他頁面或者同一頁面的其他部分的鏈接。

直譯其實也就是導航的作用。

nav

小結

常見的標簽基本就這些了，當然，這裡並沒有列出一些 HTML5 新增的標簽，因為剛入門，對於那些標簽的使用場景也不熟悉，總之，瞭解以上的標簽，基本足夠查看任意個網站的源代碼了。

另外，如有需要，再去查找具體標簽即可：

https://developer.mozilla.org/zh-CN/docs/Web/HTML

大家好，我是 dasu，歡迎關註我的公眾號（dasuAndroidTv），如果你覺得本篇內容有幫助到你，可以轉載但記得要關註，要標明原文哦，謝謝支持~

前端入門2-HTML標簽

聲明