整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
節課 來學習自定義列表。
先來看個例子 小米官網 (https://www.mi.com/) 的底部導航 每個列表都有一個共同特點， 除了列表內容外， 還包含一個標題， 我們就把類似這樣的列表 ， 稱為自定義列表。
自定義列表由三個標簽組成， 分別是： dl dt 和 dd
dl 是 definition list 的縮寫 意為定義 列表
dt 是 definition term 的縮寫 意為定義術語 可以理解為列表標題。
dd 是 definition description的縮寫 意為定義描述 可以理解為列表內容 三個標簽都遵循雙標簽語法。
語法如下圖：
注意 dt 和 dd 是 dl 的子標簽。dt 與 dd 是兄弟標簽，dt 不能放入 dd 內 dd也不能放入 dt 內 dd標簽可以定義多個 但dt 或 dd 標簽不能脫離 dl 單獨使用。
再次來到小米官網的底部導航 在瀏覽器頁面上 單擊鼠標右鍵 選擇， 檢查， 打開開發者工具， 選擇 elements 頁簽 ， 點擊元素選擇工具按鈕， 點擊選中你要查看的元素， 在 elements 中你就能看到選擇區域的代碼。
仔細觀察 dl 標簽下 定義了一個dt 和三個 dd 分別展示了一個列表標題和三個列表描述。
我們來動手制作一個自定義列表
打開編輯器 新建一個 definition_list_1.html 頁面 使用 ! 配合 tab 鍵自動補全基礎代碼
在 body 里書寫 dl ， 按下 tab 鍵補全 dl 標簽， 在 dl 標簽內部， 敲回車， 換行， 書寫 dt， 按下 tab或者是回車鍵自動補全 dt， 在 dt 的結束標簽外部， 回車換行， 在下邊再定義一個 dd 標簽，
dt 標簽里書寫文本問：英文不好能不能學編程
dd 標簽里書寫文本 答：當然可以， 保存。
在瀏覽器打開頁面， 自定義列表完成了， 這里我們發現， dd 里包含的文本縮進了， 這個縮進是瀏覽器默認的樣式。
再來實現一下小米官網的底部導航！
回到編輯器， 新建 definition_list_2.html 頁面， 補全基礎代碼， 在body里面書寫一個 dl 標簽 在 dl 中書寫一個 dt 標簽， 向 dt 標簽中填寫文本， 幫助中心 ，再書寫三個 dd 標簽， 分別在每個 dd 中輸入文本， 賬戶管理， 訂單指南， 訂單操作， 保存
在瀏覽器打開頁面， 基本的自定義列表實現了。
和真實的效果做個對比， 我們發現這兩處文字的大小是不同的 而我們的是相同的， 同時， 這里的內容沒有縮進， 而我們的有縮進， 這些問題等到我們學習了CSS知識后， 就可以實現了。
1、無序列表概念：用來放置一些對于順序無關緊要的內容，例如下面的新聞內容。
2、有序列表概念：有序列表用于存放內容不能錯亂的信息，比如下面的阿里云內容。
3、自定義列表：自定義列表用于正文之外的框框欄欄之類的。
列表樣式2
列表樣式3
列表標簽是用 ul 表示，但是不是單獨使用的，需要和 li 標簽配合使用，并且列表標簽也有屬性，用法：
<ul type="disc"> ，屬性有多個值：
disc ：小圓點，默認屬性
circle ：小圓圈
square ：實心方塊
none ：不要任何符號
源碼：↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--網頁抬頭-->
<title>Title</title>
</head>
<body>
<!--列表與列表屬性-->
<ul type="disc">
<li>這是列表a</li>
<li>這是列表b</li>
<li>這是列表c</li>
</ul>
</body>
在html中列表分為無序列表、有序列表和自定義列表（項目列表）。接下來就看看他們有什么不同吧！
作用：如果說table標簽是用來顯示數據的，那么列表標簽就是用來進行html頁面布局的。
語法：
<ul>
<li></li>
</ul><ul></ul>標簽中只能且必須嵌套<li></li>標簽。li標簽之間沒有先后順序，是并列存在的。li標簽里可以容納文本、數據、圖片、超鏈接等內容。跟table一樣，列表標簽也自帶樣式屬性，但為了代碼統一，我們還是會使用css來設置。
代碼示例：
<h2>無序列表：</h2>
<ul>
<li>蘋果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>運行界面：
語法：
<ol>
<li></li>
</ol><ol></ol>標簽里面只能嵌套<li></li>標簽，在這里li標簽是有順序的。
代碼示例：
<h2>有序列表：</h2>
<ol>
<li>蘋果</li>
<li>橘子</li>
<li>香蕉</li>
</ol>運行界面：
語法：
<dl>
<dt></dt>
<dd></dd>
</dl><dl></dl>標簽：定義列表
<dt></dt>標簽：列表標題
<dd></dd>標簽：列表內容
一個dd標簽是對dt標簽標題的說明。這兩個標簽中可以包含任何標簽。
代碼示例：
<h2>自定義列表：</h2>
<!-- dl：外層標簽 dt：項目標題 dd：項目內容 -->
<dl>
<dt>水果種類</dt>
<dd>蘋果</dd>
<dd>橘子</dd>
<dd>香蕉</dd>
</dl>運行界面：
作用：收集用戶信息。一般用在注冊界面等。
組成：一個完整的表單中包含表單域（整個填寫界面所有信息）、表單控件（表單元素）和提示信息（表單控件的提示作用）3個部分。
表單域：是一個包含表單元素的區域。
<form>標簽用于定義表單域，實現用戶信息的收集和傳遞。
作用：將其區域范圍內的信息收集并傳送給服務器。
語法：
<form action=”url地址” method=”提交方式” name=”表單域名稱”>
各種表單控件
</form>注：action：url地址，指定接收并處理表單數據的服務器程序的url地址。
method：用于設置表單數據的提交方式。
method=”get”：提交數據時，地址欄可查看到數據。數據量少且安全級別不高時使用。
method=”post”：提交數據時，地址欄數據是加密的。
name：表單域的名稱。用于區分同一頁面下的不同表單域。
1.input輸入表單元素：
語法：<input type=””>，依據type屬性值不同區分不同控件。
文本框：<input type=”text”>。單行輸入字段，默認寬度20個字符。輸入的文字可見。
密碼框：<input type=”password”>。輸入內容默認不可見。
單選框：<input type=”radio”>，默認情況下選中后無法取消。
注：為實現多選一狀態，需要將所有的單選框控件具有同一個name名。
復選框：<input type=”checkbox”>，選中后可以更改可以取消。
提交按鈕：<input type=”submit”>，默認按鈕中的提示文字是提交，可以通過value值進行更改內容。點擊提交按鈕后會把表單數據發送到服務器。
重置按鈕：<input type=”reset”>，默認按鈕中的提示文字是重置，可以通過value值進行更改內容。點擊后會清楚表單中的所有數據。
普通按鈕：<input type=”button”>
文件域：<input type=”file”>，用來選擇文件，一般適用于文件上傳。
label標簽：標注標簽，配合input控件一起使用
作用：綁定表單控件，擴大點擊范圍。
當點擊label標簽的內容時，系統會自動選中該表單控件。
代碼示例：
<h1>label標簽</h1>
<form>
<label for="text">用戶名：</label>
<input type="text" name="用戶名" id="text"><br>
<label for="password">密碼：</label>
<input type="password" id="password"><br>
<label for="男">男</label>
<input type="radio" name="sex" id="男">
<label for="女">女</label>
<input type="radio" name="sex" id="女"><br>
</form>運行界面：
Input控件屬性：
name:用戶自定義，提示input元素的名稱。給后臺工作人員的提示。
value：用戶自定義，提示input元素的內容值。給后臺的提示。在文本框控件中會顯示該內容，單選框和復選框則顯示不出來。
checked：默認選中狀態。主要用于單選按鈕和復選按鈕中。
maxlength：正整數，規定輸入字段中的字符最大長度。
input代碼示例：
<h2>表單標簽</h2>
<form>
用戶名：<input type="text" maxlength="15" value="請輸入用戶名"><br>
密 碼：<input type="password"><br>
性 別：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br>
愛 好：<input type="checkbox" name="like" value="swim">游泳
<input type="checkbox" name="like" value="健身">健身
<input type="checkbox" name="like" value="run">跑步<br>
<input type="submit">
<input type="reset"><br>
<input type="submit" value="注冊">
<input type="reset" value="清空"><br>
<!-- 后期結合js搭配使用 -->
<!-- 按鈕選框在默認情況下是沒有文字內容的，需要添加value值設置文字內容 -->
<input type="button" value="獲取短信驗證碼"><br>
上傳頭像：<input type="file">
</form>運行界面：
2.select下拉表單元素：
使用場景：地址選擇、職業分類、學校分類等。
select標簽：定義下拉列表。
語法：
<select>
<option></option>
</select>代碼示例：
<h1>下拉表單</h1>
<form>
<label for="adress">籍貫：</label>
<select name="" id="">
<option value="">北京</option>
<option value="">河北</option>
<option value="">上海</option>
<option value="">廣州</option>
<option value="">深圳</option>
</select>
</form>運行界面：
3.textrea文本域表單控件
使用場景：留言、介紹、評論等。
語法：
<textrea rows=”” cols=””>文本內容</textrea>跟文本框控件不同，它是多行文本輸入框，可以自行設定行數以及一行容納多少字數。
rows=“每行可輸入的字符數”，
cols=“顯示的行數”。
這兩個樣式屬性實際開發中大多使用css就可以改變操作。
代碼示例：
<h1>文本域表單元素</h1>
<form action="">
<label for="textrea">今日反饋：</label><br>
<textarea name="" id="" cols="15" rows="10">今日反饋</textarea>
</form>運行界面：
關于HTML基礎內容就學習到這里了，明天練習一個綜合案例。對了，現在跟學的是黑馬前端的pink老師發布的基礎視頻，明天做的案例按照老師講解的案例去做。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
