整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
序列表
經過之前關于表格、表單的學習后，再來學習列表，就顯得非常的簡單和容易理解了。
學習是構建知識體系的過程，沒有形成體系的知識學習再多也是碎片，是很難形成技能或深刻理解的，因此，如果您是零基礎的初學者，第一次看我的教程，如果時間允許的話，請務必從目錄中找尋第一篇，循序漸進的學習。
列表分為有序列表、無序列表和定義列表，同時列表之中還能嵌套列表，和表格非常相似。
首先介紹有序列表
要用<ol></ol>標簽告訴瀏覽器這里是列表。
然后在里面添加<li></li>標簽，在這個標簽中添加內容即可。
示例代碼如下
<p>我喜歡的水果</p>
<ol>
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>大家可以把它放到一個新的html框架中看看效果。
完整代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>列表</title>
</head>
<body>
<h>有序列表</h>
<p>我喜歡的水果</p>
<ol>
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>
</body>
</html>頁面效果如下：
通過修改<ol>標簽中的type屬性我們可以改變序號顯示的樣式，默認的是數字，大家看一下不同的type值的不同效果吧！示例代碼如下：
<ol type="A">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>
<ol type="a">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>頁面效果如下：
下面給大家介紹一下搜狗輸入法中如何輸入羅馬數字。
step1.點擊"輸入方式"
step2.點擊"特殊符號"后選擇數字序號，找到羅馬數字即可
除此之外我們還可以使用CSS的方法為有序列表的序號提供更多樣式。在<ol>標簽中修改style屬性可以直接調用這些css中的屬性。寫法是style="list-style-type:屬性值；"
示例代碼如下：(使用日語中的片假名表示序號)
<ol style="list-style-type:hiragana;">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>頁面效果如圖所示：
是不是很有趣，這里的測試就不一一做了。為大家奉上list-style-type的值的列表與說明，大家自己課下去嘗試，這個列表中既有有序列表的值也有無序列表的值。
如圖：
資料來自w3school
無序列表
無序列表與有序列表的區別在于最外層的標簽，它的寫法是這樣的：<ul></ul>。
有一個記憶的小技巧，有序的英文是order，故有序列表為order list（列表），縮寫為ol。
無序為unorder，無序列表為unorder list，縮寫為ul。
無序列表<ul>標簽的type屬性用來控制列表前的標記顯示演示。
示例代碼如下：
<h>無序列表</h>
<p>我喜歡的水果</p>
<ul>
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ul>
<ul type="disc">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ul>
<ul type="circle">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ul>
<ul type="square">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ul>頁面效果如下：
通過圖片我們可知，無序列表默認的列表標識就是type="disc"。
style屬性的話大家自己試試吧，這里就不啰嗦了。
定義列表
這個列表比較特殊，也比較不常見，主要就是顯示名詞定義的。
首先要寫入<dl></dl>標簽。這是告訴瀏覽器這里是個定義列表，和<ol>或<ul>一樣。
定義的英文是definition，定義列表就是definition list，縮寫是dl。
下面在<dl></dl>標簽中間寫入定義的名稱<dt></dt>,即definition title（標題）。
與定義名稱標簽并列的是定義描述<dd></dd>,即definition describe（描述）。
示例代碼如下：
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>頁面效果如下：
今天的內容結束了！
列表嵌套列表的測試大家自己試試吧，學到現在，相信你們都可以完成了！
如果您喜歡我的教程請關注我，點贊也能讓我充滿動力！
如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
在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老師發布的基礎視頻，明天做的案例按照老師講解的案例去做。
家有沒有好奇過，為什么網頁中的圖片都是按順序排放的，或者說有時候網頁的內容的排版非常有序。其實大多數網頁的這種效果都要依賴于列表標簽。
在HTML中，列表分為有序列表和無序列表。
有序列表：
<ol type="">(type屬性不寫默認為0,1,2......)
<li>內容</li>
<li>內容</li>
。。。。。
</ol>
ol標簽的type屬性只有五種類型，分別為：
“1”：用阿拉伯數字排列。
“A”：用大寫字母排列。
“a”：用小寫字母排列。
“i”：用羅馬數字排列。
“Ⅰ”：用大寫羅馬數字排列。
ol還有兩個屬性：reversed和start。
<ol reversed=""reversed>倒敘排列。
<ol start="(數字)"從第幾個開始排列。
我們說完有序列表自然要說他的好兄弟——無序列表，在我們真正的研發中，無序列表才是應用最廣泛的，
<ul>
<li>內容</li>
<li>內容</li>
。。。。。
</ul>
ul標簽也有type屬性，
“disc”效果是個圓點（是默認值）。
"square"效果是個實心方塊。
“circle”效果是個空心圓。
在我們真實的編程中一般都是用不上這些type效果的，所以我們可以通過CSS將其解決掉：<style>
list-style:none;(此代碼可以去掉列表的樣式)
</style>
好啦，今天接到這里，有什么問題可以評論區留言或者私聊我呦，制作不易，希望多多轉發多多關注[比心][比心][比心]
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
