Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 链接元素与表格元素的应用
Blogger Information
Blog 4
fans 0
comment 0
visits 3122
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
链接元素与表格元素的应用
朝与同歌暮同酒
Original
712 people have browsed it

链接元素

  • <a>标签定义超链接，主要用于从一个页面跳转到另一个页面
  • 最重要的属性是 href 属性，它用于指示链接的目标

链接元素的常用属性

属性 描述 举例
href 用于指向跳转页面的 url href="https://www.baidu.com"
target 用于定义打开页面的方式 target="_blank"
download 用于自定义下载文件名 download="demo1.html"
type 用于设置链接文档的类型 type="image/jpeg"

链接元素的功能

通过设置不同的herf属性，链接元素可以实现不同的功能

  1. 当href="url"时，可以通过点击链接元素打开新的页面
  2. 当href="mailto:abc@a.com"时，可以自动打开设备默认的邮件管理软件，发送邮件
  3. 当href=tel:123时，可以打开设备的拨号软件，进行链接所指的号码进行拨号

链接元素中锚点的作用

锚点，故名思意可以起到锚的作用，即定位的作用。锚点主要在页面中，进行指定位置的跳转。如在页面顶部，设置跳转到页面底部的锚点。或在页面底部，设置跳转到页面顶部的锚点。帮助用户减少，翻页面的时间。具体的使用如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <a href="#foot">跳转到底部 </a>
  10.     <div style="margin-top: 1000px" id="foot">我在最下面</div>
  11.   </body>
  12. </html>

需要注意的是，在链接元素中，href 的属性值是，需要跳转到元素的 #+id

表格元素

<table>标签定义 HTML 表格，HTML 表格除了 table 元素以外，还需要用到 tr,th,td 等元素。

名称 作用
tbody 用于定义表格主体，如果没有添加，浏览器会自动补齐
thead 用于定义表头
tfoot 用于定义表格尾部
th 用于定义表头
tr 用于定义表格的行
td 用于定义表格单元

常用属性

属性 描述
border 添加表格框
cellpadding 设置单元格内边距
cellspacing 设置单元格边框间隙
align 设置单元格内容水平居中
width 设置宽度
height 设置高度
colspan 设置跨列合并
rowspan 设置跨行合并 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <table
  10.       border="1"
  11.       width="600"
  12.       cellspacing="0"
  13.       cellpadding="5"
  14.       height="200"
  15.       align="center"
  16.     >
  17.       <caption>
  18.         公司排班表
  19.       </caption>
  20.       <thead>
  21.         <tr>
  22.           <th></th>
  23.           <th>周一</th>
  24.           <th>周二</th>
  25.           <th>周三</th>
  26.           <th>周四</th>
  27.           <th>周五</th>
  28.           <th>周六</th>
  29.           <th>周日</th>
  30.         </tr>
  31.       </thead>
  32.       <tbody>
  33.         <tr>
  34.           <td rowspan="4">上午</td>
  35.           <td>张二</td>
  36.           <td>李二</td>
  37.           <td>王二</td>
  38.           <td>孙二</td>
  39.           <td>赵二</td>
  40.           <td rowspan="9">值班</td>
  41.           <td rowspan="9">值班</td>
  42.         </tr>
  43.         <tr>
  44.           <td>张一</td>
  45.           <td>李一</td>
  46.           <td>王一</td>
  47.           <td>孙一</td>
  48.           <td>赵一</td>
  49.         </tr>
  50.         <tr>
  51.           <td>张三</td>
  52.           <td>李三</td>
  53.           <td>王三</td>
  54.           <td>孙三</td>
  55.           <td>赵三</td>
  56.         </tr>
  57.         <tr>
  58.           <td>张四</td>
  59.           <td>李四</td>
  60.           <td>王四</td>
  61.           <td>孙四</td>
  62.           <td>赵四</td>
  63.         </tr>
  64.         <tr>
  65.           <td colspan="6" align="center">中午休息</td>
  66.         </tr>
  67.         <tr>
  68.           <td rowspan="4">下午</td>
  69.           <td>张一</td>
  70.           <td>李一</td>
  71.           <td>王一</td>
  72.           <td>孙一</td>
  73.           <td>赵一</td>
  74.         </tr>
  75.         <tr>
  76.           <td>张四</td>
  77.           <td>李四</td>
  78.           <td>王四</td>
  79.           <td>孙四</td>
  80.           <td>赵四</td>
  81.         </tr>
  82.         <tr>
  83.           <td>张二</td>
  84.           <td>李二</td>
  85.           <td>王二</td>
  86.           <td>孙二</td>
  87.           <td>赵二</td>
  88.         </tr>
  89.         <tr>
  90.           <td>张三</td>
  91.           <td>李三</td>
  92.           <td>王三</td>
  93.           <td>孙三</td>
  94.           <td>赵三</td>
  95.         </tr>
  96.       </tbody>
  97.     </table>
  98.   </body>
  99. </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