html5：列表、表格、表单元素_html5单页列表-CSDN博客

本文链接：https://blog.csdn.net/qq_20006765/article/details/126122188

本文详细介绍了HTML中的列表类型，包括无序列表、有序列表和定义列表的用法，以及表格的基本属性、表格结构和单元格的合并。此外，还深入探讨了表单元素，如输入框、单选按钮、复选框、下拉框、多行文本框等，并展示了H5新增的元素，如datalist、进度条、滑块等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、列表标签

无序列表、有序列表、定义列表

<!-- 无序列表 ul li 块级元素-->
    <ul type="circle">
        <li>苹果</li>
        <li>香蕉</li>
        <li>榴莲</li>
    </ul>
    <!-- 有序列表 -->
    <ol type="a">
        <li>螺蛳粉</li>
        <li>老友粉</li>
        <li>桂林米粉</li>
    </ol>
    <!-- 定义列表 dl dt dd -->
    <dl>
        <!-- 列表标题 -->
        <dt>钓鱼岛</dt>
        <!-- 对列表标题描述 -->
        <dd>钓鱼岛是中国的</dd>
        <dt>火山</dt>
        <dd>火山爆发是日本的</dd>
    </dl>

二、表格

基本属性： table width height align bgcolor border='1' 外边距cellspacing=0 border-collapase 内边距 cellpadding

thead 表头

tr>th

tbody 表体

tr>td

tfoot 表脚

tr>td

caption align 表格标题

水平对齐 table tr td caption align

垂直对齐 tr td valign

<!-- 对齐 table tr td设置水平对齐 align:left center right-->
    <!-- table标签就是一个表格 -->
    <!-- cellspacing单元格和单元格外边距  默认2px
        cellpadding单元格和文字内边距
        表格特有的属性
    -->
    <!-- 边框合并 cellspacing="0"
        利用css样式 边框合并
         -->
    <table cellspacing="0" cellpadding="10" border="2" width="300px" height="120px" align="center">
        <!-- 一个tr代表一行 -->
        <!-- 一个td代表一个单元格或者一列 -->
        <tr>
            <!-- th表头标题标签 默认居中加粗 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <!-- <tr align="center"> -->
        <tr>
            <!-- valign是垂直对齐 top bottom mid -->
            <td valign="top">张三</td>
            <!-- <td>张三</td> -->
            <td>30</td>
            <td>男</td>
        </tr>
    </table>
    <table bgcolor="black" cellspacing="1px">
    <!-- 细线表格 -->
    <tr bgcolor="white">
        <!-- th表头标题标签 默认居中加粗 -->
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr bgcolor="white">
        
        <td>李四</td>
        <td>15</td>
        <td>男</td>
    </tr>
    </table>
    <!-- 完整的表格结构 -->
    <table border="1">
        <!-- 表格标题标签 默认居中-->
        <caption>个人信息</caption>
        <!-- 表头标签 -->
        <thead>
					<tr>
						<th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
					</tr>
            
        </thead>
				
        <!-- 表体标签 tbody没写 浏览器自动补全-->
        <tbody>
					<tr>
						<th>姓名</th>
						<th></th>
						<th></th>
					</tr>
				</tbody>
        <!-- 表脚标签 -->
        <tfoot>
					<tr>
						<th>姓名</th>
						<th></th>
						<th></th>
					</tr>
				</tfoot>
    </table>

三、单元格合并

<table border="1" align="center">  
    <tr>
			<!-- 单元格合并 列合并 colspan='3' 合并三列 -->
			<!-- 行合并 rowsoan='3' 合并三行 -->
			<!-- 被合并的需要删除掉 -->
        <td colspan="3">11</td>
        <!-- <td>12</td> -->
        <!-- <td>13</td> -->
        <td>14</td>
        <td>15</td>
        <td>16</td>
    </tr>
    <tr>
        <td>21</td>
        <td rowspan="2">22</td>
        <td>23</td>
        <td colspan="3" rowspan="2">24</td>
        <!-- <td>25</td> -->
        <!-- <td>26</td> -->
    </tr>
    <tr>
        <td>31</td>
        <!-- <td>32</td> -->
        <td>33</td>
        <!-- <td>34</td> -->
        <!-- <td>35</td> -->
        <!-- <td>36</td> -->
				
    </tr>
	</table>

