表单和表格

表格标签:<table></table>
表格--背景色:bgcolor
边框:border
宽度:width
高度:height
边框色:bordercolor
边框深色:bordercolordark(废弃)
边框浅色:bordercolorlight(废弃)
单元格间距:cellspacing,不用带单位
内边距:cellpadding,要带单位
对齐:align
单元行--高度:height,百分比
水平对齐:align;left、center、right
垂直对齐:valign;top、middle、bottom
单元格--宽度:width,百分比
水平对齐:align;left、center、right
垂直对齐:valign;top、middle、bottom
跨行:rowspan
跨列:colspan

表格分区:
<thead></thead>:划分出表格的头部
<tbody></tbody>:划分出表格的主体
<tfoot></tfoot>:划分出表格的底部

表格标题:<caption></caption>
为表格定义一个标题,默认在表格外的最上方水平居中显示;
caption必须位于table的正下方,紧挨着table;

表头:<th></th>
不能包含td,表头只能包含在tr中,默认表头内的文字居中显示并加粗;

表单:
用于显示、收集信息,并提交信息到服务器;
组成部分:
1、实现数据交互的可见的用户界面,比如:文本框、提交等;
2、提交后的表单处理;
使用<form></form>标记创建表单;在该标记中添加其他表单可以包含的控件;

<input />:用于收集用户信息;
类型--type:text文本类型;
password密码类型
radio单选类型
checkbox多选类型
submit提交按钮
reset重置按钮
button普通按钮
输入框(文本类型和密码类型)--name设置输入框提交后对应的信息的名称
value一般是用于设置提示信息,也可以用于填写的信息的收集
maxlength限制输入的最大字符长度
readonly设置为“只读”
required设置为“必填”
disabled设置为“禁用”

单选和多选--name设置选项组的名称,单选的name必须一样,多选的name可以不同(最好相同)
value确认和收集选项信息,提交到服务器
checked设置默认选择项

按钮--value设置按钮的文本
name设置按钮名称

<label></label>:将文本于控件联系在一起,点击文本就可以触发控件;
for=“控件的id”就可以和控件绑定;

选项框:<select></select>
name--设置选项框的名称
size--设置显示的选项数目,大于1则变为滚动列表
multiple--设置多选,按住Ctrl多选
选项:<option></option>
value--确认和收集选项的信息,提交到服务器
selected--设置默认选项

多行文本框:<textarea></textarea>
name--设置名称
cols--设置内容的列数,相当于设置了宽度
rows--设置内容的行数,相当于设置了高度
readonly--只读
required--必填
disabled--禁用

input其他类型:email--邮箱类型,输入错误的邮箱地址,提交时会报错,只会检测有没有“@”;

form表单属性:
enctype:指定表单的数据类型(数据进行编码的方式)
method:指定表单数据提交的方式;
get--将数据附加在地址中提交;最大缺点是缺乏安全性、上传的信息不完全;优点是数据的传输速度快;
post--将数据打包提交到服务器;安全性非常好、数据传输完整;传输速度相对较慢;
action:定义表单提交时发生的动作,包含服务器脚本的URL(jsp、php...)

控件分组:<fieldset></fieldset>为控件分组
<legend></legend>为分组指定标题

有序列表:<ol></ol>
列表项:<li></li>
代码:<ol>
<li></li>
</ol>
属性--type:1,数字类型;
a,小写字母类型;
A,大写字母类型;
i,小写罗马数字类型;
I,大写罗马数字类型;
start:设置序列号的起始;

无序列表:<ul></ul>
列表项:<li></li>
属性--type:disc实心圆(默认);
circle空心圆(圆圈);
square实心举行;

定义列表:<dl></dl>用于给出一类实物的定义,如:名词解释、解释说明、字典等等
<dt></dt>指定一个名词或术语
<dd></dd>对dt当中的内容进行解释说明
dt下面的dd是对该dt的解释说明,一个dt下面可以有多个dd;一个dl中可以有多个dt;

结构标记
<header></header>用于定义页面头部或者某一个区域的头部
<nav></nav>用于定义页面的导航信息
<section></section>定义某一个区域的主体
<article></article>用于定义某一篇文章、博客、论坛帖子等等
<article>
<h1></h1>
<p></p>
<img />
</article>
<footer></footer>定义页面的底部或者某一个区域的底部
<aside></aside>定义页面的额外信息,比如:侧边栏、广告栏等等

摘要与细节
<details></details>用于定义细节
<summary></summary>用于定义细节的标题

度量标记:
<meter></meter>
value设置电量的值
min设置最小取值范围
max设置最大取值范围

文本高亮显示标记:
<mark></mark>

猜你喜欢

转载自www.cnblogs.com/tangdiying/p/10098492.html