20180611-前端系统学习-HTML之超链接

最新推荐文章于 2024-05-09 15:15:17 发布

Jack_Even

最新推荐文章于 2024-05-09 15:15:17 发布

阅读量321

点赞数

分类专栏：前端系统学习

本文链接：https://blog.csdn.net/weixin_40582630/article/details/80655014

版权

前端系统学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<a></a>

--另一个文档

--文档内部

--Email地址

--电话号码

属性

--href（必备属性）

--target

--download

--hreflang 链接资源的语言，en表示英语（描述属性）

--rel 当前文档和被链接文档的关系（描述属性）

--rev 被链接文档和当前文档的关系（描述属性）

--type 超链接文档的类型（描述属性）

--referrerpolicy referrer信息发送策略（描述属性）

创建指向另一个文档的链接

    <div>
        <a href="/category/office-productivity" target="_blank">办公效率</a>
        <a href="/category/ppt">PPT</a>
        <a href="/category/excel">Excel</a>
        <a href="/category/word">Word</a>
    </div>

target（表示超链接内容从什么地方显示）

--_self 在当前页面打开

--_blank 在新标签页打开

--_parent 在父级浏览环境打开

--_top 在顶级浏览环境打开

--浏览器环境名称

<!-- a-out.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接到外部文档</title>
    <style>
        iframe {
            margin: 50px;
        }
    </style>
</head>
<body>
    <h3>链接到外部文档</h3>
    <div>
        <a href="./site/html.html" target="_self">html</a>
        <a href="./site/css.html" target="_blank">css</a>
        <a href="./site/js.html" target="inner">js</a>
        <!-- 浏览环境为inner -->
    </div>
    <iframe frameborder="1" name="inner"></iframe>
    <iframe src="./site/framea.html" frameborder="1"></iframe>
</body>
</html>

<!-- framea.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>frame</title>
</head>
<body>
    <h3>framea</h3>
    <div>
        <a href="html.html" target="_top">html文档（top）</a>
    </div>
    <iframe src="frameb.html" frameborder="1"></iframe>
</body>
</html>

<!-- frameb.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>frameb</title>
</head>
<body>
    <h3>frameb</h3>
    <div>
        <a href="css.html" target="_parent">parent</a>
    </div>
</body>
</html>

<!-- html.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
</head>
<body>
    我是HTML
</body>
</html>

<!-- css.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
</head>
<body>
    我是CSS
</body>
</html>

<!-- js.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
</head>
<body>
    我是js
</body>
</html>

创建一个文档内部的锚点

 <ul>
        ...
        <li><a href="#buy">抢购商品</a></li>
        <li><a href="#pay">下单支付</a></li>
        ...
    </ul>
    <div>
        ...
        <div id="buy">2.抢购商品...</div>
        <div id="pay">3.下单支付...</div>
        ...
    </div>

还有一种是返回文档头部：

<a href="#">top</a>

链接到Email地址或者电话

<a href="mailto:yixinplus@188.com">联系我们</a>

<a href="mailto:yixinplus@188.com?cc=jack_chu@mail.com&subject=建议&body=body....">联系我们</a>

    <a href="tel:123456789">123456789</a>

download属性

表示超链接的内容可以被下载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>download</title>
    <style>
        body{
            margin: 100px;
        }
    </style>
</head>
<body>
    <a href="/res/mymailinfo.pdf" download>我的邮箱信息</a>
    <a href="/res/mymailinfo.pdf" download="我的邮箱.pdf">我的邮箱信息（重命名）</a>
    <a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf" download="VScode.pdf">VSCode快捷键（跨域重命名）</a>
    <!-- 跨域无法重命名 -->
</body>
</html>