表头中的单元格用th表示,会默认加粗居中!层次关系:table>tr>td/th
[表格的各种属性]---作用于table标签
1. border: 给表格的每个td和整个table添加边框。 如果border>1,则只有最外层边框会加粗,td上的边框不会变化。
2. width/height: 表格的宽度、高度。
3. cellspacing: 设置单元格与单元格之间的间距。如果cellspacing="0",则单元格之间的间距为0,但是相邻的边框不会合并。而是显示两条边框的宽度。
4. cellpadding: 设置单元格内边距,单元格中的文字与边框之间的距离。
5. align: 设置表格在父容器中居左、居中、居右。 align属性相当于使表格浮动,会影响表格后面内容的布局。
6. bgcolor: 表格背景色background: 表格背景图。 背景色和背景图同时存在时,背景图生效。 bordercolor: 边框颜色。
设置表格边框合并
可以CSS设置:设置边框合并后,cellspacing属性将会失效,因为两条边框已经合并到一起,不能再产生间距。
【行列的各种属性】---作用于tr和td
1. width/height: 宽度、高度
2. bgcolor: 背景色 如果行列属性与table属性冲突,以行列属性为准。
3. align:设置单元格中的文字,水平对齐方式;
4. valign: 设置单元格中的文字,垂直对齐方式。
[表格的跨行与跨列]
1.表格跨列,colspan如果一个单元格跨n列,则其右方n-1个单元格删掉
2.表格跨行, rowspan如果一个单元格跨n行,则其下方n-1个单元格删掉
表格的结构化
完整的表格应包含以下几部分
caption,表格的标题,用于表格最上方居中thead,表头部分,无论thead在什么地方显示时永远在表格最上方tbody,表格表格的的主体部分,在thead之下tfoot,表格的尾部,无论tfoot在什么地方显示时永远在表格最下方
表格的直列化
表格有几列,就可以在表格最上方写几个标签,每个都对应着表格的每一列,这就是表格 的直列化如果要同时修改多列,可以将多个标签用进行包裹,统 一修改
注意:直列化通常用于给每一列起统一的name或class名字,一般不直接修改样式。
表单标签
表单有两个重要属性
①action表示表单提交的后台服务器地址
②method表单提交数据的方法,可选值有get和post两种
【get和post的区别】
①get使用URL地址栏进行传递数据,所有数据在地址栏可见,不安全post传递数据在地址栏不可见,比较安全
②get传递的数据量有限,而且只能传输纯文字数据post可以传输大量数据,而且可以传输图片视频文字等
③get传递数据的速度比post快
【get传递数据的URL格式】
http://原来的地址.html?name1=valuel&name2=value2... 比如http://127.0.0.1:8020/H51801.html?username=123&password=123
所以,input使用时name属性必不可少,缺少name将导致该输入框的数据不向后台传递
input标签
input的常用属性
①type 表示当前输入框是什么类型
②name 给输入框取名字,向后台传输数据时必不可少
③value 给input赋默认值
④placeholder 输入框的提示内容,当输入框存在value时,提示内容消失
⑤disabled=disabled 禁用当前输入框 ,可以显示, 不能编辑,被disabled="disabled禁用的输入框,数据将不再向后传递
⑥hidden=hidden 隐藏输入框,隐藏的输入框中的数据,依然可以向后台传递
⑦readonly="readonly" 只读 与disabled=disabled 的区别,readonly可以向后台传递
input的type类型
①text 文本输入框
②password 密码输入框 输入的内容为小数点
③radio 单选框单选按钮的value不能省略 ,这个value需要向后台传递,radio凭借name是否相同区分是否同一组,同一组中name必须相同,而且只能选一个。checked="checked"设置单选按钮的默认选中项
④checkbox 多选框 其他与radio相同
⑤file 文件上传框,multiple=multiple设置可以多选文件上传,accept属性设置可以上传的类型,*表示所有文件,image/*表示所有图片
⑥submit 表单提交按钮
⑦reset 表单重置按钮 将表单恢复到最初状态
⑧image 图形提交按钮 src属性用于导入图片,功能与submit相同
⑨button 显示为按钮形状,但是没有任何功能
⑩hidden 隐藏输入框,隐藏的输入框中的数据,依然可以向后台传递
select下拉选择组件
①下拉框用表示列表中的每一项用表示
②下拉框的name要统一写在上
③如果设置了value属性,则向后台传输的是value中的值
如果没有设置value属性,则向后台传输的是标签中的文字
④在上使用selected="selected"属性,可以设置默认选中项
⑤在select上使用multiple=multiple属性,可以设置为多选
⑥使用可以对所有的option进行分组,使用label属性可以作为分组名
textarea文字区块
①使用cols= rows=属性,可以设置文本域的大小 注意cols表示多少列是每列多少的字符,一个汉字两个字符 一般使用css调整宽高而不是使用这两个属性
②使用style="resize: none;",可以设置文本域大小不允许拖放
③使用readonly属性,设置文本域为只读
④使用style=overflow: 样式可以设置,可以设置超出区域的文字如何显示
auto 默认效果,文字少不显示滚动条文字多时显示垂直滚动条hidden 无论文字多少都不显示滚动条,文字超出时将隐藏不显示scroll 无论文字多少都显示垂直水平两根滚动条
可以使用style="overflow-y (-x): scroll;单独设置 两个方向的固定滚动条
fieldset 表单的边框
表单的标题
tabindex 设置跳转顺序