Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 课后作业_2_链接与表格_725181_20200929
Blogger Information
Blog 4
fans 0
comment 1
visits 2719
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
课后作业_2_链接与表格_725181_20200929
山城小白
Original
753 people have browsed it

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作业

  1. 链接元素的功能,至少写出三种,必须包括锚点,并分析锚点的功能与用途
  2. 表格中的行与列的合并涉及哪些属性, 并完成一个小案例,例如商品表, 购物车等
  1.    <!DOCTYPE html>
  2.    <html lang="en">
  3.        <head>
  4.            <meta charset="UTF-8" />
  5.            <title >2020.9.29 homework<title>
  6.         </head>
  7.         <body>
  8.             <!-- 链接元素功能 -->
  9.             <h3>1. 链接元素的功能,至少写出三种,必须包括锚点,并分析锚点的功能与用途</h3>
  10.             <br>
  11.             <h3>有序列表-链接</h3>
  12.             <ul class="nav">
  13.                 <li><a href="www.baidu.com" target="__self">百度</a></li> <!-- 当前窗口打开链接 -->
  14.                 <li><a href="www.google.com" target="_blank">谷歌</a></li> <!-- 新窗口打开链接 -->
  15.                 <li><a href="www.php.cn" target="_parent">PHP中文网</a></li> <!-- 父窗口打开链接 -->
  16.              </ul>
  18.              <h3>无序列表-链接电话和发邮件</h3>
  19.              <ol start="1"class="plan">
  20.                 <li><a href="tel:1999999999">电话联系</a></li>
  21.                 <li><a href="mailto:9999@qq.com">发邮件</a></li>
  22.             </ol>
  24.             <h3>自定义列表-链接跳转</h3>
  25.             <dl class="explain">
  26.                 <dt>链接跳转</dt>
  27.                 <dd>
  28.                     <li><a href="www.baidu.com" target="iframname">百度</a></li> <!-- 指定窗口打开链接，与ifram配合使用 -->
  29.                 </dd> 
  30.                 <dd>
  31.                     <li><a href="www.baidu.com" target="#anchorname">百度</a></li> <!-- 跳转到设置了锚点为anchorname的元素的所在位置，与ifram配合使用 -->
  32.                 </dd>
  33.             </dl>
  35.             <h3>2. 表格中的行与列的合并涉及哪些属性, 并完成一个小案例,例如商品表, 购物车等</h3>
  36.             <br>
  37.             <h3>表格元素</h3>
  38.             <table border="1" width="600" cellspacing="0" cellpading="5" height="200" align="center">
  39.                 <caption style="font-size: 1.5rem; margin-bottom: 10px;">
  40.             课程表
  41.                 </caption>
  42.                 <thead>
  43.                     <tr>
  44.                         <th colspan="2"></th>
  45.                         <th>星期一</th>
  46.                         <th>星期二</th>
  47.                         <th>星期三</th>
  48.                         <th>星期四</th>
  49.                         <th>星期五</th>
  50.                     </tr>
  51.                 </thead>
  53.                 <tbody>
  54.                     <tr>
  55.                         <td rowspan="4" align="center">上午</td>
  56.                         <td>第一节</td>
  57.                         <td>数学</td>
  58.                         <td>语文</td>
  59.                         <td>语文</td>
  60.                         <td>语文</td>
  61.                         <td>数学</td>
  62.                     </tr>
  63.                     <tr>
  64.                         <!-- <td rowspan="4">上午</td> -->
  65.                         <td>第二节</td>
  66.                         <td>语文</td>
  67.                         <td>语文</td>
  68.                         <td>音乐</td>
  69.                         <td>科学</td>
  70.                         <td>美术</td>
  71.                     </tr>
  72.                     <tr>
  73.                         <!-- <td rowspan="4">上午</td> -->
  74.                         <td>第三节</td>
  75.                         <td>语文</td>
  76.                         <td>美术</td>
  77.                         <td>数学</td>
  78.                         <td>数学</td>
  79.                         <td>语文</td>
  80.                     </tr>
  81.                     <tr>
  82.                     <!-- <td rowspan="4">上午</td> -->
  83.                         <td>第四节</td>
  84.                         <td>科学</td>
  85.                         <td>数学</td>
  86.                         <td>语文</td>
  87.                         <td>体育</td>
  88.                         <td>道法</td>
  89.                     </tr>
  90.                     <tr>
  91.                         <td colspan="7" align="center">中午休息</td>                
  92.                     </tr>
  93.                     <tr>
  94.                         <td rowspan="3" align="center">下午</td>
  95.                         <td>第五节</td>
  96.                         <td>数学</td>
  97.                         <td>语文</td>
  98.                         <td>语文</td>
  99.                         <td>语文</td>
  100.                         <td>数学</td>
  101.                     </tr>
  102.                     <tr>
  103.                     <!-- <td rowspan="3">下午</td> -->
  104.                         <td>第六节</td>
  105.                         <td>语文</td>
  106.                         <td>语文</td>
  107.                         <td>音乐</td>
  108.                         <td>科学</td>
  109.                         <td>美术</td>
  110.                     </tr>
  111.                     <tr>
  112.                         <!-- <td rowspan="3">下午</td> -->
  113.                         <td>第七节</td>
  114.                         <td colspan="5" align="center">课外活动</td>  
  115.                     </tr>
  116.                 </tbody>
  117.              </table>
  119.         </body>
  121.     </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：链接的功能很多, 但却有多种实现方式
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post