文章目录
第一节：表格的使用
表格table
在网页上，除了文字、图片，常常还会遇到表格。特别在一些官方等网页，数据性、分析性比转强时也会以表格的形式展现数据和分析。
例：
- 表格的格式：
<table></table> - 表格的作用：用来将数据以一格形式显示出来
- 配套标签
<thead>—— 表头<tbody>—— 表身<tr>—— 定义表格行<td>—— 定义表格单元<th>—— 定义表头单元格colspan—— 设定单元格应该横跨的列数,用于横向合并单元格rowspan—— 设定单元格应该横跨的行数，用于纵向合并单元格
表格一般不会以单个标签出现，都是配套上面的标签出现才能完成表单。表单需要设置样式，否则单元格将没有任何边框，这些一般都交由样式处理，为了展示表格的制作，以下会给出一个属性border，简单显示边框。
一个最简单的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格与表单</title>
</head>
<body>
<!-- 表格 -->
<table border="1">
<thead>
<tr> <!-- 表格行 -->
<th>编号</th> <!-- 表头单元格 -->
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td> <!-- 单元格 -->
<td>东方不败</td>
</tr>
</tbody>
</table>
</body>
</html>
浏览器结果：
使用style标签编写样式
除了在标签内写样式属性，还可以把一些样式属性交给style标签，进行统一的样式的编写。写进style内的内容，其实就是CSS样式编写，和行内样式的区别，只是权重的问题，一样可以达到装饰效果。在使用style标签编写样式前，需要对CSS有一点简单的了解
- 简单了解CSS
CSS的注释格式：
/*注释内容*/
CSS选择器：
作用：选中一个标签。
【类选择器】一般，在HTML标签会有个class的类名属性，CSS选择器就可以根据类名，从而对类名所处的标签，进行样式处理.class又叫类选择器,类选择器的格式是：.className{属性:值; }
【后代选择器】选择器所在标签包裹的区域内的其他标签，都可以说是这个选择器的后代选择器。后代选择器的格式是：.选择器名 <标签>
常用CSS属性：
border—— 边框
width / height—— 宽、高
例：以上面简单表格为例,在style标签内设定表格样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格与表单</title>
<style>
.student{
border:5px solid black; /*外边框线的宽度、实线、颜色为黑色*/
width: 500px; /*整个外边框宽度为80px,px是像素单位*/
}
.student td{
border:1px solid red; /*后代选择器，设置单元格的样式*/
}
</style>
</head>
<body>
<!-- 表格 -->
<table class="student">
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>东方不败</td>
</tr>
</tbody>
</table>
</body>
</html>
浏览器结果：
常用颜色代码
- 常用英文颜色代码
HTML语言中已经预先定义好的140种颜色（最常使用的有16种），这些颜色在使用时可以直接书写颜色名称.
更多英文颜色代码，可在网上自行查行。
| 颜色中文名 | 颜色英文名 | 颜色中文名 | 颜色英文名 |
|---|---|---|---|
| 白色 | white | 灰色 | gray |
| 黄色 | yellow | 绿色 | green |
| 红色 | red | 褐色 | maroon |
| 紫红色 | fuchsia | 深蓝色 | navy |
| 水绿色 | aqua | 橄榄色 | olive |
| 浅绿色 | lime | 紫色 | purple |
| 蓝色 | blue | 深青色 | teal |
| 黑色 | black | 银色 | sliver |
例：
- 常用十六进制颜色代码
颜色是多种多样的，HTML的140多个英文颜色并不足以描绘所有的颜色。除了英语单词，还能用十六进制表示颜色。
[RGB]
在机算机领域，颜色以光学颜色RGB（红、绿、蓝）为主。网页颜色是以16进制代码表示，一般格式为#DEFABC （字母范围从A-F,数字从0-9 ，每两个数字分别代表红、绿、蓝）；如黑色，在网页代码中便是：#000000(也可简写为#000)。当颜色代码为#AABB11时，可以简写为#AB1表示，如#135与#113355表示同样的颜色。
更多的颜色16进制表示可以自行网上查询RGB颜色查询对照表，
| 颜色中文名 | 颜色16位表示 | 颜色中文名 | 颜色16位表示 |
|---|---|---|---|
| 白色 | #FFFFFF | 灰色 | #808080 |
| 黄色 | #FFFF00 | 绿色 | #008000 |
| 红色 | #FF0000 | 褐色 | #800000 |
| 紫红色 | #FF00FF | 深蓝色 | #000080 |
| 水绿色 | #00FFFF | 橄榄色 | #808000 |
| 浅绿色 | #00FF00 | 紫色 | #800080 |
| 蓝色 | #0000FF | 深青色 | #008080 |
| 黑色 | #000000 | 银色 | #C0C0C0 |
- 屏幕取色应用软件
颜色成千上万，有时因为色差的问题，对照颜色杰询表也很难以分辨，这时我们应该运用一些取色软件，方便取色。
例如：屏幕取色V1.0
第二节：制作报销表
案例：制作报销表
colspan—— 横向合并单元格
rowspan—— 纵向合并单元格
 —— 空格符，使用时注意前后需有空格
