本文详细介绍了HTML中的表格元素，包括基本的表格结构、表头单元格、表格属性、表格结构划分、单元格合并以及无序列表、有序列表和自定义列表的使用。此外，还深入讲解了HTML表单的构成，如input元素的各种类型，以及select和textarea的使用，为网页开发提供了全面的参考。
HTML标签列表表单
-
表格标签
-
作用:显示展示数据；
-
语法
-
<table> <tr> 定义表格中的行 <td> 单元格内的文字</td> </tr> </table> # 3行2列 <table> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table>
-
-
-
表格标签
-
表头单元格标签，位于表格的第一行或者第一列，表头单元格里的文本内容加粗居中显示。
-
格式
-
<table> <tr> <th>姓名</th> </tr> </table>
-
-
表格属性标签
-
属性名 属性值 描述 cellpadding 像素值 规单元边沿与内容之间的空白，默认1像素 cellspacing 像素值 规单元格之间的空白，默认2像素 border 1或 “” 单元格是否有边框，默认为 “”,无边框 -
表格结构便签
-
使用thead和tbody便签划分
-
<table> <!--表格头部区域--> <thead> <tr> <th></th> </tr> </thead> <!--表格主体区域--> <tbody> <thead> <tr> <td></td> </tr> </tbody> </table>
-
-
-
合并单元格
-
跨行合并：rowspan=“合并单元格的个数”；
-
跨列合并：colspan=“合并单元格的个数”；
-
目标单元格(写合并代码)
-
跨行：最上册单元格为目标单元格，写合并代码；删除多于的单元格；
-
跨列：最左侧单元个为目标单元格，写合并代码；删除多于的单元格；
-
# 3行3列的单元格 <table> <tr> <td></td> <td colspan="2"></td> # 跨列合并单元格 找到目标单元格 </tr> <tr> <td rospan ="2"></td> <td></td> <td></td> </tr> <tr> // <td></td> 删除第二行对应的跨行单元格 <td></td> <td></td> </tr> </table>
-
-
-
无序列表
-
语法规范
-
<ul> <li>列表项1</li> <li>列表项1</li> <li>列表项1</li> </ul> -
注意：ul标签只能放li，li标签可以嵌套其他标签；
-
-
-
有序列表
-
语法规范
-
<ol> <li>有序列表1</li> <li>有序列表1</li> <li>有序列表1</li> </ol>
-
-
-
自定义列表
-
语法
-
<dl> <dt>名词1</dt> <dd>名词解释1</dd> <dd>名词解释2</dd> </dl> -
注意：一个dt对应多个dd
-
-
-
表单标签
-
表单域:form标签用于定义表单域，实现用户的收集和传递。且会把它范围内的表单元素信息提交到服务器
-
语法：
<form action="url 地址" method="提交方式get/post" name="表单域名称"> </form>
-
-
表单元素
-
input输入表单元素
-
#语法 <input type ="属性值"/> //type属性设置不同的属性值用来指定不同的控件类型 -
属性值 描述 button 定义可点击按钮(多数情况下，用于通过JavaScript启动脚本) checkbox 定义复选框 file 定义输入字段和"浏览"按钮，供文件的上传。 hidden 隐藏的输入字段 image 图像形式的提交按钮 password 定义密码字段。该字段中的字符被掩码 radio 定义单选按钮 reset 重置按钮清除表单数据 submit 提交按钮，表单数据提交到服务器 text 单行的输入字段，用户在其中输入文本，默认宽度20个字符
-
-
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单学习</title>
</head>
<body>
<h4>表单域</h4>
<p>form表单 属性 </p>
<!-- <form action="#abc.php" method="get/post" name="name1"></form> -->
<!-- 这里我们填写的表单发送目标服务器地址 -->
<form action="pwd.html" method="get" name="Usersubmit">
<!-- maxlength限制输入长度 -->
<!-- <label>属性可以将鼠标放在目标位置增加用户体验 -->
<label for="text">用户名：</label><input type="text" id="text" name="username" value="请输入昵称"
maxlength="6" /><br /><!-- 文本框用户可以看到文字或者输入任何内容 -->
<label for="password">密码：</label><input type="password" id=password name="pwd" value="请输入8-16位密码英文加字符"
maxlength="16" /><br>
<!-- 密码框password，输入密码时用户看不到明文密码 -->
<!-- radio属性，单选按钮，可以实现多选 -->
<!-- 多选一按钮实现需要统一属性例如：下面属性 -->
<!-- checked属性是单选和复选按钮 当打开页面时默认选中 -->
性别：<label for="nv">小姐姐</label><input type="radio" id="nv" name="sex" value="女" />
<label for="nan">小帅哥</label><input type="radio" id="nan" name="sex" checked="checked" />
<label for="ba">芭提雅</label><input type="radio" id="ba" name="sex" /><br />
<!-- checkbox复选功能 -->
吃饭<input type="checkbox" name="hobby" />
睡觉<input type="checkbox" name="hobby" />
和平经营<input type="checkbox" name="hobby" />
PUBG<input type="checkbox" / name="hobby"><br />
<input type="button" value="短信验证码" />
<!-- 注意:button属性需要搭配js使用，不提交数据 -->
<input type="submit" value="免费注册" />
<input type="reset" value="重新填写" /><br />
<!-- 属性reset重新填写 -->
<!-- 文件域名 file上传文件 -->
上传头像<input type="file" value="上传头像.jpg.png文件" />
</form>
</body>
</html>
// 使用name属性区分标签属性
// name 是表单元素的名字 这里的性别单选按钮必须有相同名字 name 才可以使用多选一
-
属性 属性值 描述 name 由用户自定义 定义input元素的名称 value 由用户自定义 规定input元素的值 checked checked 规定input元素首次加载时应当被选中 maxlength 正整数 输入字段的字符最大长度
name 和value是每个表单元都有的属性值，主要给后台人人员使用
name 表单元素的名字要求单选按钮和复选按钮要有相同的name值
maxlength 是用户可以在表单输入最大字符数
- label标签
-
// 格式： <label for = "# name" >xx</label> <input type ="radio " name ="xx" id ="# name"/>
扫一扫
4072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
