本學習筆記是個人對 Pink 老師課程的總結歸納，轉載請注明出處！

b站視訊連結：https://www.bilibili.com/video/BV14J4114768.

筆記參考大佬：https://jerry-z-j-r.github.io/ （注：有時通路不了）

文章目錄

【HTML基礎】
一、HTML簡介
- 1.1 網頁
- - 1.1.1 什麼是網頁？
  - 1.1.2 什麼是HTML?
  - 1.1.3 網頁的形成
- 1.2 浏覽器
- - 1.2.1 常用浏覽器
  - 1.2.2 浏覽器核心
- 1.3 Web标準
- - 1.3.1 為什麼需要Web标準？
  - 1.3.2 Web标準的構成
二、HTML标簽
- 2.1 HTML文法規範
- - 2.1.1 基本文法概述
  - 2.1.2 标簽關系
- 2.2 HTML基本結構标簽
- - 2.2.1 第一個HTML網頁
- 2.3 網頁開發工具
- - 2.3.1 文檔類型聲明标簽 <!DOCTYPE html>
  - 2.3.2 lang語言種類
  - 2.3.3 字元集
- 2.4 HTML常用标簽
- - 2.4.1 标簽語義
  - 2.4.2 标題标簽 h
  - 2.4.3 段落和換行标簽 p,br,hr
  - 2.4.4 文本格式化标簽 strong、em、del、ins等
  - 2.4.5 div和span标簽
  - 2.4.6 圖像标簽和路徑 img+正斜杆和反斜杆的使用場景
  - 2.4.7 超連結标簽 a
- 2.5 HTML中的注釋和特殊字元
- - 2.5.1 注釋
  - 2.5.2 特殊字元空格、小于号、大于号，&、乘除、上下标.....
- 2.6 表格标簽
- - 2.6.1 表格的主要作用
  - 2.6.2 表格的基本文法 tr-行 td-單元格
  - 2.6.3 表頭單元格标簽 th
  - 2.6.4 表格屬性 table裡的屬性
  - 2.6.5 表格結構标簽 thead tboby
  - 2.6.6 合并單元格 rowspan colspan
- 2.7 清單标簽
- - 2.7.1 無序清單 ul
  - 2.7.2 有序清單 ol
  - 2.7.3 自定義清單 dl
- 2.8 表單标簽
- - 2.8.1 為什麼需要表單
  - 2.8.2 表單的組成
  - 2.8.3 表單域 <form>+get/post解析
  - 2.8.4 表單控件（表單元素）
  - - （1）input+label
    - （2）select
    - （3）textarea
  - 2.8.5 表單元素幾個總結
- 2.9 案例----青春不常在，抓緊談戀愛（表單）

【HTML基礎】

一、HTML簡介

1.1 網頁

1.1.1 什麼是網頁？

網站：網際網路上根據一定的規則，使用 HTML 等制作的用于展示特定内容相關的網頁集合。

網頁：網站中的一“頁”，是構成網站的基本元素，通常是 HTML 格式的檔案（.htm 或 .html）它必須通過浏覽器來閱讀。

1.1.2 什麼是HTML?

超文本：超越了普通文本的限制（圖檔 + 聲音 + 動畫 + 多媒體 + ……），同時可以從一個檔案跳轉到另一個檔案，與世界各地主機裡的檔案連結（超級連接配接文本）。

HTML：超文本标記語言（HTML 不是一種程式設計語言，而是一種标記語言，标記語言是一套标記标簽構成的）。

1.1.3 網頁的形成

前端代碼開發 ——> 浏覽器解析、渲染代碼 ——> 呈現 Web 頁面。

1.2 浏覽器

1.2.1 常用浏覽器

PC 端五大浏覽器：

IE

、

Chrome

、

Firefox

、

Safari

、

Opera

、（目前還有

Edge

）。

1.2.2 浏覽器核心

四大浏覽器核心：IE（

Trident

）、Firefox（

Gecko

）、Safari（

Webkit

）、Chrome / Opera / Edge（

Blink

屬于 Webkit 的分支）

注：目前國内浏覽器一般都采用 Webkit / Blink 核心。

1.3 Web标準

W3C：

網際網路聯盟

，國際最著名的标準化組織之一。

Web 标準：W3C 組織和其他标準化組織為 Web 開發制定的一系列标準的集合。

1.3.1 為什麼需要Web标準？

浏覽器不同，解析渲染顯示頁面的效果就有些許差異，通過 Web 标準可以統一最終顯示效果，大大減少開發者的工作量（一套代碼，多平台運作）。

遵循 Web 标準除了可以讓不同的開發人員寫出的頁面更标準、更統一外，還有以下優點：

讓 Web 的開發前景更廣闊
網頁能被更廣泛的裝置通路
更容易被搜尋引擎搜尋（排名靠前）
降低網站的流量費用
使網站更易于維護
提高頁面的浏覽速度

1.3.2 Web标準的構成

主要包括三個方面：

結構

、

表現

、

行為

。

結構：用于對網頁元素進行整理和分類，現階段主要指的是 HTML
表現：用于設定網頁元素的版式、大小、顔色等外觀樣式，主要指 CSS
行為：網頁模型的定義及互動方式的編寫，現階段主要指的是 JavaScript

Web 标準提出的最佳體驗方案：

結構

、

樣式

、

行為

互相分離。

簡單的了解：結構寫到 HTML 檔案中、表現寫到 CSS 檔案中、行為寫到 JavaScript 檔案中
一句話解釋：結構類似身體、表現類型衣服、行為類似動作（結構是一切的基礎！）

二、HTML标簽

特别提醒：在本文的 HTML 标簽知識點中會遇到許多标簽的樣式屬性，此處隻需要了解即可，因為實際開發中都是使用 CSS 來對其進行樣式的設定！

