Web前端開發(fā)（HTML5+CSS3+JavaScript） 課件 第3章 3.2-超鏈接 圖片熱點(diǎn)

Web前端基礎(chǔ)技術(shù)CSSJSHTML第3章3.2超鏈接、圖片熱點(diǎn)和多媒體Contents目錄超鏈接語法、路徑、分類和應(yīng)用嵌入式框架圖片熱點(diǎn)多媒體播放1.超鏈接概述按鏈接目標(biāo)分：頁面鏈接；錨點(diǎn)鏈接；空鏈接（“”和#指向當(dāng)前頁面）；下載鏈接；郵件鏈接語法格式

<ahref=“目標(biāo)URL”target=“目標(biāo)窗口”title=“提示文字”>

鏈接文本或圖片</a>屬性：href=“目標(biāo)（文件URL

|錨點(diǎn)

|

郵件）位置”屬性：target=“_self（默認(rèn)值）|_blank|_top|_parent|框架名”通用屬性title：鼠標(biāo)懸停在標(biāo)記時(shí)的提示文本，絕大多數(shù)標(biāo)記都有該屬性，例如標(biāo)題、段落、圖片等示例：鏈接到外部網(wǎng)站<h3>默認(rèn)鏈接</h3><ahref="">百度(默認(rèn)當(dāng)前窗口)</a>

<h3>設(shè)置目標(biāo)窗口</h3><ahref=""target="_blank">

百度(新窗口打開)</a>

<h3>title通用屬性</h3><ahref=""target="_self"

title="百度">

百度(當(dāng)前窗口,帶提示)</a>2.頁面鏈接-超鏈接路徑

（href值）

2.1空鏈接：指向當(dāng)前頁面目標(biāo)的完整路徑，如：/index.html[協(xié)議：//域名/文件名]/study.zip2.3√相對URL：指向當(dāng)前網(wǎng)站的頁面，相對當(dāng)前頁面位置。相對當(dāng)前頁面的目標(biāo)文件的位置，如：images/1.jpgback/admin.html可以使用相對路徑描述符來定位其他文件位置，相對路徑描述符有兩個(gè)，如： ./

表示當(dāng)前頁面文件所在的目錄，該描述符可以省略../

表示當(dāng)前頁面文件所在目錄的上一級目錄。2.2絕對URL：指向外部網(wǎng)站的頁面href=””---空字符串，單擊刷新當(dāng)前頁面

；href=”#”---單擊回到當(dāng)前頁面頂部，不刷新頁面。myweb例1：當(dāng)前頁面為index.html，創(chuàng)建鏈接，鏈接到login.html和main.html，每個(gè)頁面創(chuàng)建返回鏈接網(wǎng)站目錄結(jié)構(gòu)示例:相對路徑應(yīng)用(a)myweb例2：當(dāng)前頁面為login.html，鏈接到main.html,并在main.html頁面顯示圖片1.jpg。網(wǎng)站目錄結(jié)構(gòu)示例:相對路徑應(yīng)用(b)例3：當(dāng)前頁面login.html，在該頁面顯示圖片1.jpg，并單擊圖片時(shí)，在新窗口打開圖片網(wǎng)站目錄結(jié)構(gòu)示例:相對路徑應(yīng)用(c)myweb3.超鏈接的其他應(yīng)用3.1使用鏈接下載文件<ahref=“down/1.zip”>下載</a>

txt/html/image/pdf(直接打開)|docx、xlsx、zip(下載提示)3.2圖片鏈接<ahref=“images/1.jpg”target=“_blank”>

<imgsrc=“images/1.jpg”width=“100px”height=“100px”></a>3.3發(fā)送電子郵件(了解)<ahref=“mailto:191085153@qq.com?subject=問候！

&body=大家好!&cc=111@;222@

&bcc=333@”>

聯(lián)系我們</a>練習(xí):單擊鏈接實(shí)現(xiàn)文件下載<ahref="1.rar">點(diǎn)擊這里下載文件</a><br/><ahref="1.rar"><imgsrc=“images/1.jpg"title="點(diǎn)擊這里下載文件"width="100px"height="100px"/></a>3.4創(chuàng)建頁面錨點(diǎn)鏈接<

aname=“錨點(diǎn)名”>文本內(nèi)容</a>步驟1:創(chuàng)建錨點(diǎn)，即要跳轉(zhuǎn)到的位置(位置標(biāo)識)步驟2:創(chuàng)建指向錨點(diǎn)的鏈接，單擊時(shí)跳轉(zhuǎn)到錨點(diǎn)位置<

ahref=“#錨點(diǎn)名”>文本內(nèi)容</a>

其他：如果要跳轉(zhuǎn)到其他頁面的錨點(diǎn)位置，使用URL#錨點(diǎn)名<

ahref=“目標(biāo)頁面#錨點(diǎn)名”>文本內(nèi)容</a>素材WEB前端基礎(chǔ)目錄HTML介紹CSS介紹JavaScript介紹HTML介紹HTML的全稱為超文本標(biāo)記語言，是一種標(biāo)記語言。它包括一系列標(biāo)簽，通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等.返回目錄

CSS介紹層疊樣式表(英文全稱：CascadingStyleSheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。CSS能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。返回目錄

JavaScript介紹JavaScript（簡稱“JS”）是一種具有函數(shù)優(yōu)先的輕量級，解釋型或即時(shí)編譯型的編程語言。雖然它是作為開發(fā)Web頁面的腳本語言而出名，但是它也被用到了很多非瀏覽器環(huán)境中，JavaScript基于原型編程、多范式的動(dòng)態(tài)腳本語言，并且支持面向?qū)ο?、命令式、聲明式、函?shù)式編程范式。返回目錄示例:錨點(diǎn)鏈接的使用注意：只有頁面內(nèi)容超出瀏覽器可視范圍時(shí)，錨點(diǎn)鏈接才起效

