一.表格特殊的显示方式
1.基本语法
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
tr---table row
td---table data
2.属性
①table
|border="1"
width="200"
height="200"
bgcolor="pink"
bordercolor="purple" 边框颜色
cellpadding="1" 内容到边框的距离
cellspacing="0" 边框到边框之间的距离
align="center" 设置表格本身的水平对齐方式
②tr
align="right" 控制内部内容水平对齐方式
valign="middle" top/middle/bottom 设置内部内容的垂直对齐方式
bgcolor="aquamarine"
③td
width="100"
height="100"
align="right"
valign="bottom"
bgcolor="coral"
列合并/行合并
3.table的原理
早期，我们使用table做页面布局
后来由于表格布局，页面渲染效率极低，不再使用表格布局
现在只有学习的时候，才用表格布局
表格的特点
①表格每一行的总列数相同
②不同行的同一列，宽度必须一致
③同一行的每一列，高度必须一致
④表格尺寸，如果设置的大，内容少，以设置的为准
如果设置的小，内容多，以内容为准
表格的渲染方式
是把所有的表格数据都下载完毕，放入内存计算
然后一次性把表格渲染到页面上
多了存取内存的步骤，所以效率极低
4.不规则的表格
列合并 colspan="n"
当前列，向右合并n个单元格(n包含自己)
把被合并的单元格删除
行合并 rowspan="n"
当前列，向下合并n个单元格(n包含自己)
把被合并的单元格删除
5.可选标记
①表头
使用<th></th>替代td，所有td的属性，th都能用
th默认文本加粗并居中
②表标题
必须在<table>起始标签后面编写
<caption>表标题</caption>
③表格的行分组
把表格的内容，按照行进行分组
如果编写代码的时候，没有设置行分组
浏览器在解析运行的时候，会把所有的行都放入tbody中
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
6.表格的嵌套
被嵌套的内容，一定要写在td/th中
二、列表
1.列表的组成
有条理的显示数据，现在常用无序列表做布局
①列表类型
<ol></ol> 有序列表 order list
<ul></ul> 无序列表 unorder list
②列表项
<li></li> list item
2.列表属性
①有序列表的属性
type="I" 设置列表标识项的类型 默认1，a/A， i/I
start="999" 设置计数开始
②无序列表的属性
type="disc" 实心小圆点
circle 空心小圆点
square 实心小方块
none 去除列表标识项
3.列表的嵌套问题
所有被嵌套的内容，必须放在li中
4.定义列表（h5新标签）
对一段话，做出解释说明
<dl>
<dt>要解释说明的语句</dt>
<dd>解释说明</dd>
</dl>
三、结构标记
结构标记，作用与div完全一致，但是使用了有语义的关键字
作用：增强语义，显示代码结构
<header></header>定义网页的头部，或者某个区域的顶端
<nav></nav>定义网页的导航部分
<footer></footer>定义网页的底部，或者某个区域的底部
<aside></aside>定义网页的侧边栏
<section></section>定义网页的主体内容
<article></article>定义于文本相关的内容，比如，回复，评论.....
四、表单(重点***********)
1.表单的作用
①提供了用户输入的可视化控件
②可以自动的收集整理用户填入的数据(必须写name属性)
③发送请求
总结：
什么时候用name属性，什么时候用id属性？？（只限于第二阶段知识点）
form表单要提交数据，必须写name属性
ajax提交数据，不使用form表单，就没有自动收集数据的能力了
所以ajax中的控件不需要name属性，使用id
例外：单选和多选按钮，同时使用id和name（name做分组用的）
2.表单 <form></form> 页面上不可见
①action=""
要提交的url接口，如果不填，会默认提交给本页面
②method="get"
设置这个请求的提交方法，默认值为get
get/post/put/delete
restful API get 查询
post 新增
put 修改
delete 删除
③enctype="application/x-www-form-urlencoded"
指定表单数据的提交格式，允许将什么样格式的数据提交给服务器
默认值 application/x-www-form-urlencoded
允许提交任意字符给服务器
text/plain 允许提交普通字符给服务器(不包含= & 等特殊符号)
multipart/form-data 允许提交文件和任意字符给服务器
3.表单控件，在form中与用户进行交互的可视化元素
分类
1.input元素 基础的9种，新input元素10种
2.textarea 多行文本域
3.下拉选择框 select>option
4.其它元素
4.input元素详解
①所有input元素都有的属性
<input type="">
type="" 指定当前input元素的类型(文本框，密码框，单选，多选，按钮)
name="" 给当前元素命名，有name属性的元素才能在form中被提交
后期使用ajax就不用写name属性啦
value="" input控件的值
disabled 无值属性，禁用，只能看不能改，不能提交
②文本框和密码框
type="text" 文本框
type="password" 密码框
专有属性
maxlength="4" 用户最大输入长度
readonly 无值属性，只读，不能修改，但是可以提交
placeholder="" 提示占位符
③按钮相关
type="submit" 提交按钮
type="reset" 重置按钮，恢复到表单的初始状态
type="button" 调用js
value 设置按钮上文本，不会被提交
<button></button> 提交
④单选按钮和多选按钮
type="radio" 单选
type="checkbox" 多选
单选和多选，需要使用name属性来分组，在同一组中进行单选和多选的功能
必须用value属性设置值，不然都是on
checked 无值属性
⑤隐藏域
数据要提交，但是数据不给用户看
type="hidden"
⑥文件选择框
form表单上传文件，前提设置method="post" enctype="multipart/form-data"
<input type="file" name="pic">
5.多行文本域（多行的文本框）
<textarea name="txt" rows="3" cols="5"></textarea>
rows="3" cols="5" 控制行数和列数，但是不准确
6.下拉选择框
<select name="">
<option></option>
</select>
option没有value,select的value是选中的option的内容区域
option有value, select的value是选中的option的value
属性 select size="n" n=1,下拉选择框
n>1,滚动选择框
multiple 按住ctrl进行多选
option value
selected
7.其它元素
label
<label></label>
可以替代form中span，盛放文本
关联文本与表单控件
<label for="绑定的控件id">文本</label>
②为控件分组
<fieldset> --------分组，一个大边框
<legend>分组标题</legend>
</fieldset>
③浮动框架
在一个html中导入其它的html。实现代码的重用
<iframe></iframe>
src="day03_ex.html"
width="100%"
height="400"
frameborder="0" 去除框架边框
scrolling="no" 去除滚动条
8.新input元素10个
①邮箱验证
<input type="email" name="mail">
规则，必须有@，@前后必须有内容
②搜索类型
<input type="search" name="search">
添加了快速删除的小叉叉
③url类型验证
<input type="url" name="url">
验证http:开头
④电话号码类型
<input type="tel" name="tel">
在移动设备上，获取焦点，弹出虚拟键盘
⑤数字类型
<input type="number" name="num" max="20" min="10" step="3">
max="20" 最大值
min="10" 最小值
step="3" 步长
⑥范围类型
<input type="range" name="range" max="20" min="10" step="3">
⑦颜色类型
<input type="color" name="color">
⑧日期类型
<input type="date" name="date">
⑨月份类型
<input type="month" name="month">
⑩星期类型
<input type="week" name="week">
练习：
1、完成课程表
2、完成此图
3、完成form表单练习
<body>
<form action="" method="post">
<fieldset id="">
<legend>用户基本信息</legend>
<tr>
<label for="uname">用户名称：</label>
<input id="uname" type="text" name="uname"
placeholder="请输入您的用户名称" maxlength="8"/
style="margin-left:16px"><br />
</tr>
<tr>
<label for="pwd">用户名密码：</label>
<input
id="pwd"
type="password"
name="upwd"
placeholder="请输入用户名密码"
value="123456"
readonly
maxlength="12"
/><br />
</tr>
<tr>
用户性别：
<input id="man" type="radio" name="sex" value="1" checked />
<label for="man">男</label>
<input id="woman" type="radio" name="sex" value="0" />
<label for="woman">女</label>
</tr>
</fieldset>
<tr>
用户爱好：
<input id="eat" type="checkbox" name="hobby" id="" value="eat" />
<label for="eat">吃</label>
<input type="checkbox" name="hobby" id="" value="drink" />喝
<input type="checkbox" name="hobby" id="" value="play" />玩
<input type="checkbox" name="hobby" id="" value="happy" />乐<br />
</tr>
<tr>
选择头像：
<input type="file" name="" id="" value="" /><br />
</tr>
<br />
<tr>
自我介绍：
<textarea rows="5" cols="20"></textarea>
</tr>
<br />
<tr>
工作城市：
<select name="">
<option value="city">天堂</option>
<option value="city">成都</option>
<option value="city">重庆</option>
<option value="city" selected>西安</option>
</select>
</tr>
<br />
<tr>
<input type="submit" />
<input type="reset" />
<input type="button" name="" id="" value="普通按钮" />
</tr>
</form>
</body>
