一. 概述
1. 一些概念
-
HTML 是超文字標記語言，用來描述網頁【不是程式語言】
-
標記語言是一套標記標籤（markup tag）
-
超文字有兩層含義
-
可加入圖片、聲音、動畫、多媒體等內容【超越了文字限制】
-
可以從一個檔案跳轉到另一個檔案，與世界各地主機的檔案連線【超級連結文字】
-
-
瀏覽器核心（渲染引擎）：負責讀取網頁內容，整理訊息，計算網頁的顯示方式並顯示頁面
-
Web 標準的構成
| 標準 | 說明 |
|---|---|
| 結構 | 對網頁元素進行整理和分類（類似身體） |
| 表現 | 設定網頁元素的版式、顏色、大小等外觀樣式（類似外觀裝飾） |
| 行為 | 指網頁模型的定義及互動的編寫（類似行為動作） |
- Web 標準提出的最佳體驗方案：結構、樣式、行為相分離
2. HTML 語法規範
2.1 標籤關係
- HTML 標籤通常為雙標籤，雙標籤關係分為兩類
<!-- 包含關係 -->
<head>
<title></title>
</head>
<!-- 並列關係 -->
<head></head>
<body></body>
- 有些特殊的標籤必須是單標籤，如：
<br/>
2.2 結構標籤（骨架標籤）
| 標籤名 | 定義 | 說明 |
|---|---|---|
<html></html> |
HTML 標籤 | 頁面中最大的標籤，稱為根標籤 |
<head></head> |
文件的頭部 | 在 head 標籤中必須設定的標籤是 title |
<title></title> |
文件的標題 | 網頁標題 |
<body></body> |
文件的主體 | 用來放頁面內容 |
3. vscode 外掛
| 外掛 | 作用 |
|---|---|
| Open in Browser | 右擊選擇瀏覽器開啟 HTML 檔案 |
| Auto Rename Tag | 自動重新命名配對的 HTML / XML 標籤 |
| Liver Server | 同步 |
二. HTML 基礎
1. 基本骨架
-
新建
.html檔案後，在 vscode 中輸入!按下Tab鍵生成骨架結構 -
如果要在瀏覽器中開啟頁面，右鍵
Open in Default Browser，快捷鍵Alt+B
<!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>
-
文件型別宣告標籤
-
<!DOCTYPE>宣告位於<html>之前，不是 HTML 標籤，而是文件型別宣告標籤，用來告訴瀏覽器使用哪種 HTML 版本來顯示網頁 -
<!DOCTYPE html>指當前頁面採取的是 HTML5 版本來顯示網頁
-
-
lang 語言種類
-
用來定義當前文件顯示的語言
- en 定義英文網頁，zh-CN 定義中文網頁
-
注：定義為 en 的文件也可以顯示中文，反之亦然。該屬性對瀏覽器和搜尋引擎還是有作用的
-
-
字符集（Character set）
-
<meta charset="UTF-8">：規定 HTML 文件應該使用哪種字元編碼 -
UTF-8 被稱為萬國碼，基本包含了所有國家需要用到的字元
-
<meta charset="UTF-8">必須寫，否則可能引起亂碼，一般使用 "UTF-8" -
寫程式碼時的編碼要和儲存時的編碼一致，否則會出現亂碼
-
-
註釋
<!-- 註釋語句 -->
快捷鍵：ctrl + /
2. 常用標籤
2.1 標題與段落
| 標籤 | 語義 | 特點 |
|---|---|---|
<h1>-<h6> |
作為標題使用，並且依據重要性遞減（雙標籤） | 1. 字型加粗，字號依次變大【h1 最大】 2. 一個標題獨佔一行 |
<p></p> |
用於分段 | 1. 直到瀏覽器視窗的右端才自動換行 2. 段與段之間有間隔 |
<br/> |
強制換行 | 單純換行，不會加入垂直間距 |
2.2 文字格式化標籤
-
為文字設定粗體、斜體或下劃線等效果
-
標籤語義：突出重要性
| 語義 | 標籤 |
|---|---|
| 加粗 | <strong></strong>或者 <b></b> |
| 傾斜 | <em></em>或者 <i></i> |
| 刪除線 | <del></del>或者 <s></s> |
| 下劃線 | <ins></ins>或者 <u></u> |
2.3 盒子標籤
- 二者都沒有語義，只是用來裝內容
| 標籤 | 特點 |
|---|---|
<div></div> |
一行只能放一個 【大盒子】 |
<span></span> |
一行可以放多個 【小盒子】 |
2.4 影像標籤
-
<img>標籤用於定義 HTML 頁面中的影像 -
示例：
<img src="lbxx.jpeg" alt="測試圖片" title="測試圖片" width="300"/> -
屬性
| 屬性 | 屬性值 | 說明 |
|---|---|---|
| scr | 圖片路徑 | 必寫【用於指定圖片的路徑和檔名】 |
| alt | 文字 | 影像顯示不出來時用文字替換 |
| title | 文字 | 提示文字，滑鼠放到影像上所顯示的文字 |
| width | 畫素 | 影像的寬度【寬度和高度一般只修改一個，另一個等比縮放】 |
| height | 畫素 | 影像的高度 |
| border | 畫素 | 影像的邊框粗細 |
-
注意
-
影像標籤可以擁有多個屬性，必須寫在標籤名的後面
-
屬性之間不分先後順序，以空格分開
-
屬性採取鍵值對的格式
-
2.5 超連結標籤 <a>
-
作用：從一個頁面連結到另一個頁面
-
兩個必須的屬性
| 屬性 | 作用 |
|---|---|
href |
指定連結目標的 url 地址 |
target |
指定視窗的開啟方式_self：在當前視窗開啟（預設值）_blank：新視窗開啟 |
- 連結分類
| 類別 | 說明 | 示例 |
|---|---|---|
| 外部連結 | 連結的是網址 | <a href="http://www.baidu.com" target="_blank">百度</a> |
| 內部連結 | 網站內部頁面之間的相互連結，直接連結內部頁面名稱即可 | <a href="index.html">首頁</a> |
| 空連結 | 用於沒有確定連結目標時 | <a href="#">首頁</a> |
| 下載連結 | 若連結的是檔案或者壓縮包，會下載這個檔案 | 地址連結的是檔案 .exe 或者是 .zip 等壓縮包形式 |
| 網頁元素連結 | 網頁中的文字、影像、表格、音訊、影片等都可以新增超連結 | |
| 錨點連結 | 當點選連結時，可以快速定位到頁面中的某個位置 |
- 錨點連結
<p id="db">頂部</p>
1、
<a href="#rwsp">人物生平</a>
<br />
2、
<a href="#drzw">擔任職務</a>
<br />
3、
<a href="#rwsj">人物事蹟</a>
<br />
<h1>黃文秀</h1>
<h2 id="rwsp">人物生平</h2>
<a href="#db">回到頂部</a>
2.6 特殊字元
| 特殊字元 | 描述 | 字元的程式碼 |
|---|---|---|
| 空格符 | |
|
| < | 小於號 | < |
| > | 大於號 | > |
| & | 和號 | & |
| ￥ | 人民幣 | ¥ |
| © | 版權 | © |
| ® | 註冊商標 | ® |
| ° | 攝氏度 | ° |
| ± | 正負號 | ± |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
2.7 表格標籤
- 基本語法
<table>
<tr>
<th>姓名</th>
<td>單元格內的文字</td>
...
</tr>
...
</table>
- 標籤
| 標籤 | 語義 |
|---|---|
<table></table> |
表格【就是大框架】 |
<tr></tr> |
行，必須放在 <table>中 |
<td></td> |
單元格，必須放在 <tr>中 |
<th></th> |
表格的表頭部分，其中的文字加粗居中顯示 |
<thead></thead> |
表格的頭部，<thead>內部必須有 <tr>標籤，一般位於第一 |
<tbody></tbody> |
表格的主體，主要放資料本體 |
-
<thead>和<tbody>是表格結構標籤，必須放在<table>中 -
表格屬性（瞭解）
實際開發不常用，透過 CSS 來設定
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| align | left、center、right | 表格相對周圍元素的對齊方式 |
| border | 1 或 "" | 表格單元是否有邊框，預設：""，表示無邊框 |
| cellpadding | 畫素值 | 單元邊沿與其內容之間的空白，預設 1px |
| cellspacing | 畫素值 | 單元格之間的空白，預設 2px |
| width | 畫素值或百分比 | 表格的寬度 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="300" height="100">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
-
合併單元格
-
方式：
-
跨行合併：
rowspan="合併單元格的個數" -
跨列合併：
colspan="合併單元格的個數"
-
-
目標單元格
-
跨行：最上側單元格為目標單元格，寫合併程式碼
-
跨列：最左側單元格為目標單元格，寫合併程式碼
-
-
步驟
-
確定跨行還是跨列
-
找到目標單元格，寫上合併方式 = 合併的單元格數量，比如：
<td colspan="2"></td> -
刪除多餘的單元格
-
-
<!DOCTYPE html>
<html>
<head>
<title>合併單元格</title>
</head>
<table align="center" border="1" cellspacing="0" width="300" height="300">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</html>
2.8 列表標籤
表格用來顯示資料，列表用來佈局
2.8.1 無序列表
<ul>
<li>列表項1</li>
<li>列表項2</li>
...
<ul></ul>
</ul>
-
列表項無序且並列
-
以專案符號呈現列表項
2.8.2 有序列表
<ol>
<li>列表1</li>
<li>列表2</li>
...
</ol>
-
列表排序以數字來顯示
-
注：
-
<ul>和<ol>中只能巢狀<li>，不能直接在<ul>和<ol>中放其他標籤 / 文字 -
<li>：可容納所有元素 【小容器】
-
2.8.3 自定義列表
常用於對術語 / 名詞進行解釋和描述，其列表項前沒有任何專案符號
-
<dt>：定義專案 / 名字 -
<dd>：描述每一個專案 / 名字
<dl>
<dt>名詞</dt>
<dd>名詞1解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>
-
<dl>裡面只能包含<dt>和<dd> -
<dt>和<dd>個數沒有限制，經常是一個<dt>對應多個<dd>
<dl>
<dt>關注我們</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>聯絡我們</dd>
</dl>
2.9 表單標籤
-
作用
-
收集使用者資訊
-
提交頁面輸入的資料到指定頁面或後臺
-
-
表單的組成
- 由表單域、表單控制元件（表單元素）和提示資訊3 個部分構成
2.9.1 表單域
<form>：用於定義表單域，會把收集到的資訊提交給伺服器
<form action="url地址" method="提交方式" name="表單域名稱">各種表單元素</form>
- 常用屬性
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url 地址 | 指定接收並處理表單資料的伺服器 url 地址 【收集到的資料傳到什麼地方】 |
| method | get / post | 設定表單資料的提交方式，其取值為 get 或 post |
| name | 名稱 | 指定表單的名稱，以區分同一個頁面中的多個表單域 |
2.9.2 表單控制元件（表單元素）
允許使用者在表單中輸入或者選擇的內容控制元件
| 標籤 | 說明 |
|---|---|
input |
單標籤，用來收集使用者資訊 |
select |
下拉表單 |
textarea |
定義多行文字輸入，該控制元件常見於留言板、評論 |
🛠️ input
<input>標籤屬性
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| type | ⬇️ | |
| name | 使用者自定義 | 定義 input 元素的名稱 |
| value | 使用者自定義 | 規定 input 元素的值 【一開始顯示的文字】 |
| placeholder | 提示文字 | |
| checked | checked | 開啟頁面預設選中某一項 【主要針對於單選按鈕和核取方塊】 |
| maxlength | 正整數 | 規定輸入欄位中的字元的最大長度 【一般很少用】 |
-
注：
-
name 和 value 是每個表單元素都有的屬性值，主要給後臺人員使用
-
要求單選按鈕和核取方塊要有相同的 name 值
-
| type 的屬性值 | 描述 |
|---|---|
| button | 可點選按鈕（多數情況下，用於透過 JavaScript 啟動指令碼） |
| checkbox | 核取方塊 |
| file | 輸入欄位和“瀏覽”按鈕，供檔案上傳 |
| hidden | 隱藏的輸入欄位 |
| image | 影像形式的提交按鈕 |
| password | 密碼欄位，該欄位中的字元被掩碼 |
| radio | 單選按鈕 |
| reset | 重置按鈕，會清除表單中的所有資料 |
| submit | 提交按鈕，會把表單資料傳送到伺服器 |
| text | 單行的輸入欄位，使用者可在其中輸入文字，預設寬度為 20 個字元 |
- 更多請閱讀：MDN
🛠️ select
<select>
<option>選項1</option>
<option>選項2</option>
...
</select>
-
<select>中至少包含一對<option> -
在
<option>中定義selected="selected"時，當前項即為預設選中項
🛠️ textarea
<!-- cols="每行中的字元數"，rows="顯示的行數"，實際開發時用 CSS 來設定 -->
<textarea rows="3" cols="20">
文字內容
</textarea>
2.10 label 標籤
- 作用：繫結一個表單元素，當點選
<label>標籤內的文字時，就會自動跳轉到 / 選擇對應的表單元素上
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
注：for 屬性應當與相關元素的 id 屬性相同