设置图片在竖直方向上居中显示, 只对图片起作用; vertical-align:middle;
form 表单主要用来实现客户端将用户端输入的数据提交给后台服务器
<form action=""method="" enctype="">
Action: 对应的服务器的地址
Method: 客户端和服务器的连接方式, 主要的连接方式有 get 和 post 两种. 默认是 get 连接
Enctype: 设置 form 表单提交数据的编码规则, 默认是 application/x-www-form-urlencoded. 按照标准的 UTF8 编码格式进行数据的编码, 如果 form 表单传输的数据中含有文件类型的数据, 此时 enctype 的值, 必须为 multipart/form-data
<input type="text" name="username" value=""placeholder="">
type: 设置 input 标签的类型
text: 代表的是单行文本输入框
name: 设置未来向服务器提交的数据的 key
value: 设置未来向服务器具体提交的数据 value, 但是注意如果当前的 form 表单控件中额数据无法唯一确定, 此时 value 属性可以不添加值
placeholder: 设置当 form 表单控件没有其他数据时所对应的数据提示
<input type="radio" name="sex" value="" checked > 男
Radio: 代表单选框, 注意单选框 name 属性值必须相同, 否则单选框就会被看成是复选框, 其次因为每一个单选框对应的值都是唯一的, 因此对于单选框 value 需要人为规定值, 加上 checked 则默认选中
<input type="checkbox" name="hobby1" value="打篮球"> 打篮球
Checkbox: 代表复选框
Type 的属性值为: data: 代表日期选择框
Week: 代表星期控件
number: 数字控件
label: 将对应 id 属性的控件和其标记的内容进行绑定
用法:<label for="绑定的标签对应的 id 属性">
中间为一些内容
</label>
<input type="file" name="file_up" multiple id="与被 label 绑定的 id 属性值一样">
这样就完成了绑定, 即当点击 label 中间的内容时, 会起到被绑定内容的作用
File: 文件上传控件
<input type="hedden" name="x" value=""> 隐藏提交, 该控件的内容不会再网页中显示, 而是当用户点击的时候自动进行数据的提交, 该控件可以保护一些数据避免被用户篡改
所在城市:<select name="city" id="">
- <option value="郑州"> 郑州 </option>
- <option value="北京"> 北京 </option>
- <option value="南京"> 南京 </option>
- <option value="佳琪"> 佳琪 </option>
- </select > 此为下拉菜单
多行输入框 < textarea name="sd" cols="30" rows="10"></textarea>
cols: 多行文本输入框, 文本框能显示的列数
rows: 代表多行文本输入框最多能够显示的行数, 如果大于该行数, 多出的内容用户只能通过滚动查看
<input type="submit" value="注册">
提交按钮: 当用户点击的时候, form 表单自动将用户输入的数据直接提交给服务器, 因此该按钮通常用来完成数据的提交操作
<input type="reset" value="重置">
重置按钮: 当用户点击按钮的时候, 该按钮会自动将所有 form 表单控件恢复成最初状态
<input type="button" value="普通按钮">
普通按钮: 当用户点击按钮时, 该按钮并不会控制表单进行任何操作, 注意在网页中按钮对应的盒模型结构默认的是怪异盒模型, width/height 包含三部分 (border+padding+content)
四 table 表格
border-collapse: 设置表格边框合并
table-layout:fixed; 设置表格单元格均分表格的宽度
tr: 设置表格的行 td: 设置表格的列 th: th 和 td 一样都表示单元格, 不同的是 th 显示的内容以加粗的字体显示, 一般用来充当表格每一列的标题. 因此 th 标签通常放置在表格的第一行
<table border="1' cellspacing="0" cellpadding="10px" frame="all" rules="all" width="1200">
<tr>
<td colspan="2">1</td>
<td rowspan="2">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
border: 设置表格的边框
cellspacing: 设置单元格的距离, 如果为 0, 此时单元格之间会相交
cellpadding: 设置单元格的内边距, 但是内边距值上下左右都一样, 如果需要设置不同的内边距, 此时可以通过 padding 设置
frame: 设置外部边框哪部分可见
rules : 设置表格内部边框哪部分可见
colspan: 列合并, 设置对应的单元格和其右侧单元格进行合并
rowspan: 行合并, 设置单元格和其下边的单元格进行合并, 注意, colspan 与 rowspan 对应的是两个数值, 该数值代表一次合并几个
来源: http://www.bubuko.com/infodetail-2733832.html