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