1 網頁相關概念
1.1 網頁
- 網站是指在因特網上根據一定規則，使用 HTML 等製作的用於展示特定內容相關的網頁集合。
- 網頁是網站的一“頁”，通常是 HTML 格式檔案，透過瀏覽器閱讀。
- 網頁是構成網站的基本元素，通常由圖片、連結、文字、聲音、影片等素材組成。
- HTML：超文字標記語言（Hyper Text Markup Language），一種用來描述網頁的語言。
1.2 常用瀏覽器
谷歌（Chrome）、火狐（Firefox）、Edge、IE、蘋果（Safari）、Opera 等。
瀏覽器核心（渲染引擎）：負責讀取網頁內容，整理訊息，計算網頁的顯示方式並顯示頁面。
| 瀏覽器 | 核心 | 備註 |
|---|---|---|
| IE | Trident | IE、獵豹安全、360瀏覽器、百度瀏覽器 |
| Firefox | Gecko | 火狐瀏覽器核心 |
| Safari | Webkit | 蘋果瀏覽器核心 |
| Chrome | Blink | Chrome/Opera 瀏覽器核心（Webkit 的分支） |
1.3 Web標準
Web標準是由 W3C 組織和其他標準化組織制定的一系列標準的集合，W3C（World Wide Web Consortium，全球資訊網聯盟）是國際最著名的標準化組織。
Web標準主要包括 結構（Structure）、表現（Presentation）、行為（Behavior） 三個方面。
| 標準 | 說明 |
|---|---|
| 結構 | 用於對網頁元素進行整理和分類，主要是 HTML |
| 表現 | 用於設定網頁元素的版式、顏色、大小等外觀樣式，主要指 CSS |
| 行為 | 指網頁模型的定義及互動的編寫，主要是 JavaScript |
Web 標準提出的最佳體驗方案：結構、樣式、行為相分離。
2 HTML語法
2.1 基本語法概述
- HTML 標籤是由尖括號包圍的關鍵詞，如
<html>。 - HTML 標籤通常成對出現，如
<html></html>，稱為雙標籤，分別是開始和結束標籤。 - 有些特殊的標籤必須是單個標籤（極少情況），如
<br />，稱為單標籤。
標籤關係：包含和並列
<!-- 包含 -->
<head>
<title></title>
</head>
<!-- 並列 -->
<head></head>
<body></body>
2.2 基本結構標籤
也被稱為骨架標籤，頁面內容就是在這些基本標籤上書寫。
| 標籤名 | 定義 | 說明 |
|---|---|---|
<html></html> |
HTML 標籤 | 頁面中最大的標籤，稱為根標籤 |
<head></head> |
文件頭部 | 在 <head> 標籤中必須要設定的標籤是 <title> |
<title></title> |
文件標題 | 頁面屬於自己的網頁標題 |
<body></body> |
文件主體 | 元素包含文件的所有內容 |
<html>
<head>
<title> This is title </title>
</head>
<body>
This is a sentence.
</body>
</html>
<!DOCTYPE>文件型別宣告標籤 —— 告訴瀏覽器使用哪種 HTML 版本顯示網頁。<!DOCTYPE>宣告位於文件最前面，在<html>標籤之前。<!DOCTYPE>不是一個 HTML 標籤，它就是文件型別宣告標籤。<!DOCTYPE html>表示當前頁面採用的是 HTML5 版本顯示頁面。
lang語言種類 —— 用來定義當前文件顯示的語言。en定義語言為英語，zh-CN定義語言為中文。- 對於文件顯示而言，定義成
en的文件也可以顯示中文，反之同理。
charset字符集 —— 字符集（Character set）是多個字元的集合，以便計算機能夠識別和儲存各種文字。GB2312表示簡體中文。BIG5表示繁體中文。GBK包含了簡體中文和繁體中文。UTF-8為萬國碼，基本包含了全世界所有國家需要用到的字元。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2.3 HTML 常用標籤
2.3.1 標題標籤 <h1> - <h6>
h: head
標籤語義：作為標題使用，並且依據重要性遞減。
特點
- 文字變粗，字號變大。
- 標題獨佔一行。
2.3.2 段落 <p> 和換行 <br /> 標籤
p: paragraph
標籤語義：將 HTML 文件劃分成若干段落。
特點
- 段落中的文字或根據瀏覽器視窗大小自動換行。
- 段落之間有空隙。
br: break
標籤語義：強制換行。
特點
<br />是一個單標籤。<br />標籤只是強制換行，間隔不變。
2.3.4 文字格式化標籤
標籤語義：突出重要性，比普通文字更重要
| 語義 | 標籤 | 說明 |
|---|---|---|
| 加粗 | <strong></strong> 或 <b></b> |
推薦使用前者，標籤加粗，語義更強烈 |
| 傾斜 | <em></em> 或 <i></i> |
推薦使用前者，標籤加粗，語義更強烈 |
| 刪除線 | <del></del> 或 <s></s> |
推薦使用前者，標籤加粗，語義更強烈 |
| 下劃線 | <ins></ins> 或 <u></u> |
推薦使用前者，標籤加粗，語義更強烈 |
em: emphasized、del: deleted、ins: inserted
i: italic、s: strikethrough、u: underlined
2.3.5 <div> 和 <span> 標籤
div: division
沒有語義，是用來裝內容的“盒子”。
特點
<div>標籤一行只有一個<span>標籤一行可以有多個
2.3.6 影像標籤 <img>
img: image
| 屬性 | 屬性值 | 說明 |
|---|---|---|
src |
圖片路徑 | 必須屬性 |
alt |
文字 | 替換文字，影像不能顯示時的文字 |
title |
文字 | 提示文字，滑鼠放在影像上時顯示的文字 |
width |
畫素 | 影像寬度 |
height |
畫素 | 影像高度 |
border |
畫素 | 影像邊框粗細 |
src: source、alt: alter
注意點
- 影像標籤可以有多個屬性，必須寫在標籤名後。
- 屬性之間不分先後順序，標籤名與屬性，屬性之間用空格個分隔。
- 屬性採用鍵值對的格式，即
key = "value"的格式。
2.3.7 路徑
相對路徑：以引用檔案所在位置為參考基礎，而建立的目錄路徑。
| 相對路徑分類 | 符號 | 說明 |
|---|---|---|
| 同一級路徑 | 影像檔案位於HTML檔案同一級，如 <img src="baidu.gif" /> |
|
| 下一級路徑 | / | 影像檔案位於HTML檔案下一級，如 <img src="images/baidu.gif" /> |
| 上一級路徑 | ../ | 影像檔案位於HTML檔案上一級，如 <img src="../baidu.gif" /> |
絕對路徑：指目錄下的絕對位置，直接到達目標位置，通常是從磁碟機代號開始的路徑。
如，"D:\VS_code\html學習\image1" 或完整網路路徑 "https://baidu.com/logo.png"
2.3.8 超連結標籤 <a>
a: anchor
<a> 標籤用於定義超連結，作用是從一個頁面連結到另一個頁面。
格式：<a href="跳轉目標" target="目標視窗彈出方式">文字或影像</a>
| 屬性 | 作用 |
|---|---|
| href | 指定連結目標的 url 地址，必須屬性 |
| target | 指定連結頁面的開啟方式，_self 為預設值，當前頁面開啟，_blank 在新視窗開啟 |
href: hypertext reference
連結分類
- 外部連結：如，
<a href="http://www.baidu.com" target="_blank">百度</a>。 - 內部連結：網站內部頁面之間的相互連結，直接連結內部頁面名稱即可，如
<a href="index.html">首頁</a>。 - 空連結：如，
<a href="#">關於</a>。 - 下載連結：如果
href裡面的地址是一個檔案或者壓縮包，會下載該檔案。 - 網頁元素連結：在網頁中的各種網頁元素，如文字、影像、表格、音訊、影片等都可以新增超連結。
- 錨點連結：點選連結，可以快速定位頁面的某個位置（空連結可跳轉頂部）。
- 在連結文字的
href屬性中，設定屬性值為#id的格式，如，<a href="#two">第2集</a>。 - 找到目標位置標籤，裡面新增一個
id屬性，如，<h3 id="two">第2集介紹<h3>。
- 在連結文字的
2.3.9 註釋標籤和特殊字元
註釋
如果需要在HTML文件中新增一些便於閱讀和理解但又不需要顯示在頁面中的文字，就需要使用註釋標籤 <!-- 註釋語句 --> 。
特殊字元
在HTML頁面中，一些特殊的符號很難或不方便直接使用，可以使用下面程式碼代替。
| 特殊字元 | 描述 | 字元程式碼 |
|---|---|---|
| 空格 | |
|
| < | 小於 | < |
| > | 大於 | > |
| & | 和 | & |
| ¥ | 日幣 | ¥ |
| © | 版權 | © |
| ® | 註冊商標 | ® |
| ° | 度 | ° |
| ± | 正負號 | ± |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
nbsp: no-break space、lt: less than、gt: great than、amp:ampersand、copy: copyright、reg: registration、deg: degree、plusmn: plus-minus sign、sup: superscripted
2.4 表格標籤
表格主要用於展示資料，可讀性好。
<table></table>用於定義表格的標籤。<tr></tr>用於定義表格中的行，必須巢狀在<table></table>中。<td></td>用於定義表格中的單元格，必須巢狀在<tr></tr>中。<th></th>定義表頭單元格，一般位於表格的第一行或第一列，文字內容加粗居中顯示。
<table>
<tr>
<th>表頭</th>
...
</tr>
<tr>
<td>內容</td>
...
</tr>
...
</table>
tr: table row、td: table data、th: table head
2.4.1 表格屬性和結構
<table> 標籤中可以設定表格的屬性。
| 屬性 | 屬性值 | 描述 |
|---|---|---|
align |
left、center、right |
規定表格相對周圍元素的對齊方式 |
border |
1 或 "" |
規定表格是否有邊框，預設 "" ，無邊框 |
cellpadding |
畫素 | 規定單元格邊沿與其內容之間的空白，預設 \(1\) 畫素 |
cellspacing |
畫素 | 規定單元格之間的空白，預設 \(2\) 畫素 |
width |
畫素或百分比 | 規定表格寬度 |
為了更好的表示表格的語義，可以使用表格結構標籤 <thead> 和 <tbody> ，將表格劃分成頭部和主體兩大部分。
<thead></thead>用於定義表格的頭部，內部必須有<th>標籤。<tbody></tbody>用於定義表格的主體，主要放資料本體。- 都需要巢狀在
<table>標籤中。
2.4.2 合併單元格
跨行合併：rowspan="合併單元格個數" ，寫在最上側所需合併的單元格中。
跨列合併：colspan="合併單元格個數" ，寫在最左側所需合併的單元格中。
2.5 列表標籤
表格主要用來展示資料，列表則主要用於佈局。
特點：整潔、有序。
2.5.1 無序列表
<ul> 標籤表示頁面中專案的無序列表，一般以專案符號呈現列表項，列表項用 <li> 定義。
<h3>音樂三巨頭</h3>
<ul>
<li>許嵩</li>
<li>徐良</li>
<li>汪蘇瀧</li>
</ul>
ul: unordered list、li: list item
- 無序列表的各個列表項之間沒有順序級別之分，是並列的。
<ul></ul>標籤中只能巢狀<li></li>標籤，<li></li>標籤可以容納任何元素。
2.5.2 有序列表
<ol> 標籤用於定義有序列表，列表排序以數字顯示，列表項用 <li> 定義，與無序列表類似。
ol: ordered list
2.5.3 自定義列表
自定義列表常用於對術語或名詞進行解釋和描述，列表項前沒有任何專案符號。
<dl> 標籤用於定義描述列表（定義列表），<dt> 定義術語，<dd> 定義描述。
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
...
</dl>
dl: definition list、dt: definition term、dd: definition description
<dl></dl>標籤中只能包含<dt>和<dd>標籤。<dt>和<dd>個數沒有限制，通常是一個<dt>對應多個<dd>。
2.6 表單標籤
收集使用者資訊，通常由 表單域、表單控制元件（也稱表單元素） 和 提示資訊 \(3\) 部分構成。
2.6.1 表單域
表單域是一個包含表單元素的區域。用 <form> 標籤定義表單域.
在表單域中可以定義各種表單元素，這些表單元素就是允許使用者在表單中輸入或者選擇的內容控制元件。
<form action="url地址" method="提交方式" name="表單域名稱">
各種表單控制元件
</from>
| 屬性 | 屬性值 | 作用 |
|---|---|---|
action |
url 地址 |
指定接收並處理表單資料的伺服器程式的 url 地址 |
method |
get/post |
設定表單資料的提交方式 |
name |
名稱 | 指定表單的名稱，以區分同一頁面中的多個表單域 |
2.6.2 <input> 表單元素
用於收集使用者資訊。
<input type="屬性值" />
| 屬性值 | 描述 |
|---|---|
button |
可點選按鈕（多數情況下，用於透過JavaScript啟動指令碼） |
checkbox |
核取方塊 |
file |
輸入欄位和“瀏覽”按鈕，供檔案上傳 |
hidden |
隱藏的輸入欄位 |
image |
影像形式的提交按鈕 |
password |
密碼欄位，該欄位中的字元被掩碼 |
radio |
單選按鈕 |
reset |
重置按鈕，清除表單中所有資料 |
submit |
提交按鈕，把表單中資料傳送到伺服器 |
text |
單行的輸入欄位，預設 \(20\) 個字元 |
<input> 標籤的其他屬性
| 屬性 | 屬性值 | 描述 |
|---|---|---|
name |
使用者自定義 | 定義 <input> 元素的名稱 |
value |
使用者自定義 | 規定 <input> 元素的值 |
checked |
checked |
規定此 <input> 元素首次載入時應當被選中 |
maxlength |
正整數 | 規定輸入欄位中字元的最大長度 |
name和value是每個表單元素都有的屬性值，主要給後臺人員使用。name表單元素的名字，要求 單選框 和 核取方塊 要有 相同的name值 。
2.6.3 <label> 標籤
為 <input> 元素定義標註（標籤）。用於繫結一個表單元素，當點選 <label> 標籤內的文字時，瀏覽器自動將焦點（游標）轉到或者選擇對應的表單元素上，用來增加使用者體驗。
<label for="sex"> 男 </label>
<input type="radio" name="sex" value="男" id="sex">
<!-- 核心：<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。 -->
2.6.4 <select> 表單元素
在頁面中，如果有多個選項讓使用者選擇，並且想要節約頁面空間，便可使用 <select> 標籤控制元件定義 下拉選單 。
<select>
<option>選項一</option>
<option>選項二</option>
...
</select>
<select>中至少包含一對<option>。- 在
<option>中定義selected="selected"時，當前項即為預設選中項。
2.6.5 <textarea> 表單元素
用於定義多行文字輸入的控制元件，在使用者輸入內容較多時使用。
<textarea row="3" cols="20">輸入文字內容</textarea>