html学习笔记3

表格

1.基本结构

1. 一个完整的表格由：表格标题、表格头部、表格主体、表格脚注四部分组成。

2. 表格涉及到的标签：

   • table：表格
   • caption：表格标题
   • thead：表格头部
   • tbody：表格主体
   • tfoot：表格注脚
   • tr：每一行
   • th、td：每一个单元格（备注：表格头部中用th，表格主体、表格脚注用：td）

3. 具体编码：

   <table border="1">
       <caption>学生信息</caption>
       <thead>
           <tr>
               <th>姓名</th>
               <th>性别</th>
               <th>年龄</th>
               <th>民族</th>
               <th>政治面貌</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>张三</td>
               <td>男</td>
               <td>18</td>
               <td>汉族</td>
               <td>团员</td>
           </tr>
           <tr>
               <td>李四</td>
               <td>女</td>
               <td>20</td>
               <td>满族</td>
               <td>群众</td>
           </tr>
           <tr>
               <td>王五</td>
               <td>男</td>
               <td>19</td>
               <td>回族</td>
               <td>党员</td>
           </tr>
           <tr>
               <td>赵六</td>
               <td>女</td>
               <td>21</td>
               <td>壮族</td>
               <td>团员</td>
           </tr>
       </tbody>
       <tfoot>
           <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td>共计:4人</td>
           </tr>
       </tfoot>
   </table>
   

2.常用属性

标签名	标签语义	常用属性	单/双标签
table	表格	width：设置表格宽度。 height：设置表格最小高度，表格最终高度可能比设置的值大。 border：设置表格边框宽度。 cellspacing：设置单元格之间的间距。	双
thead	表格头部	height：设置表格头部高度。 align：设置单元格的水平对齐方式，可选值如下：（left：左对齐 center：中间对齐 right：右对齐）。 valign：设置单元格的垂直对齐方式，可选值如下：（top：顶部对齐 middle：中间对齐 bottom：底部对齐）。	双
tbody	表格主体	常用属性与thead相同。	双
tr	行	常用属性与thead相同。	双
tfoot	表格脚注	常用属性与thead相同。	双
td	普通单元格	width：设置单元格的宽度，同列所有单元格全部都受影响。 height：设置单元格的高度，同行所有单元格全部都受影响。 align：设置单元格的水平对齐方式。 valign：设置单元格的垂直对齐方式。 rowspan：指定要跨的行数。 colspan：指定要跨的列数。	双
th	表头单元格	常用属性与td相同。	双

注意点：

1. table元素的border属性可以控制表格边框，但border值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度。
2. 给某个th或td设置了宽度之后，他们所在的那一列的宽度就确定了。
3. 给某个th或td设置了高度之后，他们所在的那一行的高度就确定了。

3.跨行跨列

1. rowspan：指定要跨的行数。
2. colspan：指定要跨的列数。

常用标签补充

标签名	标签含义	单/双标签
br	换行	单
hr	分割	单
pre	按原文显示（一般用于在页面中嵌入大段代码）	双

注意点：

1. 不要用br标签来增加文本之间的行间隔，应用css的margin属性。
2. hr标签的语义是分割，如果不想要语义，只是想画一条水平线，那么应当使用css完成。

表单

1.基本结构

标签名	标签语义	常用属性	单/双标签
form	表单	action：用于指定表单提交的地址（与后端人员沟通后确定）。 target：用于控制表单提交后，如何打开页面，常用值：（self:本窗口，blank：新窗口） method：用于控制表单的提交方式（post，get）	双
input	输入框	type：设置输入框的类型（text、password等） name：用于指定提交数据的名字	单
button	按钮		双

示例代码：

<form action="https://search.jd.com/search" target="_blank">
    <input type="text" name="keyword">
    <button>去京东搜索</button>
</form>

2.常用表单控件

1.文本输入框

<input type="text">

常用属性：

• name：数据的名称。
• value：输入框的默认输入值。
• maxlength：输入框最大可输入长度。

2.密码输入框

<input type="password">

常用属性：

• name：数据的名称。
• value：输入框的默认输入值（一般不用，无意义）。
• maxlength：输入框最大可输入长度。

3.单选框

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性：

