2020929-知识点
一、链接元素
1. 常用属性
| 属性 |
描述 |
举例 |
href |
指向链接页面的 URL |
href="https://www.baidu.com" |
target |
打开 URL 的页面来源 |
target=_self_blank_top_parent |
download |
自定义下载文件名 |
download="banner1.jpg" |
type |
设置链接文档的 MIME 类型 |
type="image/jpeg" |
2. href属性值
| 属性 |
描述 |
href="url" |
跳转的目标地址 |
href="mailto: 34267@qq.com" |
打开邮箱,发送邮件 |
href="tel:19999999999" |
点击后,会询问用户是否要拨打电话 |
href="0929homework.md" |
浏览器不能解析的文档, 会直接下载 |
3. taget属性值
| 属性 |
描述 |
target="__self" |
当前窗口打开链接 |
target="_blank" |
新窗口打开链接 |
target="_parent" |
父窗口打开链接 |
target="_top" |
顶层窗口打开链接 |
target="name" |
指定名称的窗口, 与<iframe>元素配合 |
target="#anchor" |
跳转到设置了锚点的元素所在位置 |
二、表格元素
1. 简介
- 表格是最重要的数据格式化展示重要工具, 使用频率非常高
- 表格的数据,存储在由行与列组成的一系列单元格
- 数据必须存储在单元格元素中
- 与列表类似, 表格也是由一系列标签来描述
2 常用标签
| 序号 |
标签 |
描述 |
备注 |
| 1 |
<table> |
定义表格, |
必选 |
| 2 |
<tbody> |
定义表格主体, 允许定义多次 |
必选 |
| 3 |
<tr> |
定义表格中的行, |
必选 |
|
| 4 |
<th> |
定义表格头部中的单元格,默认加粗居中 |
必选 |
| 5 |
<td> |
定义表格主体与底部的的单元格 |
必选 |
| 6 |
<caption> |
定义表格标题, |
可选 |
| 7 |
<thead> |
定义表格头格, 只需定义一次 |
可选 |
| 8 |
<tfoot> |
定义表格底, 只需定义一次 |
可选 |
| 9 |
<col> |
为一个/多个列设置属性,仅限 |
可选 |
| 10 |
<colgroup> |
将多个<col>元素分组管理 |
可选 |
2 常用属性
| 序号 |
属性 |
适用元素 |
描述 |
| 1 |
border |
<table> |
添加表格框 |
| 2 |
cellpadding |
<table> |
设置单元格内边距 |
| 3 |
cellspacing |
<table> |
设置单元格边框间隙 |
| 4 |
align |
不限 |
设置单元格内容水平居中 |
| 5 |
bgcolor |
不限 |
设置背景色 |
| 6 |
width |
不限 |
设置宽度 |
| 7 |
height |
不限 |
设置高度 |
表格属性仅供参考,属选学内容, 推荐使用 CSS 设置表格样式
三、20200929作业
- 链接元素的功能,至少写出三种,必须包括锚点,并分析锚点的功能与用途
- 表格中的行与列的合并涉及哪些属性, 并完成一个小案例,例如商品表, 购物车等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title >2020.9.29 homework<title> </head> <body> <!-- 链接元素功能 --> <h3>1. 链接元素的功能,至少写出三种,必须包括锚点,并分析锚点的功能与用途</h3> <br> <h3>有序列表-链接</h3> <ul class="nav"> <li><a href="www.baidu.com" target="__self">百度</a></li> <!-- 当前窗口打开链接 --> <li><a href="www.google.com" target="_blank">谷歌</a></li> <!-- 新窗口打开链接 --> <li><a href="www.php.cn" target="_parent">PHP中文网</a></li> <!-- 父窗口打开链接 --> </ul> <h3>无序列表-链接电话和发邮件</h3> <ol start="1"class="plan"> <li><a href="tel:1999999999">电话联系</a></li> <li><a href="mailto:9999@qq.com">发邮件</a></li> </ol> <h3>自定义列表-链接跳转</h3> <dl class="explain"> <dt>链接跳转</dt> <dd> <li><a href="www.baidu.com" target="iframname">百度</a></li> <!-- 指定窗口打开链接，与ifram配合使用 --> </dd> <dd> <li><a href="www.baidu.com" target="#anchorname">百度</a></li> <!-- 跳转到设置了锚点为anchorname的元素的所在位置，与ifram配合使用 --> </dd> </dl> <h3>2. 表格中的行与列的合并涉及哪些属性, 并完成一个小案例,例如商品表, 购物车等</h3> <br> <h3>表格元素</h3> <table border="1" width="600" cellspacing="0" cellpading="5" height="200" align="center"> <caption style="font-size: 1.5rem; margin-bottom: 10px;"> 课程表 </caption> <thead> <tr> <th colspan="2"></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tbody> <tr> <td rowspan="4" align="center">上午</td> <td>第一节</td> <td>数学</td> <td>语文</td> <td>语文</td> <td>语文</td> <td>数学</td> </tr> <tr> <!-- <td rowspan="4">上午</td> --> <td>第二节</td> <td>语文</td> <td>语文</td> <td>音乐</td> <td>科学</td> <td>美术</td> </tr> <tr> <!-- <td rowspan="4">上午</td> --> <td>第三节</td> <td>语文</td> <td>美术</td> <td>数学</td> <td>数学</td> <td>语文</td> </tr> <tr> <!-- <td rowspan="4">上午</td> --> <td>第四节</td> <td>科学</td> <td>数学</td> <td>语文</td> <td>体育</td> <td>道法</td> </tr> <tr> <td colspan="7" align="center">中午休息</td> </tr> <tr> <td rowspan="3" align="center">下午</td> <td>第五节</td> <td>数学</td> <td>语文</td> <td>语文</td> <td>语文</td> <td>数学</td> </tr> <tr> <!-- <td rowspan="3">下午</td> --> <td>第六节</td> <td>语文</td> <td>语文</td> <td>音乐</td> <td>科学</td> <td>美术</td> </tr> <tr> <!-- <td rowspan="3">下午</td> --> <td>第七节</td> <td colspan="5" align="center">课外活动</td> </tr> </tbody> </table> </body> </html>
