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第三天__超連接