2.1 HTML文法規範

2.1.1 基本文法概述

HTML 标簽是由尖括号包圍的關鍵字詞，例如：

<html>

。

HTML 标簽通常是成對出現的，例如：

<html>

和

</html>

，我們稱為雙标簽。标簽對中的第一個标簽是開始标簽，第二個标簽是結束标簽。

有些特殊的标簽必須是單個标簽（極少情況），例如：

<br />

，我們稱為單标簽。注意：

之前有一個空格（Coding Style 編碼風格）。每個标簽都應該有結束符，即：

。是以單标簽的最後要加

以表示結束，當然即便不加

也是可以正常使用的，但還是推薦加上為好。

2.1.2 标簽關系

包含關系

<head>
    <title></title>
</head>

并列關系

<head>
</head>
<body> 
</body>

2.2 HTML基本結構标簽

2.2.1 第一個HTML網頁

每個網頁都會有一個基本的結構标簽（骨架标簽：4組），頁面内容也是在這些基本标簽上書寫的。

HTML 頁面也稱為 HTML 文檔。

【HTML 基礎結構】

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

标簽名	定義	說明
`<html>` `</html>`	HTML 标簽	頁面中最大的标簽，我們稱之為：根标簽
`<head>` `</head>`	文檔的頭部	注意：在 head 标簽中我們必須要設定的标簽是 title
`<title>` `</title>`	文檔的标題	讓頁面擁有一個屬于自己的網頁标題
`<body>` `</body>`	文檔的主體	包含文檔的所有内容，頁面内容基本都是放到 body 裡面

【title 舉例】

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

2.3 網頁開發工具

WebStorm （生态、智能、收費）
Dreamweaver （可視化、收費）
Sublime Text （插件、收費）
HBuilderX （國産、小程式、多端）
VSCode （免費、插件、輕巧）
Atom （GitHub 出品）
……

2.3.1 文檔類型聲明标簽 <!DOCTYPE html>

<!DOCTYPE>

文檔類型聲明，作用是告訴浏覽器應該使用哪種 HTML 版本來解析渲染顯示網頁。

<!DOCTYPE html>
<!-- 目前頁面采取的是 HTML5 版本 -->

注意：

<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 标簽之前
<!DOCTYPE> 不屬于 HTML 标簽，它就是文檔類型聲明标簽
目前一般都預設使用 <!DOCTYPE html>

2.3.2 lang語言種類

用來定義目前文檔顯示的主語言，在

<html>

标簽内。

en 定義語言為英語
zh-CN 定義語言為簡體中文

簡單來說：定義為

en

就是英文網頁，定義為

zh-CN

就是中文網頁。

<html lang="zh-CN"> 
</html>

注意：語言的設定是為了

浏覽器搜尋結果的推薦

及觸發

浏覽器自動翻譯功能

，并不是說設定了某類語言為主語言後文檔中就不能存在其他類型的語言了。

2.3.3 字元集

字元集：多個字元的集合，以便計算機能夠識别和儲存各種文字。

在

<head>

标簽内，可以通過

<meta>

标簽的

charset

屬性來規定 HTML 文檔應該使用哪種字元編碼。

charset

常用的值有：

GB2312

、

BIG5

、

GBK

、

UTF-8

，其中

UTF-8

也被稱為：萬國碼，基本包含了全世界所有國家需要用到的字元。

注意：字元設定是必須的，否則極大可能引起網頁亂碼。一般情況下，統一使用 “UTF-8” 編碼，盡量統一寫成标準的

UTF-8

，不要寫成 “utf8” 或 “UTF8”。

VSCode 中提供的标準骨架：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>

</html>

2.4 HTML常用标簽

2.4.1 标簽語義

簡單的了解：标簽的含義，即：這個标簽是用來幹嘛的。

2.4.2 标題标簽 h

為了使網頁更具有語義化，我們經常會在頁面中用到标題标簽。

HTML 提供了 6 個等級的網頁标題，即：

<h1>

到

<h6>

。

<h1>一級标題</h1>
<h2>二級标題</h2>
<h3>三級标題</h3>
<h4>四級标題</h4>
<h5>五級标題</h5>
<h6>六級标題</h6>

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

單詞 head 的縮寫，意為：頭部、标題。

标簽語義：作為标題使用，并且依據重要性遞減。

特點：

加了标題的文字會自動加粗，字号也會依次變大
一個标題就獨占一行，同一行标題後不會再放置其他任何内容（後期可以通過 CSS 修改）

2.4.3 段落和換行标簽 p,br,hr

在網頁中，要把文字有條理地顯示出來，就需要将這些文字分段顯示，在 HTML 标簽中，

<p>

标簽用于定義段落，它可以将整個網頁分為若幹個段落。

單詞 paragraph 的縮寫，意為：段落。

便簽語義：可以把 HTML 文檔分割為若幹段落。

特點：

文本在一個段落中會根據浏覽器視窗的大小自動換行
段落和段落之間保有空隙（段間距）
同一段落裡的不同行文字之間也有一定的空隙（行間距）

在 HTML 中，一個段落中的文字會從左到右依次排列，直到浏覽器視窗的右端，然後才自動換行。

如果希望某段文本強制換行顯示，就需要使用換行标簽

<br />

。

單詞 break 的縮寫，意為：打斷、換行。

标簽語義：強制換行。

特點：

<br /> 是個單标簽
<br /> 标簽隻是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距（段間距）

分割線：

<hr />

。

<hr />
<!-- 某些時候需要對内容塊進行分割時會用到分割線标簽 -->
<!-- 注意：實際開發中并不常用 hr 作為分割線，而是使用 CSS 盒子模型邊框來制作 -->

