無序串列
無序串列的標簽：<ul></ul>
無序串列串列項的標簽：<li></li>
ul標簽中只能嵌套li標簽，不能存放別的標簽或者數字，li標簽之中可以存放任何元素和標簽
無序串列會默認在每個串列項前面增加一個小點，如下圖所示：
有序串列
有序串列標簽：<ol></ol>
有序串列串列項的標簽和無序串列相同，都是<li></li>
有序串列的注意事項與無序串列相同
有序串列會默認在每一個串列項前面增加一個排序，如下圖：
自定義串列
自定義串列標簽：<dl></dl>
自定義串列的串列項標簽：<dt></dt> <dd></dd>
dt定義一個專案名，dd緊隨其后對其作出解釋，一個dt可以對應多個dd
一個dl中也可以有多組的dt和dd
示例：
自定義串列的樣式如下圖：
PS：幾種串列的樣式屬性都可以通過CSS來改變
表單
表單通常由表單域，表單控制元件（表單元素）和提示資訊組成，表單通常用來收集用戶資訊
表單域是包含表單元素的一塊區域，表單域的標簽為<form></form>
form標簽的常用屬性如下圖所示：
表單控制元件：
輸入控制元件：<input type=""/>
type是input標簽必須要有的屬性，type里面可以有以下的屬性值：
除了上面的type屬性之外，input還有以下常用屬性：
type="radio"或者type="checkbox"時，name的值一般都要相同，只有name值相同的時候，才可以實作多選一，雖然多選不需要name值相同，但是我們一般也會設定一個相同的值
如果要使得按鈕初始狀態是被選中的，可以加checked屬性，即checked="checked"
name和value的值可以傳輸到后臺，讓后臺收集資料的人知道
具體示例：
1 <form>
2 <!-- text文本框 可以輸入任何字符 -->
3 用戶名：<input type="text"/><br />
4 <!-- password密碼 可以隱藏輸入的字符 -->
5 密碼：<input type="password"/><br />
6 <!-- radio單選框 可以實作多選一 -->
7 <!-- 但是要實作多選一，必須使得input的name屬性相同 -->
8 性別：男<input type="radio" name="sex"/>
9 女<input type="radio" name="sex"/><br />
10 <!-- checkbox復選框 可以實作多選 -->
11 愛好：打游戲<input type="checkbox" name="hobby"/>
12 跑步<input type="checkbox" name="hobby"/>
13 下棋<input type="checkbox" name="hobby"/><br />
14 <!-- file上傳檔案 實作上傳頭像等功能-->
15 上傳頭像：<input type="file"/><br />
16 <!-- submuit提交按鈕，可通過設定value值改變按鈕提示字 -->
17 <input type="submit" value="提交表單">
18 <!-- reset重置按鈕，可通過設定value值改變按鈕提示字 -->
19 <input type="reset" value="重新填寫">
20 <!-- button是自定義按鈕 需要借助JS添加功能 -->
21 <input type="button" value="發送驗證碼">
22 </form>
效果如下：
標注標簽：<label></label>
label標簽可以用于系結一個表單元素，當我們點擊label標簽內的文本時，瀏覽器會自動將滑鼠轉到對應元素上，以此增加用戶體驗
示例：
1 性別： <label for="man">男</label>
2 <input type="radio" name="sex" id="man"/>
3 <label for="woman">女</label>
4 <input type="radio" name="sex" id="woman"/>
label 標簽的for屬性值如果與input標簽中id的值相同，那么當滑鼠移動到男和女這兩個字上面時，點擊男和女也可以勾選按鈕了
下拉控制元件：<select></select>
示例：
1 <form>
2 籍貫：
3 <select>
4 <option value="">北京</option>
5 <option value="">上海</option>
6 <option value="">重慶</option>
7 <option value="">天津</option>
8 </select>
9 </form>
option里面放的是選項，select里面至少要有一個option，一般默認初始選擇的都是第一個option里面的選項
如果要將初始選項更改為其他option的，則可以在option后面加個屬性selected="selected"
文本域控制元件：<textarea></textarea>
語法：
1 <textarea rows="" cols="">
2 文本內容
3 </textarea>
textare創建了一個多行的文本輸入框，cols的值為每行的字符數，rows的值為顯示的行數
實際開發中還是一般還是用CSS來統一管理屬性
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540948.html
標籤：其他
上一篇：Web前端學習筆記2——表格
下一篇：Vue生命周期