HTML中的圖片區(qū)域鏈接方法詳解-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

圖片添加區(qū)域鏈接的基本寫法

首先我們看看效果：

實(shí)現(xiàn)這樣的功能需要學(xué)習(xí)以下幾點(diǎn)內(nèi)容。

1.認(rèn)識(shí)<img/><map><area/></map>基本結(jié)構(gòu)

首先復(fù)制一個(gè)html框架，命名為“圖片區(qū)域鏈接.html”,示例代碼如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>圖片區(qū)域鏈接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本結(jié)構(gòu)，示例代碼如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加區(qū)域鏈接的圖片的路徑，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

讓<img>標(biāo)簽通過<map>的名字來驅(qū)使<map>為自己工作。

需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認(rèn)id）。

第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時(shí)要加#。這個(gè)在之前的教程中也經(jīng)常出現(xiàn)。

示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面來劃分區(qū)域。

2.為圖片劃分區(qū)域的方法

<area>是用來劃分區(qū)域的標(biāo)簽，area也是“”區(qū)域“”的意思。

默認(rèn)的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個(gè)值。

分別添加三個(gè)形狀，示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我們就要為區(qū)域規(guī)定參數(shù)，也就是在圖像上的位置和范圍大小。

為<area>添加coords屬性可以指定區(qū)域的位置和范圍。

如果shape="rect" 則coords由四個(gè)參數(shù)組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個(gè)平面坐標(biāo)，即（0,0）和（50，50），單位是“像素”，矩形區(qū)域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：

如果shape=“poly”，coords的參數(shù)不少于3對(duì)！注意是“對(duì)”！從左到右，兩個(gè)數(shù)就是一組坐標(biāo)，三組坐標(biāo)可以確定一個(gè)三角形，多組坐標(biāo)可以確定多邊形。例如

這組參數(shù)畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長(zhǎng)寬像素?cái)?shù)變了，參數(shù)就不正確了），如圖：

這時(shí)，大家會(huì)有一個(gè)問題：如何才能知道圖像中某個(gè)像素點(diǎn)的坐標(biāo)呢？

3.使用Gimp軟件精準(zhǔn)定位圖片區(qū)域

使用Gimp軟件可以解決這個(gè)問題。

Gimp是一款類似于Photoshop的數(shù)字圖像處理軟件，不同的是，Gimp是開源免費(fèi)的。

下載地址：https://www.gimp.org/

雙擊安裝即可，注意選擇一下安裝目錄。

完成安裝之后打開，界面如下：

點(diǎn)擊“文件”找到“打開”：

選擇要打開的圖片名字：

點(diǎn)擊名稱后，右邊會(huì)有圖像預(yù)覽，點(diǎn)擊“打開”即可：

打開后如圖：

把鼠標(biāo)放到圖像的任意位置，看左下角：

這里就會(huì)顯示我們鼠標(biāo)所在的像素坐標(biāo)數(shù)值。

這樣我們就能方便地寫“poly”的coords了。

請(qǐng)?jiān)诳臻e時(shí)找一張圖片演練一下吧！

4.為區(qū)域添加鏈接

在<area/>標(biāo)簽中添加href屬性即可指定鏈接路徑，如下：

href="https://www.zhihu.com/question/284642168"

添加title屬性可以在鼠標(biāo)滑過鏈接區(qū)域時(shí)提示讀者，如下：

title="殲20氣動(dòng)外形分析"

今天的內(nèi)容結(jié)束了，圖像區(qū)域鏈接在使用時(shí)還有一些注意事項(xiàng)，我們下次再詳細(xì)討論。

使用碎片時(shí)間，學(xué)習(xí)完整知識(shí)！關(guān)注大魚師兄，一起精研技藝。

格

表格標(biāo)記用于顯示類似工作表的數(shù)據(jù)，這些數(shù)據(jù)以行和列的形式整齊地格式化。它們還可以用于設(shè)計(jì)頁(yè)面布局。

表格 - <table> ... </table>

table標(biāo)記用于定義表格，它包含所有行和列標(biāo)記及其內(nèi)容。表格必須始終至少有一行，有一些屬性來定義表格布局。

width="?" - 指定表格的寬度
align="?" - 指定表格的水平對(duì)齊
border="?" - 表格的邊框大小
cellspacing="?" - 單元格的間距
cellpadding="?" - 單元格內(nèi)容與邊框的空白

表格標(biāo)題 - <caption> ... </caption>

標(biāo)記caption用于定義表格的標(biāo)題。

行 - <tr> </tr>

tr標(biāo)記表示表格中的行，必須出現(xiàn)在table標(biāo)記中。

單元格 - <td> </td>

單元格是內(nèi)容所在的地方，單元格必須存在于行中，行中的單元格數(shù)決定表中的列數(shù)，使用以下屬性設(shè)置單元格屬性：

align="?" - 單元格中文本的水平對(duì)齊： left, center or right
valign="?" - 單元格中文本的垂直對(duì)齊： top, middle or bottom.
width="?" - 指定單元格的固定寬度，默認(rèn)情況下只占據(jù)內(nèi)容所需的空間
colspan="?" - 列橫跨允許單元格占據(jù)多列
rowspan="?" - 行橫跨允許單元格占據(jù)多行
nowrap - 單元格中的文本不會(huì)換行到下一行。類似于段落的nobr標(biāo)記

表頭單元格 - <th> </th>

與普通單元格類似，表頭單元格必須出現(xiàn)在行中，正常情況下位于表格第一行，瀏覽器對(duì)其進(jìn)行加粗和居中。

例子

以下是表格的示例：

TML元素的屬性

屬性是為HTML元素提供的附加信息。

為相同的HTML元素指定不同的屬性，會(huì)呈現(xiàn)不同的功能或效果。