• name：数据的名称，注意：想要单选效果，多个radio的name属性要保持一致。
• value：提交的数据值。
• checked：让该单选按钮默认选中。

4.复选框

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

常用属性：

• name：数据的名称。
• value：提交的数据值。
• checked：让该复选框默认选中。

5.隐藏域

<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。

常用属性：

• name：指定数据的名称。
• value：指定的是真正提交的数据。

6.提交按钮

<input type="submit" value="点我提交表单">
<button>点我提交表单</button>

注意：

1. button标签type属性的默认值是submit。
2. button不要指定name属性。
3. input标签编写的按钮，使用value属性指定按钮文字。

7.重置按钮

<input type="reset" value="点我重置">
<button type="reset">点我重置</button>

注意：

1. button不要指定name属性。
2. input标签编写的按钮，使用value属性指定按钮文字。

8.普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

注意点：普通按钮的type值为button，若不写type值，默认是submit会引起表单的提交。

9.文本域

<textarea name="other" cols="23" rows="3" maxlength="10">我是文本域</textarea>

常用属性如下：

1. rows：指定默认显示的行数，会影响文本域的高度。
2. cols：指定默认显示的列数，会影响文本域的宽度。
3. 不能编写type属性，其他属性与普通文本输入框一致。

10.下拉框

<select name="from">
    <option value="黑">黑龙江</option>
    <option value="辽">辽宁</option>
    <option value="吉">吉林</option>
    <option value="粤" selected>广东</option>
</select>

常用属性及注意事项：

1. name：指定数据的名称。
2. option标签设置value属性，如果没有value属性，提交的数据是option中间的文字；如果设置了value属性，提交的数据就是value的值（建议设置value属性）。
3. option标签设置了selected属性，表示默认选中。

3.禁用表单控件

给表单控件的标签设置disabled即可禁用表单控件。

input、textarea、button、select、option都可以设置disabled属性。

4.label标签

label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。

两种与label关联方式如下：

1. 让label标签的for属性的值等于表单控件的id。
2. 把表单控件套在label标签的里面。

代码示例：

<!-- 让label标签的for属性的值等于表单控件的id。 -->
<label for="haha">哈哈1</label>
<input type="text" id="haha">
<br>


<!-- 把表单控件套在label标签的里面。 -->
<label>
哈哈2
<input type="text">
</label>

5.fieldset和legend的使用（了解）

fieldset可以为表单控件分组，legend标签是分组的标题。

代码示例：

<fieldset>
    <legend>主要信息</legend>
    账户：<input type="text" name="account" value="zhangsan" maxlength="10"><br>
    <button>确认</button>
    <input type="radio" name="sex" value="female">女
    <input type="radio" name="sex" value="male">男
</fieldset>

6.表单总结

标签名	标签语义	常用属性	单/双标签
form	表单	action：表单要提交的地址。 target：跳转的新地址的打开方式；值：self、blank method：请求方式（post，get）	双
input	多种形式的表单控件	type属性：指定表单控件的类型。可选值（text、password、radio、checkbox、hidden、submit、reset、button等）。 name属性：指定数据名称 value属性：对于输入框是指定默认输入的值、对于单选框和复选框是实际提交的数据、对于按钮是显示按钮的文字。 disabled属性：设置表单控件不可用。 maxlength属性：用于输入框，设置最大可输入长度。 checked属性：用于单选按钮和复选框，默认选中。	单
textarea	文本域	name属性：指定数据名称。 rows属性：指定默认显示的行数，影响文本域的高度。 cols属性：指定默认显示的列数，会影响文本域的宽度。 disabled属性：设置表单控件不可用。	双
select	下拉框	name属性：指定数据名称。 disabled属性：设置整个下拉框不可用。	双
option	下拉框的选项	disabled属性：设置下拉选项不可用。 value属性：该选项事件提交的数据（不指定value，会把标签中的内容作为提交数据） selected属性：默认选中。	双
button	按钮	disabled属性：设置按钮不可用。 type属性：设置按钮的类型，值：submit（默认）、reset、button。	双
label	与表单控件做关联	for属性：值与要关联的表单控件的id值相同。	双
fieldset	表单控件分组		双
legend	分组名称		双