其他屬性（了解）：frameborder=“數(shù)字”；scrolling=“yes|no”;width/height；marginwidth=“左右邊距(像素)”；marginheight=“上下邊距”嵌入式框架iframe(子窗口)基本語法<iframesrc=“初始頁面”name=“框架名”其他可選屬性>

你的瀏覽器不支持框架，無法看到內(nèi)容</iframe>4.嵌入式框架iframe在一個(gè)頁面包含其他的頁面，實(shí)現(xiàn)當(dāng)前頁面局部更新-增強(qiáng)用戶體驗(yàn)注意：使用name屬性，使用id無效示例

假如有三個(gè)頁面：index.html、login.html和reg.html，其中index.html頁面中包含一個(gè)名稱為“main”、無邊框、寬度和高度為200*100且?guī)L動(dòng)條的嵌入框架，默認(rèn)顯示login.html。請?jiān)趇ndex.html中創(chuàng)建兩個(gè)鏈接，分別在浮動(dòng)框架中打開login.html和reg.html。無邊框示例（了解）：鏈接a屬性target的其他取值的例子:_parent和_toptarget=“_self（默認(rèn)值）|_blank|_top|_parent|框架名”5.圖片熱點(diǎn)

單擊圖片不同區(qū)域，能夠跳轉(zhuǎn)到不同的目標(biāo)頁面。用法，分兩步：（1）顯示圖片，指定熱點(diǎn)區(qū)域名稱<imgsrc=”圖片URL”usemap=”#熱點(diǎn)區(qū)域名”/>（2）定義圖片熱點(diǎn)區(qū)域<mapname="熱點(diǎn)區(qū)域名"><areashape="形狀1"coords="坐標(biāo)值"href="目標(biāo)頁面URL"/><areashape="形狀2"coords="坐標(biāo)值"href="目標(biāo)頁面URL"/>