padding—— 内边距，如单元格到文字的距离
text-align—— 水平对齐
vertical-align—— 垂直对齐
width/height—— 设置宽/高。width/height 对行内元素无效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格与表单</title>
<style>
.baoxiao{ /*table的样式*/
border:1px solid #666;
border-collapse: collapse; /*塌陷，去掉单元格之间的间隙*/
width: 800px; /*table的宽度*/
}
.baoxiao th,.baoxiao td{ /*表头和表身的样式*/
border:1px solid #666; /*单元格样式，两个后代选择器用逗号隔开*/
text-align: center; /*文字居中*/
padding: 5px 10px; /*内边距上下5像素，左右10像素*/
}
</style>
</head>
<body>
<h1>出差报销表格</h1>
<table class="baoxiao">
<!-- 表头 -->
<thead>
<tr>
<th colspan="2">姓名</th> <!-- 姓名占用了2列 -->
<th></th>
<th>职务</th>
<th colspan="2"></th> <!-- 职务填写处占用了2列 -->
<th colspan="2">出差事由</th> <!-- 出差事由占用2列 -->
<th colspan="4"></th> <!-- 事由所填写处占用4列 -->
</tr>
</thead>
<!-- 表身 -->
<tbody>
<tr> <!-- 表身第一行 -->
<td>起日</td>
<td>止日</td>
<td>起讫地点</td>
<td>项目</td>
<td>张数</td>
<td colspan="3">金额</td>
<td>项目</td>
<td>天数</td>
<td colspan="2">金额</td>
</tr>
<tr> <!-- 表身第二行 -->
<td></td>
<td></td>
<td></td>
<td>火车票</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td>途中补助</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!-- 表身第三行 -->
<td></td>
<td></td>
<td></td>
<td>汽车票</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td>住行补助</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!-- 表身第四行 -->
<td></td>
<td></td>
<td></td>
<td>市内交通票</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td>夜间乘车</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!-- 表身第五行 -->
<td></td>
<td></td>
<td></td>
<td>住宿费</td>
<td></td>
<td colspan="2" style="width: 60px;"></td>
<td style="width: 30px;"></td>
<td>其他</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!-- 表身第六行 -->
<td></td>
<td></td>
<td></td>
<td>邮电费</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!-- 表身第七行 -->
<td></td>
<td></td>
<td></td>
<td colspan="2">小计</td>
<td colspan="2"></td>
<td></td>
<td colspan="2">小计</td>
<td></td>
<td></td>
</tr>
<tr> <!-- 表身最后行 -->
<td colspan="3">合 计</td>
<td colspan="9">(大写) 仟 佰 拾 元 角 分￥:</td>
</tr>
</tbody>
</table>
</body>
</html>
浏览器结果：
第三节：表单的使用
表格与表单作用示意图
- 表格与表单的关系
【表格】用于展示数据
【表单】用于录入数据，收集用户的信息，将来提交到服务器
从流程上来说，数据是用户通过前端表单的信息填写(或者电脑爬虫爬取数据)录入的。再通过后端的处理逻辑存储到数据库中。当需要展示数据时，后端再经过自身的逻辑从数据库中调取相关数据，传到前端，由表格展示出来。
表单 form
在网页上，除了文字、图片，常常还会遇到需要填写信息的表单。特别在一些官方注册页面，或其他需要用户填写或选择的页面都用了表单。
例：QQ注册页面
表单属性：
action ——表单提交堤交的位置
输入框 input
输入框是表单一个使用最多，也最重要的其中一个表单元素
输入框的类型 type
text—— 文本框类型
password—— 密码框类型
submit—— 提交类型,起提交信息的作用
radio—— 单选框类型
checkbox—— 多选框类型
button—— 按钮类型 （不常用，己被<button>标签所取代）
reset—— 重置类型，让表单重置成初始化（不常用）
image—— 图片类型 （几乎没有用，不具体介绍）
date—— 日期控件类形，这个是HTML5新增的。日期可选可输入
number—— 数字控件类型，可上下点击选择数数
ps:如果想要多个radio或checkbox组成一个选择集合，那么必须给每个radio和checkbox都设置相同的name属性
例：
<!DOCTYPE html>
<html>
<head>
<title>表单类型</title>
</head>
<body>
<form action="http://www.baidu.com">
文本类型：
<input type="text"></input>
<br/><br/>
密码类型：
<input type="password"></input><br/><br/>
提交类型：
<input type="submit"></input><br/><br/>
单选框型：
<input type="radio" name="myradio">我们的name是相同的</input>
<input type="radio" name="myradio">是的，我们二选一</input><br/><br/>
多选框型：
<input type="checkbox" name="mycheckbox">多选1</input>
<input type="checkbox" name="mycheckbox">多选2</input>
<input type="checkbox" name="mycheckbox">多选3</input>
<input type="checkbox" name="mycheckbox">多选4</input><br/><br/>
按钮类型：
<input type="button" value="我是按钮"></input><br/><br/>
重置类型：
<input type="reset"></input><br/><br/>
数字控件:
<input type="number"></input><br/><br/>
邮箱控件:
<input type="email"></input><br/><br/>
日期控件:
<input type="date"></input>
</form>
</body>
</html>
浏览器结果
输入框的几个属性
name—— 每个表单都有自己的name属性，跟每个人都有自己的名字一样。
type—— 输入框的类型(如上介绍的几个类型)
value—— input 元素设定值
placeholder—— 内容提示信息
disabled—— 禁止输入
readonly—— 只读
hidden—— 隐藏输入框
例：
<html>
<head>
<title>表单属性</title>
</head>
<body>
<form action="http://www.baidu.com">
value属性 ：
<input type="text" name="mytext" value="33333"></input><br/><br/>
提示信息placeholder：
<input type="password" name="mypassword" placeholder="我是内容提示信息"></input><br/><br/>
隐藏属性 hidden：
<input type="password" name="mypassword2" hidden></input><br/><br/>
禁止输入 disabled：
<input type="text" name="mytext2" value="我不能输入，傻X" disabled></input><br/><br/>
只读属性 readonly：
<input type="text" name="mytext3" value="我也不能输入，傻X" readonly></input><br/><br/>
</form>
</body>
</html>
浏览器结果：
下拉选项 select
除了可自行输入信息的输入框，还有其他不可输入，但可以选择的选项元素。如性别是男还是女。
【附属标签】
option—— 下拉选项。在用户未选择的情况下，select会默认选择第一个option的内容作为信息数据
selected—— 设置默认选项，只在option内用
checked—— 设置默认选项
例：
<!DOCTYPE html>
<html>
<head>
<title>表单属性</title>
</head>
<body>
<form>
下拉选项select：
<select name="myselect">
<option>我是option1号</option> <!-- 默认显示第一个option值 -->
<option>我是option2号</option>
<option selected>我是selected默认选项</option>
</select><br/><br/>
性别：
<input type="radio" name="mygender">男</input>
<input type="radio" name="mygender">女</input>
<input type="radio" name="mygender" checked>不详</input>
</form>
</body>
</html>
浏览器结果：
多行文本框 textarea
当需要输入多行，或一段信息内容时，text是不能满足需要的。例如评论、留言、建议等，此时可以使用textarea
【属性】
cols—— 设置每行字符数量
rows—— 设定字符有多少行
例：
<!DOCTYPE html>
<html>
<head>
<title>表单属性</title>
</head>
<body>
<form>
多行文本框 textarea:
<textarea placeholder="我是多行文本框，我的cols可以设置每行字符数，rows可以设定字符有多少行" cols="26" rows="10"></textarea>
</form>
</body>
</html>
浏览器结果：
表单标题 label
label标签多数用于用户体验，如在手机上要点击用户名输入框输入相关信息，但是手机屏幕较小，手指相对较大，不容易点中或容易点错。此时就可以使用label标签，在范围内都能获取焦点
【属性】
for—— 用于储存用户名，捕获id属性，关联表单
例：
<!DOCTYPE html>
<html>
<head>
<title>表单标题 label</title>
</head>
<body>
<form>
不用label和for：
<input type="text" name="mytext1" id="username"></input><br/><br/>
<label for="user">使用label和for：</label>
<input type="text" name="mytext2" id="user"></input><br/><br/>
</form>
</body>
</html>
浏览器结果：
按扭 button
button标签会在网页上形成一个按扭，用于提交所有表单内容到指定的位置，具体传到哪由form标签的action属性决定。传入的内容与所有表单中的name属性相关，即没有name属性的内容，将不会传
例：
<!DOCTYPE html>
<html>
<head>
<title>按扭 button</title>
</head>
<body>
<form action="http://www.baidu.com"> <!-- 指定指交的百度地址 -->
用户：
<input type="text" name="myname"></input><br/><br/>
密码：
<input type="password" name="mypwd"></input><br/><br/>
words：
<input type="text"></input><br/><br/> <!-- 没有name -->
<button>我是button，可以点击提交</button>
</form>
</body>
</html>
浏览器结果：
