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

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          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)注大魚師兄,一起精研技藝。

          目錄

          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> ... </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è)制作


          主站蜘蛛池模板: 亚洲av无码片区一区二区三区| 亚洲中文字幕在线无码一区二区| 精品国产日韩亚洲一区| 国产一区高清视频| 日本在线视频一区| 日韩一区二区三区在线观看| 亚洲AⅤ无码一区二区三区在线 | 成人欧美一区二区三区在线视频| 日韩在线视频不卡一区二区三区 | 精品一区二区三区中文| 国产一在线精品一区在线观看| 亚洲AV日韩AV天堂一区二区三区 | 日本韩国黄色一区二区三区 | 香蕉免费看一区二区三区| 极品尤物一区二区三区| 中文字幕一区二区三区视频在线| 91精品一区二区综合在线 | 精品人妻系列无码一区二区三区| 波多野结衣中文字幕一区| 久久久久人妻精品一区| 国产无码一区二区在线| 精品人妻一区二区三区浪潮在线| 亚洲国产专区一区| 夜精品a一区二区三区| 人妻夜夜爽天天爽一区| 成人丝袜激情一区二区| 精品国产免费观看一区 | 久久久av波多野一区二区| 国产亚洲综合一区柠檬导航| 亲子乱AV视频一区二区| 国产精品视频一区二区三区无码 | 亚洲国产欧美日韩精品一区二区三区| 99久久精品国产一区二区成人 | 在线视频一区二区三区三区不卡| 久久精品国产一区二区三区| 一本大道东京热无码一区| 无码人妻精品一区二区三区在线| 无码人妻视频一区二区三区| 97se色综合一区二区二区| 在线观看视频一区二区| 人成精品视频三区二区一区 |