2.4.4 文本格式化标簽 strong、em、del、ins等

在網頁中，有時需要為文字設定粗體、斜體或下劃線等效果，這時就需要用到 HTML 中的文本格式化标簽，使文字以特殊的方式顯示。

**标簽語義：**突出重要性，比普通文字更重要。

語義	标簽	說明
加粗	`<strong>` `</strong>` 或 `<b>` `</b>`	介于可讀性、搜尋引擎優化及螢幕閱讀器适配推薦使用前者
傾斜	`<em>` `</em>` 或 `<i>` `</i>`	介于可讀性、搜尋引擎優化及螢幕閱讀器适配推薦使用前者
删除線	`<del>` `</del>` 或 `<s>` `</s>`	介于可讀性、搜尋引擎優化及螢幕閱讀器适配推薦使用前者
下劃線	`<ins>` `</ins>` 或 `<u>` `</u>`	介于可讀性、搜尋引擎優化及螢幕閱讀器适配推薦使用前者

注意：

<em></em>

标簽不隻是單純的用于傾斜文本，其核心的意義在于對元素的強調作用！是以在後期的開發中可以把一些特殊的、強調性的元素放在 em 标簽中，然後再對 em 這個盒子進行各種設定，這比把其放入其他盒子中要更合理。

2.4.5 div和span标簽

<div>

和

<span>

是沒有語義的，它們就是兩種盒子，用來對網頁進行布局和裝其他内容。

<div>這是頭部</div>
<span>今日價格</span>

div 是 division 的縮寫，表示分割、分區。

span 意為：跨度、跨距。

特點：

<div> 标簽用來布局，一行隻能放一個 <div> ，大盒子
<span> 标簽用來布局，一行上可以放多個 <span> ，小盒子

說明：後期可以通過 CSS 将 div 與 span 之間的特性互相轉換。

拓展：

span

标簽不單單是用于布局，對于一些需要特殊修飾和設定的元素，可以将其用

span

标簽嵌套起來，然後就可以單獨對其進行設定（比如：在一個 p 标簽的段落中要對其中某一句話單獨設定樣式，那麼就可以用 span 将這句話單獨嵌套起來，這樣就友善對其單獨設定樣式還不會影響其他内容，這也是利用了 span 一行可以放置多個盒子的特性）。

2.4.6 圖像标簽和路徑 img+正斜杆和反斜杆的使用場景

（1）圖像标簽

在 HTML 标簽中，

<img>

标簽用于定義 HTML 頁面中的圖像。

單詞 image 的縮寫，意為圖像。

src

是

<img>

标簽的必須屬性，它用于指定圖像檔案的路徑和檔案名。

URL

是

統一資源定位符

（通俗了解：位址、網址）。

所謂屬性：簡單了解就是屬于這個圖像标簽的特性。

圖像标簽的其他屬性：

屬性	屬性值	說明
`src`	圖檔路徑	必須屬性
`alt`	文本	替換文本，圖像不能正常顯示時用于代替的文字（注意：為了提高搜尋引擎優化 SEO 及适配螢幕閱讀器，建議都把 alt 寫上）
`title`	文本	提示文本，滑鼠放到圖檔上，顯示的提示文字
`width`	像素	設定圖像的寬度
`height`	像素	設定圖像的高度
`border`	像素	設定圖像的邊框粗細

其中設定圖像的寬度與高度時：一般設定其中之一便可，另外一個會自動按比例适配。

設定寬高時，可以使用百分數作為值，此時圖檔大小會以父元素大小的百分比作為依據。

圖像标簽的注意點：

圖像标簽可以擁有多個屬性，必須寫在标簽名的後面
屬性之間不分先後順序，标簽名與屬性、屬性與屬性之間均以空格分開
屬性采取鍵值對的格式，即： key="value" 的格式， 屬性="屬性值"

（2）路徑

相對路徑

相對路徑：以引用檔案所在位置為參考基礎，而建立出目錄路徑。

相對路徑分類	符号	說明
同一級路徑	如： `<img src="baidu.gif" />`
下一級路徑	`/`	如： `<img src="image/baidu.gif" />`
上一級路徑	`../`	如： `<img src="../image/baidu.gif" />`

絕對路徑

絕對路徑：是指目錄下的絕對位置，直接到達目的位置，通常是從盤符開始的路徑。

如：

"D:\web\img\logo.gif"

或完整的網絡位址

"http://jerry-z-j-r.github.io/readme/jerry.jpg"

注意：

相對路徑為 / （正斜杆），絕對路徑為 \ （反斜杆）
實際開發中建議使用相對路徑或網絡位址（都是 / 正斜杆）

2.4.7 超連結标簽 a

在 HTML 标簽中，

<a>

标簽用于定義超連結，作用是從一個頁面連結到另一個頁面。

（1）連結的文法格式

單詞 anchor 的縮寫，意為：錨。

兩個屬性的作用如下：

屬性	作用
`href`	用于指定連結目标的 url 位址，（必須屬性）當标簽應用 href 屬性時，它就具有了超連結的功能
`target`	用于指定連結頁面的打開方式，其中 `_self` 在目前頁面打開的方式（為預設值）， `_blank` 在新視窗中打開的方式

（2）連結分類

