首先我們看看效果:
實(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)注大魚師兄,一起精研技藝。
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è)制作
表格標(biāo)記用于顯示類似工作表的數(shù)據(jù),這些數(shù)據(jù)以行和列的形式整齊地格式化。它們還可以用于設(shè)計(jì)頁(yè)面布局。
table標(biāo)記用于定義表格,它包含所有行和列標(biāo)記及其內(nèi)容。表格必須始終至少有一行,有一些屬性來定義表格布局。
標(biāo)記caption用于定義表格的標(biāo)題。
tr標(biāo)記表示表格中的行,必須出現(xiàn)在table標(biāo)記中。
單元格是內(nèi)容所在的地方,單元格必須存在于行中,行中的單元格數(shù)決定表中的列數(shù),使用以下屬性設(shè)置單元格屬性:
與普通單元格類似,表頭單元格必須出現(xiàn)在行中,正常情況下位于表格第一行,瀏覽器對(duì)其進(jìn)行加粗和居中。
以下是表格的示例:
屬性是為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í)目的、對(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è)制作
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。