這節(jié)課，我們學(xué)習(xí)一些實(shí)用性的標(biāo)簽，使用它們實(shí)現(xiàn)一些特殊的效果和功能。

　　我們先來學(xué)習(xí) hr 標(biāo)簽。

　　hr 是個(gè)單標(biāo)簽，基本語法為：尖角號(hào) hr  (<hr>)。hr 是 horizontal [?h?r??z?ntl]  rule 的簡寫，表示“水平線”，作用是在網(wǎng)頁上畫出一條水平分隔線，可以在視覺上將文檔分隔成多個(gè)部分。 

　　hr 水平線標(biāo)簽還有五個(gè)重要的屬性：

　　width 和 size 屬性，分別控制水平線的寬度和高度，如果沒有添加該屬性，默認(rèn)水平線的寬度是橫跨整個(gè)屏幕，高度為 2px。

　　noshade[?e?d] 屬性，是沒有影子的意思，用來去掉水平線陰影。

　　color 屬性，用于定義水平線的顏色。

　　align 屬性，用來調(diào)整水平線水平對(duì)其方式，使用該屬性的前提是，水平線需要有寬度，默認(rèn)對(duì)其方式為水平居中對(duì)齊。

　　打開編輯器，新建一個(gè) other-elements.html 頁面，補(bǔ)全基礎(chǔ)代碼，在 body 里面添加文本 “窗前明月光，疑是地上霜。” 回車換行。

　　添加一個(gè) hr 標(biāo)簽，回車換行。

　　再添加一句文本 “舉頭望明月，低頭思故鄉(xiāng)。”

　　再給 hr 定義屬性 width 等于300px，size 等于 10px，align 等于 left。保存頁面。

　　在瀏覽器中打開頁面，兩行文本被一條水平線分隔，水平線也有了寬度高度，并靠左對(duì)齊。

　　返回編輯器，再給 hr 定義 noshade 屬性，它定義了純色的水平線，陰影效果會(huì)消失。再定義一個(gè) color 屬性，值為 red。保存。

　　返回瀏覽器，刷新，一個(gè)紅色、有寬高樣式、的水平線效果就實(shí)現(xiàn)了。

　　接下來，我們學(xué)習(xí) pre 標(biāo)簽。

　　它是一個(gè)雙標(biāo)簽，基本語法為：尖角號(hào)pre，尖角號(hào) /pre (

)。pre 是preformatted[?f??mæt?d] 的簡寫，表示“預(yù)格式化的文本”。

　　pre 元素里的文本以固定寬度的字體顯示，并且文本保留了空格和換行。文本將完全按照HTML源代碼中的內(nèi)容顯示。

　　回到編輯器，在詩句結(jié)尾處添加一個(gè) br 換行，

　　再添加一個(gè) pre 標(biāo)簽，內(nèi)部寫入：“窗前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)”，在每一個(gè)標(biāo)點(diǎn)符號(hào)后面敲擊回車。保存。

　　回到瀏覽器，刷新。這首詩很整齊的顯示了，保留了 pre 標(biāo)簽內(nèi)部的空格和換行。

　　最后，我們學(xué)習(xí) map 標(biāo)簽。

　　map 標(biāo)簽用來定義一個(gè)圖像映射。圖像映射就是一個(gè)圖片的熱點(diǎn)鏈接，點(diǎn)擊圖片不同區(qū)域，實(shí)現(xiàn)鏈接頁面的跳轉(zhuǎn)。map 是一個(gè)雙標(biāo)簽，基本語法為尖角號(hào) map，尖角號(hào) /map。

　　它有一個(gè)必需定義的屬性 name，這個(gè)屬性要與 img 標(biāo)簽的 usemap 屬性相關(guān)聯(lián)，在圖像和地圖之間創(chuàng)建關(guān)系。

　　在 map 標(biāo)簽里,定義 area 子標(biāo)簽，用于定義圖片上的熱點(diǎn)區(qū)域，實(shí)現(xiàn)相應(yīng)區(qū)域的目標(biāo)跳轉(zhuǎn)。通過 area 標(biāo)簽可以設(shè)置熱點(diǎn)區(qū)域的位置、大小及形狀。

　　area 是一個(gè)雙標(biāo)簽，語法格式為：尖角號(hào)area，尖角號(hào) /area。

　　它有三個(gè)重要屬性：

　　href 屬性，用來定義熱點(diǎn)區(qū)域鏈接的目標(biāo)地址。互聯(lián)網(wǎng)和本地的  網(wǎng)頁及圖片地址都可以。

　　shape 屬性，用來定義區(qū)域的形狀。取值分別是：

　　default：圖片的所有區(qū)域都是熱點(diǎn)鏈接。

　　rect：定義熱點(diǎn)區(qū)域?yàn)榫匦巍?/p>