外部連結：例如： <a href="http://www.baidu.com" target="_blank" rel="external nofollow" >百度</a>
内部連結：網站内部頁面之間互相連結，直接連結内部頁面名稱即可，例如： <a href="index.html" target="_blank" rel="external nofollow" >首頁</a>
空連結：如果當時沒有确定連結目标時， <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >首頁</a> 或 <a href="javascript:void(0)" target="_blank" rel="external nofollow" >首頁</a>" ，推薦後者，因為前者點選後預設會跳轉到頁面頂部
下載下傳連結：如果 href 裡面位址是一個檔案或者壓縮包（前提：路徑包含檔案類型字尾名，如： .exe 、 .pdf 、 .jpg 、 .zip 等），便會下載下傳這個檔案
網頁元素連結：在網頁中的各種網頁元素，如：文本、圖像、表格、音頻、視訊等都可以添加超連結
錨點連結：點選連結，可以快速定位到目前頁面中的某個位置
- 在連結文本的 href 屬性中，設定屬性值的 #名字 的形式，如： <a href="#two" target="_blank" rel="external nofollow" >第2集</a>
- 找到目标位置标簽（此處以 h3 标簽為例），裡面添加一個 id屬性="剛才的名字" ，如： <h3 id="two">第2集介紹</h3>
- <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ></a> 預設定位到頁面頂部

2.5 HTML中的注釋和特殊字元

2.5.1 注釋

如果需要在 HTML 文檔中添加一些便于閱讀和了解但又不需要顯示在頁面中的文字，就需要使用注釋标簽。

HTML 中的注釋以：

<!--

開頭，以

-->

結束。

2.5.2 特殊字元空格、小于号、大于号，&、乘除、上下标…

在 HTML 頁面中，一些特殊的符号很難或者不友善直接使用，此時我們就可以使用下面的字元來替代。

特殊字元	描述	字元的代碼
	空格符
`<`	小于号	`<`
`>`	大于号	`>`
`&`	和号	`&`
`±`	正負号	`±`
`×`	乘号	`×`
`÷`	除号	`÷`
`²`	上标	`²`

注意：下标請使用：

<sub>2</sub>

，同時上标也建議使用：

<sup>2</sup>

。

2.6 表格标簽

2.6.1 表格的主要作用

表格主要用于顯示、展示資料。因為它可以讓資料顯示的非常的規整，可讀性非常好。特别是背景展示資料的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的資料表現得很有條理（合理的使用表格也能夠有效提高 SEO）。

**注意：**表格不是用來布局頁面的，而是用來展示資料的。表格常用于表單資料的“布局”。

2.6.2 表格的基本文法 tr-行 td-單元格

<table>
    <tr>
        <td>單元格</td>
        ...
    </tr>
    ...
</table>

<table> </table> 是用于定義表格的标簽
<tr> </tr> 用于定義表格中的行，必須嵌套在 <table> </table> 标簽中
<td> </td> 用于定義表格中的單元格，必須嵌套在 <tr> </tr> 标簽中
字母 td 指表格資料（table date），即：資料單元格的内容
單元格 td 裡面可以放任何的元素

2.6.3 表頭單元格标簽 th

一般表頭單元格位于表格的第一行或第一列，作用是：突出重要性，表頭單元格裡面的文本内容預設加粗居中顯示。

<th>

标簽表示 HTML 表格的表頭部分（table head 的縮寫）。

<table>
    <tr>
    	<th>姓名</th>
        ...
    </tr>
    ...
</table>

2.6.4 表格屬性 table裡的屬性

注意：表格标簽的屬性在實際開發中并不常用，而是通過後面的 CSS 來設定，這裡了解即可。

以下屬性都寫在 table 開始标簽内，多個屬性之間用空格隔開。

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="240">
    ...
</table>

屬性名	屬性值	描述
`align`	`left` 、 `center` 、 `right`	規定表格相對周圍元素的對齊方式（預設 left），注意指的是整個表格的對齊方式（表格是在父盒子中預設往左靠，還是居中或是往右靠），而不是指單元格内容的對齊方式（單元格内容對齊可以通過： `style="text-align: center;"` 設定）
`border`	`1` 或 `""`	規定表格單元是否擁有邊框，預設為 “”，表示沒有邊框
`cellpadding`	像素值	規定單元邊沿與其内容之間的空白，預設 1 像素（類似css的padding）
`cellspacing`	像素值	規定單元格之間的空白，預設 2 像素
`width`	像素值或百分比	規定表格的寬度
`height`	像素值或百分比	規定表格的高度

2.6.5 表格結構标簽 thead tboby

使用場景：因為表格可能很長，為了更好的表示表格的語義，可以将表格分割成：

表格頭部

和

表格主體

兩大部分。

在表格标簽中，分别用：

<thead>

标簽表示表格的頭部區域，

<tbody>

标簽表示表格的主體區域，這樣可以更好的厘清表格結構。

<thead> </thead> ：用于定義表格的頭部， <thead> 内部必須擁有 <tr> 标簽，一般是位于第一行
<tbody> </tbody> ：用于定義表格的主體，主要用于放資料本體
以上标簽都是放在 <table> </table> 标簽中

<table>
    <!-- 頭部區域 -->
    <thead>
    	<tr>
    		<th>姓名</th>
        	...
    	</tr>
    </thead>
    <!-- 主體區域 -->
    <tbody>
        <tr>
            <td>小明</td>
            ...
        </tr>
        ...
    </tbody>
</table>

2.6.6 合并單元格 rowspan colspan

特殊情況下，可以把多個單元格合并為一個單元格，這裡會最簡單的合并單元格即可。

合并單元格的方式：

跨行合并（上下合并）： rowspan="合并單元格的個數"
跨列合并（左右合并）： colspan="合并單元格的個數"

目标單元格：（寫合并代碼）

跨行：最上側單元格為目标單元格，寫合并代碼
跨列：最左側單元格為目标單元格，寫合并代碼

合并單元格三步曲：

先确定是跨行還是跨列合并
找到目标單元格，寫上 合并方式=合并的單元格數量 ，比如： <td colspan="2"> </td>
删除多餘單元格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

</html>

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

