目录
目标
书写表格
写出无序列表
常用input表单
下拉表表单
使用表单元素实现注册页面
独立查阅W3C文档
一、表格标签
1.表格主要作用
显示、展示数据。不是布局页面
2.基本语法
table用来定义表格的标签tr用来定义表格中的行，必须嵌套在<table></table>标签中td用来定义表格中的单元格，必须嵌套在<tr></tr>标签中th用来定义表格中的表头，表头单元格里面的内容加粗居中显示
<table>
<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
<tr><td>李</td><td>男</td><td>18</td></tr>
<tr><td>张</td><td>女</td><td>20</td></tr>
</table>3.表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里的文本内容加粗居中显示
<th> table head缩写
4.表格属性
属性名 属性值 描述
align left,center,right 规定表格相对周围元素的对齐方式
border 1或者’’ ‘’ 规定表格单元是否拥有边框，默认为" "，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="249">
<tr>
<th>姓名</th>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>李</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张</td>
<td>女</td>
<td>20</td>
</tr>
</table>
5.表格结构标签
为了更好的表示表格的语义，可以将表格分割成 表格头部 和表格主体两大部分
- 用 <thead></thead> 标签表示表格的头部区域，<thead>内部必须拥有<tr>标签，一般是位于第一行
- 用<tbody></tbody> 标签表示表格的主体区域，主要是用于放数据本体
- 以上标签都是放在<table></table>标签中
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="249">
<thead>
<tr>
<th>姓名</th>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>李</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张</td>
<td>女</td>
<td>20</td>
</tr>
</tbody>
</table>5.合并单元格
特殊情况下，可以把多个单元格合并为一个单元格
（1）合并单元格方式
- 跨行合并：
rowspan=“合并单元格的个数” - 跨列合并：
colspan="合并单元格的个数"
（2）目标单元格
（3）合并单元格步骤
- 先确定是跨行还是跨列合并
- 找到目标单元格写上合并方式=合并单元格数量，<td colspan="2"></td>
- 删除多余的单元格
<table width="500" height="249" border="1" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<td colspan="2"></td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">李</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>女</td>
<td>20</td>
</tr>
</tbody>
</table>
二、列表标签
列表是用来布局的
列表最大的特点就是整齐、整洁、有序、它作为布局会更加自由和方便
根据使用场景，分为无序列表、有序列表、自定义列表
1.无序列表
<ul>，一般会以项目符合呈现列表项，而列表项使用<li>标签定义
基本语法如下
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>（1）各个列表之间没有顺序之分，是并列的
（2）<ul></ul>中只能嵌套<li></li>,直接在其中输入其他标签或者文字不被允许
（3）<li>与</li>直接相当于一个容器，可以容纳所有元素
（4）无序列表会带有自己的样式属性，单实际使用会使用CSS来设置
2.有序列表
<ol>,列表排序以数字来显示，使用<li>定义列表项
语法
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
（1）.<ol></ol>中只能嵌套<li></li>,直接在其中输入其他标签或者文字不被允许
（2）.<li>与</li>直接相当于一个容器，可以容纳所有元素
（3）有序列表会带有自己的样式属性，单实际使用会使用CSS来设置
3.自定义列表
<dl>用于定义描述列表活定义列表，会与<dt>和<dd>（描述每个项目名字）一起使用
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
</dl>
（1）<dl></dl>中只能包含<dt>和<dd>
（2）<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
三、表单
目的是为了收集用户信息，用户交互
表单组成：表单域、表单控件和提示信息
1.表单域
包含表单元素的区域
<form>标签用于定义表单域，以实现用户信息收集和传递
会吧它范围内的表单元素信息提交黑服务器
<form action="url地址" method="提交方式" name="表单域的名称">
各自表单元素控件
</form>
2.表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是润旭用户在表单中输入或者选择的内容控件
2.1input输入表单元素
<input>单标签
input是个单标签，type属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等),必写
type属性和描述
除 type 属性外，<input> 标签还有很多其他很多属性，其常用属性如下
- name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。
- name 是表单元素的名字，要求 单选框和复选框要有相同的name值
- checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素
- maxlength是用户可以在表单元素输入的最大字符数，一般较少使用
submit点击提交按钮，可以把表单域form元素里的值提交给后台服务器
reset重置按钮可以还原表单元素初始默认状态
button普通按钮button
file：上传文件
<!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 method="get">
<!-- 输入文本框 -->
用户名<input type="text" name="username" value="请输入用户名" maxlength="6"><br>
<!-- 密码，用户看不见 -->
密码<input type="password" name="pwd"><br>
<!-- 单选 -->
<!-- name是表单元素名字，这里性别单选按钮必须拥有相同的名字name，才可以实现多选1 -->
性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"><br>
<!-- 多选 -->
爱好 吃饭<input type="checkbox" name="hobby" value="吃饭">睡觉<input type="checkbox" name="hobby" value="睡觉">打豆豆<input
type="checkbox" name="hobby" value="打豆豆"><br>
<!-- 点击提交按钮，可以把表单域form元素里的值提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮button -->
<input type="button" value="获取验证码"><br>
<!-- 文件域 上传文件 -->
上传头像<input type="file">
</form>
</body>
</html>2.2<lable>标签
<lable>标签为input元素定义标注（标签）
label标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验label标签的 for属性 应当与相关元素的id 属性相同
<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" /><label for="text"> 用户名</label><input type="text" id="text">
<input type="radio" id="nan"><label for="nan">男</label>
2.3.select下拉表单元素
- 下拉表单元素
<select>中至少包含一对<option>- 在
<option>中定义selected="selected"时，当前项即为默认选中项。
<select>
<option selected="selected">Beijing</option>
<option>山东</option>
<option>tianjin</option>
</select>2.4textarea
- 用于定义多行文本输入的控件
内容较多，定义多行文本输入，场景留言板，评论
四、综合案例-注册页面
<!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>
<h4>青春不常在</h4>
<table width="500">
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" id="nan"><label for="nan"><img src="images/01.png">男</label>
<input type="radio" name="sex" id="nv"><label for="nv"><img src="images/01.png">女</label>
</td>
</tr>
<tr>
<td>生日：</td>
<td>
<select>
<option>请选择年份</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>请选择月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>请选择日</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<!-- 3 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="beijing"></td>
</tr>
<!-- 4 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry">未婚
<input type="radio" name="marry" checked="checked">已婚
<input type="radio" name="marry">离婚
</td>
</tr>
<!-- 5 -->
<tr>
<td>学历：</td>
<td><input type="text" value="幼儿园"></td>
</tr>
<!-- 6 -->
<tr>
<td>喜欢类型</td>
<td>
<input type="checkbox" name="love">妩媚
<input type="checkbox" name="love">可爱
<input type="checkbox" name="love">小鲜肉
<input type="checkbox" name="love">老腊肉
<input type="checkbox" name="love" checked="checked">都喜欢
</td>
</tr>
<!-- 7 -->
<tr>
<td>个人介绍</td>
<td>
<textarea></textarea>
</td>
</tr>
<!-- 8 -->
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
<!-- 9 -->
<tr>
<td></td>
<td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18、单身</li>
<li>抱着严谨态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
扫一扫
71
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
