本篇文章已授權微信公衆号 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> 标簽用于表示清單中的每一項。

既然是有序清單項，那麼序号的起始以及樣式是支援通過屬性設定的，如下：

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

如果要實作編号是非連續的，那麼可以借助 <li> 标簽的 value 屬性實作：

注：每個 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> 三種标簽。

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

<tr> & <th> & <td>

由于浏覽器是以行為機關建構表格，是以一個表格有多少行就是通過 <tr> 标簽來控制，哪些單元格屬于哪一行，就放在那一行的 <tr> 标簽中。

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

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

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

<th> ：标簽用于表示單元格的表頭

<td> ：标簽用于表格單元格的内容

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

屬性
colspan	機關數值，如1表示占據1列
rowspan	機關數值，如2表示占據2行

<thead> & <tfoot> & <tbody>

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

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

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

<table> : 是表格的根節點

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

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

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

是以，結合表格結構性标簽的使用，可以讓表格的結構更加明确。

<caption>

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

完整示例

<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> 标簽。

一份基本的表單如下：

<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>

<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> 控件，一個 key 值為 name，一個 key 值為 city，收集使用者輸入後組成表單上傳。

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

type="text"

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

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

placeholder: 資料提示，類似于 hint 功能

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

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

type="password"

這類型的 <input> 在浏覽器上的呈現跟 type=”text” 類型一緻，功能也基本一緻，唯一的差別就是這是個密碼框，也就是當使用者輸入資料時，在浏覽器上是以掩飾字元替換，如···

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

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

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"/>

當在 form 表單中有 type=”image” 類型的 <input> 時，點選這張圖檔，發送給服務端的資訊是點選的坐标點。

type="file"

該類型的 <input> 可以讓使用者選擇本地檔案：

type="checkbox"

複選框，示例：

type="radio"

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

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>。

<header> & <footer>

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

<footer> : 标簽表示某一節的尾部，最常見的基本每個網頁尾部都會有版權資訊，作者介紹，相關連結，免責聲明等資訊，這部分資訊都适用于放在尾部标簽 <footer> 裡。

例如：<header>

<nav>

<nav> 标簽表示文檔中某一個區域，它包含着到其他頁面或者同一頁面的其他部分的連結。

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

小結

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

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

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

大家好，我是 dasu，歡迎關注我的公衆号（dasuAndroidTv），如果你覺得本篇内容有幫助到你，可以轉載但記得要關注，要标明原文哦，謝謝支援~

前端入門2-HTML标簽

聲明