【綜合案例】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table width="400px" height="200px" align="center" border="1" cellpadding="10" cellspacing="5">
        <thead>
            <tr>
                <th>one</th>
                <th>two</th>
                <th>three</th>
                <th>four</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td rowspan="3">1</td>
                <td colspan="3">234</td>
                <!-- <td>3</td> -->
                <!-- <td>4</td> -->
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

2.7 清單标簽

根據使用情景不同，清單可以分為三大類：

無序清單

、

有序清單

和

自定義清單

。

标簽名	定義	說明
`<ul>` `</ul>`	無序标簽	裡面隻包含 li 沒有順序，使用較多，li 裡面可以包含任何标簽
`<ol>` `</ol>`	有序标簽	裡面隻包含 li 有順序，使用相對較少，li 裡面可以包含任何标簽
`<dl>` `</dl>`	自定義标簽	裡面隻能包含 dt 和 dd，dt 和 dd 裡面可以放任何标簽，dd 一般作為對 dt 的細分描述

常見應用：

無序清單

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

有序清單

注意：微網誌熱搜是舉例，實際上此處并非使用有序清單！

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

自定義清單

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

2.7.1 無序清單 ul

<ul>

标簽表示 HTML 頁面中項目的無序清單，一般會以項目符号呈現清單項，而清單項使用

<li>

标簽定義。（開發中經常使用）

無序清單的基本文法格式如下：

<ul>
    <li>清單項1</li>
    <li>清單項2</li>
    <li>清單項3</li>
    ...
</ul>

無序清單的各個清單項之間沒有順序級别之分，是并列的
<ul> </ul> 中隻能嵌套 <li> </li> ，直接在 <ul> </ul> 标簽中輸入其他标簽或者文字的做法是不被允許的，清單中的任何内容都應該放在 li 中
<li> 與 </li> 之間相當于一個容器，可以容納所有的元素
無序清單會帶有自己的樣式屬性（比如圓點），但在實際開發中，我們會使用 CSS 來設定

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

附：去除 li 前符号的方法： style="list-style: none;"

2.7.2 有序清單 ol

有序清單即為有序排列順序的清單，其各個清單項會按照一定的順序排列定義。（開發中不太常用）

在 HTML 标簽中，

<ol>

标簽用于定義有序清單，清單排序以數字來顯示，并且使用

<li>

标簽來定義清單項

有序清單的基本文法格式如下：

<ol>
    <li>清單項1</li>
    <li>清單項2</li>
    <li>清單項3</li>
    ...
</ol>

<ol> </ol> 中隻能嵌套 <li> </li> ，直接在 <ol> </ol> 标簽中輸入其他标簽或者文字的做法是不被允許的
<li> 與 </li> 之間相當于一個容器，可以容納所有的元素
有序清單會帶有自己樣式屬性（比如序号），但在實際使用時，我們會使用 CSS 來設定

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

附：去除 li 前符号的方法： style="list-style: none;"

2.7.3 自定義清單 dl

自定義清單的使用場景：

自定義清單常用于對術語或名詞進行解釋、描述和展開，定義清單的清單項前沒有任何項目符号。（開發中常用）

在 HTML 标簽中，

<dl>

标簽用于定義描述清單（或定義清單），該标簽會與

<dt>

（定義項目/名字）和

<dd>

（描述每一個項目/名字）一起使用。

其基本文法如下：

<dl>
    <dt>名詞1</dt>
    <dd>名詞1解釋1</dd>
    <dd>名詞1解釋2</dd>
</dl>

<dl> </dl> 裡面隻包含 <dt> <dd>
<dt> 和 <dd> 個數沒有限制，經常是一個 <dt> 對應多個 <dd>

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

2.8 表單标簽

2.8.1 為什麼需要表單

使用表單的目的是收集使用者資訊。

在網頁中，需要跟使用者進行互動，收集使用者資料，此時就需要表單。

2.8.2 表單的組成

在 HTML 中，一個完整的表單通常由

表單域

、

表單控件

（也稱為表單元素）和

提示資訊

3 個部分構成。

2.8.3 表單域 <form>+get/post解析

表單域是一個包含表單元素的區域。

在 HTML 标簽中，

<form>

标簽用于定義表單域，以實作使用者資訊的收集和傳遞。

<form>

會把它範圍内的表單元素資訊送出給伺服器。

<form action="url位址" method="送出方式" name="表單域名稱">
    <!-- 各種表單元素控件 -->
</form>

常用屬性：

屬性名	屬性值	作用
`action`	`url` 位址	用于指定接收并處理表單資料的伺服器程式的 url 位址
`method`	`get` / `post`	用于設定表單資料的送出方式，其取值為 get 或 post
`name`	名稱	用于指定表單的名稱，以區分同一個頁面中的多個表單域

注意：對于 HTML 基礎的學習來說，暫時不用考慮送出資料，隻需寫上 form 标簽即可，後面學習服務端程式設計階段會重新講解。

【form 表單中 method 的 get 和 post 差別】

一、get 和 post定義

form 元素的 method 屬性：用來指定發送 form 的 http 方法；

使用 get 時，form 資料集被附加到 form 元素的 action 屬性所指定的 URL 後面；

使用 post 時，form 資料集被包裝在請求的 body 中并被發送。

使用 get 送出方式，生成 URL：
user.do?loginId=abc
get 僅僅是拼接一個 URL，然後直接向服務區請求資料，需要送出給伺服器的資料集包含在 URL 中。

使用 post 送出方式，生成 URL：
user.do post會把 form 的資料集，即 loginId=abc
這個鍵值對包裝在請求的 body 中，發給伺服器，然後向伺服器請求資料。

二、get 和 Post 的差別

1、安全性

