本文详细讲解了HTML的表格、列表、表单控件等基础知识，包括表格属性、合并单元格、无序与有序列表，以及表单的结构和表单元素如input、select、textarea的使用。通过实例演示，助你快速掌握HTML表单设计技巧。
HTML学习第二天
目录
1. 表格标签
1.1 基本语法
<table> 定义表格整体
<tr> 定义表格的每一行
<td> 定义每一行的每一列，即表格中单元格项
....
</td>
</tr>
....
</table>
1.2 表格的表头标签
- 定义：通常为表格的第一行或第一列，表头单元格里面的内容加粗居中表示。
- 语法规则:
<table>
<!-- 表头标签 -->
<tr>
<th>
....
</th>
</tr>
<!-- 普通的每一行 -->
<tr>
.....
</tr>
</table>
1.3表格的属性
| 属性名 | 属性值 | 说明 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或“” | 规定表格单元格是否拥有边框，默认“”，无边框 |
| cellpadding | 像素 | 单元格边沿与内容之间的空白 |
| cellspacing | 像素 | 单元格之间的空白，默认2像素 |
| width | 像素 | 表格的宽度 |
| height | 像素 | 表格的高度 |
| caption | 文本 | 表格大标题 |
1.4 表格的结构标签
| 标签名 | 说明 |
|---|---|
<thead></thead> | 表格的头部区域 |
<tbody></tbody> | 表格的主体区域 |
<tfoot></tfoot> | 表格的底部区域 |
1.5 合并单元格
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数"
- 图解
- 合并步骤：
- 确定跨行还是跨列合并
- 找到起始单元格，在标签内写上对于的属性名和属性值。
- 把被合并的单元格删除。
- 注意点：只有同一个结构标签内的单元格才能合并，不能跨结构标签合并（thead，tbody，tfoot）
2. 列表
2.1 无序列表
- 语法格式
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
2.2 有序列表
- 语法格式
<ol>
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
2.3 自定义列表
- 语法格式
<dl>
<!-- 自定义列表标签dt表示列表的主题 -->
<dt>帮助中心</dt>
<!-- dd标签表示主题的每一项内容 -->
<dd>账户管理</dd>
<dd>订单指南</dd>
<dd>客服中心</dd>
</dl>
注意点
- dl标签里面只能包含dt和dd，dt和dd里面可以放任意标签。
3. 表单标签
3.1 表单的组成
- 在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息3个部分组成。
- 图解
3.2 表单域
-
form标签定义表单域，实现用户信息的搜集和传递。
-
form标签会把它范围内表单元素信息提交到服务器。
-
form语法格式
<!-- 定义一个表单 -->
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
- form常用属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
3.3 表单控件（表单元素）
- input表单元素
- select下拉表单元素
- textarea文本域元素
3.3.1 input表单元素
- 作用：输入，搜集用户信息
- 单标签
- 格式
<input type="属性值">
-
根据不同的属性值来指定不同的控件类型
-
type属性值
| 属性值 | 描述 |
|---|---|
| button | 定义可单击按钮（多数情况下，可以通过Javascript启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和浏览按钮，文件上传，搭配multiple属性实现多文件选择 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式提交按钮 |
| password | 定义密码字段，该字段中的字符被掩盖 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮 |
| submit | 定义提交按钮 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度20字符 |
3.3.2 input表单元素的其他属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 用户自定义 | 1.input元素名称，当前控件的含义，发送给后台数据的含义 2. name属性还可以用于单选框分组，实现同一组只有一个被选中 |
| value | 用户自定义 | 用户输入的内容，发送到服务器 |
| placeholder | 文本 | 提示用户输入指定内容的文本 |
| checked | 无 | 用于复选单选框，使当前表单元素在加载时被选中 |
| maxlength | 正整数 | 规定输入字段中字符的最大长度 |
3.3.3 select下拉菜单标签
- 标签组成
- select标签：下拉菜单整体
- option标签：下来菜单的每一项
- 常见属性
- selected：下拉菜单默认选中
3.3.4 textarea文本域标签
-
用于提供在网页中输入多行文本的表单控件
-
常见属性
- cols：规定文本域可见的宽度
- rows：规定文本域可见行数（高度）
-
右下角可以拖拽改变大小
3.3.5 label标签
- 绑定文本内容与表单标签的关系
- 使用方法1
- 使用label标签将内容（如文本）包裹起来
- 在表单标签中添加id属性
- label标签中加上for属性，属性值设置为id属性值
示例
<!--第一种
label将文本宇表单标签联系在一起
表单id与label的for一致
-->
<input type="radio" id="1" name="性别"><label for="1">男</label>
<input type="radio" id="2" name="性别"><label for="2">女</label>
- 使用方法2
- 去掉for和id属性
- 用label标签将表单标签和要联系的内容包裹起来
- 示例
<!-- 第二种 -->
<!-- 用label标签将表单标签包裹起来，去掉for属性 -->
<label > <input type="radio" name="性别">男 </label>
<label > <input type="radio" name="性别">女 </label>
4. 有语义的布局标签
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
- 显示特点与div标签一致，只是拥有了不同的语义。
5.空格字符合并现象
- 如果在HTML代码中同时并列出现多个空格、换行、缩进，最终浏览器只能解析出一个空格
6.一个表单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
body{
background-color:burlywood;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<h1><q>青春不常在，抓紧谈恋爱</q></h1>
<hr>
<form action="">
性别：<label><input type="radio" name="性别" checked><img src="D:\BaiduNetdiskDownload\资料\day02\06-资料\02-课后作业\02-作业（选做）\05-表单标签-传智征婚网★★★★\images/man.jpg" alt="">男</label>
<label><input type="radio" name="性别"><img src="D:\BaiduNetdiskDownload\资料\day02\06-资料\02-课后作业\02-作业（选做）\05-表单标签-传智征婚网★★★★\images/women.jpg" alt="">女</label>
<br><br>
出生年月：
<select name="" id="" >
<option value="">请选择年</option>
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
</select>
<select name="" id="" >
<option value="">请选择月</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<select name="" id="" >
<option value="">请选择日</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
</select>
<br><br>
所在地区：<input type="text" placeholder="奋斗者之家">
<br><br>
婚姻状况：<label><input type="radio" checked name="marry">单身</label>
<label><input type="radio" name="marry">未婚</label>
<label><input type="radio" name="marry">缺爱</label>
<br><br>
学历：<input type="text" placeholder="小学">
<br><br>
月薪：<input type="text" placeholder="1000~100000">
<br><br>
手机号：<input type="text">
<br><br>
昵称：<input type="text">
<br><br>
喜欢的类型：<label><input type="checkbox">妩媚</label>
<label><input type="checkbox">柔美</label>
<label><input type="checkbox">可爱</label>
<label><input type="checkbox">小鲜肉</label>
<label><input type="checkbox">御姐</label>
<label><input type="checkbox">萝莉</label>
<br><br>
自我介绍：<textarea name="" id="" cols="60" rows="10"></textarea>
<br><br>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚的寻找另一半</li>
</ul>
<br><br>
<input type="checkbox" checked>我同意注册条款和会员加入标准
<br><br>
<input type="submit" value="提交">
<input type="reset">
</form>
</body>
</html>
- 效果图
3696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