四、表单元素

<form action="test.html">
        <!-- 单选框 单选按钮 复选框 -->
        <!-- 明文输入框 -->
        账号：<input type="text" name="account" value="请输入账号"><br>
        <!-- 暗文输入框 -->
        密码：<input type="password" name="pwd"><br>
        <!-- 单选按钮 -->
        角色：
        管理员<input type="radio" name="role" value="admin">
        顾客<input type="radio" name="role" value="customer">
        员工<input type="radio" name="role" value="employee"><br>
        <!-- 复选框 -->
        爱好：
        唱：<input type="checkbox" name="hobbies" value="sing">
        跳：<input type="checkbox" name="hobbies" value="dance">
        rap：<input type="checkbox" name="hobbies" value="rap"><br>
        <!-- 附件上传 -->
        <input type="file" name="file">
        <!-- 普通按钮 配合js做一些动作 -->
        <input type="button" value="我是一个按钮">
        <!-- 图片按钮 -->
        <input type="image" width="100px" src="/day01/swipe/src=http___dingyue.ws.126.net_iIAsSR2Se8ww6dhFNlOPD0dWPSY8cANo9KLaLOuXbhsNF1589577404137compressflag.jpeg&refer=http___dingyue.ws.126.jpeg" alt="">
        <!-- 隐藏域 如果你希望悄悄地往服务器提交一些数据 -->
        <input type="hidden" name="token" value="jkhfdlkjhadsf">
        <!-- 重置按钮 将用户在表单中所选重置 -->
        <input type="reset" value="重置">
        <!-- 提交按钮 -->
        <input type="submit" value="提交">

    </form>

其他表单元素

<!-- label作用:使文字和输入框关联 聚焦输入框 -->
	<form action="xxx">
		<label for="one">用户名：</label>
		<input type="text" id="one" name="username" ><br>
		<!-- 下拉框 -->
		<select name="city">
			<optgroup label="一线城市">
				<option value="shanghai">上海</option>
				<option value="beijing" >北京</option>
				<!-- selected默认选中 -->
				<option value="liuzhou" selected>柳州</option>
			</optgroup>
		</select>
		<!-- 多行文本框 -->
		<textarea name="" id="" cols="30" rows="10"></textarea>
		<!-- filedset类似于div加边框 -->
		<fieldset>
			<legend>请登录</legend>
			账号: <input type="text"><br>
			密码: <input type="password">
			<input type="submit" value="提交">
		</fieldset>
	</form>

h5新增元素

<!-- datalist 给输入框绑定待选项 
		list属性设置给input输入框
		给datalist标签设置id属性=list属性值
	-->
	<form action="xxx">
		<input type="text" list="input_ref">
		<datalist id="input_ref">
			<option >周一</option>
			<option >周三</option>
			<option >周六</option>
		</datalist>
		<!-- 进度条 -->
		<progress value="70" max="100"></progress>
		<!-- 滑块 -->
		<input type="range" value="80" step="20" max="100" min="0">
		<!-- 邮箱 -->
		<input type="email" >
		<!-- 电话 利用正则表达式 pattern-->
		<input type="tel" pattern="1[0-9]{10}">
		<!-- 数字 -->
		<input type="number" >
		<!-- 域名 -->
		<input type="url" >
		<!-- 时间日期 -->
		<input type="datetime-local" >
		<!-- 日期 -->
		<input type="date" >
		<!-- 颜色 -->
		<input type="color" >
		<!-- 提交按钮 -->
		<input type="submit" value="提交">
		<!-- 其他h5新特性 -->
		<mark>高亮效果</mark>
		<cite>倾斜效果</cite>
		<pre>
			<code>var a=1;</code>
		</pre>
		<strike>删除线</strike>
	</form>