如果用 get 送出一個驗證使用者名和密碼的 form，一般認為是不安全的，因為使用者名和密碼将出現在 URL 上，進而出現在浏覽器的曆史記錄中。

顯然，在對安全性有要求的情況下，應該使用 post。

2、編碼

get 隻能向伺服器發送 ASCII 字元，而 post 則可以發送整個 ISO 10646 中的字元。

get 和 post 對應的 enctype（編碼方式）屬性有差別。enctype 有兩個值，預設值為
application/x-www-form-urlencoded
（在發送前編碼所有字元）

另一個是
multipart/form-data
（用于檔案上傳）隻能用于 post。

3、送出資料的長度。

IE 将請求的 URL 長度限制為 2083 個字元，進而限制了 get 送出的資料長度，如果 URL 超出了這個限制，送出 form 時 IE 不會有任何反映。

4、緩存

由于一個 get 得到的結果直接對應到一個 URL，是以 get 的結果頁面有可能被浏覽器緩存，而 post 一般不能。

5、引用和 SEO

可以用一個 URL 引用一個 get 的結果頁面，而 post 的結果則不能，是以必然不能被搜尋引擎搜到。

最本質的差別：

①get 是用來從伺服器上獲得資料，而 post 是用來向伺服器上傳遞資料

如果采用 post 方法，浏覽器将會按照下面兩步來發送資料。

首先浏覽器将 action 屬性中指定的表單處理伺服器建立聯系，一旦建立連接配接之後，浏覽器就會按分段傳輸的方法将資料發送給伺服器。

在伺服器端，一旦 post 樣式的應用程式開始執行時，就應該從一個标志位置讀取參數，而一旦讀到參數，在應用程式能夠使用這些表單值以前，必須對這些參數進行解碼，使用者特定的伺服器會明确指定應用程式應該如何接受這些參數。

采用 get 方法：

浏覽器會直接與表單處理伺服器建立連接配接，然後直接在一個傳輸步驟中發送所有的表單資料，然後直接在一個傳輸步驟中發送所有的表單資料。

② get 将表單中資料的按照
variable=value 的形式，添加到 action 所指向的 URL 後面，并且兩者使用 ? 連接配接，而各個變量之間使用 &
連接配接；post 是将表單中的資料放在 form 的資料體中，按照變量和值相對應的方式，傳遞到 action 所指向 URL。

三、正确的使用 get 和 post

當且僅當 form 是幂等的時候，使用 get。

幂等：多次相同的請求産生的副作用，和一次請求的副作用相同。

如果送出請求純粹隻是從伺服器端擷取資料而不是進行其他操作，并且多次送出不會有明顯的副作用，應該使用 get。

比如：搜尋引擎的查詢（
http://www.google.com/search?q=abc ）和分頁（ user.do?page=1
）

如果送出這個請求會産生其他操作和影響，就應該使用 post。

比如：修改伺服器上資料庫中的資料；發送一封郵件；删除一個檔案等

另一個要考慮因素是安全性。

若符合下列任一情況，則用 post 方法：

a.請求的結果有持續性的副作用，例如：資料庫内添加新的資料行。

b.若使用 get 方法，則表單上收集的資料可能讓 URL 過長。

c.要傳送的資料不是采用 ASCII 編碼。

若符合下列任一情況，則用 get 方法：

a.請求是為了查找資源，html 表單資料僅用來搜尋。

b.請求結果無持續性的副作用。

c.收集的資料及 html 表單内的輸入字段名稱的總長不超過 1024 個字元。

四、浏覽器差異

IE6:URL 長度限制為 2083 個字元；post 之後，重新整理頁面不會自動重新 post 資料，會出現警告。

IE7 和 IE6 相同。

Firefox：重新整理頁面不會自動重新 post 資料會出現警告。

post 和 get 容易忽視的一點差别：

就是當 method 為 get 時，action 屬性中 URL 後面的參數是忽視的。

例如：
action=insert.jsp?name=tobby method=get ，當我們送出之後真正的 url 中是沒有 name=tobby 的，他會根據表單中的内容重新組裝成一個 url 的，假如 form 中有一個文本框， <input type="text" name="address" value="wuhan"> ，那麼 url 會變成 insert.jsp?addresswuhan
。

在不确定使用哪一個更好時，優先使用 post。

【GET案例】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="http://127.0.0.1:8080/" method="GET">
        姓名：<input type="text" name="name">
        <input type="submit">
    </form>
</body>

</html>

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

【POST案例】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="http://127.0.0.1:8080/" method="POST">
        姓名：<input type="text" name="name">
        <input type="submit">
    </form>
</body>

</html>

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

2.8.4 表單控件（表單元素）

在表單域中可以定義各種表單元素，這些表單元素就是允許使用者在表單中輸入或者選擇的内容控件。

（1）input+label

在英文單詞中，input 是輸入的意思，而在表單元素中

<input>

标簽用于收集使用者資訊。

在

<input>

标簽中，包含一個 type 屬性，根據不同的 type 屬性值，輸入字段擁有很多種形式（可以是文本、字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等）。

<input /> 标簽為單标簽
type 屬性設定不同的屬性值用來指定不同的控件類型

type 屬性的屬性值及其描述如下：

屬性值	描述
`button`	定義可點選按鈕（多數情況下，用于通過 JavaScript 啟動腳本）
`checkbox`	定義複選框，即：多選框
`file`	定義輸入字段和 “浏覽” 按鈕，供檔案上傳
`hidden`	定義隐藏的輸入字段
`image`	定義圖像形式的送出按鈕
`password`	定義密碼字段，該字段中的字元被掩碼
`radio`	定義單選按鈕，在一組單選按鈕中，要求它們必須擁有相同的 name
`reset`	定義重置按鈕，重置按鈕會清除表單中的所有資料
`submit`	定義送出按鈕，送出按鈕會把表單資料發送到伺服器
`text`	定義單行的輸入字段，使用者可在其中輸入文本，預設寬度為 20 個字元

