本文推薦 PC 端閱讀~
本文版權歸 “公眾號 | 前端一萬小時” 所有，未經授權，請勿轉載！
複製程式碼html_02
複製程式碼1. meta 有哪些常見的值？
2. meta viewport 是做什麼用的，怎麼寫？
3. 列出常見的標籤，並簡單介紹這些標籤用在什麼場景？
4. 如何在 html 頁面上展示 <div></div> 這幾個字元？
5. 你是如何理解 HTML 語義化的？
6. 前端需要注意哪些 SEO?
7. 你對網頁標準和 W3C 重要性的理解?
複製程式碼前言： 上一篇《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, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
複製程式碼註釋：
width=device-width寬度 = 裝置寬度user-scalable=no使用者縮放 = 不允許initial-scale=1.0初始比例 = 1maximum-scale=1.0最大比例 = 1minimum-scale=1.0最小比例 = 1
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>如果是標題，就用<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：
<>這個乍看如亂碼一樣的字元就是我們 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. 後設資料<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>
複製程式碼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>&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：
<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 同樣作用的元素。
- tr = table row 表格的一行，下邊只能嵌入
-
註釋 7：
<tr>
<td colspan="4">……</td> <!--註釋7-->
</tr>
複製程式碼colspan 屬性規定單元格可橫跨的列數。這裡我們讓他橫跨了 4 列（注意看頁面效果）；而對應的橫跨多個行數是 rowspan 屬性。——這兩個屬性是用在 <td> 、 <th> 元素裡的。
後記： 這篇的學完，我們也算是漸入佳境。稍後把下一篇的“表單”學完，那基本上我們可以把一個頁面的大體框架寫出來了。對於其他非常用剩餘標籤、屬性，我們將在後邊的學習、工作中各個擊破。
加油！