04 - 【HTML】- 常用標簽（下篇）

表格標簽

1 表格 table

  • 在HTML中，表格是通過<table>標簽來創建的，它允許在html中以行和列的形式組織數據。
  • HTML提供了一套完整的標簽來創建功能豐富的表格。

2 表格的 結構

在這里插入圖片描述

3 表格table代碼結構

在這里插入圖片描述

4 表格結構解析

在這里插入圖片描述
在這里插入圖片描述

  1. <thead></thead>：用于定義表格的頭部。 <thead> 內部必須擁有 <tr> 標簽。 一般是位于第一行。

  2. <tbody></tbody>： 用于定義表格的主體，主要用于放數據本體 。

  3. 以上標簽都是放在 <table></table> 標簽中

在這里插入圖片描述

4.1 使用場景: ?

因為表格可能很長,為了更好的表示表格的語義，可以將表格分割成 表格頭部和表格主體兩大部分. ? 在表格標簽中，分別用：<thead>標簽 表格的頭部區域、<tbody>標簽 表格的主體區域. 這樣可以更好的分清表格結構。

4.2 實例代碼

<body><p>表格結構化，有助于提高網頁的易讀性和結構性，并有利于搜索引擎的索引和分類。</p><table border="1" width="300" height="100" align="center"cellspacing="0" cellpadding="10" bgcolor="#c8e6c9"><!-- 表名稱：學生信息表 --><caption>學生信息表</caption><!-- 表頭 --><thead><tr><th>姓名</th><th>年齡</th><th>性別</th></tr></thead><!-- 表體 --><tbody><tr><td>張三</td><td>18</td><td>男</td></tr><tr><td>李四</td><td>19</td><td>男</td></tr><tr><td>王五</td><td>20</td><td>女</td></tr></tbody><!-- 表尾 --><tfoot><tr>    <td>總計人數：</td><td>3</td><td></td></tr></tfoot></table>
</body>

4.3 瀏覽器效果

在這里插入圖片描述