【hidden解釋】

<input type="hidden" name="..." value="..."> 上面是 html 中的隐藏域。主要作用為：

隐藏域在頁面中對于使用者是不可見的，在表單中插入隐藏域的目的在于收集或發送資訊，以利于被處理表單的程式所使用。浏覽者單擊發送按鈕發送表單的時候，隐藏域的資訊也被一起發送到伺服器。

有些時候我們要給使用者一資訊，讓他在送出表單時送出上來以确定使用者身份，如 sessionkey，等等．當然這些東西也能用 cookie 實作，但使用隐藏域就簡單的多了．而且不會有浏覽器不支援，使用者禁用 cookie 的煩惱。

有些時候一個 form 裡有多個送出按鈕，怎樣使程式能夠厘清楚到底使用者是按那一個按鈕送出上來的呢？我們就可以寫一個隐藏域，然後在每一個按鈕處加上 οnclick=“document.form.command.value=“xx”” 然後我們接到資料後先檢查 command 的值就會知道使用者是按的那個按鈕送出上來的。

有時候一個網頁中有多個 form，我們知道多個 form 是不能同時送出的，但有時這些 form 确實互相作用，我們就可以在 form 中添加隐藏域來使它們聯系起來。

javascript 不支援全局變量，但有時我們必須用全局變量，我們就可以把值先存在隐藏域裡，它的值就不會丢失了。

定義隐藏輸入字段，隐藏字段對于使用者是不可見的。隐藏字段常常存儲預設值。

通常是送出一些表格的時候，有些變量是預先定了其值的，而且不想客戶再改變其值，是以用 hidden 隐藏，但送出表單的時候還是會把其值上交上去的。

以上為基本用法，其實和文本框差不多的作用，唯一的差別就是使用者界面是不可見的。

在使有中要注意，不要将敏感資訊存放在隐藏域裡！盡管一般使用者看不到它。

【案例】
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<form action="http://127.0.0.1:8080/" method="get">
    <input type="hidden" name="name" value="農夫三拳有點甜">
    <input type="submit">
</form>

</body>

</html>
           
1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

除 type 屬性外，

<input>

标簽還有很多其他屬性，其常用屬性如下：

屬性名	屬性值	描述
`name`	由使用者自定義	定義 input 元素的名稱
`value`	由使用者自定義	規定 input 元素的值
`checked`	checked	規定此 input 元素首次加載時應當被選中
`maxlength`	正整數	規定輸入字段中的字元的最大長度

name 和 value 是每個表單元素都有的屬性值，主要給背景人員使用
name 表單元素的名字，要求：單選按鈕和複選框要有相同的 name 值
checked 屬性主要針對于單選按鈕和複選框，主要作用一打開頁面，就要可以預設選中某個表單元素
maxlength 是使用者可以在表單元素輸入的最大字元數，一般很少使用

<1>、有些表單元素剛打開頁面就須要預設顯示幾個文字怎麼做？

答：可以給這些表單元素設定

value屬性="值"

。

<2>、頁面中的表單元素很多，如何差別不同的表單元素？

答：name 屬性：目前 input 表單的名字，背景可以通過這個 name 屬性找到這個表單，頁面中的表單很多，name 的主要作用就是用于差別不同的表單。（在vscode中不顯示value的值，很奇怪）

name 屬性後面的值是自定義的
radio（或者 checkbox）如果是一組，我們必須給他們命名相同的名字

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

<3>、如果頁面一打開就讓某個單選按鈕或者複選框是選中狀态？

答：checked 屬性：表示預設選中狀态，用于單選按鈕和複選按鈕。

性 别：
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" >女

<4>、如何讓 input 表單元素展示不同的形态？比如單選按鈕或者文本框？

答：type 屬性：type 屬性可以讓 input 表單元素設定不同的形态。

<input type="radio" name="sex" value="男" checked="checked" />男
<input type="text" value="請輸入使用者名" />

<label> 标簽

<label>

标簽為 input 元素定義标注（标簽）。

<label>

标簽用于綁定一個表單元素，當點選

<label>

标簽内的文本時，浏覽器就會自動将焦點（光标）轉到或者選擇對應的表單元素上，用來增加使用者體驗。

文法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心：

<label>

标簽的 for 屬性應當與相關元素的 id 屬性相同。

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

（2）select

使用場景：在頁面中，如果有多個選項讓使用者選擇，并且想要節約頁面空間時，我們可以使用

<select>

标簽控件定義下拉清單。

文法：

<select>
    <option>選項1</option>
    <option>選項2</option>
    <option>選項3</option>
    ...
</select>

<select> 中至少包含一對 <option>
在 <option> 中定義 selected="selected" 時，目前項即為預設選中項

（3）textarea

使用場景：當使用者輸入内容較多的情況下，我們就不能使用文本框表單了，此時我們可以使用

<textarea>

标簽

在表單元素中，

<textarea>

标簽是用于定義多行文本輸入的控件。

使用多行文本輸入控件，可以輸入更多的文字，該控件常用于留言闆、評論。

文法：

<textarea rows="3" cols="20">
	文本内容
</textarea>

通過 <textarea> 标簽可以輕松地建立多行文本輸入框
cols="每行中的字元數" ， rows="顯示的行數" ，我們在實際開發中不會使用，都是用 CSS 來改變大小
如果要禁止拉伸文本框大小，則： style="resize: none"

2.8.5 表單元素幾個總結

（1）表單元素我們學習了三大組

input 輸入表單元素

