Day2

表格
表格的主要租用是:展示数据。一般不会用到布局（麻烦），布局一般会用div、span、ul（无序列表）
表格标签：table、tr、td。td标签是用来存放单元格数据的；table和tr是用来搭建表格结构的，不能存放实际内容。table标签可以包含多个tr标签，tr可以包含多个td。
表格的基本语法：
<table>
<tr>
<td></td>
</tr>
</table>
表头单元格：标签是th，第一行，用来显示标题的而不是实际数据。与td并列关系。
th标签可以存放内容，相比较td标签，th的内容会被加粗并且居中显示。
表格的属性：
表格的结构标签：thead定义表格头部，必须拥有tr标签，一般位于第一行；tbody定义表格的主体，通常包含标题下方的表格数据区域。结果标签是不能存放单元格内容的，不能替代tr、th、td标签的作用，只是用来划分表格结构的，用来区分标题行和数据区域。
结构标签基本语法如下：
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
合并单元格：rowspan（跨行合并），把多个行的单元格合并→纵向合并
colspan（跨列合并），把多个列的单元格合并→横向合并
合并单元格步骤：1、明确合并目标（跨行/跨列）。
2、找到目标单元格td增加合并单元格属性。
（目标单元格为合并单元格的左上方单元格）
3、删除多余单元格。
表格总结
1、表格标签

标签	描述
table	表格
thead	结构标签，表格的头部
tbody	结构标签，表格的主体
tr	表格中的行
th	表头中的单元格，可以存放内容，可以加粗字体且居中
td	表头中的单元格，可以存放内容

2、表格属性

属性名	属性值	描述
align	left（左）、center（中）、right（右）	对齐方式
border	宽度像素值	表格边框，默认""无边框
width	像素值	宽度
height	像素值	高度
cellspacing	像素值	单元格之间的间距，默认2像素
cellpadding	像素值	内容与边框之间的距离，默认1像素

三种列表:无序列表（ul）有序列表（ol)自定义列表（dl）
列表就是用来布局的，可以整齐有序的展示数据，用列表做布局会更加自由和方便。
无序标签：有两个标签分别是ul和li，ul只允许包含li标签。li标签可以存放内容。
无序列表基本语法如下：
<ul>
<li> </li>
<li> </li>
…
</ul>
有序列表：和无序列表除了序号意外基本一致，只需要吧ul换成ol即可。有序列表会在列表项前面自动增加数字排序，并且排序依次增加。
有序列表基本语法如下：
<ol>
<li> </li>
<li> </li>
…
</ol>
自定义列表：主要用于网站首页下方的网站导航。有dl、dt、dd三个标签。
dl只允许包含dt和dd标签；dt用于存放关键词的内容，与dd是并列关系，不过后续的dd都会跟随前面的dt；dd用于存放前面dt关键词对应的列表项内容。
自定义列表的基本语法：
<dl>
<dt></dt>
<dd>
…
</dd>
<dt></dt>
<dd>
…
</dd>
</dl>
列表总结
列表标签：

标签	描述
ul	无序列表，只允许包含多个li标签
ol	有序列表，只允许包含多个li标签
li	用于存放列表项内容
dl	自定义列表，只允许包含多个dt和dd标签
dt	用于存放关键词的内容，与dd是并列关系，不过后续的dd都跟随前面的dt
dd	用于存放前面dt关键词对应的列表项内容

**表单**

可以使用表单收集用户信息，同意提交给后台处理。
表单由表单域、表单控件（表单元素）、提示信息 组成
提示信息：提示用户每一个表单控件是收集什么信息的。
表单域：整个表单区域，统一汇总要收集的数据，统一提交给后台，例如包含姓名、性 别等完整的用户信息记录；
标签是form
基本语法：
<form>表单控件等等东西</form>
表单控件（表单元素）：与用户交互，允许用户输入或者选择单个具体的信息，例如姓 名；
表单控件的作用：用户通过表单控件能够输入或者选择内容，以达到通过表单收集信息的目的。
可以分为input（输入）、select（选择）、textarea（文本域）三大类。
input标签的必须属性是type，是单标签，内容都是通过属性设置。
input 标签的基本语法：<input type=“属性值”>
input标签type的常用属性值：

控件特点	属性值	描述
输入	text	输入文字
输入	password	密码
选择	radio	单选按钮，多选一
选择	checkbox	复选框（打勾）
点击选择文件	file	文件上传使用
点击	button	按钮
点击	image	按钮
表单操作	submit	提交按钮，会把表单域中数据发送给服务器
表单操作	reset	重置，会清空表单所有数据

input的属性：

属性	描述
type	类型
name	名称，用于区分空件
value	值，用于记录或设置控件的值
checked	默认选中某个单选或复选框
maxlength	输入框最大输入长度
minlength	输入框最小输入长度

name属性：name 属性可以把表单控件区分开：
将多个单选按钮设置相同的 name 属性，能够实现用户单选；
提示：同一组单选按钮或复选框， name 属性的值应该一致。

value属性：value 属性可以指定提交按钮或重置按钮中的文字
value 属性可以记录用户在控件中输入的值或者选择结果。

label 可以和表单中的元素绑定，增加点击范围，提高用户体验。
label基本语法：
<label>…<label>
label 标签和 input 标签是并列关系。

select下拉列表：选项太多，希望节约空间，提升用户体验时可以使用下拉列表。
标签：select下拉列表；option下拉列表选项
下拉列表基本语法：
<select>
<option>选项一</option>
<option>选项二</option>
…
</select>

textarea 文本域标签:如果需要输入大量文字并且需要换行时，可以使用文本域，例如：个人简介、留言板、评论
基本语法：
<textarea cols="" rows=""></textarea>