# 1. 表格表单列表 #
## 1.1表格 ##
展示表格式数据
1. table用于定义一个表格标签。
2. tr标签 用于定义表格中的行，必须嵌套在 table标签中。
3. td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。
## 1.2表格属性 ##
属性名 含义 常用属性值
border 设置表格边框 像素值
cellspacing 设置单元格与框之间的空白 像素值默认2px
cellpadding 设置单元格内容与格子边框的空白 像素值默认1px
width 设置表格高度 像素值
height 设置表格的高度 像素值
align 设置表格在网页中的水平对齐方式 left、center、right
## 1.3表头单元格标签th ##
文字居中加粗
## 1.4表格标题caption ##
只在表格中才有意义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" width="500" height="200" align="right" cellpadding="40px" cellspacing="0px"> <caption><b>男神榜</b></caption> <!-- 一行里三个单元格 --> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>许</td> <td>22</td> <td>男</td> </tr> </table> </body> </html>
### 1.5 合并单元格 ###
先上后下 先左后右
记得删除多余的单元格
跨行合并 rowspan
跨列合并 colspan
### 1.6 拓展表格部分 ###
划分表格结构
thead
tbody
tfoot
# 2. 列表 #
布局 非常整齐自由
## 2.1 无序列表 ##
<!-- 无序列表 --> <h2>无序列表</h2> <ul> <li>1</li> <li>2</li> <li>3</li> </ul>
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
## 2.2 有序列表 ##
<!-- 有序列表 --> <h2>有序列表</h2> <ol> <li>1</li> <li>2</li> <li>3</li </ol>
## 2.3 自定义列表 ##
多组数据 省市区 明显上下级 可以用这个列表展示
<!-- 自定义列表 --> <h2>自定义列表</h2> <dl> <dt>1</dt> <dd>2</dd> <dd>3</dd> <dt>2</dt> <dd>3</dd> <dd>4</dd> </dl>
# 3.表单 #
收集用户信息
表单控件、提示信息、表单域
## 3.1 input控件 ##
<input type="属性值" value="你好"> 输入 单标签 type设置不同属性的控件 <!-- type text 是一个文本框 --> 用户：<input type="text" value="请输入用户名" name="username"> <!-- name 表单标识 --> 昵称：<input type="text" value="请输入昵称" name="nicheng"> <!-- 密码输入框 --> 密码：<input type="password" name="pwd"> <br/> <!-- radio单选 相同名字只能选择一个 --> 性别：<input type="radio" name="sex">男 <input type="radio" name="sex"> 女 <br/> <!-- checked 默认选择 --> 性别：<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex"> 女 <br/> <!-- checkbox 复选框 --> 性别：<input type="checkbox" name="honety" checked="checked" >男 <input type="checkbox" name="honety"> 女 <input type="checkbox" name="honety"> 未知 <br/> <!-- button 普通按钮需要value值 --> <input type="button" name="" value="获取短信验证码"> <br/> <!-- submit 提交按钮 --> <input type="submit" name="" value="提交"> <br/> <!-- reset 重置按钮--> <input type="reset" name="" value="重置所填"> <br/> <!-- image 图片提交按钮 --> <input type="image" src="C:前端前端html1.jpg" value="上传图片"> <br/> <!-- file 文件域 --> <input type="file" > <br/>
## 3.2 input属性小结 ##
属性 说明 作用
type 表单类型 用来指定不同的控件类型
value 表单值 表单里面默认显示的文本
name 表单名字 页面中的表单很多 name给后端标识
checked 默认选中 一开始默认选中
## 3.2 label 标签 ##
绑定表单元素
1
<h4>label直接包含</h4><br/> <label> 用户名: <input type="text" name=""> </label>
2
<h4>for id 来控制</h4><br/> <label for="cc">昵称:</label> <input id="cc" type="text" name="">
## 3.3 textarea控件 文本域 ##
文本域跟文本框的区别
input type ="text" 文本框 只能显示一行文本 单标签，通过value默认显示 用于密码昵称
textarea 文本域 显示多行文本 双标签，默认值写到标签中 留言板
## 3.4 select下拉列表 ##
<select> <option>--请选择--</option> <option selected="selected">选项1</option> <option>选项2</option> <option>选项3</option> </select> 默认选中 selected="selected"
# 4. 表单域 #
手机用户信息传递给服务器
from 中所有内容都会传递给服务器
属性 属性值 作用
action url 用于接收处理表单数据的服务器程序的url
method get/post 设置表单数据的提交方式
name 名称 区分表单
## 5.表单域 ##
<form action="" method="get"> 用户名：<input type="text" name="username"> 密码 <input type="password" name="pwd"> <input type="submit" name=""> <input type="reset" name=""> </form>