HTML+CSS-Day02

• 表格标签

table ：表示表格的开始和结束，表格的所有内容都需要写在table

这一对标签里

tr：表示表格中的一行table row，简称tr

td：写在tr标签里，表示这一行的这一个单元格，是真正写数据的地方

1. table 标签的属性：

border="2px"   给表格设置边框的宽度

bordercolor="red"  表格边框的颜色

width="400px"    表格的宽度

height="400px"  表格的高度
align="center" 表格的水平对齐方式

bgcolor="antiquewhite"  表格的背景颜色

cellpadding="" 表格的内边距（指边框与内容间的距离）

cellspacing=""  表格的外边距（指边框与边框间的距离）

1. tr标签的属性

align="right" 这一行内容的水平对齐方式 right 靠右/left靠左/center居中

valign="bottom"这一行内容的垂直对齐方式 top靠上/middle居中/bottom 靠下

bgcolor="lightblue" 这一行的背景颜色

1. td标签的属性

width="200px"  这一个单元格的宽度

height="200px"  这一个单元格的高度

bgcolor="yellow" 这一个单元格的背景颜色

align="left"  这一行单元格中内容的水平对齐方式 right 靠右/left靠左/center居中

valign="top" 这一行单元格中内容的垂直对齐方式 top靠上/middle居中/bottom 靠下

注意： 如果修改了某个单元格的高度，那么这一行的所有单元格都会随之改变高度 如果修改了某个单元格的宽度，那么这一行的所有单元格都会随之改变宽度

• 表格的复杂应用----不规则的表格

1. 表格的跨列操作 colspan

定义：从指定的单元格开始，横向向右合并n个单元格（n也包含这个单元格自己）

注意：要把合并的单元格删除掉，如果要合并n列，删除n-1个td

1. 表格的跨行操作：rowspan

定义：从指定的单元格开始，纵向向下合并n个单元格（n也包含这单元格自己）

注意：要把被合并的单元格删除掉，比如2，1合并两行，那3，1就得删除

1. 表格的标题caption

可加可不加，如果要加，一般紧挨着table开始标签，而且写1个

1. 行和列的标题th

行和列的标题使用的是th标签，效果：加粗与居中

用th替代td，所以可以使用td的所有属性

1. 表格的嵌套  表格里面有表格

我们可以在对应的单元格中添加table表格

• 结构标记

h5出了一些有结构语义的标签来替代div，增强代码的可读性

header 定义网页的头部，或者是某个区域的顶部

footer 定义网页的底部，或者是某个区域的底部

nav 定义网页的导航链接

section 定义网页的主体

aside 定义网页的侧边栏

article 定义与文字相关的内容，比如论坛，回帖

• 表单

1. 定义：提供了可视化的控件，表单会自动收集整理用户输入的内容，并提交给服务器
2. 组成部分：

前端部分：表单控件，与用户交互的，并且可以提交请求

后端部分：后台接口对提交的请求进行处理，并构建响应发出去

1. 语法:form 标签

form的属性：

action="" 定义当前表单提交时发送的动作，表示表单中的数据，将要提交给那个接口来处理，如果action什么值也不写，默认提交到当前页面

method="" 定义表单中的数据提交给服务器的方式

enctype：指定表单数据的编码方式，允许提交什么样的数据给服务器

enctype="application/x-www-form-urlencoded"  默认值，允许将任意字符提交给服务器（文件除外）

text/plain 允许提交普通字符，普通字符不包含@ = & 符号

multipart/form-data允许传文件

1. get提交：默认值，一般向服务器要数据时使用

特点：明文提交，提交的内容会在地址栏显示，提交数据大小有限

1. post提交：把数据传递给服务器的时候使用

特点：隐式提交，提交的内容不再地址栏显示，提交的数据没有大小限制

1. 表单的控件

表单控件：在form表单中，能够与用户进行交互的可视化元素

1. input ，可以在页面上提供各种各样的输入控件
2. input的属性：

type：定义当前input的类型

name：为控件定义名称，提供给服务器端使用

value：为控件定义的默认值

1. tpye="text"  文本框

placeholder：给控件添加一些提示信息

maxlength="3" :允许输入的最大长度

readonly：只读，只能看，不能改

1. 密码框： type="password"

密码框中的文字不以明文的方式展现

1. tpye="submit"提交按钮

将表单中的数据收集整理并发送给服务器

1. 重置按钮 type="reset"

将表单中的数据恢复到初始化状态

注意：按钮的value属性指的是按钮上显示的文字，并不是提交的值

1. 其他按钮type="button"没有功能，配合时间，调用js脚本
2. h5新出的标签button，作用等同于submit，可以提交数据，可以使用事件

1. 单选与多选

单选：type="radio"

注意：必须有name属性，不然没有分组，不是单选的效果 必须有value属性，不然提交的是on 可以通过ckecked设置本项单选值是默认选中的

1. 多选：type="checkbox"

1. 隐藏域 type="hidden"

作用：想把数据提交给服务器，但又不想把数据提交给用户看

1. 文件 type="file"

注意：如果谣传文件的话，form的enctype="multipart/form-data"表示允许传文件 如果设置了multiple属性，可以一次传多个文件

1. 多行文本域textarea

可以把多行文本域看作是一个大的文本，允许输入多行文本

注意：设置的文本域大小根据硬件不同，会出现不准确的现象

1. select + option 下拉选择框

如果option没有设置value的话，会把标签中的内容当做value值提交

如果option设置了value值，会提交这个value的值

size：大小，显示出来的选项个数，默认是1个，1个的时候是下拉选框，>1时会变成滚动条

multiple：表示可以选中多个选项

option 中可以添加selected表示这一项默认选中项

1. label标签

主要可以实现文本和表单控件的关联

实现关联效果： input的id值和label的for值一样