整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
首先我們看看效果：
實現這樣的功能需要學習以下幾點內容。
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>標簽實現文本內鏈接——零基礎自學網頁制作
表格標記用于顯示類似工作表的數據，這些數據以行和列的形式整齊地格式化。它們還可以用于設計頁面布局。
table標記用于定義表格，它包含所有行和列標記及其內容。表格必須始終至少有一行，有一些屬性來定義表格布局。
標記caption用于定義表格的標題。
tr標記表示表格中的行，必須出現在table標記中。
單元格是內容所在的地方，單元格必須存在于行中，行中的單元格數決定表中的列數，使用以下屬性設置單元格屬性：
與普通單元格類似，表頭單元格必須出現在行中，正常情況下位于表格第一行，瀏覽器對其進行加粗和居中。
以下是表格的示例：
屬性是為HTML元素提供的附加信息。
為相同的HTML元素指定不同的屬性，會呈現不同的功能或效果。
舉個例子：
比如我們在上一篇中練習過的<a></a>標簽構成的超鏈接元素中有一個href屬性，這個屬性指定的是點擊后跳轉的頁面地址，相同的<a>標簽改變href屬性就能跳轉不同的頁面。例如
<a href="https://www.bilibili.com/read/cv2720755">殲-20戰斗機</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml">殲-20戰斗機</a><!-- 注釋 看起來一樣的超鏈接元素因為href屬性不同，打開的頁面也不同。-->小伙伴們自己寫的時候要注意使用半角符號，不然不能正確打開鏈接。
超鏈接元素中還有一個控制鏈接頁面打開的屬性叫做target，是用來控制新打開頁面窗口的位置。下面我們就看看target屬性為_blank和_parent的情況下的不同。例如
<a href="https://www.bilibili.com/read/cv2720755" target="_blank">殲-20戰斗機</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml" target="_parent">殲-20戰斗機</a><!-- 注釋 看起來一樣的超鏈接元素因為target屬性不同，打開的頁面所在窗口不同。-->測試后，target="_blank"時，新頁面在測試頁面窗口旁邊新建一個窗口打開。
target="_parent"時，新頁面在原有測試頁面窗口中打開。
如圖所示：
左邊為_blank,右邊為_parent,點擊左邊鏈接后，新窗口在原有窗口旁邊打開。如下圖：
點擊右側
新頁面在原窗口處打開。
<a>標簽的target屬性還有_self、_top這樣的屬性，感興趣的小伙伴可以自行測試。
一般HTML元素的通用屬性有：class 、id 、style 、title這四類，其中class 、id 、style這三個屬性會在CSS的講解中詳細學習。
下面我們通過練習來看看title屬性的作用。
HTML元素屬性使用練習1
NO.1: title
title屬性用于顯示元素的額外信息使用。示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<a href="https://www.bilibili.com/read/cv2720755" target="_blank" title="中國最先進戰斗機">殲-20戰斗機</a>
</body>
</html>效果如圖：當鼠標移動到超鏈接上時，"中國最先進戰斗機"的說明就出現在下側。
NO.2:href/src/url
這三個屬性雖然寫法不同，但都是為元素指定路徑使用的。不屬于通用屬性。
例如<a>標簽中指定鏈接路徑使用的是href，而<img>標簽中導入圖片的路徑是src，url在css中也常用來引入鏈接。具體練習大家可以翻看《HTML中的元素使用方法2——零基礎自學網頁制作》一文。
這里要介紹的是關于網頁中的路徑的兩個重要概念：絕對路徑、相對路徑。
絕對路徑是指文件在硬盤上真正存在的路徑。
相對路徑就是相對自己的目標文件的位置。
怎么理解這兩個概念呢？舉個例子：
如果我們要在"第一個頁面.html"中顯示一張圖片image1.jpg，它們都在我的"D盤/零基礎自學網頁制作"這個文件夾中。如圖：
如果用絕對路徑導入寫法是這樣的：
<img src="file:///D:/零基礎自學網頁制作/image1.jpg"/>相對路徑這樣寫：
<img src="image1.jpg"/>大家觀察一下，也看出了絕對路徑與相對路徑的區別了。
另外，這樣的鏈接也屬于絕對路徑：href="https://www.bilibili.com/read/cv2720755"
那么什么時候使用相對路徑什么時候使用絕對路徑呢？這個問題我會在明天深入為大家講解，這涉及到網頁或網站上傳服務器的問題。
做教程確實是沒什么人看，但是我依然會堅持，我是一名高校教師（認證資料等疫情結束后去辦公室拍攝上傳吧），把自己的知識寫出來對自己來說是一個提高，也把原來很多常用卻不甚了然的概念再次打磨清晰是我最大的收獲。本篇教程針對完全沒有基礎的網頁制作學習者，利用碎片時間學習，只要我們堅持，必然可以完成網頁制作的學習，為未來學習更加復雜的內容打下基礎！
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
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>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
