表单和表格

Posted 2021-01-26 tangdiying

表格标签：<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>