简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 链接元素的功能与表格的应用
Blogger Information
Blog 18
fans 1
comment 0
visits 17330
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
658 people have browsed it

链接元素的功能与表格的应用

链接元素的功能

在HTML中，超链接元素的标记是<a>标签；

  1. 通过使用href属性的属性值来实现a标签的功能;
编号 属性 描述
1 href="url" 跳转的目标地址
2 href="tel:136****5566" 点击后询问用户是否要拨打电话
3 href="mailto:123456@qq.com" 打开邮箱，发送邮件
4 href="ce.md" 浏览器不能解析的文档会直接下载
5 href="#name" 设置锚点实现当前页面的跳转
  1. 通过target属性的属性值来实现打开链接的方式；
编号 属性 描述
1 target="_self" 默认在当前窗口打开
2 target="_blank" 在新窗口打开
3 target="_parent" 在父窗口中打开
4 target="_top" 在顶层窗口打开
5 target="name" 指定名称的窗口打开，与iframe元素配合
6 target="#" 跳转到设置了锚点元素的所在位置

锚点链接可实现当前页面的跳转；使用id属性规定锚的名称，但是需要注意id不能重复；
那么锚点链接如何应用呢？通俗的来讲就是，当文章很长时，我们可以创建锚点快速的跳转到某段内容，增强文章的可读性。

例如：

  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>锚点链接</title>
  7. </head>
  8. <body>
  9.     <div id="top">头部</div>
  10.     <div style="height: 1000px;"></div>
  11.     <a href="#top">返回顶部</a>
  13. </body>
  14. </html>

表格的属性

表格是数据格式化展示的重要工具，使用频率非常高；

序号 属性 适用元素 描述
1 border <table> 添加表格框
2 cellpadding <table> 设置单元格内边距
3 cellspacing <table> 设置单元格边框间隙
4 align 不限 设置单元格内容水平居中
5 bgcolor 不限 设置背景色
6 width 不限 设置宽度
7 height 不限 设置高度

表格合并时涉及的属性

序号 属性 描述
1 colspan 行合并
2 rowspan 列合并

ps:无论是行合并（colspan）还是列合并（rowspan），都必须写在单元格中。

表格实例

个人信息表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
  6.     <title>个人信息表</title>
  7. </head>
  8. <body>
  9.    <style>
  10.        td{width: 40px;}
  11.        tr{ height: 29px;}
  12.    </style>
  13.     <table border="1" cellspacing="0" cellpadding="5" width="580" align="center" >
  14.         <caption style="padding: 12px; font-size: 16px; font-weight:bold;">个人信息表</caption>
  16.         <tbody>
  17.             <tr>
  18.                 <td colspan="2">姓名</td>  
  19.                 <td></td>
  20.                 <td>性别</td>
  21.                 <td></td>
  22.                 <td>民族</td>
  23.                 <td colspan="2"></td>
  24.                 <td>籍贯</td>
  25.                 <td colspan="2"></td>
  26.                 <td colspan="3" rowspan="3">一寸照片</td>
  27.             </tr>
  28.             <tr>
  29.                 <td colspan="2">身份证号</td>  
  30.                 <td colspan="3"></td>
  31.                 <td>出生日期</td>
  32.                 <td colspan="2"></td>
  33.                 <td>政治面貌</td>
  34.                 <td colspan="2"></td>
  36.             </tr>
  37.             <tr>
  38.                 <td colspan="2">毕业院校</td>  
  39.                 <td colspan="3"></td>
  40.                 <td>学历学位</td>
  41.                 <td colspan="2"></td>
  42.                 <td>毕业时间</td>
  43.                 <td colspan="2"></td>
  45.             </tr>
  46.             <tr>
  47.                 <td colspan="2">所学专业</td>  
  48.                 <td colspan=""></td>
  49.                 <td>工作时间</td>
  50.                 <td colspan="2"></td>
  51.                 <td>健康状况</td>
  52.                 <td colspan="2"></td>
  53.                 <td>户口性质</td>
  54.                 <td colspan="2"></td>
  55.             </tr>
  56.             <tr>
  57.                 <td colspan="3">手机</td>  
  58.                 <td colspan="5"></td>
  59.                 <td>邮箱</td>
  60.                 <td colspan="5"></td>
  61.             </tr>
  62.             <tr>
  63.                 <td colspan="3">现住地址：</td>  
  64.                 <td colspan="11"></td>
  65.             </tr>
  66.             <tr>
  67.                 <td colspan="2" rowspan="4">学习简历</td>  
  68.                 <td colspan="12" rowspan="4"></td>
  69.             </tr>
  70.             <tr></tr>
  71.             <tr></tr>
  72.             <tr></tr>
  73.             <tr>
  74.                 <td colspan="2" rowspan="8">工作经历</td>
  75.                 <td colspan="12" rowspan="8"></td>
  76.             </tr>
  77.             <tr></tr>
  78.             <tr></tr>
  79.             <tr></tr>
  80.             <tr></tr>
  81.             <tr></tr>
  82.             <tr></tr>
  83.             <tr></tr>
  85.         </tbody>
  87.     </table>
  88. </body>
  89. </html>

效果图

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！