HTML——② HTML 元素、屬性詳解

本文推薦 PC 端閱讀

本文同步更新於：
- 「公眾號：前端一萬小時」
- 「知乎：Oli's 前端一萬小時」
- 「語雀：前端一萬小時」
複製程式碼

前言： 上一篇《HTML——① HTML 基礎》中，我們對 HTML 有了初步的認識，在完全掌握的基礎上，這一篇我們將會接觸大量常用的“標籤元素”及其“屬性”等。知識點很多，但是，細細的看下去，收穫一定很大。

1 學完這篇要達到的目標

隨便開啟一個頁面，滑鼠指到任意位置都知道該用什麼標籤就算 OK 。

1.1 提前給出總結

我們在選用標籤時，就去跟他的本質功能去做對應，儘量選用語義化的標籤來構建整個頁面框架：

如果是標題，就用 <h> ；
如果是一段話，就用 <p> ；
如果不知道他是什麼，如果這個東西能佔一行，就用 <div> ；如果沒有一行，就一個小小的位置，就用 <span> ；
如果是可點選的就用一個 <a> 連結；
如果像那種並列一排排的，甚至還有一點一點，就用“列表”；
如果看到一個表格，就用 <table> ；
如果看到了一個輸入框，就用 <input> 。

2 細說各元素，各屬性

2.1 後設資料 `<meta>`

2.1.1 指定文件編碼

<meta charset="UTF-8">
複製程式碼

2.1.2 適配移動端頁面

<meta name="viewport" content="width=device-width, initial-scale=1.0">
複製程式碼

2.1.3 定製頁面圖示（即頁面標籤前邊的小圖示）

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
註釋：href="favicon.ico" 這裡邊放這個圖示的圖形檔案地址。
複製程式碼

2.1.4 設定 referer（圖片所在的當前這個頁面的地址）

<meta name="referer" content="never">
複製程式碼

2.1.5 新增頁面描述（即我們在搜尋時看到的網站介紹）

<meta name="description" content="註冊即代表你同意《知乎協議》序號產生器構號……">
複製程式碼

2.2 `<head>` 頭部元素裡邊還可以放：CSS 和 JS

<link rel="stylesheet" href="--.css">
<script src="--.js"></script>
複製程式碼

註釋：正如上篇中所說，頭部元素 <head> 裡邊所有的標籤元素都不會顯示給使用者，但它會承載一些與頁面描述相關的東西：CSS 樣式、meta、title 等。
註釋：我們這裡的 <link> 標籤，來引入的 CSS 樣式屬於我們最常用的外部樣式表。有一點我們必須清楚：HTML 建立內容的“結構”，CSS 提供“樣式”和“表現”。

2.3 列表

任務：寫出以下圖片（本文摘取）的 HTML 。

?效果及原始碼連結

<!DOCTYPE html>
<html >
 <head>
   <meta charset="utf-8">
   <title>Oli-Zhao的前端一萬小時</title>
 </head> 
 <body> 
   <h1>一、學完這篇要達到的目標</h1>                      
     <p>隨便開啟一個頁面，滑鼠指到任意位置都知道該用什麼標籤就OK。<br>                   
        提前給出總結（我們在選用標籤時……
     </p>
   <ul>                                                          <!--註釋1-->
     <li>如果是標題，就用&lt;h&gt;;</li>                            <!--註釋2-->
     <li>如果是一段話，就用&lt;p&gt;</li>                            <!--註釋3-->
     <li>如果是可點選的就用一個&lt;a&gt;連結；</li> 
     <li>如果像那種並列一排排的，甚至還有一點一點，就用“列表”；</li>
     <li>……</li> 
  </ul>                                                          
 </body>                                           
</html>
複製程式碼

註釋 1：<ul> 是 Unordered List——無序列表的簡稱；而 <ol> 是 Ordered List——有序列表的簡稱。二者唯一的區別就是，有序列表是123……開頭，而無序列表是小黑點開頭。其他格式一樣，不再贅述；
註釋 2：<ul> 或 <ol> 直接巢狀的標籤是 <li> 標籤，他們之間不允許再巢狀任何標籤。需要巢狀的話，要巢狀在 <li> 標籤裡；
註釋 3：< > 這個乍看如亂碼一樣的字元就是我們 HTML 中的“實體”，lt 是 less than “小於”的簡稱；gt 是 greater than “大於”的簡稱。然後前邊加一個 & 字元——實體都是以 & 開頭，以 ; 結尾。我們想顯示出 <h> 這樣一個文字，我們在 HTML 中是不能直接打出 < 或 > 等這種符號的，否者會被瀏覽器直接識別成元素，因此我們要進行特殊處理。