4.4 總結：

  • 表格結構化，表頭部分文字劇中且加粗
  1. <thead></thead>：用于定義表格的頭部。<thead> 內部必須擁有 <tr> 標簽。 一般是位于第一行。
  2. <tbody></tbody>：用于定義表格的主體，主要用于放數據本體 。
  3. 以上標簽都是放在 <table></table> `標簽中。

5 表格代碼解析

<body><!-- HTML表格的整個主體由table標簽包裹：表格table、行tr、單元格td --><table><!-- 表格的第一行是表頭，由th標簽包裹，表示該單元格是表頭 --><tr><!-- 表頭單元格由th標簽包裹 --><th>姓名</th><th>性別</th><th>年齡</th><th>電話</th></tr><!-- 表格的第二行開始是數據行，由tr標簽包裹 --><tr><!-- 第二行的數據行，由td標簽包裹 --><td>李小小</td><td>女</td><td>16</td><td>123456789</td><tr><!-- 第三行的數據行，由td標簽包裹 --><td>張三</td><td>男</td><td>18</td><td>123456789</td></tr><tr><!-- 第四行的數據行，由td標簽包裹 --><td>李四</td><td>女</td><td>20</td><td>123456789</td></tr><tr><!-- 第五行的數據行，由td標簽包裹 --><td>王五</td><td>男</td><td>22</td><td>123456789</td></tr><!-- 整個表格結束，由table標簽包裹 --></table></body>

6 表格的主要作用

6.1 主要作用

  • 主要用于顯示、展示數據
  • 因為它可以讓數據顯示的非常的規整，可讀性非常好。
  • 特別是后臺展示數據的時候，能夠熟練運用表格就顯得很重要。
  • 一個清爽簡約的表格能夠把繁雜的數據表現得很有條理

6.2 主要用途

表格不是用來布局頁面的,而是用來展示數據的。

在這里插入圖片描述

7 表格主題結構說明表

結構標簽作用
表格主體<table> </table>是用于定義表格的標簽,表頭、行、列、單元格都包括在table中
表格的行 row<tr> </tr>用于定義表格中的行，必須嵌套在 <table> </table>標簽中
表格的單元格<td> </td>用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中。字母 td 指表格數據（table data），即數據單元格的內容。
<table><!-- 表格的第一行是表頭，由th標簽包裹，表示該單元格是表頭 --><tr><!-- 表頭單元格由th標簽包裹 --><th>姓名</th>...</tr><!-- 表格的第二行開始是數據行，由tr標簽包裹 --><tr><!-- 第二行的數據行，由td標簽包裹 --><td></td>...</tr><!-- 整個表格結束，由table標簽包裹 --></table>
  • 表頭單元格位于表格的第一行或第一列
  • 表頭單元格里面的文本內容加粗居中顯示.
  • <th> 標簽表示 HTML 表格的表頭部分(table head 的縮寫) ?
  • 從第二行開始，展示表格中表頭部分的內容

7.1 表頭單元格標簽

  • 表頭單元格位于表格的第一行或第一列
  • 表頭單元格里面的文本內容加粗居中顯示.
  • <th> 標簽表示 HTML 表格的表頭部分(table head 的縮寫)
  <table><!-- 表格的第一行是表頭，由th標簽包裹，表示該單元格是表頭 --><tr><!-- 表頭單元格由th標簽包裹 --><th>姓名</th><th>性別</th><th>年齡</th><th>電話</th></tr></table>

在這里插入圖片描述

7.2 總結

表頭單元格也是單元格, 常用于表格第一行, 突出重要性, 表頭單元格里面的文字會加粗居中顯示.

8 表格屬性

表格標簽這部分屬性我們實際開發我們不常用， 后面通過 CSS 來設置.

目的有2個:

  1. 記住這些英語單詞,后面 CSS 會使用.

  2. 直觀感受表格的外觀形態

在這里插入圖片描述

8.1 代碼演示

<body><!-- HTML表格的整個主體由table標簽包裹：表格table、行tr、單元格td --><table border="1" width="500" height="300" align="center"cellspacing="0" cellpadding="10" bgcolor="#c8e6c9"><!-- 表格的第一行是表頭，由th標簽包裹，表示該單元格是表頭 --><tr><!-- 表頭單元格由th標簽包裹 --><th>姓名</th><th>性別</th><th>年齡</th><th>電話</th></tr><!-- 表格的第二行開始是數據行，由tr標簽包裹 --><tr><!-- 第二行的數據行，由td標簽包裹 --><td>李小小</td><td>女</td><td>16</td><td>123456789</td><tr><!-- 第三行的數據行，由td標簽包裹 --><td>張三</td><td>男</td><td>18</td><td>123456789</td></tr><tr><!-- 第四行的數據行，由td標簽包裹 --><td>李四</td><td>女</td><td>20</td><td>123456789</td></tr><tr><!-- 第五行的數據行，由td標簽包裹 --><td>王五</td><td>男</td><td>22</td><td>123456789</td></tr><!-- 整個表格結束，由table標簽包裹 --></table></body>

8.2 瀏覽器效果

在這里插入圖片描述

9 實戰案例

<body><h3>著名小說排行榜</h3><table border="1" width="500" height="300" align="center"cellspacing="0" cellpadding="5" bgcolor="#c8e6c9"><tr><th>排名</th><th>關鍵詞</th><th>趨勢</th><th>今日搜索</th><th>最近七日占比</th><th>相關連接</th></tr><tr><td>1</td><td>小說</td><td><img src="down.jpg" alt=""></td><td>1000</td><td>80%</td><td><a href="#">貼吧</a><a href="#">圖片</a><a href="#">百科</a></td></tr><tr><td>2</td><td>小說</td><td><img src="down.jpg" alt=""></td><td>1000</td><td>80%</td><td><a href="#">貼吧</a><a href="#">圖片</a><a href="#">百科</a></td></tr><tr><td>3</td><td>小說</td><td><img src="down.jpg" alt=""></td><td>1000</td><td>80%</td><td><a href="#">貼吧</a><a href="#">圖片</a><a href="#">百科</a></td></tr><tr><td>4</td><td>小說</td><td><img src="up.jpg" alt=""></td><td>1000</td><td>80%</td><td><a href="#">貼吧</a><a href="#">圖片</a><a href="#">百科</a></td></tr><tr><td>5</td><td>小說</td><td><img src="up.jpg" alt=""></td><td>1000</td><td>80%</td><td><a href="#">貼吧</a><a href="#">圖片</a><a href="#">百科</a></td></tr><tr><td>6</td><td>小說</td><td><img src="up.jpg" alt=""></td><td>1000</td><td>80%</td><td><a href="#">貼吧</a><a href="#">圖片</a><a href="#">百科</a></td></tr><tr><td>7</td><td>小說</td><td><img src="down.jpg" alt=""></td><td>1000</td><td>80%</td><td><a href="#">貼吧</a><a href="#">圖片</a><a href="#">百科</a></td></tr><tr><td>8</td><td>小說</td><td><img src="down.jpg" alt=""></td><td>1000</td><td>80%</td><td><a href="#">貼吧</a><a href="#">圖片</a><a href="#">百科</a></td></tr><tr><td>9</td><td>小說</td><td><img src="up.jpg" alt=""></td><td>1000</td><td>80%</td><td><a href="#">貼吧</a><a href="#">圖片</a><a href="#">百科</a></td></tr><tr><td>10</td><td>小說</td><td><img src="down.jpg" alt=""></td><td>1000</td><td>80%</td><td><a href="#">貼吧</a><a href="#">圖片</a><a href="#">百科</a></td></tr></table></body>

9.1 瀏覽器效果

在這里插入圖片描述

10 合并單元格

特殊情況下，我們在使用表格的時候為了豐富表格的實用性，可以講臨近的單元格進行合并，這樣使得表格看上去更加符合我們需要

10.1 合并單元格方式

  • 跨行合并：
    • rowspan=“合并單元格的個數”
    • 最上側單元格為目標單元格, 寫合并代碼
  • 跨列合并：
    • colspan=“合并單元格的個數”
    • 最左側單元格為目標單元格, 寫合并代碼

10.2 合并單元格三步曲：

  • 先確定是跨行還是跨列合并。

  • 找到目標單元格. 寫上合并方式 = 合并的單元格數量。

  • 比如：<td colspan="2"></td>。刪除多余的單元格。

10.3 實例代碼

<body><table border="1" width="800" height="600" cellpadding="10" cellspacing="0" align="center" bgcolor="#f0f8ff" style="border-collapse:collapse; color:#fb07d6;"><tr><td rowspan="2" colspan="5">學生信息表</td><!-- <td></td> --><!-- <td></td><td></td><td></td> --></tr><tr><!-- <td></td> --><!-- <td></td><td></td><td></td><td></td> --></tr><tr><th>姓名</th><th>性別</th><th>年齡</th><th>電話</th><th>地址</th></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td colspan="5"></td><!-- <td></td><td></td><td></td><td></td> --></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td rowspan="2"></td><td></td><td></td><td></td><td></td></tr><tr><!-- <td></td> --><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></table>
</body>

10.4 瀏覽器效果

在這里插入圖片描述

11 表格總結

表格是一組由行和列組成的結構化數據集，可以將不同類型的數據集成在一張表中以顯示不同類型數據之間存在的某種關系。

  • 行：水平方向上的一組數據，一般為某個主題的各種數據內容。

  • 列：垂直方向上的一組數據，一般為某一項數據。

  • 單元格：表格中的顯示某一項數據的方塊。

為了可以在 HTML 頁面中實現表格的效果，HTML 提供了一系列表格元素。

  • <table> 元素：表示一個表格，作為表格的容器。

  • <tr> 元素：表示一個表格中的行。

  • <td> 元素：表示一個表格中的單元格。

HTML <th> 元素用來定義為一組單元格的標題。該元素的用法與 <td> 元素保持一致，定義在 <tr>元素中。

HTML <caption> 元素用來定義 HTML 頁面中表格的標題。該元素一般作為 <table> 元素的第一個子級元素出現，同時會顯示在表格內容中的最前面，并且會在水平方向居中顯示。

  • <thead> 元素：用來定義 HTML 頁面中表格的標題單元格的行。

  • <tbody> 元素：用來定義 HTML 頁面中表格的主體（表格中真正的數據內容）。

  • <tfoot> 元素：用來定義 HTML 頁面中表格一組各列的匯總行。

CSS caption-side 屬性用來設置 HTML 頁面中表格的 <caption> 元素顯示的位置，該屬性需要與 <caption> 屬性配合使用。

  • top：默認值，表示表格標題顯示在表格的上方。

  • bottom：表示表格標題顯示在表格的下方。

表格是由行、列、單元格組成，在HTML中用標簽表示。

表格樣式可以用css設置：

偽類選擇器作用
selector:first-child用來定位一組兄弟元素中的第一個元素
selector:last-child用來定位一組兄弟元素中的最后一個元素
selector:nth-child(n)用來定位一組兄弟元素中的第 n 個元素
selector:nth-last-child(n)用來定位一組兄弟元素中倒序方式的第 n 個元素
selector:first-of-type用來定位一組同類型的兄弟元素中的第一個元素
selector:last-of-type用來定位一組同類型的兄弟元素中的最后一個元素
selector:nth-of-type(n)用來定位一組同類型的兄弟元素中的第 n 個元素
selector:nth-last-of-type(n)用來定位一組同類型的兄弟元素中倒序方式的第 n 個元素
selector:only-child用來定位一個沒有任何兄弟元素的元素
selector:only-of-type用來定位一個沒有任何同類型兄弟元素的元素
selector:empty用來定位一個沒有子級元素的元素，并且該元素也沒有任何文本內容
selector:root用來定位 HTML 頁面中的根元素（<html>）

12 表格的相關標簽

表格

?	table  caption thead  body  tr  th  td

表格的相關屬性

?	cellspacing    cellpadding     width  height  border

合并單元格

?	  rowspan   collspan

列表標簽

1 列表

  • 表格是用來顯示數據的
  • 列表就是用來布局的

1.1 特點

列表最大的特點

  • 整齊
  • 整潔
  • 有序
  • 它作為布局會更加自由和方便

2 列表分類

  1. 無序列表
  2. 有序列表
  3. 自定義列表

3 應用場景

在這里插入圖片描述

                                 無序列表

在這里插入圖片描述

                                有序列表

在這里插入圖片描述

                                自定義列表

4 有序列表

4.1 什么是有序列表

有序列表（Ordered List)是一種以數字、字母或其他有序符號標記項目排列的列表形式通常用于表示步驟、優先級或時間序列等需要明確順序的內容。通俗來講，有序列表就是把所有列表項依次排序下去，使其具有一定邏輯性和優先級。

4.2 語法格式

  • 父級標簽 ：<ol>開始到</ol>結束 包裹
  • 子代標簽：列表項則是用<li></li>標簽
  • <li> 與 </li>之間相當于一個容器，可以容納所有元素。
  • 有序列表會帶有自己樣式屬性， 但在實際使用時，我們會使用 CSS 來設置。

4.3 注意

li標簽是嵌在ol標簽內，兩者不可以單獨使用必須搭配使用，ol標簽內的子標簽只能放li標簽，不能放其他標簽
li標簽之間可以放任何標簽

4.4 有序列表的type屬性

屬性值列表項符號
type=“1”以阿拉伯數字形式進行排序：1，2，3…
type = “a”以小寫字母進行排序：a,b,c…
type = “A"以大寫字母進行排序：A，B，C…
type = “i”以小寫羅馬數字進行排序：i,ii,iii
type = “I”以大寫羅馬數字進行排序：I,II,III…
start從數字幾開始。
reversed倒序，數字倒序，字母倒序

4.5 實例代碼

<body><!-- 有序列表 --><ol><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol><!-- 有序列表的屬性 type --><ol type="A"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol><!-- 有序列表的屬性 start  --><ol start="5"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol><!-- 有序列表的屬性 reversed --><ol reversed><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol><!-- 有序列表的屬性 type --><ol type="a"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol><!-- 有序列表的屬性 type --><ol type="I"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol><!-- 有序列表的屬性 type --><ol type="i"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol><!-- 有序列表的屬性 type --><ol type="1"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol><!-- 有序列表的屬性 type --><ol type="A" reversed><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol>
</body>

4.6 瀏覽器效果

在這里插入圖片描述

4.7 總結

  • 當不設置type屬性時，列表項前面符號就默認是阿拉布數字，我們想設置成什么形式只需改一下type的值即可
  • 當單獨使用start屬性時，只能以數字幾開始決定有序列表的序號，只對數字起作用

5 無序列表

5.1 什么是無序列表

無序列表(Unordered List)是一種用于呈現項目集合的排版方式，其特點是不強調項目的順序或優先級。每個列表項通常以符號（如圓點、短橫線等）標記，而非數字或字母編號。無序列表適用于羅并列關系的內容，例如購物清單、功能列表等

5.2 語法格式

  • 父級標簽：<ul></ul>
  • 子代標簽：<li></li>

5.3 規則

ul 只能搭配 li使用 ul中不能包含任何標簽
li標簽內部可以使用任何標簽

5.4 注意

  • 語法中使用<ul></ul>標簽對搭配<li></li>標簽使用
  • 使用規則與有序列表一致
  • ul只能和li搭配使用，且ul內部只能是li標簽
  • ul內部的文本只能在li元素內部添加
  • 前端開發中總是用到的都是無序列表
  • <li> 與 </li> 之間相當于一個容器，可以容納所有元素。

5.5 無序列表的type屬性

通常情況下，無序列表列表項符號是實心原點，它和有序列表一樣，更改列表項符號用到的也是type屬性。

屬性值列表項符號
type = “disc”實心原點
type = “circle”空心圓
type = “square”正方形

5.6 實例代碼

<body><!-- 無序列表 默認狀態--><ul><li>無序列表1</li><li>無序列表2</li><li>無序列表3</li></ul><!-- 無序列表的屬性 type disc :實心原點 --><ul type="disc"><li>無序列表1</li><li>無序列表2</li><li>無序列表3</li></ul><!-- 無序列表的屬性 type circle --><ul type="circle"><li>無序列表1</li><li>無序列表2</li><li>無序列表3</li></ul><!-- 無序列表的屬性 type square :實心方塊 --><ul type="square"><li>無序列表1</li><li>無序列表2</li><li>無序列表3</li></ul>
</body>

5.7 瀏覽器效果

在這里插入圖片描述

6 自定義列表

6.1 什么是定義列表

定義列表（Definition List）是一種用于展示術語及其對應解釋的HTML元素，通常由術語(<dt>)和定義描述(<dd>）兩部分組成。其結構清晰，適合呈現詞匯表、術語解釋等場景。我們可以簡單將其看成“名詞解釋”，名詞用dt，解釋用dd

6.2 應用場景

網頁底部 footer區域
在這里插入圖片描述

6.3 語法格式

  • 父級標簽：<dl></dl>
  • 兄弟級別：<dt>自定義列表1:表頭</dt>
  • 兄弟級別：<dd>自定義列表1的內容:列表項</dd>

6.4 規則

  • dl標簽包含 dt和dd兩個兄弟標簽，同樣 dl標簽內不允許有任何其他標簽
  • dt標簽 定義的是列表表頭
  • dl標簽 定義的是列表項
  • <dt> 和 <dd>個數沒有限制， 經常是一個<dt> 對應多個<dd>。

6.5 注意

在 HTML 標簽中， <dl> 標簽用于定義描述列表（或定義列表），該標簽會與 <dt>（ 定義項目/名字）和<dd>（ 描述每一個項目/名字）一起使用

6.6 實例代碼

<body><!-- 自定義列表 --><dl><dt>自定義列表1</dt><dd>自定義列表1的內容</dd><dd>自定義列表1的內容</dd><dd>自定義列表1的內容</dd><dd>自定義列表1的內容</dd><dt>自定義列表2</dt><dd>自定義列表2的內容</dd><dd>自定義列表2的內容</dd><dd>自定義列表2的內容</dd><dd>自定義列表2的內容</dd><dt>自定義列表3</dt><dd>自定義列表3的內容</dd><dd>自定義列表3的內容</dd><dd>自定義列表3的內容</dd><dd>自定義列表3的內容</dd></dl></body>

6.7 瀏覽器效果

在這里插入圖片描述

7 列表總結

在這里插入圖片描述

注意：

  1. 學會什么時候用無序列表， 什么時候用自定義列表。

  2. 無序列表和自定義列表代碼怎么寫？

  3. 列表布局在學習完 CSS 后再來完成。

表單標簽

1 表單定義

HTML表單???是HTML頁面上用于收集用戶輸入的一種元素，用戶可以通過表單輸入數據，這些數據隨后可以被提交到服務器進行處理。表單通常包含一系列的輸入字段，如文本域、?單選按鈕、?復選框等，用戶可以根據需要填寫這些字段。?

表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復選框等等）輸入信息的元素。
表單使用表單標簽（ ）定義。

2 表單應用領域

現實中的表單，我們去銀行辦理信用卡填寫的單子。
在這里插入圖片描述

網頁中的表單展示
在這里插入圖片描述

3 為什么需要表單呢

  • 為了收集用戶信息。

在我們網頁中， 我們也需要跟用戶進行交互，收集用戶資料， 此時就需要表單

4 表單組成 :

  • 表單控件 : 文本輸入框 , 復選框 , 按鈕 ;
  • 提示信息 : 用于 提示用戶如何進行操作 ;
  • 表單域 : 表單的容器 , 上述 表單控件 和 提示信息 就被封裝在 表單域 中 , 在 表單域 中可以 定義 處理 表單數據的 地址 和 提交數據到服務器 的函數 ;

在這里插入圖片描述
在這里插入圖片描述

4.1 表單域

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

  • 在 HTML 標簽中， <form> 標簽用于定義表單域，以實現用戶信息的收集和傳遞。
  • HTML表單域是用于收集用戶輸入信息并將其提交到服務器的重要組件
  • <form> 會把它范圍內的表單元素信息提交給服務器
4.1.1 什么是表單域

表單域是一個包含表單元素的容器，使用 <form> 標簽來定義。它提供了一個區域，用戶可以在其中輸入數據，然后通過提交操作將這些數據發送到服務器進行處理。

<form action=“url地址” method=“提交方式” name=“表單域名稱">
各種表單元素控件
</form>
<body><!-- form表單域 --><!-- form 表單域的屬性：action：指定表單數據提交的url地址method：指定表單數據提交的方式get：將表單數據提交到地址欄post：將表單數據提交到表單域--><form action="http://www.baidu.com" method="get"><p>用戶名：<input type="text" name="username" id=""></p><p>密碼：<input type="password" name="password" id=""></p></form>
</body>
4.1.2 表單域的主要屬性

從示例代碼中可以看到，表單域主要包含以下關鍵屬性：

  1. action ：指定表單數據提交的URL地址
    • 如示例中的 action=“http://www.baidu.com” 表示數據將提交到百度網站
    • 通常會指向服務器上處理表單數據的腳本文件
  2. method ：指定表單數據提交的方式
    • get ：將表單數據附加在URL地址后面提交（顯示在地址欄中）
    • post ：將表單數據放在HTTP請求體中提交（不會顯示在地址欄）
    • 示例中使用的是 method=“get”

注意：每個表單元素通常需要設置 name 屬性，服務器通過這個屬性來識別提交的數據。

4.1.3 表格展示

在這里插入圖片描述

4.1.4 表單數據提交過程
  1. 用戶在表單中填寫信息
  2. 點擊提交按鈕（示例中未包含，但通常會有）
  3. 瀏覽器根據 method 屬性指定的方式，將表單數據按照 action 屬性指定的URL發送
  4. 服務器接收并處理這些數據

表單是網站交互性的重要組成部分，廣泛應用于用戶注冊、登錄、信息提交等場景。

4.2 面試題

一 、 GET和POST方法的區別 ?

在HTML表單提交中，GET和POST是兩種常用的HTTP請求方法，它們在數據傳輸方式、安全性、數據量限制等方面存在明顯區別：

4.2.1 數據傳輸方式

  • GET ：表單數據會附加在URL地址后面，以 ? 開頭，多個參數之間用 & 分隔

    • 例如： http://www.example.com?username=john&password=123
    • 數據可見，會顯示在瀏覽器地址欄中

  • POST ：表單數據被包裝在HTTP請求體中發送

    • 數據不會顯示在地址欄中，對用戶不可見
4.2.2 安全性

  • GET ：相對不安全，因為數據明文顯示在URL中

    • 不適合傳輸敏感信息（如密碼、信用卡號等）
    • 數據可以被瀏覽器歷史記錄、服務器日志等保存

  • POST ：相對更安全，數據在請求體中傳輸

    • 雖然也不是完全加密的（除非使用HTTPS），但比GET更適合傳輸敏感信息
4.2.3 數據量限制

  • GET ：受URL長度限制，通常最多只能傳輸約2KB-8KB的數據

    • 不同瀏覽器和服務器對URL長度有不同限制

  • POST ：理論上沒有數據量限制（實際受服務器配置影響）

    • 適合傳輸大量數據，如文件上傳、長表單等
4.2.4 緩存與歷史

  • GET ：請求可以被瀏覽器緩存，可以保存在瀏覽器歷史記錄中

    • 可以添加書簽

  • POST ：請求不會被緩存，不會保存在歷史記錄中

    • 不能添加書簽
4.2.5 冪等性
  • GET ：是冪等的（對同一URL的多次請求應該返回相同結果，且不會改變服務器狀態）
  • POST ：不是冪等的（多次提交可能會導致不同的結果，如重復提交訂單）
4.2.6 應用場景選擇
  • GET ：適合獲取數據，如搜索、查詢操作
  • POST ：適合提交數據、修改服務器狀態，如用戶注冊、登錄、表單提交等
    從示例代碼中可以看到，當前表單使用的是 method=“get” ，用戶名和密碼會顯示在URL中傳輸，在實際應用中，登錄表單通常應該使用 method=“post” 以提高安全性。

4.3 表單控件(表單元素)

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

HTML表單控件是用于收集用戶輸入的各種元素，它們被放置在 <form> 標簽內

4.3.1 表單元素分類

  1. input輸入表單元素

  2. select下拉表單元素

  3. textarea 文本域元素

4.3.2 input輸入表單元素
在英文單詞中， input 是輸入的意思，而在表單元素中 <input> 標簽用于收集用戶信息

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

<input type="屬性值" />
  • 標簽為單標簽
  • type 屬性設置不同的屬性值用來指定不同的控件類型
4.3.3 input語法

在這里插入圖片描述

4.3.4 input 的 type 屬性值

在這里插入圖片描述

4.3.5 input 屬性
HTML的 <input> 標簽是表單中最常用的控件之一，它有多種屬性可以控制其行為、外觀和驗證方式。以下是常見的 <input> 屬性分類及說明：
4.3.5.1 一、基本屬性

    type

    • 定義輸入控件的類型

    • 常見值：text（文本）、password（密碼）、radio（單選按鈕）、checkbox（復選框）、submit（提交按鈕）、reset（重置按鈕）、button（普通按鈕）、file（文件上傳）、number（數字）、date（日期）、email（郵箱）等

    • 如當前文件中的 type=“text” 和 type=“password”

    name

    • 定義控件的名稱，用于表單提交時識別數據

    • 服務器通過此屬性獲取對應的值

    • 如當前文件中的 name=“username” 和 name=“password”

    value

    • 設置或獲取輸入控件的當前值

    • 可作為初始默認值

    • 示例:

<input type="text" name="username" value="默認用戶名">

    id

    • 定義控件的唯一標識符

    • 常用于與<label>標簽關聯或通過JavaScript操作元素

    • 示例：

    • <input type="text" id="username" name="username">

    class

    • 定義控件的CSS類名，用于樣式設置

    • 示例：

    • <input type="text" class="form-input" name="username">

    placeholder

    • 提供輸入框的提示文本，當輸入框為空時顯示

    • 示例：

    • <input type="text" name="username" placeholder="請輸入用戶名">
4.3.5.2 二、驗證屬性

    required

    • 表示該輸入框為必填項，提交表單時會進行驗證

    • 示例：

    • <input type="text" name="username" required>

    pattern

    • 定義用于驗證輸入值的正則表達式

    • 示例：

    • <input type="text" name="phone" pattern="^1[3-9]\d{9}$" placeholder="請輸入手機號">

    minlength/maxlength

    • 限制輸入文本的最小/最大長度（字符數）

    • 示例：

    • <input type="text" name="username" minlength="2" maxlength="20">

    min/max

    • 對于數字、日期等類型，限制輸入值的最小/最大值

    • 示例：

    • <input type="number" name="age" min="0" max="120">

    step

    • 對于數字、日期等類型，定義輸入值的步長

    • 示例：

    • <input type="number" name="quantity" step="1">
4.3.5.3 三、狀態屬性

    readonly

    • 設置輸入框為只讀狀態，用戶無法編輯但可以選擇和復制內容

    • 示例：

    • <input type="text" name="username" value="只讀內容" readonly>

    disabled

    • 禁用輸入框，用戶無法交互，且不會隨表單提交

    • 示例：

    • <input type="text" name="username" disabled>

    checked

    • 對于單選按鈕和復選框，設置默認選中狀態

    • 示例：

    • <input type="checkbox" name="agree" checked>
4.3.5.4 四、樣式與行為屬性

    size

    • 定義輸入框的寬度（字符數）

    • 示例：

    • <input type="text" name="username" size="30">

    autofocus

    • 頁面加載時自動聚焦到該輸入框

    • 示例：

    • <input type="text" name="username" autofocus>

    autocomplete

    • 控制瀏覽器是否可以自動填充輸入值

    • 常見值：on（開啟）、off（關閉）

    • 示例：

    • <input type="text" name="username" autocomplete="on">

    multiple

    • 對于文件上傳類型，允許選擇多個文件

    • 示例：

    • <input type="file" name="photos" multiple>

    accept

    • 對于文件上傳類型，指定可接受的文件類型

    • 示例：

    • <input type="file" name="avatar" accept="image/*">

    form

    • 指定輸入控件所屬的表單（當控件不在表單內部時使用）

    • 示例：

    • <input type="text" name="username" form="myForm">
4.3.5.5 五、其他屬性

    list

    • 關聯一個<datalist>元素，提供輸入建議

    • 示例：

    • <input type="text" name="browser" list="browsers">

    spellcheck

    • 控制是否對輸入內容進行拼寫檢查

    • 示例：

    • <input type="text" name="message" spellcheck="true">

這些屬性可以根據需要組合使用，以創建功能豐富、用戶友好的表單控件。不同的type類型可能支持特定的屬性，在使用時需注意兼容性。

4.3.6 實例代碼
<body><form action="http://www.baidu.com" method="get"><ul><li>用戶名：<input type="text" placeholder="請輸入用戶名" name="username" id=""></li><li>密碼：<input type="password" placeholder="請輸入密碼" name="password" id=""></li><li>性別：<input type="radio" name="sex" value="男" id="" checked>男<input type="radio" name="sex" value="女" id="">女</li><li>手機號：<input type="tel" name="phone" placeholder="請輸入手機號" id=""></li><li>郵箱：<input type="email" placeholder="請輸入郵箱" name="email" id=""></li><li>網址：<input type="url" placeholder="請輸入網址" name="url" id=""></li><li>搜索：<input type="search" placeholder="請輸入搜索內容" name="search" id=""></li><li>文本域：<textarea name="textarea" placeholder="請輸入您的評價" id="" cols="30" rows="10"></textarea></li><li>家庭住址：<select name="select" id=""><option value="1" >請選擇</option><!-- 被選中 selected 默認選擇 --><option value="1" selected>北京</option><option value="2">上海</option><option value="3">廣州</option><option value="4">深圳</option></select></li><li>隱藏字段：<input type="hidden" name="data-AI-id" id=""></li><li>顏色選擇器：<input type="color" name="color" id=""></li><li>日期：<input type="date" name="date" id=""></li><li><!-- multiple：可多選文件進行上傳accept：指定文件類型圖片：image/*視頻：video/*音頻：audio/*文檔：application/*所有文件：*-->文件上傳：<input type="file" name="file" id="" multiple accept="image/*"></li><li>重置：<input type="reset" value="重置"></li><li>忘記密碼：<input type="button" value="忘記密碼"></li><li>提交：<input type="submit" value="提交"></li></ul></form>
</body>
4.3.7 瀏覽器效果

在這里插入圖片描述

4.3.8 <label> 標簽
<label> 標簽為 input 元素定義標注（ 標簽）。<label> 標簽用于綁定一個表單元素, 當點擊<label> 標簽內的文本時，瀏覽器就會自動將焦點(光標)轉到或者選擇對應的表單元素上,用來增加用戶體驗.
4.3.8.1 語法格式

  • 第一種：label 標簽中的for 屬性值 要和 元素標簽的 id 屬性值同名

  • 第二種： 直接將元素標簽包含在 label標簽內

4.3.8.2 實例代碼
<body><ul><li><label for="username">用戶名：</label><input type="text" id="username" name="username"></li><li><label for="password">密碼：</label><input type="password" id="password" name="password"></li><li>性別：<label><input type="radio" name="sex" id="sex">男</label><label><input type="radio" name="sex" id="sex">女</label></li></ul>
</body>
4.3.8.3 瀏覽器效果

在這里插入圖片描述

4.3.9 <select> 表單元素
使用場景: 在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時， 我們可以使用<select>標簽控件定義下拉列表。

在這里插入圖片描述

在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時， 我們可以使用<select>標簽控件定義下拉列表.
4.3.9.1 語法格式
<select>
<option>選項1</option> 
<option>選項2</option> 
<option>選項3</option> 
...
</select>
    1. <select> 中至少包含一對<option> 。
    1. 在<option> 中定義 selected =“ selected " 時，當前項即為默認選中項
4.3.9.2 屬性

  • select選項中屬性有哪些

    1. name屬性：用于指定select元素的名稱，提交表單時使用。

    2. id屬性：用于指定select元素的唯一標識符，用于JavaScript操作。

    3. size屬性：用于指定select元素的可見選項數量，默認值為1。

    4. multiple屬性：用于指定select元素是否可以選擇多個選項，默認值為false。

    5. disabled屬性：用于指定select元素是否禁用，默認值為false。

    6. required屬性：用于指定select元素是否必填，默認值為false。

    7. form屬性：用于指定select元素所屬的表單，默認值為當前表單。

    8. option屬性：用于指定select元素的選項，每個選項都有value屬性和text屬性。

    9. selected屬性：用于指定select元素的默認選中選項，默認值為false。

    10. onchange屬性：用于指定select元素選項改變時觸發的事件，默認值為空。

<body><select name="select" id="select"><option value="1">選項1</option><option value="2">選項2</option><option value="3">選項3</option><option value="4">選項4</option><option value="5">選項5</option><option value="6">選項6</option></select>
</body>
4.3.10 <textarea> 表單元素
使用場景: 當用戶輸入內容較多的情況下，我們就不能使用文本框表單了，此時我們可以使用 <textarea> 標簽。在表單元素中， <textarea> 標簽是用于定義多行文本輸入的控件。使用多行文本輸入控件，可以輸入更多的文字，該控件常見于留言板， 評論
4.3.10.1 語法格式
<textarea rows="3" cols="20">文本內容</textarea>

  1. 通過 <textarea> 標簽可以輕松地創建多行文本輸入框。

  2. cols=“每行中的字符數” ， rows=“顯示的行數”， 我們在實際開發中不會使用，都是用 CSS 來改變大小。

4.4 表單總結

  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. 有三個名字非常相似的標簽:

  • (1) 表單域 form 使用場景: 提交區域內表單元素給后臺服務器

  • (2) 文件域 file 是input type 屬性值 使用場景: 上傳文件

  • (3) 文本域 textarea 使用場景: 可以輸入多行文字, 比如留言板 網站介紹等…

  1. 我們當前階段不需要提交表單元素,所以我們只負責表單元素的外觀形態即可

查閱文檔

經常查閱文檔是一個非常好的學習習慣。

推薦的網址：

? 百度: http://www.baidu.com

? W3C : https://www.w3school.com.cn/

? MDN: https://developer.mozilla.org/zh-CN/

內容制作不易，請各位粉絲們 關注💕、收藏??、點贊🙏🙏🙏、評論💯！
你們的支持🎉🎉🎉是我創作莫大的支持，謝謝各位粉

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/95808.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/95808.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/95808.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

nVisual從入門到精通—應用實例

nVisual從入門到精通—應用實例

五、應用實例 5.1 數據中心的規劃設計 5.1.1 規劃設計流程5.1.2 創建模型庫 5.1.2.1 設備模型庫 設備模型庫基于組織內實際使用的設備型號進行構建&#xff0c;主要包含以下對象類型&#xff1a;機柜、網絡設備、板卡、組合模型。 設備屬性字段&#xff1a;除系統保留字段&…
閱讀更多...
代碼可讀性的詳細入門

代碼可讀性的詳細入門

&#x1f3e0;個人主頁&#xff1a;塵覺主頁 文章目錄前言一、可讀性的重要性二、用名字表達代碼含義三、避免名字歧義四、良好的代碼風格五、注釋的價值六、如何編寫注釋七、提高控制流的可讀性八、拆分長表達式九、變量與可讀性十、抽取函數十一、一次只做一件事十二、用自然…
閱讀更多...
輪軌法向接觸斑計算

輪軌法向接觸斑計算

輪軌法向接觸斑計算 &#xff0c;同時輸出 接觸斑面積、長軸 a、短軸 b、最大 Hertz 壓力 pmax 等關鍵指標 算法基于 Hertz 接觸理論&#xff08;適用于單點橢圓接觸&#xff09;&#xff0c;并給出如何擴展到 非 Hertz / 有限元驗證的提示。1 理論回顧&#xff08;Hertz 橢圓…
閱讀更多...
實習結束，秋招開啟

實習結束，秋招開啟

大家好&#xff0c;依舊是你們的老朋友仰望-星空~~&#xff0c;我又消失了3個月&#xff0c;快四個月了&#x1f604;&#xff0c;不少文章都 落灰了。這段時間其實一直在忙著找實習&#xff0c;然后準備面試題、刷算法、做項目啥的&#xff0c;也是比較忙碌的&#xff0c;也就…
閱讀更多...
14 C++ STL 容器實戰：stack/list 模擬實現指南 + priority_queue 用法及避坑技巧

14 C++ STL 容器實戰：stack/list 模擬實現指南 + priority_queue 用法及避坑技巧

stack和queuestack的模擬實現和應用--底層就是順序表從棧的接口中可以看出&#xff0c;棧實際是一種特殊的vector&#xff0c;因此使用vector完全可以模擬實現stack。#include<vector> namespace Stack { template<class T> class stack { public:stack() {}void p…
閱讀更多...
Linux基礎指令（入門必備2.0）

Linux基礎指令（入門必備2.0）

創作初心&#xff1a;在加深個人對知識系統理解的同時希望可以幫助到更多需要的同學 &#x1f604;柯一夢的專欄系列 &#x1f680;柯一夢的Gitee主頁 &#x1f6e0;?柯一夢主頁詳情 座右銘&#xff1a;心向深耕&#xff0c;不問階序&#xff1b;汗沃其根&#xff0c;花自滿枝…
閱讀更多...
《失落之魂》M站評分僅40？國產動作類游戲究竟何去何從？

《失落之魂》M站評分僅40？國產動作類游戲究竟何去何從？

前段時間頻頻預熱的國產動作游戲《失落之魂》已正式發售&#xff0c;外媒Push Square發布了該作的階段性評測。評測指出&#xff0c;盡管《失落之魂》在規模上已接近3A級&#xff0c;但能感受到其獨立制作的根基。這款游戲于2016年通過索尼“中國之星計劃”獲得支持&#xff0c…
閱讀更多...
一個專為地圖制圖和數據可視化設計的在線配色網站，可以助你制作漂亮的地圖！

一個專為地圖制圖和數據可視化設計的在線配色網站，可以助你制作漂亮的地圖！

ColorBrewer 是一個專為地圖制圖和數據可視化設計的在線配色工具&#xff0c;由賓夕法尼亞州立大學地理學教授 Cynthia Brewer 及其團隊開發 。 它提供了科學、美觀且考慮周全的配色方案&#xff0c;旨在幫助用戶&#xff08;無論是科研人員、設計師還是GIS分析師&#xff09;…
閱讀更多...
Python圖像處理基礎（十六）

Python圖像處理基礎（十六）

Python圖像處理基礎（十六） 文章目錄 Python圖像處理基礎（十六） 10、圖像增強和濾鏡 10.1 ImageEnhance 10.1.1 亮度 10.1.2 對比度 10.1.3 顏色 10.1.4 清晰度 10.2 ImageFilter 10.3 預定義濾鏡 10.4 參數化濾鏡 10.4.1 模糊函數 10.4.2 反銳化蒙版 10.4.3 排序和平均濾波…
閱讀更多...
python中等難度面試題（1）

python中等難度面試題（1）

1、請解釋Python中的深拷貝(deep copy)和淺拷貝(shallow copy)的區別&#xff0c;并舉例說明它們在實際應用中可能引發的問題。 答&#xff1a; 在Python中&#xff0c;拷貝對象通常指的是創建一個新的對象&#xff0c;這個新對象是原始對象的一個副本。拷貝可以分為兩種類型&a…
閱讀更多...
AI+Java 守護你的錢袋子！金融領域的智能風控與極速交易

AI+Java 守護你的錢袋子！金融領域的智能風控與極速交易

當你在異國他鄉用信用卡支付酒店費用&#xff0c;手機瞬間彈出銀行短信“是否為本人操作”&#xff1b;當你盯著股票行情軟件&#xff0c;看著某只股票的股價在3秒內從漲停跌至平盤&#xff0c;懊悔手動下單慢了一步——這些金融場景中的“安全感”與“遺憾”&#xff0c;背后都…
閱讀更多...
Docker跨架構部署實操第二彈

Docker跨架構部署實操第二彈

1. 項目內容 項目目錄包含 Dockerfile 與 main.py&#xff0c;并且容器內路徑固定為&#xff1a; 數據&#xff1a;/root/autodl-tmp/data模型&#xff1a;/root/autodl-tmp/models保存&#xff1a;/root/autodl-tmp/save 服務端口&#xff1a;9011&#xff08;容器內與宿主映…
閱讀更多...
PyTorch 學習率調度器（LR Scheduler）

PyTorch 學習率調度器（LR Scheduler）

文章目錄 PyTorch 學習率調度器&#xff08;LR Scheduler&#xff09;1. 一句話定義2. 通用使用套路3. 內置調度器對比速覽4. 各調度器最小模板① LambdaLR&#xff08;線性 warmup&#xff09;② StepLR③ MultiStepLR④ CosineAnnealingLR⑤ ReduceLROnPlateau&#xff08;必…
閱讀更多...
新后端漏洞（上）- Spring Cloud Gateway Actuator API SpEL表達式注入命令執行（CVE-2022-22947）

新后端漏洞（上）- Spring Cloud Gateway Actuator API SpEL表達式注入命令執行（CVE-2022-22947）

漏洞介紹&#xff1a;Spring Cloud Gateway是Spring中的一個API網關。其3.1.0及3.0.6版本&#xff08;包含&#xff09;以前存在一處SpEL表達式注入漏洞&#xff0c;當攻擊者可以訪問Actuator API的情況下&#xff0c;將可以利用該漏洞執行任意命令。漏洞環境&#xff1a;docke…
閱讀更多...
【OJ】C++ vector類OJ題

【OJ】C++ vector類OJ題

只出現過一次的數字&#xff08;簡單&#xff09; 136. 只出現一次的數字 - 力扣&#xff08;LeetCode&#xff09; 這道題使用異或就非常簡單了&#xff0c;所有數異或到一起&#xff0c;相同的數據雙雙消除&#xff0c;只剩下一個的數。 C語言異或運算詳解-CSDN博客 clas…
閱讀更多...
為什么外網主機可以telnet通內網nginx端口，但是http請求失敗？

為什么外網主機可以telnet通內網nginx端口，但是http請求失敗？

問題是這樣的:我內網主機nginx配置了 域名80端口&#xff0c;然后防火墻沒有配置80端口&#xff0c;但是外網機子去telnet 80端口可以通&#xff0c;用瀏覽器請求域名不能訪問nginx&#xff0c;然后防火墻開了80端口后&#xff0c;瀏覽器就可以訪問nginx了&#xff0c;為什么防…
閱讀更多...
【Linux游記】基礎指令篇

【Linux游記】基礎指令篇

?????? 楓の個人主頁 你不能改變過去&#xff0c;但你可以改變未來 算法/C/數據結構/C/Linux Hello&#xff0c;這里是小楓。C語言與數據結構和算法初階兩個板塊都更新完畢&#xff0c;我們繼續來學習C&#xff0c;C更新的同時我也會更新Linux。Linux操作系統是很經典的…
閱讀更多...
阿里云-基于通義靈碼實現高效 AI 編碼 | 4 | 場景學習：3分鐘寫一個音樂鬧鐘小應用

阿里云-基于通義靈碼實現高效 AI 編碼 | 4 | 場景學習：3分鐘寫一個音樂鬧鐘小應用

文章目錄一、初版需求與代碼生成二、需求迭代與代碼更新三、需求細化與功能完善3.1 pygame安裝3.2 放置音樂文件3.3 執行代碼免費個人運維知識庫&#xff0c;歡迎您的訂閱&#xff1a;literator_ray.flowus.cn 一、初版需求與代碼生成 首先向通義靈碼提出了基本需求&#xff1…
閱讀更多...
【算法筆記】歐拉降冪公式與歐拉函數

【算法筆記】歐拉降冪公式與歐拉函數

歐拉降冪公式 在數論中&#xff0c;歐拉降冪公式是一個強大的工具&#xff0c;用于簡化大指數模運算。公式如下&#xff1a; ?k>φ(m)&#xff0c;有Ak≡Akmodφ(m)φ(m)(modm)成立。\forall k > \varphi(m)&#xff0c;有 A^k \equiv A^{k \mod \varphi(m) \varphi(m…
閱讀更多...
基于STM32的交通燈設計—緊急模式、可調時間

基于STM32的交通燈設計—緊急模式、可調時間

基于STM32交通燈設計&#xff08;仿真&#xff0b;程序&#xff0b;設計報告&#xff09;功能介紹具體功能&#xff1a;1.數碼管和LED模擬交通燈&#xff1b;2.南北綠燈9秒&#xff0c;東西綠燈15秒&#xff0c;黃燈2秒&#xff1b;3.緊急情況&#xff1a;按下按鍵&#xff0c;…
閱讀更多...
最新文章

Copyright @ 2022~2023