<!--...以下可以繼續(xù)創(chuàng)建多個(gè)區(qū)域，重復(fù)上述內(nèi)容...--></map><mapname="熱點(diǎn)區(qū)域名"><areashape="形狀1"coords="坐標(biāo)值"href="目標(biāo)頁面URL"/><areashape="形狀2"coords="坐標(biāo)值"href="目標(biāo)頁面URL"/>

<!--...以下可以繼續(xù)創(chuàng)建多個(gè)區(qū)域，重復(fù)上述內(nèi)容...--></map>說明：nmap標(biāo)記：表示這是圖片對應(yīng)的熱點(diǎn)區(qū)域，name為該區(qū)域唯一名稱。narea標(biāo)記：map的子標(biāo)記，創(chuàng)建一個(gè)指定形狀的熱點(diǎn)區(qū)域。area標(biāo)記包含以下屬性：①shape屬性：設(shè)置熱點(diǎn)區(qū)域形狀，取值為：rect（矩形）、circle（圓）和poly（多邊形）。②coords：對應(yīng)熱點(diǎn)形狀的坐標(biāo)值，如果shape取值是rect，那么取左上角和右下角的坐標(biāo)(x,y)，使用逗號連接起來作為coords值；如果是shape取值是circle，那么取值為圓心坐標(biāo)和半徑值；如果shape取值為poly，那么取多邊形各個(gè)特征點(diǎn)的坐標(biāo)值。注意coords每個(gè)取值都使用逗號分隔，且每個(gè)坐標(biāo)值都是相對圖片左上角為(0,0)距離?？梢越柚鶳S，或者Window中的畫圖程序來獲取坐標(biāo)點(diǎn)。③href屬性：熱點(diǎn)區(qū)域?qū)?yīng)的目標(biāo)頁面位置。④title屬性：鼠標(biāo)懸停在熱點(diǎn)區(qū)域時(shí)顯示的提示信息。例6假如我們有一張劃分了三個(gè)區(qū)域的圖，如圖所示。在單擊矩形區(qū)域、圓形區(qū)域和多邊形區(qū)域時(shí)，分別打開目標(biāo)頁面1.html、2.html和3.html。<imgsrc="hot.png"usemap="#mypic"/><mapname="mypic"><areashape="rect"

coords="29,46,79,83"href="1.html"/><areashape="circle"

coords="181,39,25"href="2.html"/><areashape="poly"

coords="147,95,157,120,177,119,165,144,107,130"href="3.html"/></map>6.音視頻播放如果要在頁面中播放視頻或音頻，可以使用HTML5中的新標(biāo)記video和audio。<videosrc="視頻文件"其他可選屬性>

你的瀏覽器不支持video標(biāo)記</video>（1）視頻播放videonsrc屬性：視頻文件URL，可支持的視頻格式類型有MP4、WebM和Ogg三種。目前主流瀏覽器均支持該三種視頻格式文件的播放。n其他可選屬性包括：①controls：單屬性，表示是否顯示播放器的控制面板（比如播放/暫停按鈕）。如果要顯示，則添加該屬性，否則不要添加。所有的單屬性用法都相同，即需要該功能時(shí)才加上。②autoplay：單屬性，表示是否自動(dòng)播放。③width：視頻界面寬度。④height：視頻界面高度。⑤preload：單屬性，是否預(yù)加載視頻。如果需要打開頁面的同時(shí)加載視頻，則加上該屬性；但如果添加了autoplay屬性，那么該屬性無效。⑥muted：單屬性，表示是否靜音播放視頻。⑦poster：視頻封面圖片的URL。⑧l(xiāng)oop：單屬性，是否循環(huán)播放。<videosrc="huwei_Mate_60.mp4"poster="huwei_Mate_60.png"width="400px"height="300px"controlsmutedloop>

你的瀏覽器不支持video</video>（2）音頻播放audio<audiosrc="音頻文件URL"其他可選屬性>

