串列標簽
表格是用來顯示資料的，那么串列就是用來布局的
串列最大的特點就是整齊、整潔、有序，它作為布局會更加的自由和方便，
串列可以分為無序串列，有序串列，自定義串列，
無序串列
ul標簽表示HTML頁面中專案的無序串列，一般會以專案符號呈現串列項，而串列項使用li標簽定義，
基本語法
<ul>
<li>串列項1</li>
<li>串列項2</li>
<li>串列項3</li>
...
</ul>
各個串列項之間沒有順序之分，
ul標簽里面只允許放入li標簽，但是li標簽里面可以放入任何的元素，
有序串列
字面理解就是對串列項元素進行排序啦
我們使用ol標簽定義有序串列，串列排序以數字來顯示，并且使用li標簽來定義串列項，
<ol>
<li>串列項1</li>
<li>串列項2</li>
<li>串列項3</li>
...
</ol>
有序串列會自動給我們的串列項排序，
ol標簽里面只允許放入li標簽，但是li標簽里面可以放入任何的元素，
自定義串列
自定義串列常用于對術語或者名詞進行解釋或者描述，自定義串列的串列項沒有任何的專案符號，
語法格式
使用dl標簽用于定義描述串列或定義串列，該標簽會與dt(定義專案/名字)和dd(描述每一個專案/名字)一起使用，
<dl>
<dt>名詞1</dt>
<dd>名詞解釋1</dd>
<dd>名詞解釋2</dd>
</dl>
dl里面只能包含dt標簽，dt和dd的個數沒有限制，經常是一個dt對應多個dd，
表單標簽
表單的主要目的是用來收集用戶資訊，
在HTML中一個完整的表單通常由表單域，表單控制元件(也稱為表單元素)和提示資訊三個部分構成，
表單域
表單域是一個包含表單元素的區域，
在HTML中，form標簽用于定義表單域，以實作用戶資訊的收集和傳遞，
form會把它范圍內的表單元素資訊提交給服務器，
<form action = "URL地址" method = "提交方式" name = "表單域名稱">
各種表單元素控制元件
</form>
常用的屬性
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | URL地址 | 用于指定接收并處理表單資料的服務器程式的URL地址 |
| method | get/post | 用于指定表單資料的提交方式，其取值為get/post |
| name | 名稱 | 用于指定表單的名稱，以區分同一個頁面中的多個表單域 |
表單控制元件
在表單域中可以定義多種表單元素，這些元素就是允許用戶在表單中輸入或者選擇的內容控制元件，
1、input輸入表單元素
在input標簽中，包含一個type屬性，根據不同的type屬性值，輸入欄位擁有很多種形式(文本，欄位，復選框，掩碼后的文本控制元件，單選按鈕，按鈕等)
<input type="屬性值" />
input單標簽，根據type屬性值的不同，可輸入的表單元素不同，
在此插入圖片
input標簽的一些其他屬性
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| name | 由用戶自定義 | 定義input元素的名稱 |
| value | 由用戶自定義 | 規定input元素的值 |
| checked | checked | 規定此input元素首次加載時應當被選中，主要針對于單選框和復選框 |
| maxlength | 正整數 | 規定輸入欄位中的字符的最大長度 |
注意：
1、**name 是表單元素名字這里性別單選按鈕必須要有相同的名字name，才可以實作多選1 ****
2、name和value是每個表單元素都有的屬性，主要給后臺人員使用，
3、name表單元素的名字，要求單選按鈕和復選按鈕都要有相同的name值，
input的另外兩個屬性submit和reset，
submit和reset
<input type="submit" value = "https://www.cnblogs.com/kuangsun125/archive/2022/01/06/提交">
<input type="reset" value = "https://www.cnblogs.com/kuangsun125/archive/2022/01/06/重置資料">
button
點擊button不會提交資料，主要用于如獲取短信驗證碼，(后期結合js來使用)
<input type = "button" value = "https://www.cnblogs.com/kuangsun125/archive/2022/01/06/獲取短信驗證碼"
file
主要用于可以如用來上傳檔案(檔案域)
上傳頭像： <input type="file">
label標簽
label標簽為input元素定義標注(標簽)
label標簽用于系結一個元素，當點擊label標簽內容內的文本時，瀏覽器就會自動將焦點(游標)轉到或者選擇對應的表單元素上，用來增加用戶體驗，
<label for = "sex">男</label>
<input type = "radio" name ="sex" id = "sex"/>
由此可知，label標簽的for屬性應當與相關元素的id屬性相同，二者才能建立聯系，
2、select下拉表單元素
使用場景：在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，我們可以使用select標簽定義下拉串列，
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
....
</select>
在select中至少包含一對option，
在option中定義selected="selected"時，當前即為默認選中項，
3、textarea
使用場景：當用戶輸入內容較多的情況下，我們就不能使用文本框表單了，此時我們可以使用textarea標簽，
用于定義多行文本輸入的控制元件，
<textarea rows="3" cols ="20">
文本內容
</textarea>//cols="每行中的字符數"，rows="顯示的行數"，(后期使用CSS來改變大小，在此可以做了解)
以上內容來自[黑馬程式員前端Web全套教程，會打字就能學會的Web前端課程_嗶哩嗶哩_bilibili](https://www.bilibili.com/video/BV1RK4y1X7qd?p=62)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/404300.html
標籤：其他
下一篇：H5應用轉換快應用