使用外部和内部链接

Posted 2020-07-25

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用外部和内部链接相关的知识，希望对你有一定的参考价值。

8.1 使用web地址

        <!-- 根相对地址 -->
        <a href = "/elephants/african.html">Learn About african elephants.</a>
        <a href = "/elephants/asian.html">Learn About asian elephants.</a>

        <!-- 常规相对地址 -->
        <a href = "elephants/african.html">Learn About african elephants.</a>
        <a href = "elephants/asian.html">Learn About asian elephants.</a>

        <!-- 绝对链接,提供完整的URL包括域名 -->
        <a href = "http://www.yourdomain.com/zoo.html">Return to the zoo.</a>
        <!-- 根相对链接,开头的前向斜杠说明地址开始于文档根目录 -->
        <a href = "/zoo.html">Return to the zoo.</a>
        <!-- (..)双点号移动到目录结构的上一级 -->
        <a href = "../zoo.html">Return to the zoo.</a>

View Code

8.2 使用链接锚在页面中链接

　　8.2.1 用链接锚指定页面中的位置

　　8.2.2 链接到锚位置

<?xml version = "1.0" encoding = "UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en">
    <head>
        <title>R&eacute;sum&eacute; for Jane Doe</title>
    </head>
    <body>
        <a id = "top">1</a>
        <div style="margin-top: 2000px">haha</div>
        <a href="#top">Return to Index</a> <!-- #符号意味着top指向当前文档中的命名锚接点而不是单独的页面 -->
    </body>
</html>

View Code

8.3 在你的Web内容之间链接

8.4 链接到外部Web内容

        <!-- 链接到自己的网站中的页面和链接到外部Web内容的唯一区别是,链接到网站之外时,
            你必须包含内容的完整地址.-->

View Code

8.5 链接到一个E-mail地址

        <a href="mailto:[email protected]?subject=Book Question&body=When is the next edition coming out?">
            [email protected]
        </a>

View Code

8.6 在新浏览器窗口里打开链接

8.7 使用CSS设置超链接样式

<?xml version = "1.0" encoding = "UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en">
    <head>
        <title>Sample Link Style</title>
        <style type = "text/css">
            a {
                font-family: Verdana, sans-serif;
                font-weight: bold;
                text-decoration: none;
            }
            a:link {
                color: #6479A0;
            }
            
            a:visited {
                color: #CCCCCC;
            }

            a:hover, a:active {
                color: #FF0000;
            }
        </style>
    </head>
    <body>
        <!-- 伪类(pseudoclass)是一种描述应用到某些情况的元素样式的类,比如用户与该元素的各种交互状态 -->
        <h1>Sample Link Style</h1>
        <p><a href = "simplelinkstyle.html">The first time you see me,I should</a></p>
    </body>
</html>

View Code

8.8 总结

        <!--
            <a></a> 使用href属性可创建指向另一个文档或锚点的链接,使用id属性,创建一个可被链接的锚点
            href="address"  要链接的文档或锚点的地址
            id = "name" 在文档中指向该锚点的名称
         -->

View Code

以上是关于使用外部和内部链接的主要内容，如果未能解决你的问题，请参考以下文章

如何在uni-app正确使用web-view

存储类链接内存管理

C - 获取外部 IP 地址

具有外部和内部端点的 Service Fabric Web Api

HTML 页面上的内部链接和外部链接是啥？

内部链接和外部链接