舉個(gè)例子：

比如我們?cè)谏弦黄芯毩?xí)過的<a></a>標(biāo)簽構(gòu)成的超鏈接元素中有一個(gè)href屬性，這個(gè)屬性指定的是點(diǎn)擊后跳轉(zhuǎn)的頁(yè)面地址，相同的<a>標(biāo)簽改變href屬性就能跳轉(zhuǎn)不同的頁(yè)面。例如

<a href="https://www.bilibili.com/read/cv2720755">殲-20戰(zhàn)斗機(jī)</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml">殲-20戰(zhàn)斗機(jī)</a><!-- 注釋 看起來一樣的超鏈接元素因?yàn)閔ref屬性不同，打開的頁(yè)面也不同。-->

小伙伴們自己寫的時(shí)候要注意使用半角符號(hào)，不然不能正確打開鏈接。

超鏈接元素中還有一個(gè)控制鏈接頁(yè)面打開的屬性叫做target，是用來控制新打開頁(yè)面窗口的位置。下面我們就看看target屬性為_blank和_parent的情況下的不同。例如

<a href="https://www.bilibili.com/read/cv2720755" target="_blank">殲-20戰(zhàn)斗機(jī)</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml" target="_parent">殲-20戰(zhàn)斗機(jī)</a><!-- 注釋 看起來一樣的超鏈接元素因?yàn)閠arget屬性不同，打開的頁(yè)面所在窗口不同。-->

測(cè)試后，target="_blank"時(shí)，新頁(yè)面在測(cè)試頁(yè)面窗口旁邊新建一個(gè)窗口打開。

target="_parent"時(shí)，新頁(yè)面在原有測(cè)試頁(yè)面窗口中打開。

如圖所示：

左邊為_blank,右邊為_parent,點(diǎn)擊左邊鏈接后，新窗口在原有窗口旁邊打開。如下圖：

點(diǎn)擊右側(cè)

新頁(yè)面在原窗口處打開。

<a>標(biāo)簽的target屬性還有_self、_top這樣的屬性，感興趣的小伙伴可以自行測(cè)試。

一般HTML元素的通用屬性有：class 、id 、style 、title這四類，其中class 、id 、style這三個(gè)屬性會(huì)在CSS的講解中詳細(xì)學(xué)習(xí)。

下面我們通過練習(xí)來看看title屬性的作用。

HTML元素屬性使用練習(xí)1

NO.1: title

title屬性用于顯示元素的額外信息使用。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個(gè)網(wǎng)頁(yè)</title>
</head> 
<body>
  <h1>第一個(gè)網(wǎng)頁(yè)</h1><hr>
<a href="https://www.bilibili.com/read/cv2720755" target="_blank" title="中國(guó)最先進(jìn)戰(zhàn)斗機(jī)">殲-20戰(zhàn)斗機(jī)</a>
</body> 
</html>

效果如圖：當(dāng)鼠標(biāo)移動(dòng)到超鏈接上時(shí)，"中國(guó)最先進(jìn)戰(zhàn)斗機(jī)"的說明就出現(xiàn)在下側(cè)。

NO.2:href/src/url

這三個(gè)屬性雖然寫法不同，但都是為元素指定路徑使用的。不屬于通用屬性。

例如<a>標(biāo)簽中指定鏈接路徑使用的是href，而<img>標(biāo)簽中導(dǎo)入圖片的路徑是src，url在css中也常用來引入鏈接。具體練習(xí)大家可以翻看《HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作》一文。

這里要介紹的是關(guān)于網(wǎng)頁(yè)中的路徑的兩個(gè)重要概念：絕對(duì)路徑、相對(duì)路徑。

絕對(duì)路徑是指文件在硬盤上真正存在的路徑。

相對(duì)路徑就是相對(duì)自己的目標(biāo)文件的位置。

怎么理解這兩個(gè)概念呢？舉個(gè)例子：

如果我們要在"第一個(gè)頁(yè)面.html"中顯示一張圖片image1.jpg，它們都在我的"D盤/零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作"這個(gè)文件夾中。如圖：

如果用絕對(duì)路徑導(dǎo)入寫法是這樣的：

<img src="file:///D:/零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作/image1.jpg"/>

相對(duì)路徑這樣寫：

<img src="image1.jpg"/>

大家觀察一下，也看出了絕對(duì)路徑與相對(duì)路徑的區(qū)別了。

另外，這樣的鏈接也屬于絕對(duì)路徑：href="https://www.bilibili.com/read/cv2720755"

那么什么時(shí)候使用相對(duì)路徑什么時(shí)候使用絕對(duì)路徑呢？這個(gè)問題我會(huì)在明天深入為大家講解，這涉及到網(wǎng)頁(yè)或網(wǎng)站上傳服務(wù)器的問題。

做教程確實(shí)是沒什么人看，但是我依然會(huì)堅(jiān)持，我是一名高校教師（認(rèn)證資料等疫情結(jié)束后去辦公室拍攝上傳吧），把自己的知識(shí)寫出來對(duì)自己來說是一個(gè)提高，也把原來很多常用卻不甚了然的概念再次打磨清晰是我最大的收獲。本篇教程針對(duì)完全沒有基礎(chǔ)的網(wǎng)頁(yè)制作學(xué)習(xí)者，利用碎片時(shí)間學(xué)習(xí)，只要我們堅(jiān)持，必然可以完成網(wǎng)頁(yè)制作的學(xué)習(xí)，為未來學(xué)習(xí)更加復(fù)雜的內(nèi)容打下基礎(chǔ)！

喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

第一個(gè)HTML頁(yè)面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在線咨詢

上一篇：HTML5游戲怎么做？
下一篇：前端常用meta標(biāo)簽的作用以及全面整理

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商