x(15)0906第三天__超连接

时间 2019-11-08

标签第三天连接繁體版

原文原文链接

HTML5 中的新属性。html

属性	值	描述
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 类型。

最简单的跳转超连接：html5

<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"实现页面内部的跳转。spa

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

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

x(15)0906第三天__超连接