初識HTML-列表標簽和表單標簽

表標簽

在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代碼標簽：

<!--HTML-->
<div class="list">
<div class="left">
<a  target="_blank"><img src="http://www.jungjaehyung.com/uploadfile/2024/1012/20241012085817904.png"></a>
</div>
<div class="right">
<h2>這是我的第一個網頁</h2>
<p>BODY標簽表示網頁主體元素的容器，它包含了網頁所有的html標簽如：文本、圖片、列表等等。以后我們編寫的網頁標簽都需要放在這里面...</p>
</div>
</div>

知識點：

這里我用了一個class屬性，它是用來定義當前標簽的樣式名，我這用list這個名去定義這個div的樣式，如需定義多個名，可以用空格分開，那么在css樣式表里面就用.list{}來表示。

a則是超文本鏈接標簽，用href屬性來描述鏈接的地址，target="_blank"表示用鼠標點擊鏈接會從瀏覽器的新窗口去打開這個鏈接地址，我這里把img標簽放在a標簽里面表示點擊這張圖片就能夠跳轉這個鏈接地址。

其他的標簽我已經在上一篇文章都詳細介紹了，不是很明白的同學可以翻閱上篇文章。

從上面的代碼看，我用了三個div來布局，第一個list可以控制整個區塊的樣式，left則是定義往左方布局，right就是定義往右方布局。

首先，我想給list整個區域限制一個寬度、高度、內邊距和背景顏色，那么我們就應該這樣寫：

.list {
	width: 800px; /*寬度800像素*/
	height: 80px; /*高度80像素*/
	background: #f2f2f2; /*灰色的背景顏色*/
	padding: 15px; /*15像素的內邊距*/
}

接下來我讓left也限制一個寬度，并往左邊浮動：

.left {
	width: 120px; /*寬度120像素*/
	float: left; /*往左邊浮動*/ 
}

那么right就應該往右邊浮動，并限制一個寬度，注意：左右兩邊的寬度不能大于整個區域的寬度

.right {
	width: 660px; /*寬度660像素*/
	float: right; /*往右邊浮動*/ 
}

接著左邊圖片我們需要定義一個大小

.left img {
	width: 120px; /*高度120像素*/
	height: 80px; /*寬度80像素*/
}

最后右邊的標題和文章簡介也需要定義樣式

.right h2 {
	font-size: 16px; /*16像素的字體大小*/
	color: #333; /*字體顏色為黑色*/
	line-height: 24px; /*24像素的行高*/
	margin: 5px 0; /*上下為5像素的外邊距*/
}
.right p {
	font-size: 14px; /*14像素的字體大小*/
	color: #999; /*字體顏色為淺黑色*/
	line-height: 24px; /*24像素的行高*/
	margin: 0 0 5px 0; /*下邊為5像素的外邊距*/
}

這樣一個簡單的圖文列表布局就完成了，當然，布局的方式有很多種，這只是其中一個方法，也歡迎大家留言分享一下其他的布局方式，謝謝觀看！！！

篇介紹了html 中文本格式及段落等標簽，今天說下列表，什么是列表？它就是一種數據排列方式，以條列式的方式顯示文本，使讀者一目了然。列表主要有以下三種：

無序列表
有序列表
定義列表

無序列表 —— ul

無序列表在每行開始位置顯示一個符號，語法如下：

<html>
<body>
<h4>一個無序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

顯示效果：

無序列表的符號可以通過在ul 標簽上設置 type 屬性顯示不同的符號，比如：

1、disc —— 實心圓點 (默認類型)
2、circle —— 空心圓圈
3、square —— 實心方塊

實例代碼：

<html>
<body>
<h4>一個無序列表：</h4>
<ul type="disc">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<h4>一個無序列表：</h4>
<ul type="circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<h4>一個無序列表：</h4>
<ul type="square">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>

顯示效果：

有序列表 —— ol

有序列表使用數字或字母符號排列，表示文本按一定順序顯示，語法如下：

<!DOCTYPE html>
<html>
<body>
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

效果如下：

同無序列表一樣，在ol上通過type 屬性設置使用那種符號表示順序，有以下幾種：

1、1，表示數字 1、2、3..... （默認數字）
2、a，表示小寫字母 a、b、c....
3、A，表示大寫字母 A、B、C ....
4、i，表示小寫羅馬字母 i、ii、iii、iv....
5、I，表示大寫羅馬字母 I、II、III、IV....

顯示效果如下：

html代碼：

<!DOCTYPE html>
<html>
<body>
數字
<ol type="1">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
小寫字母
<ol type="a">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
大寫字母
<ol type="A">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
小寫羅馬字母
<ol type="i">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
大寫羅馬字母
<ol type="I">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

有序列表還可以通過start 屬性設置起始數組，如下：

<ol  start="3">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

顯示效果：

定義列表——dl

不同以上2種列表，定義列表主要用來解釋名詞，由2種層次列表顯示，第一層是被解釋的名詞，第二層是詳細地解釋文字，語法如下：

<html>
<body>
<h2>一個定義列表：</h2>
<dl>
   <dt>計算機</dt>
   <dd>用來計算的儀器 ... ...</dd>
   <dt>顯示器</dt>
   <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
</html>

顯示效果：

第一行<dt>是要解釋的名詞，第二行標簽<dd>是解釋文本，會自動縮進。

列表的嵌套

以上三種列表是可以嵌套使用的，看如下示例：

<html>
<body>
<h4>一個嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>紅茶</li>
    <li>綠茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>

效果：

每嵌套一層，它的符號是不一樣的，你可以試試再嵌套一層看看效果。

當然，不同列表類型也可互相嵌套，根據顯示效果可以自由使用，一般建議不要這樣使用，不同類型列表顯示在一塊不是很美觀。如下面無序列表中嵌套有序列表：

<html>
<body>
<h4>一個嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>紅茶</li>
    <li>綠茶
      <ol>
      <li>中國茶</li>
      <li>非洲茶</li>
      </ol>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>

效果如下：