本文介绍了HTML中的列表标签，包括无序列表、有序列表和定义列表的用途、格式及应用场景。此外，详细讲解了表格标签的使用，如表格结构、单元格合并及表格样式设置。最后提到了表单元素，包括各种类型的输入框、单选按钮、复选框等及其属性。
功能元素
1.列表标签
列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体
- HTML中列表标签的分类
无序列表(最多)(unordered list)
有序列表(最少)(ordered list)
定义列表(其次)(definition list)
1.1.无序列表:
给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分
什么叫有先后之分?
例如: 排行榜
什么叫没有先后之分?
例如: 中国有哪些城市
- 无序列表格式:
<ul>
<li>需要显示的条目内容</li>
</ul>
li其实是英文list item的缩写
list是列表的意思
item是条目的意思
所以结合起来就是 列表条目的意思
- 无序列表样式
<ul type="value"></ul>
disc 默认值 实心圆
circle 空心圆
square 实心方块
虽然通过标签属性也能修改样式, 但是在企业开发中千万不要这么干
- 注意点:
1.一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的
2.ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就 是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用
3.由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li 标签
- 无序列表应用场景:
1.新闻列表
2.商品列表
3.导航条
1.2.有序列表
有序列表的作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分
- 有序列表格式:
<ol>
<li></li>
</ol>
其它用法和ul都差不多, 也就是应用场景/注意点都和ul差不多
- 有序列表样式
<ol type="A"></ol>
1 默认值。数字有序列表。（1、2、3、4）
a 按字母顺序排列的有序列表，小写。（a、b、c、d）
A 按字母顺序排列的有序列表，大写。（A、B、C、D）
i 罗马字母，小写。（i, ii, iii, iv）
I 罗马字母，大写。（I, II, III, IV）
1.3.定义列表
给一堆数据添加列表语义，先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息
- 定义列表的格式:
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
其实dt和dd都是英文的缩写
dt是英文definition title的缩写, 所以dt的含义就是用来定义列表中的标题
dd是英文definition description的缩写, 所以dd的含义就是用来定义标题对应的描述的
- 定义列表的应用场景
做网站尾部的相关信息
做图文混排
- 定义列表的注意点
和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现
和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签
一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用.
推荐使用一个dt对应一个dd
和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签
2.表格标签
其实在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表。但在现在，多用于数据的展示
- 什么是表格标签?
表格标签作用: 用来给一堆数据添加表格语义
其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形 式
- 表格标签格式:
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1.78</td>
</tr>
</table>
其实表格标签中的table代表整个表格, 也就是一对table标签就是一个表格
其实表格标签中的tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行
其实表格标签中的td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格
补充:除td外，有时也会用到th，th内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。
- 注意点
- 表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
- 表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
- 宽度和高度的属性
可以给table标签和td标签使用
- 表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方 式来手动指定表格的宽度和高度.
- 如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度
- 水平对齐和垂直对齐的属性
其中水平对齐可以给table标签和tr标签和td标签使用.
垂直对齐只能给tr标签和td标签使用.
- 给table标签设置align属性, 可以控制表格在水平方向的对齐方式.
- 给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式.
- 给td标签设置align属性, 可以控制当前单元格中内容在水平方向的对齐方式.
注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐. - 给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式.
- 给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式.
注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐.
align: left center right
valign: top mid bottom
- 外边距和内边距的属性
只能给table标签使用
-
cellspacing外边距就是单元格和单元格之间的距离, 我们称之为外边距
默认情况下单元格和单元格之间的外边距的距离是2px -
cellpadding内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距
默认情况下内边距是1注意: 以后在企业开发中所有控制样式的都是通过CSS或直接使用组件库中的属性控制，使用表格自带属性控制很少，但是要了解基本的使用。
- 细线表格
在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的, 其实它是将2条线合并为了一条线, 所以看上去很不舒服
细线表格的制作方式:
1.给table标签设置bgcolor=“black”，cellspacing = “1px”
2.给tr标签设置bgcolor=“white”
注意点:
table标签和tr标签以及td标签都支持bgcolor属性
- 表格的完整结构
由于表格中存储的数据比较复杂, 为了方便管理和阅读以及提升语义, 我们可以对表格中存储的数据进行分类
表格中存储的数据可以分为4类
- 表格的标题
- 表格的表头信息
- 表格的主体信息
- 表格的页尾信息
表格的完整结构
<!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>
<style>
/* table{
合并单元格边框
border-collapse: collapse;
} */
</style>
</head>
<body>
<!-- 表格标签 -->
<!-- 表格属性
border 代表表格边框厚度 width height 表格宽高
align 水平方向对齐方式 left(默认值) center right tr td table 都可以使用
valign 垂直方向对齐方式 top middle(默认值) bottom
cellspacing 单元格到单元格的距离
cellpadding 单元格文字到单元格边框的距离
bgcolor 表格背景颜色 tr td table 都可以使用
backgroud 可以给表格设置背景图片 background="../音视频/ad7.jpeg"
-->
<table width="400px" height="300px" border="1">
<!-- 一个tr代表一行 一个td代表一列 -->
<tr>
<!-- 表格表头标签自带加粗居中的效果 -->
<th align="right" valign="bottom">姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td >彬仔</td>
<td>22</td>
<td>男</td>
</tr>
</table>
<!-- 细线表格 -->
<table bgcolor="black" cellspacing = "1px">
<tr bgcolor="white">
<td>年龄</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr bgcolor="white">
<td>18</td>
<td>张三</td>
<td>男</td>
</tr>
</table>
<!-- 表格完整结构 -->
<table border="1" cellspacing="0" align="center">
<!-- 表格标题标签 -->
<caption>个人信息表</caption>
<!-- 表头 -->
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<!-- 表体 -->
<!-- 不写tbody浏览器会自动补全 -->
<tbody>
<tr>
<td>1</td>
<td>其他</td>
<td>删除</td>
</tr>
</tbody>
<!-- 表脚 -->
<tfoot>
</tfoot>
</table>
</body>
</html>
caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息
注意点:
-如果我们没有编写tbody, 系统会系统给我们添加tbody
- 如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化(chrome下可以，Firefox下不可以)
- 单元格合并
1.水平方向上的单元格合并
可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)
例如:
<td colspan="2"></td>
含义: 把当前单元格当做两个单元格来看待
注意点:
由于把某一个单元格当做了多个单元格来看待, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示.
一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并.
2.垂直方向上的单元格合并
可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)
例如:
<td rowspan="2"></td>
含义: 把当前单元格当做两个单元格来看待
3.form表单
表单就是专门用来收集用户信息的
- 什么是表单元素?
表单元素其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能
- 表单的格式:
<form action="提交的服务器接口地址">
<表单元素>
</form>
注意:表单元素一定要写在表单中
- 常见的表单元素
<!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>
<!-- form表单 表单元素都要是写在form标签 -->
<!-- action表示表单提交到服务器地址 -->
<!-- name中放的是属性名 -->
<from action="test.html">
<!-- 表单元素 -->
<!-- 明文输入框 -->
<!-- readonly 只读的属性 -->
用户名:<input type="text" readonly name="username" value="zhangsan"><br>
<!-- 暗文输入框 -->
密码:<input type="password" name="password"><br>
<!-- 点击提交按钮 username =zhangsan password= -->
<!-- 单选按钮 将他们设置在同一个单选按钮组 设置同一个属性名 -->
<!-- label标签 可以设置文字选择按钮 -->
角色:
<!-- 1.用lable直接包裹input标签 -->
<label>
<input type="radio" name="role" id="admin">管理员
</label>
<!-- 2.给lable标签for属性和输入框id属性一致 需要把文字放在lable中 -->
<input type="radio" name="role" id="customer">
<label for="customer">顾客</label>
<input type="radio" checked name="role" id="employee">员工<br>
爱好：
<input checked type="checkbox" name="hobbies" id="">足球
<input type="checkbox" name="hobbies" id="">篮球
<input type="checkbox" name="hobbies" id="">唱歌
<br>
<!-- 下拉框 selected 设置默认选中 disable表示禁用 multiple显示全部元素 -->
<select name="city" multiple>
<optgroup label="一线城市" disabled>
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="shenzhen">深圳</option>
</optgroup>
<optgroup label="二线城市">
<option value="taiyuan">太原</option>
<option value="xian">西安</option>
<option value="suzhou">苏州</option>
</optgroup>
</select><br>
<!-- 普通按钮 -->
<input type="button" value="点击我">
<!-- 图片按钮 -->
<input width="150px" type="image" src="../音视频/ad7.jpeg" alt="">
<!-- 隐藏域 悄悄的提交一些数据到服务器 -->
<input type="hidden" name="token" value="123token">
<!-- 重置按钮 清空用户输入的内容 默认选项不会被清空 -->
<input type="reset" value="重置">
<!-- 提交按钮 -->
<input type="submit" value="提交">
<!-- 小刷和大刷
小刷请求浏览器缓存
大刷请求的是浏览器或者重新重新载入页面
-->
</from>
</body>
</html>
HTML5新增表单元素
<!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>
<form action="xxx.php">
<!-- h5新增表单属性
min
max
step 步幅
pattern 正则匹配
autofocus 鼠标聚焦于
required 必填项
placeholder 提示内容
formaction 表单提交服务器地址
formenctype 表单提交的数据地址 查询字符串 纯文本 附件
formmethod 提交表单的方式 get post
formnovalidate 不进行校验
list与datalist进行
-->
<!-- 进度条 -->
<progress value="70" max="100"></progress>
<!-- 滑块 -->
<input type="range" min="0" max="100" step="10" value="20">
<!-- 对邮箱校验 @ -->
<input type="email" required placeholder="请输入邮箱内容">
<!-- 对电话校验 配合正则表达式 pattern -->
<input type="tel" required pattern="1[0-9]{10}">
<!-- 对url校验 -->
<input type="url">
<!-- 取色器 -->
<input type="color" autofocus>
<!-- 日期 -->
<input type="date">
<!-- 日期时间 -->
<input type="datetime-local">
<!-- number 对数字校验 -->
<input type="number">
<!-- 给输入框绑定待选项 datalist id属性和input list属性要一致 -->
<input type="text" list="input">
<datalist id="input">
<option>周一</option>
<option>周二</option>
<option>周三</option>
</datalist>
<!-- 以上都是h5新增表单元素 -->
<input type="submit" value="提交1">
<input formnovalidate formmethod="post" formaction="test.php" formenctype="application/x-www-form-urlencoded" type="submit" value="提交2">
</form>
</body>
</html>
扫一扫
9547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
