一.HTML基本結構標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
1. <!DOCTYPE> 標籤
<!DOCTYPE> 文件型別宣告，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁
<!DOCTYPE html>
這句程式碼的意思是: 當前頁面採取的是 HTML5 版本來顯示網頁.
2. lang 語言
簡單來說,定義為en 就是英文網頁, 定義為 zh-CN 就是中文網頁
其實對於文件顯示來說，定義成en的文件也可以顯示中文，定義成zh-CN的文件也可以顯示英文
這個屬性對瀏覽器和搜尋引擎(百度.谷歌等)還是有作用的
3. charset 字符集
字符集 (Character set)是多個字元的集合。以便計算機能夠識別和儲存各種文字。
在<head>標籤內，可以通過<meta> 標籤的 charset 屬性來規定 HTML 文件應該使用哪種字元編碼。
<meta charset=" UTF-8" />
charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被稱為萬國碼，基本包含了全世界所有國家需要用到的字元.
注意：上面語法是必須要寫的程式碼，否則可能引起亂碼的情況。一般情況下，統一使用“UTF-8”編碼，儘量統一寫成標準的 "UTF-8"，不要寫成 "utf8" 或 "UTF8"。
二.常用的標籤
1.標題標籤 <h1> - <h6>（重要）
為了使網頁更具有語義化，我們經常會在頁面中用到標題標籤。HTML 提供了 6 個等級的網頁標題，即<h1> - <h6> 。
<h1> 我是一級標題 </h1>
單詞 head 的縮寫，意為頭部、標題。
標籤語義：作為標題使用，並且依據重要性遞減。
特點：加了標題的文字會變的加粗，字號也會依次變大。一個標題獨佔一行。
2.段落和換行標籤（重要）
<p> 我是一個段落標籤 </p> 換行標籤 <br />
3.文字格式化標籤
4.<div> 和<span>標籤
<div> 和 <span> 是沒有語義的，它們就是一個盒子，用來裝內容的。
<div> 標籤用來佈局，但是現在一行只能放一個<div>。 大盒子
<span> 標籤用來佈局，一行上可以多個 <span>。小盒子
5.影像標籤和路徑 (重點）
影像標籤：
在 HTML 標籤中，<img> 標籤用於定義 HTML 頁面中的影像。
<img src="影像URL" />
src 是<img>標籤的必須屬性，它用於指定影像檔案的路徑和檔名。
影像標籤的其他屬性：
6.超連結標籤 (重點）
<a href="跳轉目標" target="目標視窗的彈出方式"> 文字或影像 </a>
連結分類：
外部連結: 例如 < a href="http:// www.baidu.com "> 百度</a >。
內部連結:網站內部頁面之間的相互連結. 直接連結內部頁面名稱即可，例如 < a href="index.html"> 首頁 </a >。
空連結: 如果當時沒有確定連結目標時，< a href="#"> 首頁 </a > 。
下載連結: 如果 href 裡面地址是一個檔案或者壓縮包，會下載這個檔案。
網頁元素連結: 在網頁中的各種網頁元素，如文字、影像、表格、音訊、視訊等都可以新增超連結.
錨點連結: 點我們點選連結,可以快速定位到頁面中的某個位置.
在連結文字的 href 屬性中，設定屬性值為 #名字 的形式，如<a href="#two"> 第2集 </a>
找到目標位置標籤，裡面新增一個 id 屬性 = 剛才的名字 ，如：<h3 id="two">第2集介紹</h3>
7.特殊字元
8.表格標籤
<table> <tr> <th>表頭</th> ... </tr>
<tr>
<td>單元格內的文字</td>
...
</tr>
... </table>
<table> </table> 是用於定義表格的標籤。
<tr> </tr> 標籤用於定義表格中的行，必須巢狀在 <table> </table>標籤中。
<td> </td> 用於定義表格中的單元格，必須巢狀在<tr></tr>標籤中。
字母 td 指表格資料（table data），即資料單元格的內容。
<th> 標籤表示 HTML 表格的表頭部分
表格的結構標籤：
<thead></thead>：用於定義表格的頭部。<thead> 內部必須擁有 <tr> 標籤。 一般是位於第一行。
<tbody></tbody>：用於定義表格的主體，主要用於放資料本體 。
以上標籤都是放在 <table></table> 標籤中。
合併單元格：
跨行合併：rowspan="合併單元格的個數"
跨列合併：colspan="合併單元格的個數"
合併單元格三步曲：
先確定是跨行還是跨列合併。
找到目標單元格. 寫上合併方式 = 合併的單元格數量。比如：<td colspan=“2”></td>。
刪除多餘的單元格。
9.列表標籤
表格是用來顯示資料的，那麼列表就是用來佈局的。
列表最大的特點就是整齊、整潔、有序，它作為佈局會更加自由和方便。
根據使用情景不同，列表可以分為三大類：無序列表、有序列表和自定義列表。
無序列表（重點）：
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ... </ul>
無序列表的各個列表項之間沒有順序級別之分，是並列的。
<ul></ul> 中只能巢狀 <li></li>，直接在 <ul></ul> 標籤中輸入其他標籤或者文字的做法是不被允許的。
<li> 與 </li> 之間相當於一個容器，可以容納所有元素。
無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用 CSS 來設定。
有序列表（理解）：
<ol> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ... </ol>
<ol></ol>中只能巢狀<li></li>，直接在<ol></ol>標籤中輸入其他標籤或者文字的做法是不被允許的。
<li> 與 </li>之間相當於一個容器，可以容納所有元素。
有序列表會帶有自己樣式屬性，但在實際使用時，我們會使用 CSS 來設定。
自定義列表（重點）：
自定義列表的使用場景:
自定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何專案符號。
<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> </dl>
<dl></dl> 裡面只能包含 <dt> 和 <dd>。
<dt> 和 <dd>個數沒有限制，經常是一個<dt> 對應多個<dd>。
10.表單標籤
<form action=“url地址” method=“提交方式” name=“表單域名稱"> 各種表單元素控制元件 </form>
<input> 表單元素：
type 屬性的屬性值及其描述如下
input type="屬性值" />
除 type 屬性外，<input>標籤還有其他很多屬性，其常用屬性如下
name 和value 是每個表單元素都有的屬性值,主要給後臺人員使用.
name 表單元素的名字, 要求 單選按鈕和核取方塊要有相同的name值.
checked屬性主要針對於單選按鈕和核取方塊, 主要作用一開啟頁面,就要可以預設選中某個表單元素.
maxlength 是使用者可以在表單元素輸入的最大字元數, 一般較少使用.
<label> 標籤：
<label> 標籤為 input 元素定義標註（標籤）。
<label> 標籤用於繫結一個表單元素, 當點選<label> 標籤內的文字時，瀏覽器就會自動將焦點(游標)轉到或者選擇對應的表單元素上,用來增加使用者體驗.
<label for="sex">男</label> <input type="radio" name="sex" id="sex" />
<select> 表單元素：
在頁面中，如果有多個選項讓使用者選擇，並且想要節約頁面空間時，我們可以使用<select>標籤控制元件定義下拉選單.
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select>
<select> 中至少包含一對<option> 。
在<option> 中定義 selected =“ selected " 時，當前項即為預設選中項。
<textarea> 表單元素：
使用場景: 當使用者輸入內容較多的情況下，我們就不能使用文字框表單了，此時我們可以使用 <textarea> 標籤。
在表單元素中，<textarea> 標籤是用於定義多行文字輸入的控制元件。
使用多行文字輸入控制元件，可以輸入更多的文字，該控制元件常見於留言板，評論。
<textarea rows="3" cols="20"> 文字內容 </textarea>
通過 <textarea> 標籤可以輕鬆地建立多行文字輸入框。
cols=“每行中的字元數” ，rows=“顯示的行數”，我們在實際開發中不會使用，都是用 CSS 來改變大小。