链接元素与表格元素的应用 - PHP学习

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 链接元素与表格元素的应用

博主信息

博文 4

粉丝 0

访问量 4608

专题推荐

更多>

链接元素

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

链接元素的常用属性

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

链接元素的功能

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

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

链接元素中锚点的作用

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

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

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

表格元素

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

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

常用属性

属性	描述
`border`	添加表格框
`cellpadding`	设置单元格内边距
`cellspacing`	设置单元格边框间隙
`align`	设置单元格内容水平居中
`width`	设置宽度
`height`	设置高度
`colspan`	设置跨列合并
`rowspan`	设置跨行合并

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table
      border="1"
      width="600"
      cellspacing="0"
      cellpadding="5"
      height="200"
      align="center"
    >
      <caption>
        公司排班表
      </caption>
      <thead>
        <tr>
          <th></th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
          <th>周六</th>
          <th>周日</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="4">上午</td>
          <td>张二</td>
          <td>李二</td>
          <td>王二</td>
          <td>孙二</td>
          <td>赵二</td>
          <td rowspan="9">值班</td>
          <td rowspan="9">值班</td>
        </tr>
        <tr>
          <td>张一</td>
          <td>李一</td>
          <td>王一</td>
          <td>孙一</td>
          <td>赵一</td>
        </tr>
        <tr>
          <td>张三</td>
          <td>李三</td>
          <td>王三</td>
          <td>孙三</td>
          <td>赵三</td>
        </tr>
        <tr>
          <td>张四</td>
          <td>李四</td>
          <td>王四</td>
          <td>孙四</td>
          <td>赵四</td>
        </tr>
        <tr>
          <td colspan="6" align="center">中午休息</td>
        </tr>
        <tr>
          <td rowspan="4">下午</td>
          <td>张一</td>
          <td>李一</td>
          <td>王一</td>
          <td>孙一</td>
          <td>赵一</td>
        </tr>
        <tr>
          <td>张四</td>
          <td>李四</td>
          <td>王四</td>
          <td>孙四</td>
          <td>赵四</td>
        </tr>
        <tr>
          <td>张二</td>
          <td>李二</td>
          <td>王二</td>
          <td>孙二</td>
          <td>赵二</td>
        </tr>
        <tr>
          <td>张三</td>
          <td>李三</td>
          <td>王三</td>
          <td>孙三</td>
          <td>赵三</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>