1、列表標(biāo)簽
列表標(biāo)簽概述：
能夠使用無序列表、有序列表、自定義列表標(biāo)簽，實現(xiàn)網(wǎng)頁中列表結(jié)構(gòu)的搭建。
列表應(yīng)用在網(wǎng)頁中按照行展示關(guān)聯(lián)性的內(nèi)容，如:新聞列表、排行榜、賬單等。
特點：按照行的方式，整齊顯示內(nèi)容
種類：無序列表、有序列表、自定義列表
1.1 無序列表
無序列表：在網(wǎng)頁中表示一組無順序之分的列表，如:新聞列表。
顯示特點：列表的每一項前默認(rèn)顯示圓點標(biāo)識
標(biāo)簽組成:
| 標(biāo)簽名 | 說明 |
|---|---|
| ul | 表示無序列表的整體，用于包裹 li 標(biāo)簽 |
| li | 表示無序列表的每一項，用于包含每一行的內(nèi)容 |
注意點:
1、ul 標(biāo)簽中只允許包含 li 標(biāo)簽
2、li標(biāo)簽可以包含任意內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>無序列表</title>
</head>
<body>
<h1>水果列表</h1>
<ul>
<li>榴蓮</li>
<li>香蕉</li>
<li>蘋果</li>
<li>哈密瓜</li>
<li>火龍果</li>
<li>獼猴桃</li>
</ul>
</body>
</html>
1.2 有序列表
有序列表：在網(wǎng)頁中表示一組有順序之分的列表，如：排行榜。
顯示特點：列表的每一項前默認(rèn)顯示序號標(biāo)識
標(biāo)簽組成:
| 標(biāo)簽名 | 說明 |
|---|---|
| ol | 表示有序列表的整體，用于包裹 li 標(biāo)簽 |
| li | 表示有序列表的每一項，用于包含每一行的內(nèi)容 |
注意點:
1、ol 標(biāo)簽中只允許包含 li 標(biāo)簽
2、li標(biāo)簽可以包含任意內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<h1>水果列表</h1>
<ol>
<li>榴蓮</li>
<li>香蕉</li>
<li>蘋果</li>
<li>哈密瓜</li>
<li>火龍果</li>
<li>獼猴桃</li>
</ol>
</body>
</html>
1.3 自定義列表
自定義列表：在網(wǎng)頁的底部導(dǎo)航中通常會使用自定義列表實現(xiàn)。
顯示特點：dd前會默認(rèn)顯示縮進(jìn)效果
標(biāo)簽組成:
| 標(biāo)簽名 | 說明 |
|---|---|
| dl | 表示自定義列表的整體，用于包裹 dt/dd 標(biāo)簽 |
| dt | 表示自定義列表的主題 |
| dd | 表示自定義列表的針對主題的每一項內(nèi)容 |
注意點:
1、dI 標(biāo)簽中只允許包含 dt/dd 標(biāo)簽
2、dt/dd 標(biāo)簽可以包含任意內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定義列表</title>
</head>
<body>
<dl>
<dt>幫助中心</dt>
<dd>賬戶管理</dd>
<dd>購物指南</dd>
</dl>
</body>
</html>
2、表格標(biāo)簽
2.1 表格的基本標(biāo)簽
表格的基本標(biāo)簽: 在網(wǎng)頁中以行+ 列的單元格的方式整齊展示和數(shù)據(jù)，如:學(xué)生成績表
注意點：標(biāo)簽的嵌套關(guān)系: table > tr> td
基本標(biāo)簽
| 標(biāo)簽名 | 說明 |
|---|---|
| table | 表格整體，可用于包裹多個 tr |
| tr | 表格每行，可用于包裹 td |
| td | 表格單元格，可用于包裹內(nèi)容 |
2.2表格相關(guān)屬性
表格相關(guān)屬性：設(shè)置表格基本展示效果
注意：實際開發(fā)時針對于樣式效果推薦用CSS設(shè)置
常見相關(guān)屬性:
| 屬性名 | 屬性值 | 作用 |
|---|---|---|
| border | 數(shù)字 | 邊框?qū)挾?/td> |
| width | 數(shù)字 | 表格寬度 |
| height | 數(shù)字 | 表格高度 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1" width="400" height="50">
<tr>
<td>姓名</td>
<td>成績</td>
<td>排名</td>
</tr>
<tr>
<td>張三</td>
<td>98</td>
<td>第一名</td>
</tr>
<tr>
<td>李四</td>
<td>95</td>
<td>第二名</td>
</tr>
<tr>
<td>王五</td>
<td>90</td>
<td>第三名</td>
</tr>
</table>
</body>
</html>
2.3 表格標(biāo)題和表頭單元格標(biāo)簽
表格標(biāo)題和表頭單元格標(biāo)簽：在表格中表示整體大標(biāo)題和一列小標(biāo)題
其他標(biāo)簽:
| 屬性名 | 作用 | 說明 |
|---|---|---|
| caption | 表格大標(biāo)題 | 表示表格整體大標(biāo)題，默認(rèn)在表格整體頂部居中位置顯示 |
| th | 表頭單元格 | 表示一列小標(biāo)題，通常用于表格第一行，默認(rèn)內(nèi)部文字加粗并居中顯示 |
注意點:
1、caption 標(biāo)簽書寫在 table 標(biāo)簽內(nèi)部
2、th 標(biāo)簽書寫在 tr 標(biāo)簽內(nèi)部(用于替換td標(biāo)簽)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1" width="400" height="50">
<caption><strong>學(xué)生成績單</strong></caption>
<tr>
<th>姓名</th>
<th>成績</th>
<th>排名</th>
</tr>
<tr>
<td>張三</td>
<td>98</td>
<td>第一名</td>
</tr>
<tr>
<td>李四</td>
<td>95</td>
<td>第二名</td>
</tr>
<tr>
<td>王五</td>
<td>90</td>
<td>第三名</td>
</tr>
</table>
</body>
</html>
2.4 表格的結(jié)構(gòu)標(biāo)簽
表格的結(jié)構(gòu)標(biāo)簽：讓表格的內(nèi)容結(jié)構(gòu)分組，突出表格的不同部分(頭部、 主體、底部)，使語義更加清晰
結(jié)構(gòu)標(biāo)簽:
| 標(biāo)簽名 | 名稱 |
|---|---|
| thead | 表格頭部 |
| tbody | 表格主體 |
| tfoot | 表格底部 |
注意點:
1、表格結(jié)構(gòu)標(biāo)簽內(nèi)部用于包裹 tr 標(biāo)簽
2、表格的結(jié)構(gòu)標(biāo)簽可以省略，雖然沒有變化但能提高瀏覽器的運行速度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1" width="400" height="50">
<caption><strong>學(xué)生成績單</strong></caption>
<thead>
<tr>
<th>姓名</th>
<th>成績</th>
<th>排名</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>98</td>
<td>第一名</td>
</tr>
<tr>
<td>李四</td>
<td>95</td>
<td>第二名</td>
</tr>
<tr>
<td>王五</td>
<td>90</td>
<td>第三名</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>總結(jié)</td>
<td>平均分</td>
<td>再接再厲</td>
</tfoot>
</table>
</body>
</html>
2.5 合并單元格
合并單元格：將水平或垂直多個單元格合并成一個單元格
分類：1、跨行合并(垂直合并成一個) 2、跨列合并(水平合并成一個)
合并單元格步驟：
1、明確合并哪幾個單元格
2、通過左 上原則，確定保留誰刪除誰
上下合并-→只保留最上的，刪除其他
左右合并-→只保留最左的，刪除其他
3、給保留的單元格設(shè)置: 跨行合并(rowspan) 或者跨列合并(colspan)
注意點： 只有同一個結(jié)構(gòu)標(biāo)簽中的單元格才能合并，不能跨結(jié)構(gòu)標(biāo)簽合并(不能跨: thead、 tbody、 tfoot)
保留的單元格設(shè)置
| 屬性名 | 屬性值 | 說明 |
|---|---|---|
| rowspan | 合并單元格的個數(shù) | 跨行合并，將多行的單元格垂直合并 |
| colspan | 合并單元格的個數(shù) | 跨列合井，將多列的單元格水平合并 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1" width="400" height="50">
<caption><strong>學(xué)生成績單</strong></caption>
<thead>
<tr>
<th>姓名</th>
<th>成績</th>
<th>排名</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td rowspan="2">98</td>
<td>第一名</td>
</tr>
<tr>
<td>李四</td>
<td>第二名</td>
</tr>
<tr>
<td>王五</td>
<td>90</td>
<td>第三名</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>總結(jié)</td>
<td colspan="2">再接再厲</td>
</tfoot>
</table>
</body>
</html>
3、表單標(biāo)簽
表單標(biāo)簽：能夠使用表單相關(guān)標(biāo)簽和屬性，實現(xiàn)網(wǎng)頁中表單類網(wǎng)頁結(jié)構(gòu)搭建
3.1 input系列標(biāo)簽
input系列標(biāo)簽：在網(wǎng)頁中顯示收集用戶信息的表單效果,如:登錄頁、注冊頁；
input標(biāo)簽可以通過type屬性值的不同，展示不同效果
type屬性值：
| type屬性值 | 說明 |
|---|---|
| text | 文本框，用于輸入單行文本 |
| password | 密碼框，用于輸入密碼 |
| radio | 單選框，用于多選一 |
| checkbox | 多選框，用于多選多 |
| file | 文件選擇，用于之后上傳文件 |
| submit | 提交按鈕，用于提交 |
| reset | 重置按鈕，用于重置 |
| button | 普通按鈕，默認(rèn)無功能，之后配合 js 添加功能 |
input系列標(biāo)簽-文本框占位符：在網(wǎng)頁中顯示輸入 單行文本的表單控件
placeholder——占位符。提示用戶輸入內(nèi)容的文本
.
單選框：在網(wǎng)頁中顯示多選一的單選表單控件
注意：name屬性對于單選框有分組功能；
有相同name屬性值的單選框為一-組，一組中只能同時有一個被選中
radio常用屬性
| 屬性名 | 說明 |
|---|---|
| name | 分組。有相同name屬性值的單選框為一組，一組中同時只能有一個被選中 |
| checked | 默認(rèn)選中 |
文件選擇：在網(wǎng)頁中顯示文件選擇的表單控件
file常用屬性：multiple——多文件選擇
按鈕：在網(wǎng)頁中顯示不同功能的按鈕表單控件
type屬性值:
注意點:如果需要實現(xiàn)以上按鈕功能，需要配合form標(biāo)簽使用
form使用方法:用form標(biāo)簽把表單標(biāo)簽一起包裹起來即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>詩歌</title>
</head>
<body>
<form action="">
<strong>歡迎來到未云詩社</strong>
<br>
<br>
<img src="C:\Users\fanfu\Downloads\小貓寶貝可高清4K壁紙_彼岸圖網(wǎng).jpg" alt=" " title="重交詩社" width="200">
<img src="" alt="">
<br>
<br>
<!-- 寫什么就顯示什么 -->
登錄賬號： <input type="text" size="30" placeholder="請輸入你的賬號">
<br>
<br>
輸入密碼： <input type="password" size="30" placeholder="密碼">
<br>
<br>
你的身份:
<label>
<input type="radio" name="option" value="poet" checked>
詩人
</label>
<label>
<input type="radio" name="option" value="visitor">
游客
</label>
<br>
<br>
<input type="submit" value="登錄">
<input type="reset" >
<input type="button" value="退出">
</form>
</body>
</html>
3.2 button按鈕標(biāo)簽
button按鈕標(biāo)簽：在網(wǎng)頁中顯示用戶點擊的按鈕
button的type屬性值：
注意點:
谷歌瀏覽器中button默認(rèn)是提交按鈕
button標(biāo)簽是雙標(biāo)簽，更便于包裹其他內(nèi)容:文字、圖片等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>詩歌</title>
</head>
<body>
<button>我是按鈕</button>
<br>
<br>
<button type="submit">提交按鈕</button>
<br>
<br>
<button type="reset">重置按鈕</button>
<br><br>
<button type="button">普通按鈕</button>
</body>
</html>
3.3 select 下拉菜單標(biāo)簽
select下拉菜單標(biāo)簽：在網(wǎng)頁中提供多個選擇項的下拉菜單表單控件
標(biāo)簽組成：
select標(biāo)簽:“下拉菜單的整體
option標(biāo)簽:下拉菜單的每一項
常見屬性：selected——下拉菜單的默認(rèn)選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>詩歌</title>
</head>
<body>
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option selected value="">深圳</option>
</select>
</body>
</html>
3.4 textarea文本域標(biāo)簽
textarea文本域標(biāo)簽：在網(wǎng)頁中提供可輸入多行文本的表單控件
常見屬性：
cols——規(guī)定了文本域內(nèi)可見寬度
rows——規(guī)定了文本域內(nèi)可見行數(shù)
注意點：右下角可以拖拽改變大小、實際開發(fā)時針對于樣式效果推薦用CSS設(shè)置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>詩歌</title>
</head>
<body>
<textarea cols="10" rows="3"></textarea>
</body>
</html>
3.5 label標(biāo)簽
label標(biāo)簽：常用于綁定內(nèi)容與表單標(biāo)簽的關(guān)系
使用方法一(困難)：
1、使用 label 標(biāo)簽把內(nèi)容(如:文本)包裹起來
2、在表單標(biāo)簽上添加 id 屬性
3、在 label 標(biāo)簽的 for 屬性中設(shè)置對應(yīng)的 id 屬性值
使用方法二：
1、直接使用 label 標(biāo)簽把內(nèi)容(如:文本)和表單標(biāo)簽一 起包裹起來
2、需要把 label 標(biāo)簽的 for 屬性刪除即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>詩歌</title>
</head>
<body>
<!-- 方法一 -->
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<!-- 方法二 -->
<label ><input type="radio" name="sex">女</label>
</html>
4、語義化標(biāo)簽
語義化標(biāo)簽：能夠認(rèn)識開發(fā)中常用的沒有語義布局標(biāo)簽(div、span)和有語義的
4.1 沒有語義的布局標(biāo)簽
沒有語義的布局標(biāo)簽 div和span：實際開發(fā)網(wǎng)頁時會大量頻繁的使用到div和span這兩個沒語義的布局標(biāo)簽
div標(biāo)簽—— 一行只顯示一一個(獨占- -行)
span標(biāo)簽—— 一行可以顯示多個
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>詩歌</title>
</head>
<body>
普通學(xué)習(xí)
<div>這是div標(biāo)簽</div>
<div>這是div標(biāo)簽</div>
普通學(xué)習(xí)
<span>這是span標(biāo)簽</span>
<span>這是span標(biāo)簽</span>
普通學(xué)習(xí)
</html>
4.2 有語義的布局標(biāo)簽
有語義的布局標(biāo)簽：在HTML5新版本中， 推出了一些有語義的布局標(biāo)簽供開發(fā)者使用，手機(jī)網(wǎng)頁制作。
標(biāo)簽:
注意點：以上標(biāo)簽顯示特點和 div 致，但是比 div 多了不同的語義
5、字符實體
字符實體：能通過字符實體在網(wǎng)頁中顯示特殊符號；
在網(wǎng)頁中展示特殊符號效果時，需要使用字符實體替代
語法結(jié)構(gòu): &英文;
常見字符實體
文章來源：http://www.zghlxwxcb.cn/news/detail-445679.html
綜合案例
文章來源地址http://www.zghlxwxcb.cn/news/detail-445679.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>生命不息，奮斗不止</h1>
<hr>
<form>
昵稱：<input type="text" placeholder="請輸入昵稱">
<br><br>
性別：
<label ><input type="radio" name="sex" checked>男</label>
<label ><input type="radio" name="sex">女</label>
<br><br>
所在城市：
<select >
<option >北京</option>
<option >廣州</option>
<option >上海</option>
<option selected>南京</option>
</select>
<br><br>
興趣愛好：
<label ><input type="checkbox" checked>閱讀</label>
<label ><input type="checkbox" >跑步</label>
<label ><input type="checkbox" >騎行</label>
<br><br>
個人簡介：<br>
<textarea name="" id="" cols="60" rows="10"></textarea>
<br><br>
<h3>我承諾</h3>
<ul>
<li>好好學(xué)習(xí)，天天向上</li>
<li>不怕困難，勇往直前</li>
<li>腳踏實地，實干興邦</li>
</ul>
<br><br>
<label ><input type="radio" name="sex" checked>我同意所有條款</label>
<br><br>
<input type="submit" value="免費注冊">
<button type="reset">重置</button>
<button>退出</button>
</form>
</body>
</html>
到了這里，關(guān)于前端HTML學(xué)習(xí)（二）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