你的瀏覽器不支持Audio標(biāo)記</auido>nsrc屬性：音頻文件URL。n其他屬性：①controls：單屬性，是否顯示播放器的控制面板，如果使用該屬性，則向用戶顯示音頻控件（比如播放/暫停按鈕），如果不使用該屬性，那么頁面將隱藏播放界面，實(shí)現(xiàn)背景聲音或背景音樂播放。②autoplay：單屬性，如果使用該屬性，則音頻在就緒后馬上播放。③muted：單屬性，如果使用該屬性，則音頻靜音播放。④loop：單屬性，音頻是否循環(huán)播放。⑤preload：網(wǎng)頁加載時(shí)，視頻是否同時(shí)加載。<audiosrc="./1.mp3"controlsautoplayloop>

你的瀏覽器不支持audio</audio>練一練練習(xí)：根據(jù)給出的素材，實(shí)現(xiàn)如下圖所示的書簽效果。目錄<!--1.3號文字標(biāo)題--><!--2.橫線--><!--3.下面為無序列表鏈接-->

登鸛雀樓尋隱者不遇樂游原夜雨寄北赤壁

<!--4.每首詩名為錨點(diǎn)，目錄鏈接到該錨點(diǎn)-->

登鸛雀樓

唐代王之渙<!--換行-->

白日依山盡，黃河入海流。<!--換行-->

欲窮千里目，更上一層樓。<!--換行-->

返回<!--5.返回頂端目錄-->

<!--6.下面要求同要求4,5-->

尋隱者不遇唐代賈島松下問童子，言師采藥去。只在此山中，云深不知處。返回樂游原唐代李商隱向晚意不適，驅(qū)車登古原。夕陽無限好，只是近黃昏。返回

夜雨寄北唐代李商隱君問歸期未有期，巴山夜雨漲秋池。何當(dāng)共剪西窗燭，卻話巴山夜雨時(shí)。返回

赤壁唐代杜牧折戟沉沙鐵未銷，自將磨洗認(rèn)前朝。東風(fēng)不與周郎便，銅雀春深鎖二喬。返回練習(xí)：單擊圖片不同的位置，在新頁面打開不同的頁面。圖片1：/100049728367.html圖片2：/100024857649.html圖片3：/100032253085.html圖片4：/100047139640.html5.1超鏈接一、填空1.按目標(biāo)類型分，超鏈接可以分為：_______、_______、________、_______和________。2.按鏈接內(nèi)容分，超鏈接可以分為______和_______。3.超鏈接的target屬性取值可以有_____、_____、______、______和______。4.超鏈接路徑中的./表示____________，../表示__________________。

二、判斷1.超鏈接的相對路徑一般應(yīng)用于指向本網(wǎng)站的其他頁面（√）。2.超鏈接的絕對路徑一般應(yīng)用于指向外部網(wǎng)站的頁面（√）3.空鏈接指向當(dāng)前頁面（√）。4.可以使用超鏈接實(shí)現(xiàn)文件下載功能（√）。5.郵件鏈接可以直接發(fā)送郵件（×）。6.錨點(diǎn)鏈接只能跳轉(zhuǎn)到當(dāng)前頁面的錨點(diǎn)位置（×）。7.錨點(diǎn)鏈接可以跳轉(zhuǎn)到外部網(wǎng)站頁面的錨點(diǎn)位置（√）。8.當(dāng)鏈接屬性href取值為#時(shí)，可以實(shí)現(xiàn)跳轉(zhuǎn)到頁面頂部功能（√）。9.超鏈接路徑中的./表示當(dāng)前頁面所在的目錄，可以省略（√）。10.如果要在一個(gè)頁面包含其他頁面的內(nèi)容，可以使用嵌入式iframe（√）。11.嵌入式框架iframe可以實(shí)現(xiàn)頁面局部刷新的功能（√）。

5.2圖片熱點(diǎn)一、填空1.圖片熱點(diǎn)區(qū)域的形狀可以有______、______和_______。2.假如shape=rectcoords=20,80,40,100，那么20,80表示______，40，100表示______。3.假如有shape=circlecoords=20,40,12，那么20,40表示______，12表示______