2.表格与表单
本章目标
- 列表
- 表格
- 表单（掌握）
本章内容
一、列表
1、无序列表
无序列表的特性
- 没有顺序，每个
<li>标签独占一行（块元素） - 默认
<li>标签项前面有个实心小圆点 - 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
格式：
<ul type="">
type属性设置标号的类型，值可以取：
1 disc ：实心圆点
2 circle ：空心圆点
3 square ：实心方块
<body>
<ul>
<li>
江苏省
</li>
<li>
陕西省
</li>
</ul>
</body>
2、有序列表
有序列表
- 用于说明页面中的某些成分，需要按特定的顺序排列。有序列表的每项都有连续的编号。
- 有顺序，每个
<li>标签独占一行（块元素） - 默认
<li>标签项前面有顺序标记 - 一般用于排序类型的列表，如试卷、问卷选项等
<table></table>：表示创建一个表格。border：设置表格的边框。以数字为单位，默认为0，即默认没有边框。width：设置表格的宽度，以像素为单位。height：设置表格的高度，以像素为单位。align：设置表格本身相对于页面的水平对齐方式，有left、center、right。cellspacing：设置单元格之间的距离。默认为1cellpadding：设置单元格边框跟其内容之间的距离。有默认值bgcolor：设置表格的背景颜色
<tr></tr>：表示行。一个tr表示表格中的一行。align：设置一行中的数据的水平对齐方式，有left、center、right。height：设置该行的高度bgcolor：设置一行的背景颜色
<td></td>：表示单元格。一个td表示一行中的一个单元格。align：设置该单元格中数据的水平对齐方式，有left、center、right。width：设置单元格的宽度height：设置单元格的高度bgcolor：设置单元格的背景颜色
<th></th>：表示标题列。本质上就是一个特殊的td。th中的文字默认为粗体。- 注册用户
- 收集信息
- 反馈信息
- 搜索引擎
palcehodler：未输入内容时的提示信息readonly：表示只读，内容还可以复制，内容还可以提交给服务器disable：禁用这个组件required：规定文本区域是必填的。autofocus：规定在页面加载后文本区域自动获得焦点maxlength设置表单控件用户可以输入的最大长度tabIndex设置用户Tab顺序的索引- 要 编写大量的重复代码
- 代码可维护性不强
有序列表的特性
格式：
<ol type="" start="">
type设置标号的类型，值可以取：
1 1：显示数字
2 A：显示大写字母
3 a：显示小写字母
4 I：显示大写罗马数字
5 i：显示小写罗马数字
<ol>
<li>南京市</li>
<li>苏州市</li>
<li>扬州市</li>
</ol>
3、嵌套列表
一个列表作为另一个列表的一部分，即多层列表
<body>
<ul>
<li>
江苏省
<ol>
<li>南京市</li>
<li>苏州市</li>
<li>扬州市</li>
</ol>
</li>
<li>
陕西省
<ol>
<li>西安市</li>
<li>宝鸡市</li>
<li>咸阳市</li>
</ol>
</li>
</ul>
</body>
二、表格
1、表格的基本语法
表格是由行组成，行由单元格组成
2、如何创建表格
<table>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>
案例1: 制作学员信息表
<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>
<table border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="skyblue">
<th align="center">学号</th>
<th align="center">姓名</th>
<th align="center">专业</th>
<th align="center">班级</th>
<th align="center">性别</th>
<th align="center">电话</th>
<th align="center">学历</th>
<th align="center">年龄</th>
<th align="center">地址</th>
<th align="center">操作</th>
</tr>
<tr>
<td>WNXA10001</td>
<td>刘备</td>
<td>人力资源</td>
<td>WNXAT019</td>
<td>男</td>
<td>13987675879</td>
<td>本科</td>
<td>33</td>
<td>南京市江宁区</td>
<td>
<a href="#">查看</a>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>WNXA10001</td>
<td>关羽</td>
<td>计算机科学与技术</td>
<td>WNXAT019</td>
<td>男</td>
<td>13987675439</td>
<td>本科</td>
<td>32</td>
<td>南京市江宁区</td>
<td>
<a href="#">查看</a>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
......
</table>
</body>
</html>
3、跨多列的表格
colspan合并列
<body>
<table border="2">
<tr>
<td colspan="3">学生成绩表</td>
</tr>
<tr>
<td>英语</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>95</td>
<td>98</td>
<td>89</td>
</tr>
</table>
</body>
4、跨多行的表格
rowspan合并行
<body>
<table border="1">
<tr>
<td rowspan=“3”>早上菜谱 </td>
<td>食物</td>
<td>鸡蛋</td>
</tr>
<tr>
<td>饮料</td>
<td>牛奶</td>
</tr>
<tr>
<td>甜点</td>
<td>开心粉</td>
</tr>
</table>
</body>
5、跨行跨列的表格
<body>
<table border="1">
<tr>
<td>手机充值、ip卡 </td>
<td colspan="2">办公设备、文具</td>
</tr>
<tr>
<td rowspan="2">各种卡的总汇</td>
<td>铅笔</td>
<td>彩笔</td>
</tr>
<tr>
<td>打印</td>
<td>刻录</td>
</tr>
</table>
</body>
示例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="300px" height="200px" border="1px" align="center">
<tr>
<td rowspan="3">日期</td>
<td colspan="4">配送信息</td>
</tr>
<tr>
<td rowspan="2">姓名</td>
<td colspan="3">地址</td>
</tr>
<tr>
<td>省份</td>
<td>市区</td>
<td>地址</td>
</tr>
<tr>
<td>2016-05-03</td>
<td>张三</td>
<td>江苏省</td>
<td>南京市</td>
<td>江宁区</td>
</tr>
<tr>
<td>2016-05-03</td>
<td>张三</td>
<td>江苏省</td>
<td>南京市</td>
<td>江宁区</td>
</tr>
</table>
</body>
</html>
6、常用属性
<table width="400" height="200" border="15" bordercolor="red">
<tr>
<td colspan="4"> 品牌商城</td>
</tr>
<tr>
<td colspan="2">笔记本电脑</td>
<td colspan="2">办公设备、文具、耗材</td>
</tr>
<tr>
<td>惠普</td>
<td>华硕</td>
<td>打印机</td>
<td>刻录盘</td>
</tr>
</table>
三、表单
1、表单的典型应用
2、表单页面的基本结构
action：设置服务器上处理程序的位置，参数值是一个URL路径。
method：设置表单的运行方式，可以取值get、post。
get的特点是信息暴露，表单数据会附加在
action属性的URI中，并以’?’作为分隔符，然后这样得到的 URI 再发送给服务器，长度不能超过255字节，但是速度快。一般用于查询操作post的特点信息隐藏，表单数据会包含在表单体内然后发送给服务器长度不限，但是速度较慢。一般用于表单提交操作
3、常用属性
4、其他属性
5、<label>标签
使用表单空间的id属性与label的for属性将
性别:<input type="radio" name="sex" value="0" id="male" /><label for="male">男</label><input type="radio" name="sex" value="1" id="female" /><label for="female">女</label>
…
<label for="confirm"><input type="checkbox" name="confirm" id="confirm"/>请点击此处确认已经同意该协议</label>
6、placeholder属性
input标签的placeholder属性的作用是：在用户输入前，做出相应的提示。
<input name="uname" type="text" placeholder="用户名">
<!--placeholder属性：在用户输入前提示用户-->
四、框架标签
1、为什么要使用iframe
iframe的语法
<iframe name="frame" src="https://www.baidu.com/" width="100%" height="700px" frameborder="0"></iframe>
2、怎么使用iframe
可以在一个网页中，嵌套另一个网页。可以在当前网页中嵌套其他服务器的网页，或者本服务器的其他页面。
<ul>
<li><a href="https://www.baidu.com/" target="frame">百度</a></li>
<li><a href="http://woniuxy.com/" target="frame">蜗牛学院</a></li>
</ul>
<!-- iframe 需要设置宽高来显示页面 -->
<iframe name="frame" src="https://www.baidu.com/" width="100%" height="700px" frameborder="0"></iframe>
target=“”代表我们跳转页面时，去找自己定义的框架，将目标网页嵌套到框架中显示。必须与iframe标签的name=""属性配合使用。
本文来自博客园，作者：icui4cu，转载请注明原文链接：https://www.cnblogs.com/icui4cu/p/18824876
浙公网安备 33010602011771号