超鏈接元素
超鏈接為Web頁(yè)面提供了互相跳轉(zhuǎn)的功能百炬，用戶在瀏覽一個(gè)網(wǎng)頁(yè)的時(shí)候可以通過(guò)超鏈接跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，以獲取更多的信息侦副。實(shí)際上大部分的Web頁(yè)面就是靠超鏈接技術(shù)聯(lián)系在一起的侦锯，網(wǎng)站也要靠超鏈接技術(shù)引導(dǎo)用戶瀏覽。
1.超鏈接的基本用法
超鏈接的HTML元素為<a>,通過(guò)元素的href屬性指定跳轉(zhuǎn)的地址秦驯。在同一個(gè)目錄下分別創(chuàng)建HTML文件02_1_1.html與02_1_2.html,代碼如下：
例02_1_1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8">
<title>第一個(gè)頁(yè)面</title>
</head>
<body>
<a href="02_1_2.html">跳轉(zhuǎn)到第二個(gè)界面</a>
</body>
<html>
例02_1_2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>第二個(gè)頁(yè)面</title>
</head>
<body>
<p>單擊<a href="02_1_2.html">這里</a>跳轉(zhuǎn)到第二個(gè)頁(yè)面</p>
</body>
<html>
瀏覽器會(huì)將<a>元素中的內(nèi)容顯示為帶下劃線的藍(lán)色文本尺碰，單擊后頁(yè)面會(huì)進(jìn)行跳轉(zhuǎn)，如果跳轉(zhuǎn)的頁(yè)面地址不正確译隘，瀏覽器會(huì)提供一個(gè)錯(cuò)誤頁(yè)面亲桥。單擊過(guò)的超鏈接默認(rèn)以紫色顯示。
2.相對(duì)路徑與絕對(duì)路徑
使用href屬性引用其他頁(yè)面時(shí)可以通過(guò)相對(duì)路徑或絕對(duì)路徑指定固耘，相對(duì)路徑指以當(dāng)前文件所在位置為參考點(diǎn)而建立的路徑题篷，而絕對(duì)路徑指以硬盤(pán)跟目錄或站點(diǎn)根目錄為參考點(diǎn)而建立的路徑。一般而言厅目，在引用其他文件時(shí)建議使用相對(duì)路徑番枚，這樣當(dāng)站點(diǎn)的目錄或域名更改時(shí)不用修改鏈接地址。
3.超鏈接的target屬性
超鏈接元素中提供了target屬性以指定目標(biāo)頁(yè)面的打開(kāi)窗口损敷，默認(rèn)情況下在本瀏覽器窗口打開(kāi)葫笼，可以通過(guò)更改target屬性實(shí)現(xiàn)在新窗口中打開(kāi)頁(yè)面等效果。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8">
<title>在新窗口中打開(kāi)頁(yè)面</title>
</head>
<body>
<p>點(diǎn)擊<a href="02_1_1.html" target="_blank">這里</a></>
</body>
</html>
上面的代碼在執(zhí)行后單擊超鏈接拗馒，會(huì)彈出新窗口打開(kāi)目標(biāo)頁(yè)面（如果瀏覽器支持標(biāo)簽瀏覽路星，也可能會(huì)在新的標(biāo)簽頁(yè)中打開(kāi)目標(biāo)頁(yè)面）。target屬性的有效值如表2-2所示诱桂。
_blank 在新的瀏覽器窗口（或新的瀏覽器標(biāo)簽頁(yè)）中打開(kāi)目標(biāo)頁(yè)面
_self 默認(rèn)行為洋丐，在原瀏覽器窗口中打開(kāi)目標(biāo)頁(yè)面
_parent 在父窗口中打開(kāi)目標(biāo)頁(yè)面
_top 在頂級(jí)窗口中打開(kāi)目標(biāo)頁(yè)面
其他值 如果target屬性為其他值呈昔，意味在該值的窗口中打開(kāi)目標(biāo)頁(yè)面。如果沒(méi)有同名窗口友绝，則新建一個(gè)窗口堤尾，并以target值命名此窗口，然后打開(kāi)目標(biāo)頁(yè)面九榔；如果有同名窗口哀峻，則直接在此窗口中打開(kāi)目標(biāo)頁(yè)面。
4.錨鏈接
錨鏈接用于跳轉(zhuǎn)到網(wǎng)頁(yè)的指定部分哲泊，這對(duì)于篇幅較長(zhǎng)的網(wǎng)頁(yè)尤其有用剩蟀。很多網(wǎng)站的FAQ都會(huì)使用錨鏈接技術(shù)制作。
制作錨鏈接需要通過(guò)<a name="xx"/>的形式為錨命名切威，并通過(guò)<a href="#xx">的形式跳轉(zhuǎn)到對(duì)應(yīng)的錨育特。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>FAQ</title>
</head>
<body>
<a name="top"/>
<h1 align="center">常見(jiàn)問(wèn)題解答</h1>
<p><font size="5">問(wèn)：</font><a href="#faq1">我的手機(jī)無(wú)法充電了</a></p>
<p><font size="5">問(wèn)：</font><a href="#faq2">手機(jī)有時(shí)候沒(méi)有信號(hào)是怎么回事？</a></p>
<p><font size="5">問(wèn)：</font><a href="#faq3">來(lái)電時(shí)鈴聲很小先朦，經(jīng)常漏接電話怎么辦缰冤？</a></p>
<p><font size="5">問(wèn)：</font><a href="#faq4">GPS經(jīng)常提示無(wú)法定位您的位置</a></p>
<p><font size="5">問(wèn)：</font><a href="#faq5">只能接收短信不能發(fā)送短信是怎回事兒啊</a></p>
<a name="faq1"/>
<p>
<font size="5" color="red">回答：</font>
您好，如果您的手機(jī)經(jīng)常出現(xiàn)無(wú)法充電的情況喳魏，可能是由于以下原因引起的：
<br>1.您使用的電源電壓不足棉浸，請(qǐng)更改220V的電源
<br>2.您是否使用了非原裝的充電器？只有原裝的充電器才能保證正常使用刺彩。
<br>3.您是否使用了非原裝的電池迷郑？只有原裝的電池才能保證正常使用。
<br>4.檢查充電器的線纜是否被損壞创倔。
</p>
<p align="right">[↑<a href="#top">返回頂部</a>]</p>
<a name="faq2"/>
<p>
<font size="5" color="red">回答：</font>
您好嗡害，如果您的手機(jī)經(jīng)常出現(xiàn)沒(méi)有信號(hào)的情況，可能是由于以下原因引起的：
<br>1.您的位置是否是高樓的內(nèi)部畦攘？高樓會(huì)影響信號(hào)傳輸
<br>2.請(qǐng)確認(rèn)移動(dòng)網(wǎng)絡(luò)覆蓋了您所在的區(qū)域霸妹。
<br>3.請(qǐng)確認(rèn)您的手機(jī)不是處于飛行模式。
<br>4.請(qǐng)確認(rèn)您的手機(jī)沒(méi)有欠費(fèi)停機(jī)知押。
</p>
<p align="right">[↑<a href="#top">返回頂部</a>]</p>
<a name="faq3"/>
<p>
<font size="5" color="red">回答：</font>
您好叹螟，您的手機(jī)來(lái)電鈴聲太小，可能是由于以下原因引起的：
<br>1.您使用的鈴聲本身音量就很小朗徊，請(qǐng)更改您的來(lái)電鈴聲首妖。
<br>2.請(qǐng)檢查手機(jī)的揚(yáng)聲器沒(méi)有被雜物堵塞。
<br>3.如果手機(jī)離您太遠(yuǎn)爷恳，也會(huì)導(dǎo)致沒(méi)聽(tīng)到鈴聲，請(qǐng)將手機(jī)放近點(diǎn)象踊。
</p>
<p align="right">[↑<a href="#top">返回頂部</a>]</p>
<a name="faq4"/>
<p>
<font size="5" color="red">回答：</font>
您好温亲，您的手機(jī)出現(xiàn)無(wú)法定位的情況棚壁，可能是由于以下原因引起的：
<br>1.請(qǐng)確認(rèn)您的手機(jī)型號(hào)，是否包含GPS模塊栈虚。
<br>2.遇到陰雨天氣袖外，GPS信號(hào)減弱是正常信號(hào)，請(qǐng)耐心等待天晴魂务。
<br>3.在高大建筑物旁或橋下曼验，都無(wú)法接收GPS信號(hào)。
<br>4.使用A-GPS模塊的用戶請(qǐng)確認(rèn)手機(jī)開(kāi)通了GPRS粘姜。
</p>
<p align="right">[↑<a href="#top">返回頂部</a>]</p>
<a name="faq5"/>
<p>
<font size="5" color="red">回答：</font>
您好鬓照，如果您的手機(jī)經(jīng)常出現(xiàn)無(wú)法發(fā)送短信的情況，可能是由于以下原因引起的：
<br>1.請(qǐng)確認(rèn)您沒(méi)有欠費(fèi)停機(jī)孤紧。
<br>2.如果您之前發(fā)送了大量短信豺裆，可能會(huì)被運(yùn)營(yíng)商暫停短信發(fā)送功能。
<br>3.請(qǐng)確認(rèn)您編輯完短信按了發(fā)送鍵号显。
<br>4.請(qǐng)檢查您的短信設(shè)置臭猜。
</p>
<p align="right">[↑<a href="#top">返回頂部</a>]</p>
</body>
</html>
注意：如果錨鏈接的地址寫(xiě)錯(cuò)了，瀏覽器一般不會(huì)跳轉(zhuǎn)到錯(cuò)誤頁(yè)面押蚤，而是不做反應(yīng)蔑歌。另外還可以通過(guò)將href屬性寫(xiě)為“頁(yè)面地址#錨鏈接名”的方式直接跳轉(zhuǎn)到某一個(gè)頁(yè)面中指定的錨鏈接部分。
5.鏈接到電子郵件和網(wǎng)站
超鏈接的地址可以是一個(gè)電子郵件地址揽碘，瀏覽器會(huì)啟動(dòng)郵件程序編輯郵件并將內(nèi)容發(fā)送到改地址次屠。超鏈接也可以指向其他網(wǎng)站，如下例所示
例02_4.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>網(wǎng)址導(dǎo)航</title>
</head>
<body>
<h1 align="center">網(wǎng)址導(dǎo)航</h1>
<p>
門(mén)戶網(wǎng)站<hr/>
[ <a >騰訊</a> ]
[ <a >網(wǎng)易</a> ]
[ <a >新浪</a> ]
[ <a >搜狐</a> ]
</p>
<p>
新聞網(wǎng)站<hr/>
[ <a >CCTV</a> ]
[ <a >鳳凰網(wǎng)</a> ]
[ <a >新浪新聞</a> ]
[ <a >今日美國(guó)</a> ]
</p>
<p>如果有疑問(wèn)钾菊，請(qǐng)<a href="mailto:webmaster@google.com">發(fā)送郵件</a>給管理員</p>
</body>
</html>
單擊“發(fā)送郵件”超鏈接帅矗，系統(tǒng)將調(diào)用本節(jié)的郵件程序。
注意：如果客戶端沒(méi)有安裝電子郵件收發(fā)程序則無(wú)法發(fā)送郵件煞烫，如果安裝了多個(gè)電子郵件收發(fā)程序浑此，可以在瀏覽器的設(shè)置中指定哪一種程序發(fā)送郵件。
圖片元素
1.圖片格式介紹
- BMP格式：Windows系統(tǒng)下的標(biāo)準(zhǔn)位圖格式滞详，未經(jīng)過(guò)壓縮凛俱，生成的圖像文件比較大，用于網(wǎng)頁(yè)顯示會(huì)增加用戶的下載時(shí)間料饥，不建議大家使用蒲犬。
- GIF格式：CompuServe公司在1987年開(kāi)發(fā)的圖像文件格式，GIF圖像文件的數(shù)據(jù)是經(jīng)過(guò)可變長(zhǎng)壓縮的岸啡，支持2~256中色彩的圖像原叮，并且支持北京透明和動(dòng)畫(huà)，在Web開(kāi)發(fā)中應(yīng)用很廣。但因?yàn)镚IF格式只支持256種色彩奋隶，故不適合保存圖片擂送。
- JPEG格式：由軟件開(kāi)發(fā)聯(lián)合會(huì)組織制定的有損壓縮格式，壓縮比較高唯欣，支持24bit色彩嘹吨，適合保存圖片。
- PNG格式：比較新的圖像格式境氢，能提供長(zhǎng)度比GIF格式小30%的無(wú)損壓縮圖片蟀拷，也支持背景透明，并且支持Alpha通道調(diào)整圖像的透明度萍聊。因?yàn)镻NG格式推出時(shí)間不長(zhǎng)问芬，不是所有的瀏覽器都能很好的支持PNG，如IE6瀏覽器不支持背景透明的PNG圖片脐区。
2.圖片元素的基本用法
圖片元素為<img>,通過(guò)src屬性指定圖片地址就可以將圖片顯示在頁(yè)面上愈诚。注意：<img>元素只是引用了此圖片，并未將圖片本身的內(nèi)容復(fù)制到HTML文件中牛隅。如果引用的圖片不存在或格式不正確炕柔，一般瀏覽器會(huì)顯示出錯(cuò)符號(hào)。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>圖片元素</title>
</head>
<body>
<p>正確的引用圖片：</p>
<p>不正確的引用圖片：</p>
</body>
</html>
3.圖片元素的常用屬性
圖片元素的常見(jiàn)屬性如下：
- width/height:設(shè)置圖片的寬度或高度媒佣，如只設(shè)置其中一個(gè)值匕累，瀏覽器會(huì)自動(dòng)根據(jù)圖片的橫縱比決定另一個(gè)值。如果寬和高沒(méi)有設(shè)置默伍，圖片將按照原始大小顯示欢嘿。該屬性支持使用像素或百分比作為單位。
- border：圖片邊框的寬度也糊，默認(rèn)為0.
- alt: 當(dāng)圖片無(wú)法加載時(shí)炼蹦，用于替換圖片內(nèi)容的文字
- align:圖片與文字的對(duì)齊方式、可選值狸剃。
top：上對(duì)齊 middle：居中對(duì)齊 bottom：下對(duì)齊 right：右對(duì)齊 left：左對(duì)齊掐隐。
