《Oli-Zhao的前端一萬小時》之：（2）HTML元素、屬性詳解

03-01

本知識學慣用時：2小時，總第14/10000小時

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

一、學完這篇要達到的目標

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

提前給出總結（我們在選用標籤時，就去跟他的本質功能去做對應，盡量選用語義化的標籤來構建整個頁面框架）：

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

二、細說各元素，各屬性

1. 元數據<meta>:

-- 指定文檔編碼：

<meta charset="UTF-8">

-- 適配移動端頁面：

<meta name="viewport" content="width_=device-width, initial-scale=1.0">

-- 定製頁面圖標（即頁面標籤前邊的小圖標）：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 注釋：href="favicon.ico" 這裡邊放這個圖標的圖形文件地址。

-- 設置referer（圖片所在的當前這個頁面的地址——詳細見專欄文章：）如：

<meta name="referrer" content="never">

-- 添加頁面描述（即我們在搜索時看到的網站介紹）：

<meta name="description" content="註冊即代表你同意《知乎協議》註冊機構號……">

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

<link rel="stylesheet" href="--.css"><script src="--.js"></script> 注釋：正如上篇中所說，頭部元素<head>裡邊所有的標籤元素都不會顯示給用戶，但他會承載一些與頁面描述相關的東西：CSS樣式、meta、title等。注釋：我們這裡的<link>標籤，來引入的CSS樣式屬於我們最常用的外部樣式表。有一點我們必須清楚：HTML建立內容的「結構」，CSS提供「樣式」和「表現」。

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>如果是標題，就用<h>;</li> 注釋2 <li>如果是一段話，就用<p></li> 注釋3 <li>如果是可點擊的就用一個<a>鏈接；</li> <li>如果像那種並列一排排的，甚至還有一點一點，就用「列表」；</li> <li>……</li> </ul> </body> </html>

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

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

4. 自定義列表（即一個文檔里一個標題一個介紹，一個標題一個介紹……）：

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

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

5. 超鏈接標籤：

簡單鏈接

<a href="這裡寫鏈接地址「 title="Oli-Zhao的前端一萬小時">知乎-oliver</a>注釋：這裡的 title 屬性，作用就是：當我們把滑鼠停在 oliver 上時，會彈出一個文本框：Oli-Zhao的前端一萬小時。

外部鏈接

將 target 設置成 _blank 時，點擊這個鏈接，瀏覽器會新開一個窗口打開該網頁：

<a href="這裡寫鏈接地址」 title="Oli-Zhao的前端一萬小時" target="_blank">知乎-oliver</a>注釋：當然這裡的 target 屬性還可以設置成其他值。

返回頁面頂部鏈接

<a href="#">返回頁面頂部</a>注釋：這裡的 # 後邊是可以加東西的，可以是文檔中某個元素的ID，也可以是某個標題等等（但前提是這些東西要唯一，不然沒辦法定位到具體位置）。

圖片鏈接

用圖片來作為鏈接可點擊的對象。

下載鏈接

<a href="https://……這裡放下載的鏈接" download>下載</a>注釋：當我們點擊下載二字時，就會自動下載這個鏈接的東西。

電話鏈接

<a href="tel:+86177******">打電話給oliver</a>注釋：當用戶是手機瀏覽頁面時，點擊」打電話給oliver"，手機就會自動撥號到這個號碼。

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"，則自動打開郵箱跳轉到寫信頁面並填好抄送人。

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>&nbsp;</td> <td>&#160;</td> </tr> <tr> <td><</td> <td>小於號</td> <td>&lt;</td> <td>&#60;</td> </tr> <tr> <td>></td> <td>大於號</td> <td>&gt;</td> <td>&#62;</td> </tr> <tr> <td colspan="4">……</td> 注釋7 </tr> </tbody> </table> </body> </html>

-- 注釋1：我們CSS的引用可以採用在表頭裡邊加<style>樣式元素來實現，注意格式。這裡邊的 type=text/css 是我們<style>元素的屬性——實際工作中對於本元素這個屬性可以不用寫，所有瀏覽器都可以知道你用這個元素就是指的是CSS。屬性的作用是用來提供元素的一些額外信息。
-- 注釋2：border-collapse 屬性設置表格的邊框是否被合併為一個單一的邊框。它有以下幾個值：
· separate 默認值：邊框會被分開，不會忽略 border-spacing 和 empty-cells 屬性；
· collapse ：如果可能，邊框會合併為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性；
· inherit ：規定應該從父元素繼承 border-collapse 屬性的值。
（任務：把這幾個值挨個替換看顯示結果）
-- 注釋3：這裡是設置<th> 、<td>元素的「邊界、邊框— border」的樣式。

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

-- 注釋7：colspan 屬性規定單元格可橫跨的列數。這裡我們讓他橫跨了4列（注意看頁面效果）；而對應的橫跨多個行數是 rowspan 屬性。——這兩個屬性是用在<td>、<th>元素里的。
（任務：把這兩個屬性挨個替換看顯示結果）

後記：這篇的學完，我們也算是漸入佳境。稍後把下一篇的「表單」學完，那基本上我們可以把一個頁面的大體框架寫出來了。對於其他非常用剩餘標籤、屬性，我們將在後邊的學習、工作中各個擊破。前端的路很長，他值得你我用後邊的10000小時去對待。

歡迎繼續關注下文：

《Oli-Zhao的前端一萬小時》之：（3）HTML表單詳解

（本文版權歸Oliver所有，轉載需說明來源）