前端入門2-HTML標籤

請叫我大蘇發表於2018-10-29
前端HTML

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

宣告

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

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

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

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> 標籤用於指定 HTML 文件使用了哪些外部資原始檔，可以是外部的 CSS 檔案，或者網頁圖示，或者說明文件等等，如下：

<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> 標籤表示列表裡的每一項.

  • 用法

ul

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

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

ul { list-style-type: disc}

<h1> ~ <h6>

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

p

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

<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> : 標籤表示某一節的首部，像某些網頁通常會有一些 Logo 之類的首部資訊。

<footer> : 標籤表示某一節的尾部，最常見的基本每個網頁尾部都會有版權資訊，作者介紹，相關連結，免責宣告等資訊，這部分資訊都適用於放在尾部標籤 <footer> 裡。

例如：<header>

header

<footer>

footer

<nav> 標籤表示文件中某一個區域，它包含著到其他頁面或者同一頁面的其他部分的連結。

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

nav

小結

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

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

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

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

相關文章