整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML 鏈接

          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>標簽實現文本內鏈接——零基礎自學網頁制作

          TML 超鏈接(鏈接)

          超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

          當您把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變為一只小手。

          我們通過使用 <a> 標簽在 HTML 中創建鏈接。

          有兩種使用 <a> 標簽的方式:

          1. 通過使用 href 屬性 - 創建指向另一個文檔的鏈接
          2. 通過使用 name 屬性 - 創建文檔內的書簽

          HTML 鏈接語法

          鏈接的 HTML 代碼很簡單。它類似這樣:

          <a href="url">Link text</a>
          

          href 屬性規定鏈接的目標。

          開始標簽和結束標簽之間的文字被作為超級鏈接來顯示。

          實例

          <a >百度</a>
          

          上面這行代碼顯示為:百度

          點擊這個超鏈接會把用戶帶到 百度 的首頁。

          提示:"鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

          HTML 鏈接 - target 屬性

          使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示。

          下面的這行會在新窗口打開文檔:

          <a  target="_blank">百度</a>
          

          HTML 鏈接 - name 屬性

          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基礎教程:超鏈接的使用


          主站蜘蛛池模板: 果冻传媒董小宛一区二区| 亚洲av不卡一区二区三区| 杨幂AV污网站在线一区二区| 高清一区二区在线观看| 精品久久久久一区二区三区| 91精品一区国产高清在线| 激情内射日本一区二区三区| 无码人妻久久久一区二区三区| 精品香蕉一区二区三区| а天堂中文最新一区二区三区| 国产一区二区中文字幕| 久久毛片一区二区| 国产精品主播一区二区| 人妻无码一区二区三区AV| 日韩精品一区在线| 久久亚洲综合色一区二区三区| 午夜性色一区二区三区免费不卡视频| 色噜噜一区二区三区| 人妻无码久久一区二区三区免费| 国产乱码精品一区二区三区麻豆| AV怡红院一区二区三区| 97久久精品无码一区二区| 国产福利电影一区二区三区久久久久成人精品综合 | 日本在线一区二区| 夜夜高潮夜夜爽夜夜爱爱一区| 精品久久国产一区二区三区香蕉 | 亚洲一区AV无码少妇电影| 亚洲av区一区二区三| 2021国产精品视频一区| 一区二区三区人妻无码| 国产第一区二区三区在线观看 | 亚洲中文字幕乱码一区| 中文字幕一区日韩在线视频| 亚洲色一区二区三区四区| 久久精品人妻一区二区三区 | 日本在线一区二区| 国产精品一区二区av不卡| 爆乳无码AV一区二区三区 | 亚洲片国产一区一级在线观看 | 成人免费一区二区无码视频 | 精品福利一区3d动漫|