HTML入门教程
HTML入门教程
    • 请登录查看
    阅读(2297)

    HTML 超链接

    最后一次修改 2017年08月03日

    HTML超链接

    超链接为HTML提供了基础，用户可以通过HTML在同一文档内和跨页面浏览内容。

    您可以使用 a 元素创建超链接。


    属性

    a 元素具有局部属性: href，hreflang，media，rel，target，type 。

    • href - 指定a元素引用的资源的URL。

    • hreflang - 指定链接资源的语言。

    • media - 指定链接内容用于的设备。此属性与头元素元素使用相同的设备和特征值。

    • rel - 指定文档和链接资源之间的关系类型。此属性使用与链接元素的rel属性相同的值。

    • target - 指定应在其中打开链接资源的浏览上下文。

    • type - 指定链接资源的MIME类型，例如text/html。

    id，coords，shape，urn，charset，methods 和 rev 属性已过时。


    外部超链接

    您可以通过将元素中的href属性设置为以http://开头的URL来创建指向其他HTML文档的超链接。

    当用户单击超链接时，浏览器将加载指定的页面。

    以下代码显示用于链接到外部内容的a元素。

    <!DOCTYPE HTML>
<html>
<body>
  I like <a href="http://www.html.cn">Tutorial</a>.
</body>
</html>

    注意

    并非所有网址都必须引用其他网页。

    浏览器还支持其他协议，如 https 和 ftp 。如果要引用电子邮件地址，可以使用 mailto 协议; 例如， mailto:info@example.com 。

    相对网址

    如果 href 属性的值不以start开头识别的协议，例如 http:// 那么浏览器将超链接视为相对引用。

    以下代码给出了相对URL的示例。

    <!DOCTYPE HTML>
<html>
<body>
  I like <a href="index.html">tutorial</a>.
</body>
</html>

    代码将 href 属性设置为 index.html 。

    当用户单击链接时，浏览器使用的URL当前文档以确定如何加载链接的页面。

    内部超链接

    您可以创建超链接，使浏览器窗口中的另一个元素进入视图。

    您可以使用CSS样式ID选择器#id创建内部超链接，如以下代码所示。

    <!DOCTYPE HTML>
<html>
<body>
  You can see other tutorials I like
  <a href="#tutorial">here</a>.
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <p id="tutorial">This is a test.</p>
</body>
</html>

    上面的代码用 href 创建了一个超链接 #tutorial 的值。

    当用户单击链接时，浏览器将在文档中查找元素其 id 属性的值为 tutorial 。如果元素不可见屏幕，浏览器将滚动文档以显示它。

    如果浏览器不能找到具有所需 id 属性值的元素，它会再次搜索，寻找一个与目标匹配的 name 属性。

    Target浏览上下文

    元素的 target 属性告诉浏览器要显示链接资源的位置。

    默认情况下，浏览器使用显示当前文档的窗口，选项卡或框架显示链接的文档并替换现有文档。

    以下列表描述了目标属性支持的值。

    • _blank - 在新窗口（或选项卡）中打开文档。

    • _parent - 打开父框架集中的文档。

    • _self - 在当前窗口中打开文档（这是默认行为）。

    • _top - 在窗口的整个主体中打开文档。

    • <frame> - 在指定的框架中打开文档。

    这些值中的每一个表示浏览上下文。

    使用锚点伪类

    链接可以以不同的方式显示:

    a:link {color:#FF0000;}    /* unvisited link */           
a:visited {color:#00FF00;} /* visited link */ 
a:hover {color:#FF00FF;}   /* mouse over link */ 
a:active {color:#0000FF;}  /* selected link */

    每个伪类的含义在css注释中列出。

    以下代码设置四个锚伪类。

    <!DOCTYPE HTML>
<html>
  <head>
    <style>
        a:link, a:visited {
          text-decoration: underline;
          color: #6A5ACD;
          background-color: transparent;
        }
        a:hover, a:active {
          text-decoration: underline overline;
          color: #191970;
          background-color: #C9C3ED;
        }
</style>    
  </head>
  <body>
    <ul>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
    </ul>
  </body>
</html>

    伪类可以与CSS类组合。以下示例告诉浏览器以红色显示访问的锚点链接。

    a.red:visited {color:#FF0000;}

<a class="red" href="http://www.html.cn">www.html.cn</a>
    ← HTML 页面内容
    HTML 列表 →
    提交