?更多實體請參考：實體符號參考手冊

2.4 自定義列表

即一個文件裡一個標題一個介紹，一個標題一個介紹……：

任務：寫出以下圖片（本文摘取）的 HTML。

?效果及原始碼連結

<!DOCTYPE html>
<html >                                           
 <head>                                           
   <meta charset="utf-8">                         
   <title>Oli-Zhao的前端一萬小時</title>             
 </head>                                          
 <body>                                                              
   <h1>二、細說各元素，各屬性</h1>                      
     <p>1.  後設資料&lt;meta&gt;:</p>
   <dl>
     <dt>--  指定文件編碼：</dt> 
       <dd>&lt;meta charset="UTF-8"&gt; </dd>
     <dt>--  適配移動端頁面：</dt> 
       <dd>&lt;meta name="viewport" content="widt……&gt;</dd>
     <dt>--  定製頁面圖示（即頁面標籤前邊的小圖示）：</dt> 
       <dd>&lt;link rel="shortcut icon" href="favicon.ico……&gt;<br>
           註釋：href="favicon.ico" 這裡邊放這個圖示的圖形檔案地址。
       </dd> 
   </dl>     
 </body>                                           
</html>
複製程式碼

2.5 超連結標籤

2.5.1 簡單連結

<a href="這裡寫連結地址" title="Oli-Zhao的前端一萬小時">知乎-oliver</a>

註釋：這裡的 title 屬性，作用就是：當我們把滑鼠停在 oliver 上時，會彈出一個文字框：
Oli-Zhao的前端一萬小時。
複製程式碼

2.5.2 外部連結

將 target 設定成 _blank 時，點選這個連結，瀏覽器會新開一個視窗開啟該網頁：

<a href="這裡寫連結地址" title="Oli-Zhao的前端一萬小時" target="_blank">知乎-oliver</a>

註釋：當然這裡的 target 屬性還可以設定成其他值。
複製程式碼

2.5.3 返回頁面頂部連結

<a href="#">返回頁面頂部</a>

註釋：這裡的 # 後邊是可以加東西的，可以是文件中某個元素的 ID，也可以是某個標題等等（但前
提是這些東西要唯一，不然沒辦法定位到具體位置）。
複製程式碼

2.5.4 圖片連結

用圖片來作為連結可點選的物件。

2.5.5 下載連結

<a href="https://……這裡放下載的連結" download>下載</a>

註釋：當我們點選“下載”二字時，就會自動下載這個連結的東西。
複製程式碼

2.5.6 電話連結

<a href="tel:+86177******">打電話給oliver</a>

註釋：當使用者是手機瀏覽頁面時，點選“打電話給oliver”，手機就會自動撥號到這個號碼。
複製程式碼

2.5.7 Email 連結

<a href="mailto:olizhao725@gmail.com">發郵件給oliver</a>

註釋：當點選“發郵件給oliver”時，則自動開啟郵箱跳轉到寫信頁面；


<a href="mailto:olizhao725@gmail.com" cc="amantang@gmail.com">發郵件給
oliver並抄送給Aman</a>
註釋：當點選"發郵件給oliver並抄送給Aman"，則自動開啟郵箱跳轉到寫信頁面並填好抄送人。
複製程式碼

2.6 表格

任務：將上文中“實體”示例的表格用 HTML 寫出來。

?效果及原始碼連結

<!DOCTYPE html>
<html >                                           
  <head>                                           
    <meta charset="utf-8">                         
    <title>Oli-Zhao的前端一萬小時</title> 
    <style type="text/css">               /*註釋1*/
      table {
        border-collapse: collapse;        /*註釋2*/
      }
      th, td {
        border: 1px solid green;         /*註釋3*/
      } 
    </style>          
  </head>                                          
  <body>                                                              
    <table>                              <!--註釋4-->
      <thead>                            <!--註釋5-->
        <tr>                             <!--註釋6-->
          <th>顯示結果</th>                          
          <th>描述</th>
          <th>實體名稱</th>
          <th>實體編號</th>
        </tr>
      </thead>
      <tbody>
        <tr> 
          <td></td>                                 
          <td>空格</td>
          <td>&amp;nbsp;</td>
          <td>&amp;#160;</td>
        </tr>
        <tr>
          <td><</td>
          <td>小於號</td>
          <td>&amp;lt;</td>
          <td>&amp;#60;</td>
        </tr>
        <tr>
          <td>></td>
          <td>大於號</td>
          <td>&amp;gt;</td>
          <td>&amp;#62;</td>
        </tr>
        <tr>
          <td colspan="4">……</td>        <!--註釋7-->
        </tr>
      </tbody>
    </table>   
  </body>                                           
