目录——今日任务
表格
表格由 <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 = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
<a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
<a href = "https://baike.baidu.com/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 = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
<a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
<a href = "https://baike.baidu.com/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 = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
<a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
<a href = "https://baike.baidu.com/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 = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
<a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
<a href = "https://baike.baidu.com/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 = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
<a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
<a href = "https://baike.baidu.com/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 = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
<a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
<a href = "https://baike.baidu.com/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 = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
<a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
<a href = "https://baike.baidu.com/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 = ""
type值 | 备注 | |
text | 单行文本输入 | value:设置显示内容 |
radio | 单选按钮 | value:设置显示内容 |
submit | 提交 | value:设置显示内容 |
password | 密码 | |
checkbox | 复选框 | value:设置显示内容 |
button | 按钮 | value:设置显示内容 |
number | 数字选择 | min:最小值 max:最大值 |
time | 时间选择器 | min:最小值 max:最大值 |
date | 日期选择器 | min:最小值 max:最大值 |
month | 月份选择器 | min:最小值 max:最大值 |
week | 周选择器 | min:最小值 max:最大值 |
datetime-local | 日期、时间选择器 |
|
邮箱地址输入 | 自动检测邮箱格式是否正确 | |
color | 颜色选择器 | value:默认颜色 |
range | 滑动控件 | min:最小值 max:最大值 |
- name = "":有效提交。每个<input>都要设置name属性才能被有效提交。
- readonly:只读字段,不能进行修改。
- disabled:禁用字段,不可用,不可点击,也不可被提交。
- size = "":设置输入框的长度。
- maxlength = "":设置能输入的最大字符。
下拉列表——<select>标签
- <option>元素:定义待选择的选项
action = ""——跳转事件,如果省略 action 属性,则 action 会被设置为当前页面。
Method = ""——提交表单时所用的 HTTP 方法
- GET
- POST
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>
今日的学习结束啦~
一整天坐在椅子上,面对电脑,真的令人头大,但是确实收获满满,如有错误,请指正,感谢~