__x__(15)0906第三天__超链接

时间：2023-12-25 23:33:37

HTML5 中的新属性。

属性 值 描述
charset char_encoding HTML5 中不支持。规定被链接文档的字符集。
coords coordinates HTML5 中不支持。规定链接的坐标。
download filename 规定被下载的超链接目标。
href URL 规定链接指向的页面的 URL。
hreflang language_code 规定被链接文档的语言。
media media_query 规定被链接文档是为何种媒介/设备优化的。
name section_name HTML5 中不支持。规定锚的名称。
rel text 规定当前文档与被链接文档之间的关系。
rev text HTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape
  • default
  • rect
  • circle
  • poly
 HTML5 中不支持。规定链接的形状。
target
  • _blank
  • _parent
  • _self
  • _top
  • framename
 规定在何处打开链接文档。
type MIME type 规定被链接文档的的 MIME 类型。

最简单的跳转超链接：

<a href="http://www.baidu.com" >超链接到百度</a>

属性：

    • target：网页打开方式
      • _self：在当前页面    跳转到超链接
      • _blank：在新的页面中    打开超链接
      • iframeName：在name="iframeName"的内联框架中   打开超链接
      • parent：若当前页面是iframe，则在父页面中打开超链接
      • top：无论包含多少个iframe，会在祖先页面中打开超链接

实例：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>显示在网页的标题栏</title>

    </head>

    <body>

        <a href="#kjf_bottom"  id="kjf_top">跳转到底部</a><br>

        Hello , Web!`

        <a href="http://www.baidu.com" target="cat">超链接到百度</a>

        <iframe src="./cat.html" name="cat" width="80%" height="800px" frameborder="0" scrolling="no">

            这是一只猫

        </iframe>

        <p>

            这是邮件链接：

            <a href="mailto:951932321@qq.com?subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">

                发送邮件！

            </a>

        </p>

        <p>

            <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

        </p>

        <a href="#kjf_top" id="kjf_bottom">跳转到顶部</a>

    </body>

</html>

1. 创建超链接时，如果目标地址不确定，可用#填充，默认页面跳转到页面顶部。

<a href="#" target="cat">新商品</a>

2. 采用target="_self"结合id="idname"、href="#idname"实现页面内部的跳转。

<a href="#kjf_bottom"  id="kjf_top">跳转到底部</a><br>

<a href="#kjf_top" id="kjf_bottom">跳转到顶部</a>

相关文章