</html>
複製程式碼

註釋1：

<style type="text/css">               /*註釋1*/
  table {
    border-collapse: collapse;        /*註釋2*/
  }
  th, td {
    border: 1px solid green;          /*註釋3*/
  } 
</style>      
複製程式碼

我們 CSS 的引用可以採用在表頭裡邊加 <style> 樣式元素來實現，注意格式。
這裡邊的 type=text/css 是我們 <style> 元素的屬性——實際工作中對於本元素這個屬性可以不用寫，所有瀏覽器都可以知道你用這個元素就是指的是 CSS 。屬性的作用是用來提供元素的一些額外資訊。

註釋2：

<style type="text/css">               /*註釋1*/
  table {
    border-collapse: collapse;        /*註釋2*/
  }
  th, td {
    border: 1px solid green;          /*註釋3*/
  } 
</style>      
複製程式碼

border-collapse 屬性設定表格的邊框是否被合併為一個單一的邊框。它有以下幾個值：

-- separate 預設值：邊框會被分開，不會忽略 border-spacing 和 empty-cells 屬性；

-- collapse ：如果可能，邊框會合併為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性；

-- inherit ：規定應該從父元素繼承 border-collapse 屬性的值。

註釋3：

<style type="text/css">               /*註釋1*/
  table {
    border-collapse: collapse;        /*註釋2*/
  }
  th, td {
    border: 1px solid green;          /*註釋3*/
  } 
</style>      
複製程式碼

這裡是設定 <th> 、 <td> 元素的“邊界、邊框—— border”的樣式。

-- solid：線；

-- dashed：破折號；

-- dotted：點

註釋4：

    <table>                              <!--註釋4-->
      <thead>                            <!--註釋5-->
        <tr>                             <!--註釋6-->
          <th>顯示結果</th>                          
          <th>描述</th>
          <th>實體名稱</th>
          <th>實體編號</th>
        </tr>
      </thead>
複製程式碼

表格開始。

註釋5：table head 表頭開始（在頁面展示時會以加粗的方式顯示）。
註釋6：
- tr = table row 表格的一行，下邊只能嵌入 <td> 或 <th> 元素。
- td = table data cell 表示行中的一個列；
- th = 是表頭裡邊用於和 td 同樣作用的元素。
註釋7：

<tr>
  <td colspan="4">……</td>        <!--註釋7-->
</tr>
複製程式碼

colspan 屬性規定單元格可橫跨的列數。這裡我們讓他橫跨了 4 列（注意看頁面效果）；而對應的橫跨多個行數是 rowspan 屬性。——這兩個屬性是用在 <td> 、 <th> 元素裡的。

後記： 這篇的學完，我們也算是漸入佳境。稍後把下一篇的“表單”學完，那基本上我們可以把一個頁面的大體框架寫出來了。對於其他非常用剩餘標籤、屬性，我們將在後邊的學習、工作中各個擊破。

（本文版權歸 “Oli's 前端一萬小時” 所有，未經授權，請勿轉載）

HTML——② HTML 元素、屬性詳解

1 學完這篇要達到的目標

1.1 提前給出總結

2 細說各元素，各屬性

2.1 後設資料 <meta>

2.1.1 指定文件編碼

2.1.2 適配移動端頁面

2.1.3 定製頁面圖示（即頁面標籤前邊的小圖示）

2.1.4 設定 referer（圖片所在的當前這個頁面的地址）

2.1.5 新增頁面描述（即我們在搜尋時看到的網站介紹）

2.2 <head> 頭部元素裡邊還可以放：CSS 和 JS

2.3 列表

2.4 自定義列表

2.5 超連結標籤

2.5.1 簡單連結

2.5.2 外部連結

2.5.3 返回頁面頂部連結

2.5.4 圖片連結

2.5.5 下載連結

2.5.6 電話連結

2.5.7 Email 連結

2.6 表格

相關文章

2.1 後設資料 `<meta>`

2.2 `<head>` 頭部元素裡邊還可以放：CSS 和 JS