、

select 下拉表單元素

、

textarea 文本域表單元素

（2）這三組表單元素都應該包含在

form 表單域

裡面，并且有

name 屬性

<form>
    <input type="text" name="username">
    <select name="jiguan">
        <option>北京</option>
    </select>
    <textarea name="message"></textarea>
</form>

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

（3）有三個名字非常相似的标簽：

表單域 form 使用場景：送出區域内表單元素給背景伺服器
檔案域 file是 input type的屬性值使用場景：上傳檔案
文本域 textarea 使用場景：可以輸入多行文字，比如：留言闆、網站介紹等……

2.9 案例----青春不常在，抓緊談戀愛（表單）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>戀愛小窩-注冊頁面</title>
</head>

<body>
    <!-- 标題 -->
    <h2>青春不常在，抓緊談戀愛</h2>

    <!-- 表單域 -->
    <!-- <form action="" method="" name="lovetable"> -->

    <!-- 系統資料庫 -->
    <table width="600">

        <!-- 第一行 -->
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="man" /><label for="man"><img src="../image/man.png" width="15" />
                    男</label>
                <input type="radio" name="sex" id="women" /><label for="women"><img src="../image/women.png"
                        width="15" /> 女</label>
            </td>
        </tr>

        <!-- 第二行 -->
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--請選擇年--</option>
                    <option selected="selected">2021</option>
                    <option>2020</option>
                    <option>2019</option>
                    <option>2018</option>
                </select>
                <select>
                    <option>--請選擇月--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <select>
                    <option>--請選擇日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </td>
        </tr>

        <!-- 第三行 -->
        <tr>
            <td>所在地區</td>
            <td>
                <input type="text" value="雲南玉溪" />
            </td>
        </tr>

        <!-- 第四行 -->
        <tr>
            <td>婚姻狀況</td>
            <td>
                <input type="radio" name="marry" id="weihun" checked="checked" /><label for="weihun">未婚</label>
                <input type="radio" name="marry" id="yihun" /><label for="yihun">已婚</label>
                <input type="radio" name="marry" id="lihun" /><label for="lihun">離婚</label>
            </td>
        </tr>

        <!-- 第五行 -->
        <tr>
            <td>學曆</td>
            <td>
                <input type="text" value="幼稚園" />
            </td>
        </tr>

        <!-- 第六行 -->
        <tr>
            <td>喜歡的類型</td>
            <td>
                <input type="checkbox" name="love" />妩媚的
                <input type="checkbox" name="love" />可愛的
                <input type="checkbox" name="love" />小鮮肉
                <input type="checkbox" name="love" />老臘肉
                <input type="checkbox" name="love" checked="checked" />都喜歡
            </td>
        </tr>

        <!-- 第七行 -->
        <tr>
            <td>自我介紹</td>
            <td>
                <textarea>自我介紹</textarea>
            </td>
        </tr>

        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免費注冊" />
            </td>
        </tr>

        <!-- 第九行 -->
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked" />我同意注冊條款和會員加入标準
            </td>
        </tr>

        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是會員，立即登入</a>
            </td>
        </tr>

        <!-- 第十一行 -->
        <tr>
            <td></td>
            <td>
                <h4>我承諾</h4>
                <ul>
                    <li>年滿18歲、單身</li>
                    <li>抱着嚴肅的态度</li>
                    <li>真誠尋找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
    <!-- </form> -->
</body>

</html>

效果：

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

本質：

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

1.【HTML基礎】：html簡介+html标簽【HTML基礎】一、HTML簡介二、HTML标簽

文章目錄

【HTML基礎】

一、HTML簡介

1.1 網頁

1.1.1 什麼是網頁？

1.1.2 什麼是HTML?

1.1.3 網頁的形成

1.2 浏覽器

1.2.1 常用浏覽器

1.2.2 浏覽器核心

1.3 Web标準

1.3.1 為什麼需要Web标準？

1.3.2 Web标準的構成

二、HTML标簽

2.1 HTML文法規範

2.1.1 基本文法概述

2.1.2 标簽關系

2.2 HTML基本結構标簽

2.2.1 第一個HTML網頁

2.3 網頁開發工具

2.3.1 文檔類型聲明标簽 <!DOCTYPE html>

2.3.2 lang語言種類

2.3.3 字元集

2.4 HTML常用标簽

2.4.1 标簽語義

2.4.2 标題标簽 h

2.4.3 段落和換行标簽 p,br,hr

2.4.4 文本格式化标簽 strong、em、del、ins等

2.4.5 div和span标簽

2.4.6 圖像标簽和路徑 img+正斜杆和反斜杆的使用場景

2.4.7 超連結标簽 a

2.5 HTML中的注釋和特殊字元

2.5.1 注釋

2.5.2 特殊字元 空格 、小于号、大于号，&、乘除、上下标…

2.6 表格标簽

2.6.1 表格的主要作用

2.6.2 表格的基本文法 tr-行 td-單元格

2.6.3 表頭單元格标簽 th

2.6.4 表格屬性 table裡的屬性

2.6.5 表格結構标簽 thead tboby

2.6.6 合并單元格 rowspan colspan

2.7 清單标簽

2.7.1 無序清單 ul

2.7.2 有序清單 ol

2.7.3 自定義清單 dl

2.8 表單标簽

2.8.1 為什麼需要表單

2.8.2 表單的組成

2.8.3 表單域 <form>+get/post解析

2.8.4 表單控件（表單元素）

（1）input+label

（2）select

（3）textarea

2.8.5 表單元素幾個總結

2.9 案例----青春不常在，抓緊談戀愛（表單）

繼續閱讀

2.5.2 特殊字元空格、小于号、大于号，&、乘除、上下标…