HTML --連接

時間 2019-11-20

標籤 html 連接欄目 HTML 简体版

原文原文鏈接

1.直接上連接的例子，分爲本網站內的鏈接和萬維網上連接html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <p>
        <a href="C:\Documents and Settings\Administrator\桌面\index.html">點擊跳往個人index頁面</a>
        它是指向本網站中的一個頁面的連接。
    </p>
    <p>
        <a href="http://www.baidu.com">百度</a>
        它是指向萬維網上某個頁面的連接。
    </p>
</body>
</html>

2.將圖片做爲連接
windows

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <p>點擊圖片跳頁面
    <a href="C:\Documents and Settings\Administrator\桌面\index.html">
        <img src="C:\Documents and Settings\Administrator\桌面\1.jsp" border="0">
    </a>
    </p>
</body>
</html>

3.HTML連接語法瀏覽器

<a href="url">link text</a>
href屬性規定連接的目標
link text 做爲超連接內容來顯示

HTML連接 -taget屬性框架

使用taget屬性，咱們能夠定義被連接的文檔在哪裏顯示，以下例子會在新窗口中打開文檔jsp

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">點擊這裏從新打開一個頁面</a>
</body>
</html>

4.連接到同一個頁面的不一樣位置測試

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <p>
        <a href="#C4">查看 Chapter4</a>
    </p>
    <h2>Chapter 1</h2>
    <p>Chapter 1 content</p>
    <h2>Chapter 2</h2>
    <p>Chapter 2 content</p>
    <h2>Chapter 3</h2>
    <p>Chapter 3 content</p>
    <h2><a name="C4">Chapter 4</a></h2>
    <p>Chapter 4 content</p>
    <h2>Chapter 5</h2>
    <p>Chapter 5 content</p>
    <h2>Chapter 6</h2>
    <p>Chapter 6 content</p>
    <h2>Chapter 7</h2>
    <p>Chapter 7 content</p>
    <h2>Chapter 8</h2>
    <p>Chapter 8 content</p>
    <h2>Chapter 9</h2>
    <p>Chapter 9 content</p>
    <h2>Chapter 10</h2>
    <p>Chapter 10 content</p>
    <h2>Chapter 11</h2>
    <p>Chapter 11 content</p>
    <h2>Chapter 12</h2>
    <p>Chapter 12 content</p>
    <h2>Chapter 13</h2>
    <p>Chapter 13 content</p>
    <h2>Chapter 14</h2>
    <p>Chapter 14 content</p>
</body>
</html>

5.在整個窗口中打開被連接的文檔
網站

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <a href="http://www.baidu.com" target="_top">點擊這裏，在整個窗口中打開被連接文檔</a>
</body>
</html>

順帶在這裏講解下HTML <a>標籤的target屬性使用方法
url

<a>標籤的target屬性規定在何處打開連接文檔。
code

1.打開新窗口
htm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <h2>公司列表</h2>
    <a href="http://www.baidu.com" target="view_windows">百度</a>
    <br />
    <a href="http://www.QQ.com" target="view_windows">騰訊</a>
    <br />
    <a href="http://www.alibaba.com" target="view_windows">阿里巴巴</a>
</body>
</html>

備註：當用戶第一次點擊連接時，瀏覽器將會打開一個新的窗口，將它標記爲"view_window"，而後在新打開的窗口中顯示文檔；這時，用戶在新的文檔中又點擊某一個連接，且"view_windows"仍處於打開狀態，瀏覽器便又會從新打開一個新的窗口。

2.在框架中打開新窗口，這個點我沒有測試成功，因此不貼本身的例子了，將連接貼在這裏，看博文者本身去研究下

http://www.w3school.com.cn/tags/att_a_target.asp

3.特殊的目標

_blank 瀏覽器總會在一個新打開的窗口中載入目標文檔

_self 默認，在相同的框架中打開被連接的文檔

_parent 在父框架中打開被連接文檔

_top 在整個窗口中打開被連接文檔

framename 在制定的框架中打開被連接的文檔