链接元素
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"><header></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>
