目录——今日任务
表格
关卡2
表单
关卡3
表格
表格由 <table> 标签来定义；
每个表格均有若干行，由 <tr> 标签定义；
每行被分割为若干单元格，由 <td> 标签定义
边框——border = "x"
表头——<th> 标签，自动设置为粗体居中的文本
标题——<caption>标签
跨行——colspan="x"
跨列——rowspan="x"
单元格边距——cellpadding="x"，即单元格内容与其边框之间的空白
单元格间距——cellspacing="x"，即各单元格之间的距离
背景颜色——bgcolor="red"
背景图片——background="D:\Source\素材\back.png"
*背景设置，可以添加在<table>标签中，设置整个表格的背景，也可以添加在<td>标签中，设置单个单元格的背景。
对齐方式——align="left / right / center"
围绕表格的边框——frame="box / above / below / hsides / vsides"，分别表示：上下左右 / 上 / 下 / 上下 / 左右
嵌套——表格内可定义标签，例如：列表、表格
关卡2
表格的练习（链接🔗来自百度）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小说排行榜</title></head><body><table border = "1"style="border-collapse:collapse;"><caption><b>小说排行榜</b></caption><tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr><tr align = center><td>1</td><td>鬼吹灯</td><td><img src = "\Source\素材\up.jpg"></td><td>356</td><td>3560</td><td><a href = "/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a><a href = "/search/index?tn=baiduimage&ps=1&ct=26592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a><a href = "/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a></td></tr><tr align = center><td>1</td><td>鬼吹灯</td><td><img src = "\Source\素材\down.jpg"></td><td>356</td><td>3560</td><td><a href = "/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a><a href = "/search/index?tn=baiduimage&ps=1&ct=26592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a><a href = "/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a></td></tr><tr align = center><td>1</td><td>鬼吹灯</td><td><img src = "\Source\素材\up.jpg"></td><td>356</td><td>3560</td><td><a href = "/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a><a href = "/search/index?tn=baiduimage&ps=1&ct=26592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a><a href = "/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a></td></tr><tr align = center><td>1</td><td>鬼吹灯</td><td>1</td><td>356</td><td>3560</td><td><a href = "/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a><a href = "/search/index?tn=baiduimage&ps=1&ct=26592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a><a href = "/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a></td></tr><tr align = center><td>1</td><td>鬼吹灯</td><td>1</td><td>356</td><td>3560</td><td><a href = "/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a><a href = "/search/index?tn=baiduimage&ps=1&ct=26592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a><a href = "/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a></td></tr><tr align = center><td>1</td><td>鬼吹灯</td><td>1</td><td>356</td><td>3560</td><td><a href = "/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a><a href = "/search/index?tn=baiduimage&ps=1&ct=26592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a><a href = "/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a></td></tr><tr align = center><td>1</td><td>鬼吹灯</td><td>1</td><td>356</td><td>3560</td><td><a href = "/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a><a href = "/search/index?tn=baiduimage&ps=1&ct=26592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a><a href = "/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a></td></tr></table></body></html>
表单
表单由 <form> 标签来定义；
输入——<input>标签
type = ""name = ""：有效提交。每个<input>都要设置name属性才能被有效提交。readonly：只读字段，不能进行修改。disabled：禁用字段，不可用，不可点击，也不可被提交。size = ""：设置输入框的长度。maxlength = ""：设置能输入的最大字符。
下拉列表——<select>标签
<option>元素：定义待选择的选项
action = ""——跳转事件，如果省略 action 属性，则 action 会被设置为当前页面。
Method = ""——提交表单时所用的 HTTP 方法
GETPOST
Target = ""——规定提交表单后在何处显示响应，默认值为“_self”
_blank：响应显示在新窗口或选项卡中_self：响应显示在当前窗口中_parent：响应显示在父框架中top：响应显示在窗口的整个 body 中framename：响应显示在命名的 iframe 中
autocomplete = ""——自动填写值
on：记忆曾经输入过的值off：不记忆曾经输入过的值
组合表单数据——<filedset>标签，把表单组合在一个框里，相当于分类
<legend>元素：该组合的名称(标题)
关卡3
表格和表单的组合练习
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简历</title></head><body><table border = "1"><caption><b><font size = 5>个人简历</font></b></caption><form><tr align = center><td>姓名</td><td><input type = "text"></td><td>性别</td><td><input type = "text"></td><td>出生年月</td><td><input type = "text"></td><td rowspan="4"><input type = "file"></td></tr><tr align = center><td>民族</td><td><input type = "text"></td><td>政治面貌</td><td><input type = "text"></td><td>身高</td><td><input type = "text"></td></tr><tr align = center><td>学制</td><td><input type = "text"></td><td>学历</td><td><input type = "text"></td><td>户籍</td><td><input type = "text"></td></tr><tr align = center><td>专业</td><td><input type = "text"></td><td colspan="2">毕业院校</td><td colspan="2"><input type = "text" size = 31></td></tr><tr align = center><td colspan="7">技能、特长或爱好</td></tr><tr align = center><td>外语等级</td><td colspan="2"><input type = "text" size = "31"></td><td>计算机</td><td colspan="3"><input type = "text" size = "72"></td></tr><tr align = center><td colspan="7">个人履历</td></tr><tr align = center><td>时间</td><td colspan="2">单位</td><td colspan="4">经历</td></tr><tr align = center><td><input type = "text"></td><td colspan="2"><input type = "text" size = "31"></td><td colspan="4"><input type = "text" size = "99"></td></tr><tr align = center><td><input type = "text"></td><td colspan="2"><input type = "text" size = "31"></td><td colspan="4"><input type = "text" size = "99"></td></tr><tr align = center><td><input type = "text"></td><td colspan="2"><input type = "text" size = "31"></td><td colspan="4"><input type = "text" size = "99"></td></tr><tr align = center><td colspan="7">联系方式</td></tr><tr align = center><td>通信地址</td><td colspan="2"><input type = "text" size = "31"></td><td>联系电话</td><td colspan="3"><input type = "text" size = "72"></td></tr><tr align = center><td>E-mail</td><td colspan="2"><input type = "text" size = "31"></td><td>邮编</td><td colspan="3"><input type = "text" size = "72"></td></tr><tr align = center><td colspan="7">自我评价</td></tr><tr align = center><td colspan="7"><input type = "text" size = "163"></td></tr></form></table></body></html>
今日的学习结束啦~
一整天坐在椅子上，面对电脑，真的令人头大，但是确实收获满满，如有错误，请指正，感谢~
