HTML 基礎筆記
1. HTML 基本格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中文測試</title>
</head>
<body>
這里是測試body測試內容。
</body>
</html>
2. HTML 標簽
常用標簽
- <h1> 到 <h6>：標題標簽，數字越大字體越小。
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
- <p>：段落標簽，自動換行。
<p>這是一個段落。</p>
- <hr>：水平分割線。
<hr>
- <!-- -->：注釋，不會顯示在網頁上。
<!-- 這是注釋 -->
3. 元素的屬性
常用屬性
- align：對齊方式（left、right、center）。
<p align="center">居中對齊</p>
- bgcolor：背景顏色（已廢棄，建議使用 CSS）。
<body bgcolor="#ff1234">
4. 文本元素屬性
- <b>：加粗。
<b>加粗文本</b>
- <br>：換行。
這是第一行<br>這是第二行
- <i>：斜體。
<i>斜體文本</i>
- <del>：刪除線。
<del>刪除文本</del>
- <strong>：強調文本，效果類似 <b>。
<strong>強調文本</strong>
- <u>：下劃線。
<u>下劃線文本</u>
- <small>：小字體。
<small>小字體文本</small>
- <sub>：下標。
H<sub>2</sub>O
- <sup>：上標。
100m<sup>2</sup>
- <ruby>：拼音注釋（部分瀏覽器不支持）。
<ruby>二姐<rt>(er) (jie)</rt></ruby>
- <mark>：黃色背景。
<mark>標記文本</mark>
5.超鏈接
5.1 超鏈接形式
1. 鏈接外部網站：
<a href="http://www.baidu.com">百度</a>
2. 鏈接本地文件：
<a href="1.html">本地文件</a>
3. 圖片鏈接：
<a href="1.html"><img src="abc.jpg" alt="圖片鏈接"></a>
4. 電子郵件鏈接：
<a href="mailto:123@13.com">聯系我</a>
5. 下載文件鏈接：
<a href="abc.jpg" download>下載圖片</a>
5.2 target 屬性
- _self：在當前位置打開（默認值）。
- _blank：在新窗口中打開。
<a href="http://www.baidu.com" target="_blank">百度</a>
6. 圖像標簽 <img>
- src：圖像來源。
- alt：圖像無法顯示時的替代文本。
- width 和 height：圖像的寬度和高度。
<img src="abc.jpg" alt="美女" width="100" height="200">
<img src="abc.jpg" alt="美女" width="50%" height="200%">
注意：寬度和高度的百分比是相對于父元素的，高度百分比在某些情況下可能無效。
7. 列表
7.1 無序列表 <ul>
- type：列表項前的符號（disc、circle、square）。
<ul type="disc">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
7.2 有序列表 <ol>
- type：排序方式（1、A、a、I、i）。
- start：起始值。
<ol type="1" start="5">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
8. 表格
8.1 表格結構
- <table>：表格外框。
- <tr>：行。
- <td>：單元格。
<table border="1">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
8.2 表格屬性
- border：邊框粗細。
- <th>：表頭單元格，自動居中加粗。
- colspan：橫向合并單元格。
- rowspan：縱向合并單元格。
<table border="1">
<tr>
<th colspan="3">表頭</th>
</tr>
<tr>
<td rowspan="2">合并列</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
9. HTML 實體
用于輸出一些特殊字符，例如：
- <：小于號 <
- >：大于號 >
- &：與號 &
- "：雙引號 "
- '：單引號 '
10. 表單
10.1 表單結構
<form action="submit.php" method="post">
<input type="text" name="username" placeholder="用戶名" required>
<input type="password" name="password" placeholder="密碼" required>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
10.2 表單屬性
- action：指定表單提交的地址。
- method：提交方式（get 或 post）。
- get：數據附加在 URL 后面，適合小量數據。
- post：數據封裝在請求體中，適合大量數據。
10.3 輸入框 <input>
- type：輸入框類型（text、password、submit、reset、button、email 等）。
- name：輸入框名稱，用于識別提交的數據。
- value：輸入框的初始值。
- placeholder：提示文本。
- required：必填字段。
