一、表格
- 单元格合并：
- 合并顺序：从上往下，从左至右
- 跨行合并：rowspan="合并的单元格的格子"
- 跨列合并：colspan="合并的列的个数"
- 表格结构划分：
- <table></table>：包含<caption>，<tr>，<td>，<th>,可在table内可以添加相关属性，summary属性不会对普通浏览器中产生任何视觉变化
- <tr></tr>：中间包含<td>、<th>
- <thead></thead>：用于定义表格得头部，内部必须有tr标签
th表示一行数据/thead表示多行数据 - <td></td>：td标签：普通表格
scope 属性标识某个单元是否是列、行、列组或行组的表头,值为row，col，colgroup或rowgroup - <tbody></tbody>：用于定义表格的主体，数据本体，与 <thead>，<tfoot>结合起来使用
- <tfoot></tfoot>： 脚注之类，用得很少
<table border="1" width="500px"> <!--border：表格边框，width：表格宽度-->
<caption >表格标题</caption> <!--标题标签，居中显示，仅有一个标题-->
<tr>
<th>2014年</th> <!--th标签：表格头，内容居中，加粗显示-->
<th>2015年</th>
<th>2016年</th>
</tr>
<tr>
<td>8000</td> <!--td标签：普通表格，内容左对齐-->
<td>10000</td>
<td>12000</td>
</tr>
</table>
3.区域划分
1）行分组
thead：表格头，定义表格头部区域
tbody：表格主体
tfoot：定义脚部区域
2）列分组
col：表格列，定义列区域（可以独立使用，也可以与colgroup合并使用）
colgroup：数据列组（必须与col合并使用）
<table>
<colgroup>
<col span="3"> <!--每三列一组，1-3列-->
<col span="3"> <!--每三列一组，4-6列-->
<col span="3"> <!--每三列一组，7-9列-->
</colgroup>
</table>
二、列表
1.普通列表（ul,li/ol,li）
2.自定义列表：
虽然dt和dd是并列结构，但dd是围绕dt的，属于它上面的dt类。一个dt可能对应多个dd
<dl>
<dt>名词1</dt>
<dd>名词1解释a</dd>
<dt>名词2</dt>
<dd>名词2解释a</dd>
<dd>名词2解释b</dd>
</dl>
同质数据适合使用列表结构；多行多列数据，且数据类型属于不同类型，每行数据又表达一定意思，适合使用表格
三、表单
1.包含三部分
包含框、输入框、提交按钮
1）forum：和table一样，包含了所有的表单域元素，负责数据处理，包括对各个表单域的数据采集、打包和发送到指定服务端目标文件中
2）input：输入框，承载着用户输入的接口作用
<form>
<input type="text" name="textfield" id="textfield">
<input type="submit" name="button" id="button" value="提交">
</form>
2.form元素的核心属性
1）enctype：Encase Type(包装类型)，将设置表单中用户输入的数据发送到服务器时，浏览器使用的编码类型
enctype的属性：
1. application/x-www-form-urlencoded：将表单中的数据编码为名/值对的形式通过URL发送给服务器
<form enctype="application/x-www-form-urlencoded">
用户名：<input type="text" name="username" id="username" value="张三">
密码：<input type="password" name="button" id="password" value="1111">
</form>
form会自动打包为"user="张三"，"password=1111"，然后通过查询字符串的方式发送给服务器
- multipart/form-data：将表单中的数据编码为一条消息，每个表单域对应消息中的一个部分，然后通过HTTP方式发送给服务器。一般用来传递二进制信息，如文件、图像等
<form enctype="multipart/form-data">
<!--提交数据后，form会自动把所有表单域独立打包为数据包-->
login={
user={"张三"}
password={"1111"}
}
<!--服务器接收到数据后，会自动根据这些标签来接受和查看对应数据包中的数据-->
- text/plain：将表单中的数据以纯文本的形式进行编码，其中不含任何控件(即表单域名称)或格式字符。用的很少
<form enctype="text/plain">
2）action：用来设置表单提交数据的目标文件，规定当提交表单时，向何处发送表单数据，值可以是一个路径，也可以是URL地址
<form action="action.asp">
3）method：GET（不安全），POST（数据不可见安全）
二者区别：（一些面试的时候可能也会问）
1. GET：从服务器获取数据，POST向服务器上传数据
2. GET方法将表单数据以"名/值"对的形式添加到action所设置的URL后面，使用"?"连接，各个变量之间用&连接
POST是将表单中的数据放在form中，按照变量和值的方式传到action所指向的url
3.URL长度限制，所以GET方式传输的数据量相对于POST要小
4.GET方法中，数据在URL中传输，数据的值必须为ASCII字符，POST方法没有字符集的限制
https://www.biying.com/index.asp?username=LL&sex=male
3.input元素
type=text时，属性：
size：文本框宽度，一般通过CSS控制
value：包含的默认字符串
maxlength：文本框能接收的最大字符长度
type的其余属性：password、hidden、checkbox（复选框）、radio、file（定义文件域）、submit、reset、image、button
checkbox:
value属性：设置复选框的传递值，
checked属性：设置默认状态下，复选框是否是勾选状态
添加了该属性，或checked="checked"或checked=""就是勾选状态(True)
boxname<input type="checkbox" checked>
radio:
多个单选按钮可以组成一个单选按钮组，且单选按钮组中所有input元素的name属性值必须相等。对于单选按钮组来说，只能够由一个按钮可以被选中，被选中的单选按钮的值将被提交
<input type="radio" name="gr" value="" id="gr_0">单选1
<input type="radio" name="gr" value="" id="gr_1">单选2
file：（enctype一定要是multipart/form-data，且是post方法）
定义文件域，文件域实际上是多个表单域捆绑的混合体，它包含文本框和浏览按钮。文件域能够方便本地各种类型的文件以二进制数据流的形式传递给服务器
<input type="file" multiple="multiple" id="test">
<!--可以点击生成的按钮查找文件添加-->
image：定义图像按钮，包含src和alt属性，其中src为路径，alt属性定义图像替换文本
<input type="image" src="/i/eg_submit.jpg" alt="Submit" />
4.textarea和select元素
textarea包含cols(设置列数高度,不建议使用),rows(行数宽度,不建议使用)，wrap属性
<textarea wrap="soft">
| 值 | 描述 |
|---|---|
| soft | 当在表单中提交时，textarea 中的文本不换行。默认值。 |
| hard | 当在表单中提交时，textarea 中的文本换行（包含换行符）。当使用 "hard" 时，必须规定 cols 属性。 |
select必须与option联合使用。设置的size如果长度小于option个数，则会有滚动条，multiple="multiple"属性可以多选
<select name="select" size="2" multiple="multiple">
<option value ="1">选项1</option>
<option value ="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
</select>
4.表单分组
fieldset
)（表单域组），它相当于一个容器，把这些表单收容在一起，它本身不参与数据交互
legend，设置表单组标题
5.定义快捷键、访问键和禁止访问
accesskey、tabindex和disabled
***为了考虑各种人群，这些键位设置十分必要
6.button定义纯按钮
<button><img src="" alt="登录"></button>
网友评论