链接元素

1. 常用属性

属性	描述	举例
`href`	指向链接页面的 URL	`href="https://php.cn"`
`target`	打开 URL 的页面来源	`target=_self_blank_top_parent`
`download`	自定义下载文件名	`download="banner1.jpg"`
`type`	设置链接文档的 MIME 类型	`type="image/jpeg"`

2. `href`属性值

属性	描述
`href="url"`	跳转的目标地址
`href="mailto: 123456@qq.com"`	打开邮箱,发送邮件
`href="tel:137****9173"`	点击后,会询问用户是否要拨打电话
`href="outline.md"`	浏览器不能解析的文档, 会直接下载

3. `taget`属性值

属性	描述
`target="_self"`	当前窗口打开链接（默认/可不添加）
`target="_blank"`	新窗口打开链接
`target="_parent"`	父窗口打开链接
`target="_top"`	顶层窗口打开链接
`target="name"`	指定名称的窗口, 与`<iframe>`元素配合
`target="#anchor"`	跳转到设置了锚点的元素所在位置

4. 示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>链接元素</title>
  </head>
  <body>
    <!-- href:是一个url时, 在不同的页面的之间跳转 -->
    <h1 id="header">&lt;header&gt;</h1>
    <a href="https://www.php.cn">本页跳转php中文网</a>
    <a href="https://www.php.cn" target="_self">本页跳转php中文网</a>
    <a href="https://www.php.cn" target="_blank">新页面跳转php中文网</a>
    <!-- 下载文件 -->
    <a href="index.html" download="语义化文本元素">下载文件</a>
    <a href="tel:137****9173">咨询电话</a>
    <a href="mailto:12345523@qq.com">发邮件</a>
    <!-- 锚点 -->
    <!-- 通过锚点, 可以实现在当前页面内部跳转 -->
    <a href="#footer">跳转到页面底部</a>
    <h1 id="footer" style="margin-top: 1000px">footer</h1>
    <a href="#header">跳转到头部</a>
  </body>
</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

1 comments

酒淋后 2020-10-09 19:12:52

言简意赅，思路清晰代码整洁值得向你学习!

1 floor

Author's latest blog post

redis

2020-10-13 14:19:17

链接元素

1. 常用属性

2. href属性值

3. taget属性值

4. 示例代码

2. `href`属性值

3. `taget`属性值