HTML 使用超級鏈接與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。
HTML 鏈接
如何在HTML文檔中創建鏈接。
(可以在本頁底端找到更多實例)
HTML 超鏈接(鏈接)
HTML使用標簽 <a>來設置超文本鏈接。
超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變為一只小手。
在標簽<a> 中使用了href屬性來描述鏈接的地址。
默認情況下,鏈接將以以下形式出現在瀏覽器中:
一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點擊鏈接時,鏈接顯示為紅色并帶有下劃線。
注意:如果為這些超鏈接設置了 CSS 樣式,展示樣式會根據 CSS 的設定而顯示。
HTML 鏈接語法
鏈接的 HTML 代碼很簡單。它類似這樣::
<a href="url">鏈接文本</a>
href 屬性描述了鏈接的目標。.
實例
<a >訪問菜鳥教程</a>
上面這行代碼顯示為:: 訪問菜鳥教程
點擊這個超鏈接會把用戶帶到菜鳥教程的首頁。
提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
HTML 鏈接 - target 屬性
使用 target 屬性,你可以定義被鏈接的文檔在何處顯示。
下面的這行會在新窗口打開文檔:
實例
<a>訪問菜鳥教程!</a>
HTML 鏈接- id 屬性
id屬性可用于創建在一個HTML文檔書簽標記。
提示: 書簽是不以任何特殊的方式顯示,在HTML文檔中是不顯示的,所以對于讀者來說是隱藏的。
實例
在HTML文檔中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文檔中創建一個鏈接到"有用的提示部分(id="tips")":
<a href="#tips">訪問有用的提示部分</a>
或者,從另一個頁面創建一個鏈接到"有用的提示部分(id="tips")":
<a >
訪問有用的提示部分</a>
基本的注意事項 - 有用的提示
注釋: 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接:,就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址,然后創建一個新的請求,就像這樣:。
圖片鏈接
如何使用圖片鏈接。
在當前頁面鏈接到指定位置
如何使用書簽
跳出框架
本例演示如何跳出框架,假如你的頁面被固定在框架之內。
創建電子郵件鏈接
本例演示如何如何鏈接到一個郵件。(本例在安裝郵件客戶端程序后才能工作。)
建電子郵件鏈接 2
本例演示更加復雜的郵件鏈接。
HTML 鏈接標簽
標簽 | 描述 |
---|---|
<a> | 定義一個超級鏈接 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
首先我們看看效果:
實現這樣的功能需要學習以下幾點內容。
1.認識<img/><map><area/></map>基本結構
首先復制一個html框架,命名為“圖片區域鏈接.html”,示例代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>圖片區域鏈接</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
向<body></body>中添加<img><map><area/></map>基本結構,示例代碼如下:
<body>
<img/>
<map>
<area/>
</map>
</body>
指定要添加區域鏈接的圖片的路徑,如下:
<img src="img/image1.jpg"/>
<map>
<area/>
</map>
讓<img>標簽通過<map>的名字來驅使<map>為自己工作。
需要兩步,第一,給<map>起名字,name=“map”,為了兼容所有的瀏覽器,還要加上id=“map”(有的瀏覽器只認id)。
第二,讓<img>叫出<map>的名字或id,usemap="#map"。大家要注意,叫名字時要加#。這個在之前的教程中也經常出現。
示例代碼如下:
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area/>
</map>
下面來劃分區域。
2.為圖片劃分區域的方法
<area>是用來劃分區域的標簽,area也是“”區域“”的意思。
默認的shape(形狀)屬性有“矩形(rect)”、“圓形(circ)”、“多邊形(poly)”三個值。
分別添加三個形狀,示例代碼如下:
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area shape="rect"/>
<area shape="circ"/>
<area shape="poly"/>
</map>
下面我們就要為區域規定參數,也就是在圖像上的位置和范圍大小。
為<area>添加coords屬性可以指定區域的位置和范圍。
如果shape="rect" 則coords由四個參數組成。例如coords="0,0,50,50"。從左到右,兩兩一組,組成兩個平面坐標,即(0,0)和(50,50),單位是“像素”,矩形區域如下:
如果shape=“circ”,coords=“50,50,10”。(50,50)定義了圓心,10是半徑。如圖:
如果shape=“poly”,coords的參數不少于3對!注意是“對”!從左到右,兩個數就是一組坐標,三組坐標可以確定一個三角形,多組坐標可以確定多邊形。例如
這組參數畫出了下圖中殲20的邊框線(600像素*400像素,如果圖像的長寬像素數變了,參數就不正確了),如圖:
這時,大家會有一個問題:如何才能知道圖像中某個像素點的坐標呢?
3.使用Gimp軟件精準定位圖片區域
使用Gimp軟件可以解決這個問題。
Gimp是一款類似于Photoshop的數字圖像處理軟件,不同的是,Gimp是開源免費的。
下載地址:https://www.gimp.org/
雙擊安裝即可,注意選擇一下安裝目錄。
完成安裝之后打開,界面如下:
點擊“文件”找到“打開”:
選擇要打開的圖片名字:
點擊名稱后,右邊會有圖像預覽,點擊“打開”即可:
打開后如圖:
把鼠標放到圖像的任意位置,看左下角:
這里就會顯示我們鼠標所在的像素坐標數值。
這樣我們就能方便地寫“poly”的coords了。
請在空閑時找一張圖片演練一下吧!
4.為區域添加鏈接
在<area/>標簽中添加href屬性即可指定鏈接路徑,如下:
href="https://www.zhihu.com/question/284642168"
添加title屬性可以在鼠標滑過鏈接區域時提示讀者,如下:
title="殲20氣動外形分析"
今天的內容結束了,圖像區域鏈接在使用時還有一些注意事項,我們下次再詳細討論。
使用碎片時間,學習完整知識!關注大魚師兄,一起精研技藝。
HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作
HTML是什么?——零基礎自學網頁制作
第一個HTML頁面如何寫?——零基礎自學網頁制作
HTML頁面中head標簽有啥用?——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作
使用HTML添加表格1(基本元素)——零基礎自學網頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作
使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作
HTML表單4(form的action、method屬性)——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變為一只小手。
我們通過使用 <a> 標簽在 HTML 中創建鏈接。
有兩種使用 <a> 標簽的方式:
鏈接的 HTML 代碼很簡單。它類似這樣:
<a href="url">Link text</a>
href 屬性規定鏈接的目標。
開始標簽和結束標簽之間的文字被作為超級鏈接來顯示。
實例
<a >百度</a>
上面這行代碼顯示為:百度
點擊這個超鏈接會把用戶帶到 百度 的首頁。
提示:"鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示。
下面的這行會在新窗口打開文檔:
<a target="_blank">百度</a>
name 屬性規定錨(anchor)的名稱。
您可以使用 name 屬性創建 HTML 頁面中的書簽。
書簽不會以任何特殊方式顯示,它對讀者是不可見的。
當使用命名錨(named anchors)時,我們可以創建直接跳至該命名錨(比如頁面中某個小節)的鏈接,這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
命名錨的語法:
<a name="label">錨(顯示在頁面上的文本)</a>
提示:錨的名稱可以是任何你喜歡的名字。
提示:您可以使用 id 屬性來替代 name 屬性,命名錨同樣有效。
實例
首先,我們在 HTML 文檔中對錨進行命名(創建一個書簽):
<a name="tips">基本的注意事項 - 有用的提示</a>
然后,我們在同一個文檔中創建指向該錨的鏈接:
<a href="#tips">有用的提示</a>
您也可以在其他頁面中創建指向該錨的鏈接:
<a href="url#tips">有用的提示</a>
本例演示如何在新窗口打開一個頁面,這樣的話訪問者就無需離開你的站點了。
<html> <body> <a target="_blank">百度</a> <p>如果把鏈接的 target 屬性設置為 "_blank",該鏈接會在新窗口中打開。</p> </body> </html> ?
HTML基礎教程:超鏈接的使用
*請認真填寫需求信息,我們會在24小時內與您取得聯系。