　　circle：定義熱點(diǎn)區(qū)域?yàn)閳A形。

　　poly：定義熱點(diǎn)區(qū)域?yàn)槎噙呅巍?/p>

　　coords 扣兒s 屬性， 用來定義可點(diǎn)擊區(qū)域的坐標(biāo)。需要與 shape 屬性配合使用，使用的方法是：

　　首先，定義一個(gè)圓：shape 屬性的值為 "circle"，coords 屬性的值為 x y r "x,y,r" ，這里的 x 和 y 定義了圓心的坐標(biāo)，r 定義了圓形半徑，值都是數(shù)字。

　　這里你一定會(huì)問，坐標(biāo)系的原點(diǎn)在哪里?這個(gè)原點(diǎn)，也就是 0 0 點(diǎn)，位于圖像的左上角。大家也發(fā)現(xiàn)了，這里的 y 軸與我們熟知的數(shù)學(xué)直角坐標(biāo)系的y軸是相反的。

　　其次，定義一個(gè)多邊形：shape 屬性的值為 "poly"，coords 屬性值為 x1 y1 x2 y2 x3 y3 (停頓600毫秒)  xn yn， (x1.y1.x2.y2.x3.y3...xn,yn)  每一對(duì) x y  "x, y"  坐標(biāo)都定義了多邊形的一個(gè)頂點(diǎn)。多個(gè)坐標(biāo)組成了多邊形，多邊形會(huì)自動(dòng)封閉，因此，在坐標(biāo)序列的結(jié)尾，不需要重復(fù)定義第一個(gè)坐標(biāo)來閉合整個(gè)區(qū)域。

　　最后，定義一個(gè)矩形：shape 屬性的值為 "rect"，coords 屬性值為 x1 y1 x2 y2. "x1. y1.x2.y2"  第一個(gè)坐標(biāo)是矩形的一個(gè)角的頂點(diǎn)坐標(biāo)，另一對(duì)坐標(biāo)是對(duì)角的頂點(diǎn)坐標(biāo)。定義矩形實(shí)際上是定義帶有四個(gè)頂點(diǎn)的多邊形的一種簡化方法。

　　我們一起來實(shí)現(xiàn)一個(gè)熱點(diǎn)鏈接圖片，當(dāng)點(diǎn)擊圖片上面的不同星球，能將對(duì)應(yīng)的星球放大，來查看細(xì)節(jié)。

　　打開編輯器，新建一個(gè) map_area.html 文件，補(bǔ)全基礎(chǔ)代碼，在 body 里添加 img 標(biāo)簽，設(shè)置src 等于 “planets.jpg” ， 在頁面中插入可點(diǎn)擊的大圖。

　　繼續(xù)添加一個(gè) map 標(biāo)簽，定義屬性 name 等于 "planetmap"。

　　再給 img 標(biāo)簽設(shè)置 usemap 屬性，值等于 #planetmap "#planetmap"。

　　這個(gè)值和 map 標(biāo)簽的 name 屬性值相對(duì)應(yīng)，但要注意這里需要添加 #，表示這個(gè)圖片要應(yīng)用哪個(gè)圖像映射的定義。

　　在 map 標(biāo)簽內(nèi)添加 area 子標(biāo)簽，用于設(shè)置當(dāng)鼠標(biāo)點(diǎn)擊太陽的時(shí)候，顯示太陽的圖片。定義屬性 shape 等于 rect，coords 等于 “0.0.110.260”，href 等于 “images/sun.gif”。

　　再添加一個(gè) area 標(biāo)簽，用于鼠標(biāo)點(diǎn)擊水星的時(shí)候顯示對(duì)應(yīng)的大圖。定義屬性 shape 等于 circle，coords 等于 “129.161.10”，href 等于 “images/mercury.gif”。

　　再添加一個(gè) area 標(biāo)簽，用于鼠標(biāo)點(diǎn)擊金星的時(shí)候顯示對(duì)應(yīng)的大圖。定義 屬性 shape 等于circle，coords 等于 “180.139.14”，href 等于 “images/venus.gif”[?vi?n?s] 巍呢思。

　　保存文件。

　　在瀏覽器中打開頁面，鼠標(biāo)圖片的熱點(diǎn)區(qū)域，能清楚的看到鼠標(biāo)指針變成小手的形狀，點(diǎn)擊對(duì)應(yīng)的星球，跳轉(zhuǎn)實(shí)現(xiàn)了!

　　實(shí)用的 hr，pre，map 標(biāo)簽就介紹完了，大家快動(dòng)手試試吧!

上一篇

矩形、圓形和橢圓形

下一篇

帶你細(xì)致學(xué)習(xí)Docker網(wǎng)絡(luò) - bridge模式