HTML各知識點總結：
| 基本標籤 | 標題標籤、段落標籤、換行標籤、水平線標籤、字型樣式標籤、註釋和特殊符號 |
| 網頁插入 | 影像、超連結，視訊、音訊、列表、表格、表單、內聯框架等 |
| 超連結 | 錨連結、功能性連結 |
| 列表 | 有序列表、無序列表、自定義列表 |
| 表格 | 行、列、跨行、跨列 |
| 表單 | 提交格式、文字框、密碼框、單選框、多選框、下拉框 滑塊等 |
| 表單設定功能 | 隱藏區域、只讀模式、禁用模式 |
| 格式驗證 | 使用者提示（placehoder)、必填選項（required)、正規表示式（pattern) |
注：圖片或者音、視訊的路徑：
1、相對路徑：相對於程式碼所在的路徑，返回上級目錄用“../”
2、絕對路徑：不考慮所寫程式碼的路徑，直接複製圖片或者音、視訊的在碟符裡的路徑
一、基本標籤：
注：標籤中的各個屬性是用 空格 隔開！
1、標題標籤：
給網頁中的正文設定標題，同時可選擇標籤大小。
用法說明：
一級標題h1,二級標題則h2，後者同理。
例如：一級標籤：
格式： <h1>標題名字</h1>
2、段落標籤：
給網頁中的內容分段，但是不具有空格和換行功能。
用法說明：
段落標籤用字元p表示
例如：
格式： <p>段落內容</p>
3、換行標籤：
給網頁中內容進行換行，不具有分段和空格功能，且與段落標籤相比，內容較顯的緊湊。
用法說明：
換行標籤用br表示，並且是單標籤
格式： 選擇換行內容<br/>(自閉合、建議使用)
或者 選擇換行內容<br>
4、水平線標籤：
給網頁中內容進行水平線分隔開。
用法說明：
水平線標籤用Hr表示，也是單標籤
格式： 選擇換行內容<hr/>(自閉合、建議使用)
或者 選擇換行內容<hr>
5、字型樣式標籤：
設定字型樣式，如粗體、斜體。
用法說明：
粗體：strong
斜體：em
格式： <strong> 內容 </strong>
<em> 內容 </em>
6、註釋和特殊符號：
網頁中所表示實際上的中、英或者數字等註釋和符號。
格式： 空格：內容1 內容2 大於號：內容1 > 內容2
小於號：內容1 < 內容2 版權符號：© 內容
二、網頁插入：
1、影像：
在網頁中插入圖片。
格式 <img src="path" alt="text" title="text" width="x" height="y" />
其中 src: 影像地址 alt: 影像的替代文字（當圖片不存在或者找不到時，就會用alt中內容來表示這個圖片）
title: 懸停在圖片上的文字 width和height:設定圖片大小
2、超連結
在網頁中加入超連結，可以實現跳轉功能。
錨連結：
1、需要一個錨標記
錨標記可以在本頁面標記，在其他頁面實現跳轉； 也可以在其他頁面標記，在本頁面跳到標記的那個頁面。
2、知道要跳轉的頁面的網頁連結
格式： 錨標記： <a name="內容"></a> 有的版本用的是這個： <a id="內容"> </a>
錨連結： <a href="#內容（與錨標記中的內容是相同的）">回到錨標記對應的內容中</a>
功能性連結：
如郵件連結：mailto
格式： 郵件連結： <a href="mailto:此處輸入要跳轉的電子郵箱"> 點選跳轉 </a>
3、列表：
用來列舉各種可能的事件或者種類等等。
有序列表：ol
無序列表：ul
自定義列表：dl
`<!--有序列表--> <ol>
<li> 內容 </li>
</ol>
<!--無序列表--> <ul>
<li> 內容 </li>
</ul>
<!--自定義列表--> <dl> <!--自定義列表-->
<dt> <!-- 列表名稱-->
<dd> 內容 </dd>
</dt>
</dl>`
4、表格：
用表格來顯示各個事物的各種屬性，簡單明瞭。
使用：
表格：table
行：tr
列：td
跨行：rowspan
跨列：colspan
`<table> <!--表格-->
<tr> 內容 <!--行-->
<td> 內容
<!--列-->
</td>
</tr>
</table>`
多行多列則在表格裡多寫幾個tr、td。具體事例如下程式碼：
點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格學習</title>
</head>
<body>
<!--表格標籤
tr:行標籤
td:列標籤
-->
<table>
<tr>
<!-- colspan 跨列-->
<td colspan="4">1-1</td>
</tr>
<!--rowspan 垮行-->
<tr>
<td rowspan="2">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>
<td>3-4
</td>
</tr>
<!-- 小練習-->
<tr>
<td colspan="3">學生成績</td>
</tr>
<tr>
<td rowspan="2">哈哈</td>
<td> 語文</td>
<td> 100</td>
</tr>
<tr>
<td> 數學</td>
<td> 100</td>
</tr>
<tr>
<td rowspan="2">嘻嘻</td>
<td> 語文</td>
<td> 100</td>
</tr>
<tr>
<td> 數學</td>
<td> 100</td>
</tr>
</table>
<table> <!--表格-->
<tr> <!--行-->
<td>
<!--列-->
</td>
</tr>
</table>
</body>
</html>
三、表單：
1、提交表單的形式：常用get/post （get方式提交，可以在url中看到使用者提交的資訊，不安全，但是這種方式高效；post相對較安全，但是要想資訊不被洩露仍需後期加密）
格式： <form method="get/post" action="傳送地址"> 表單內容</form>
2、輸入框：
輸入框：input
比如輸入框、密碼框等等都用input標籤 ，標籤中的“type”的值決定了是輸入框還是其他標籤元素等等。並且儘量用“name”命名元素
type:
text(文字框)，password（密碼框），checkbox（多選框），radio（單選框），submit（提交），reset （重置），file（上傳檔案），hidden（隱藏區域），image（圖片，點選該圖片也可以提交表單），button（按鈕）等
value:
表單元件的初始值。當type為radio或者checkbox時，必須指定一個值。
size:
指定表單元件的初始寬度。當type為text或password時，表單元素的大小以字元為單位。而其他元件型別，寬度以畫素為單位。
maxlength：
type為text或password時，輸入的最大字元數
checked：
type為radio或者checkbox時，表示指定按鈕已被選中，不可更改。
注：同一型別的單選框，name名稱必須一樣，不一樣則不為單選。
格式： 文字框：<input type="text" name="名字" > 密碼框：input type="password" name="名字" >
多選框：<input type="checkbox" name="名字"> 單選框：<input type="radio" name="名字">
提交：<input type="submit" name="名字"> 重置<input type="reset" name="名字">
上傳檔案：<input type="file" name="名字"> 隱藏區域：<input type="hidden" name="名字">
圖片：<input type="image" name="名字"> 按鈕：<input type="button" name="名字">
3、下拉框：
下拉框：select
格式 <select name="下拉框的名稱">
<option value="選項的值1"> </option> （可在option標籤中加入selected表示已被選擇的選項）
<option value="選項的值2"> </option>
</select>
4、搜尋框：
在網頁中新增搜尋，可快速找到網頁中某個內容。
格式： <input type="search" name="名字">
5、滑塊：
類似音量調節的滑塊，可用來調節大小。
格式： <input type="range" max="滑塊所能滑的最大值" min="滑塊所能滑的最小值"> （滑塊對應的值要在表單提交後的網頁的網址上看到）
6、檔案域：
上傳檔案：file
格式： <input type="file" name="名字">
7、文字域：
多行文字：textarea
格式： <textarea name="名字" rows="行" cols="列"> 文字內容 </textarea>
表單的提交和重置：
提交：submit
重置：reset
格式 提交：<input type="submit" name="sub" src="提交地址">
或者以圖片形式提交：<input type="image" src="圖片地址" alt="圖片提交">
重置：<input type="reset" name="res" >
四、表單初級驗證：
判斷使用者輸入是否合理或者滿足條件，驗證失敗時，給出提示資訊。
1、郵箱驗證：
格式： <input type="email" name="email">
2、URL驗證：
格式： <input type="url" name="url">
3、數字驗證：
格式： <input type="number" name="num"> (可在此標籤中加入max,min,step來設定數字範圍以及步長大小)
4、表單驗證之提示：
預設提示資訊：placeholder（即在文字框中預設顯示的資訊）可用在所有輸入框中，在單選、多選、下拉框中無意義。
必填選項：required （設定該項必填）
正規表示式：pattern （需要的可以在網上搜尋）
五、表單其他功能：
隱藏某區域：hidden
設定只讀模式：readonly
禁用模式：disabled
注：可在標籤屬性後新增這幾個功能。如隱藏一個文字框：
格式： <input type="text" name="text" hidden>(表示該文字框已經隱藏）
滑鼠定位：實現點選文字就能將滑鼠定位到對應的框中。
格式： <label for="鎖定滑鼠的id"> 內容如（使用者名稱）</label>
<input type="text" id="給這個文字框設定一個id名">
表單相關程式碼：
`