結構標簽
| <html> </html> | 告訴瀏覽器這個頁面是從<html> 開始，到 </html>結束 |
| <head> </head> | 網頁的頭部，用于定義一些特殊內容，如頁面標題、定時刷新、外部文件等。 |
| <body> </body> | 是網頁的身體，大部分代碼，都是在這個標簽內編寫 |
| <title> </title> | 定義瀏覽器欄目的標題 |
<head> </head>內部標簽（了解即可）
在HTML中，只有一些特殊的標簽才能在head標簽內，一般有6個。
title標簽
在HTML中，title標簽唯一的作用就是定義網頁的標題。
meta標簽（單標簽）
在HTML中，meta標簽，一般用于定義頁面的特殊信息，如頁面關鍵字、頁面描述等。這些信息不是提供給用戶看的，而是提供給搜索引擎（如百度蜘蛛、谷歌蜘蛛）看的。簡單來說，meta就是用來告訴“搜索蜘蛛”這個頁面是做什么的。
name屬性
| keywords | 網頁搜索關鍵字，可以是多個 |
| description | 網頁的描述與介紹 |
| author | 網頁的作者 |
| copyright | 版權信息 |
<!--網頁關鍵字-->
<meta name="keywords" content="這個網頁是干嘛的，科技互聯網，設計開發"/><!--網頁描述-->
<meta name="description" content="這個網頁的作用是什么"/><!--本頁作者-->
<meta name="author" content="helicopter"><!--版權聲明-->
<meta name="copyright" content="本站所有教程均為原創，版權所有，禁止轉載。否則必將追究法律責任。"/>http-equiv屬性
- 定義網頁所使用的編碼
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!--H5中簡寫-->
<meta charset=utf-8"/>- 定義網頁自動刷新跳轉
<!--當前頁面在6秒后會自動跳轉到其他頁面-->
<meta http-equiv="refresh" content="6";url="url"/>style標簽
用于定義元素的CSS樣式。
- 語法
<style type="text/css">
/*這里寫CSS樣式*/
</style>script標簽
用于定義頁面Javascript代碼，也可引入外部Javascript文件。
- 語法
<script>
/*這里寫JavaScript代碼*/
</script>link標簽
用于引入外部樣式文件（CSS文件）
- 語法
<link type="text/css" rel="stylesheet" href="css/index.css文本標簽
標題標簽
| <h1> 一級標題 </h1> |
|
|
| <h2> 二級標題 </h2> | ||
| <h3> 三級標題 </h3> | ||
| <h4> 四級標題 </h4> | ||
| <h5> 五級標題 </h5> | ||
| <h6>六級標題 </h6> |
段落標簽
<p> </p> 段落標簽，用于定義一段文字。（默認字體大小16px）
換行標簽
<br/> (單標簽）
<p>床前明月光，疑是地上霜。<br/>舉頭望明月，低頭思故鄉。</p >預覽效果
格式標簽
常用
| 粗體標簽 | <strong></strong> / <b></b> |
| 斜體標簽 | <i></i> / <em></em> / <cite></cite> |
| 上標標簽 | <sup></sup> |
| 下標標簽 | <sub></sub> |
| 中劃線標簽 | <s></s> |
| 下滑線標簽 | <u></u> |
| 大字號標簽 | <big></big> |
| 小字號標簽 | <small></small> |
其他
| 定義已經被插入文檔中的文本 | <ins> </ins> |
|
| 定義文檔中已刪除的文本 | <del> </del> | |
| 表示一個縮寫詞或者首字母縮略詞 | <abbr> </abbr> |
|
| 定義文字方向 | <bdo> </bdor> |
|
| 定義短的引用語 | <q> </q> |
|
水平線標簽
<hr/> (單標簽）
超鏈接標簽
<a href=“url"> </a> （在 href 屬性中指定鏈接的地址。）
屬性
| href | 指定鏈接目標的URL，這是鏈接的最重要屬性。可以是另一個網頁的URL、文件的URL或其他資源的URL。 |
| target（可選） | 指定鏈接如何在瀏覽器中打開，值包括： _blank（在新標簽或窗口中打開鏈接） _self（在當前標簽或窗口中打開鏈接） _parent（在父窗口打開鏈接） _top（在頂層窗口打開鏈接） |
| title（可選） | 提供鏈接的額外信息，通常在鼠標懸停在鏈接上時顯示為工具提示。 |
| rel（可選） | 指定與鏈接目標的關系，如 nofollow、noopener 等。 |
錨點鏈接
在HTML中，錨點鏈接其實是內部鏈接的一種，它的鏈接地址（也就是href）指向的是當前頁面的某個部分。所謂錨點鏈接，簡單地說，就是單擊某一個超鏈接，它就會跳到當前頁面的某一部分。
想要實現錨點鏈接，需要定義以下2個參數。
- 目標元素的id
- a標簽的href屬性指向該id。
給a標簽的href屬性賦值時，需要在id前面加上“#”（井號），用來表示這是一個錨點鏈接。
語法
<a href="#abcd"> </a>圖片標簽
<img> (單標簽）
<img src="/images/logo.png" alt="圖片提示信息" width="258" height="39" />屬性
| src | src 指 "source"。源屬性的值是圖像的 URL 地址。 |
| alt | alt 屬性用來為圖像定義一串預備的可替換的文本。 在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。 |
| title | title屬性也用于圖片描述，不過這個描述文字是給用戶看的。當鼠標指針移到圖片上時，會顯示title中的文字。 |
| height | 高度 |
| width | 寬度 |
div標簽
全稱division（分區）用于劃分HTML結構，使代碼更具有邏輯性。
表格標簽
基本結構
表格由三部分組成
- 表格：table標簽
- 行：tr標簽
- 單元格：tb標簽
- <table>和</table>表示整個表格的開始和結束，<tr>和</tr>表示行的開始和結束，而<td>和</td>表示單元格的開始和結束。
- 在表格中，有多少組“<tr></tr>，就表示有多少行
語法
<table><tr><td>單元格1</td><td>單元格2</td></tr><tr><td>單元格3</td><td>單元格4</td></tr>
</table>
默認情況下，表格是沒有邊框的。
表格標題：caption
一個表格只能有一個標題，也就只能有一個caption標簽。默認標題位于表格的第一行。
語法
<table><caption>表格標題</caption><tr><td>單元格1</td><td>單元格2</td></tr><tr><td>單元格3</td><td>單元格4</td></tr>
</table>
表頭單元格：th
- 在HTML中，單元格有兩種，一種是“表頭單元格”，使用th標簽；另外一種是“表行單元格”，使用的是td標簽。
- th指的是table header cell（表頭單元格）。td指的是table data cell（表行單元格）。
- 列表標簽
- 顯示上：瀏覽器會以“粗體”和“居中”來顯示標簽中的內容，但td標簽不會。
- 語義上：th標簽用于表頭，而td標簽用于表行。
表頭thead、表身tbody、表腳tfoot
- thead、tbody和tfoot把表格劃分為3部分：表頭、表身、表腳。
- 表腳（tfoot）往往用于統計數據。對于thead、tbody和tfoot標簽，不一定需要全部都用上，如tfoot就很少用。一般情況下，我們根據實際需要來使用這些標簽。
- 此外，thead、tbody和tfoot除了可以使代碼更具有語義，還有另外一個重要作用：方便分塊來控制表格的CSS樣式。
- 可以讓你的代碼更具有邏輯性，并且還可以很好地結合CSS來分塊控制樣式。
語法
<table><caption>表格標題</caption><!--表頭--><thead><tr><th>表頭單元格1</th><th>表頭單元格2</th></tr></thead><!--表身--><tbody><tr><td>表行單元格1</td><td>表行單元格2</td></tr><tr><td>表行單元格3</td><td>表行單元格4</td></tr></tbody><!--表腳--><tfoot><tr><td>標準單元格5</td><td>標準單元格6</td></tr></tfoot>
</table>合并行：rowspan
在HTML中，我們可以使用 rowspan屬性 來合并行。所謂的合并行，指的是將“縱向的N個單元格”合并。
語法
<td rowspan="跨域的行數"></td>
合并列：colspan
在HTML中，我們可以使用 colspan屬性 來合并列。所謂的合并列，指的是將“橫向的N個單元格”合并。
語法
<td colspan="跨域的列數"></td>
列表標簽
有序列表
- 有序列表各個列表項是有順序的。從<ol>開始，到</ol>結束。一般采用數字或字母作為順序。默認采用數字順序。
- ol，即ordered list（有序列表）。li，即list（列表項）。
- ol 標簽和 li 標簽需要配合一起使用，不可以單獨使用，而且 <ol> 標簽的子標簽也只能是li標簽，不能是其他標簽。
語法
<ol><li>列表項</li><li>列表項</li><li>列表項</li>
</ol>type屬性
| 屬性值 | 列表項符號 |
| 1 | 阿拉伯數字：1、2、3······ |
| a | 小寫英文字母：a、b、c······ |
| A | 大寫英文字母：A、B、C······ |
| i | 小寫羅馬數字：i、ii、iii······ |
| I | 大寫羅馬數字：I、II、III······ |
不同類型的有序列表
無序列表
- 無序列表的列表項是沒有順序的。從<ul>開始，到</ul>結束。默認情況下，無需列表的列表項目符號是。
- ul，即unordered list（無序列表）。li，即list（列表項）。
- ul標簽和li標簽也需要配合一起使用，不可以單獨使用，而且ul標簽的子標簽也只能是li標簽，不能是其他標簽。
語法
<ul><li>列表項</li><li>列表項</li><li>列表項</li>
</ul>type屬性
| 屬性值 | 列表項符號 |
| disc | 實心圓
|
| circle | 空心圓
|
| square | 失信正方形
|
不同類型的無序列表
自定義列表
- 定義列表由兩部份組成：名詞和描述。
- dl即definition list（定義列表），dt即definition term（定義名詞），而dd即definition description（定義描述）。
- 在該語法中，<dl>標記和</dl>標記分別定義了定義列表的開始和結束，dt標簽用于添加要解釋的名詞，而dd標簽用于添加該名詞的具體解釋。
<dl><dt>名詞</dt><dd>描述</dd>……
</dl>
自定義列表
嵌套列表 嵌套列表 2
表單標簽
form標簽
所有的表單標簽必須放在form標簽內部才可有效。
屬性
| 屬性 | 值 | 描述 |
| action | URL | 提交地址：規定當提交表單時向何處發送表單數據。 |
| name | text | 規定表單的名稱。 |
| enctype | application/x-www-form-urlencoded | 編碼方式：規定在向服務器發送表單數據之前如何對其進行編碼。（適用于 method="post" 的情況） |
| method | get | 提交方式：規定用于發送表單數據的 HTTP 方法。 |
| target | _blank | 打開方式：規定在何處打開 action URL。 |
input標簽
input是自閉合標簽（單標簽），它是沒有結束符號的。
語法
<input type="表單類型"/>type屬性
| 屬性值 | 瀏覽器效果 | 說明 |
| text |
| 單行文本框 |
| password |
| 密碼文本框 |
| radio |
| 單選框 |
| checkbox |
| 多選框 |
| button/submit/reset |
| 普通/提交/重置按鈕 |
| file |
| 文本上傳 |
單行文本
語法
<input type="text" />
屬性
| 屬性 | 屬性值 | 說明 |
| value | text | 設置文本框的默認值（占位文字） |
| size | 10 | 設置文本框的長度 |
| maxlenght | 10 | 設置單行文本框中最多可以輸入的字符數 |
密碼文本框
在單行文本框中輸入的字符是可見的，而在密碼文本框中輸入的字符不可見。
語法
<input type="password" />屬性
| 屬性 | 屬性值 | 說明 |
| value | text | 設置文本框的默認值（占位文字） |
| size | 10 | 設置文本框的長度 |
| maxlenght | 10 | 設置單行文本框中最多可以輸入的字符數 |
單選框
語法
<input type="radio" name="組名" value="取值"/>屬性
| 屬性 | 屬性值 | 說明 |
| name（必加） | text | 選項組名 |
| value（必加） | text | 選項取值 |
| checked | 空值/checked | 默認選中 |
復選框
語法
<input type="ceckbox" name="組名" value="取值"/>屬性
| 屬性 | 屬性值 | 說明 |
| name（必加） | text | 選項組名 |
| value（必加） | text | 選項取值 |
| checked | 空值/checked | 默認選中 |
按鈕
常見的按鈕有3種：普通按鈕（button），提交按鈕（submit），重置按鈕（reset）。
普通按鈕
語法
<input type="button" value="取值"/>提交按鈕
用于給服務器提交數據。
語法
<input type="submit" value="取值"/>重置按鈕
用于清除用戶在表單中輸入的內容。
只能清除當前“所在form標簽”內表單中內容，對于外部表單清除是無效的。
語法
<input type="reset" value="取值"/>按鈕標簽 button
<button>按鈕</button>
文件上傳
語法
<input type="file" />多行文本框 textarea
語法
<textarea rows="行數" cols="列數" value="取值" >默認內容</textarea>下拉列表
語法
<select><option>選項內容</option>……<option>選項內容</option>
</select>size屬性
- 設置下拉列表可以選擇多項
- 默認情況下，下拉列表只能選擇一項。如果想要同時選取多項，首先要設置multiple屬性，然后使用“Ctrl+鼠標左鍵”來選取。
- 下拉列表multiple屬性沒有屬性值
語法
<select multiple><option>選項內容</option>……<option>選項內容</option>
</select>size屬性
設置下拉列表顯示幾個列表項，取值為整數。
語法
<select size="5"><option>選項內容</option>……<option>選項內容</option>
</select>Chrome瀏覽器要求最低是4個選項，因此我們只能設置4及以上的數字。
option標簽屬性
| 屬性 | 屬性值 | 說明 |
| selected | 無 | 是否選中 |
| value | text | 選項值 |
表單元素不一定都要放在form標簽內。對于要與服務器進行交互的表單元素，必須放在form標簽內才有效。如果表單元素不需要與服務器進行交互，那就沒必要放在form標簽內。
內嵌框架 iframe
內嵌框架，是指在當前頁面再嵌入另外一個網頁。
語法
<iframe src="url" width="寬度值" height="高度值"> </iframe>
)
