第2章超鏈接和圖像與其他標(biāo)簽_第1頁
第2章超鏈接和圖像與其他標(biāo)簽_第2頁
第2章超鏈接和圖像與其他標(biāo)簽_第3頁
第2章超鏈接和圖像與其他標(biāo)簽_第4頁
第2章超鏈接和圖像與其他標(biāo)簽_第5頁
已閱讀5頁，還剩35頁未讀， 繼續(xù)免費(fèi)閱讀

付費(fèi)下載

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第二章超鏈接和圖像與其他標(biāo)簽上節(jié)回顧HTML基礎(chǔ)知識HTML概述HTML的基本語法HTML文檔的結(jié)構(gòu)網(wǎng)頁中的文本網(wǎng)頁中的注釋Dreamweaver基本操作本章內(nèi)容網(wǎng)頁中的超級鏈接超級鏈接和URL超級鏈接元素A相對路徑和絕對路徑CSS和超級鏈接網(wǎng)頁中的圖像圖像文件的格式IMG元素圖像的編排熱點區(qū)域其他標(biāo)簽font,em,strong,span,div超級鏈接和URL超級鏈接的構(gòu)成<ahref="">oracle</a>可見的部分比如，網(wǎng)頁中帶下劃線的文字不可見的部分URL--網(wǎng)絡(luò)資源的地址HTML語言使用a元素中的屬性href來指明超級鏈接的URL，a元素還可以控制超級鏈接的可見部分的外觀超級鏈接的作用告訴瀏覽器使用HTTP協(xié)議來激活一個URL，當(dāng)鼠標(biāo)點擊在超級鏈接上時，該超級鏈接的URL就被提交給瀏覽器用于訪問網(wǎng)絡(luò)超級鏈接的組成……<ahref="register/register.html">[免費(fèi)注冊]</a><ahref="login/login.htm">[登錄]</a>……鏈接文本或圖像URL統(tǒng)一資源定位URL(UniformResourceLocator)統(tǒng)一資源定位器，用來標(biāo)識網(wǎng)絡(luò)中的任何資源（文本、圖片、音視頻文件，段落，或其它超文本）URL的組成協(xié)議：指明請求的服務(wù)類，一般為HTTP主機(jī)名：對應(yīng)對方主機(jī)的IP地址（通過DNS轉(zhuǎn)換得到）端口號:指定服務(wù)器端口,若不指定是80路徑名：資源在主機(jī)上路徑文件名：要請求的資源的文件名（包括文件中的錨點）URL舉例下面是一個標(biāo)準(zhǔn)的URL：

http是協(xié)議名（用://分隔）是主機(jī)名

80是端口號

/TR/CSS2/是路徑

syndata.html是要鏈接的文件名<a>超級鏈接元素<a>超級鏈接元素語法開始標(biāo)記：<a>必需內(nèi)容：內(nèi)聯(lián)元素（不能嵌套a元素）文本結(jié)束標(biāo)記：</a>必需主要屬性href：用來說明鏈接資源的URLtarget：打開鏈接的窗口name：錨點名稱超級鏈接元素應(yīng)用舉例<p><ahref=""></a></p><p><ahref=""><imgsrc="image/w3c.jpg"width="315"height="48"border="0"></a></p>錨點錨點是文檔中某行的一個記號使用錨點可以讓超級鏈接鏈接到文檔中的某一行定義錨點的方法如下：<aname="anchorname1">錨點一</a><aid="anchorname2">錨點二</a>鏈接到錨點的方法在錨點名前加上井號(#)例如<ahref="../index.htm#anchorname1">到錨點一</a><ahref="../index.htm#anchorname2">到錨點二</a>相對路徑和絕對路徑URL中的路徑名表示方法有相對路徑指文件的位置是相對于當(dāng)前文件的位置。它包括目錄名，或指向一個可以從當(dāng)前目錄出發(fā)找到該文件的路徑絕對路徑指的是文件從最高級目錄下開始的完整的路徑，無論當(dāng)前路徑是什么，使用絕對路徑總是能找到要鏈接的文件"..":表示當(dāng)前路徑的上一層目錄相對路徑還是絕對路徑？用相對路徑：網(wǎng)頁存儲在相同位置（或相對位置固定，不會改變）用絕對路徑：網(wǎng)頁的相對位置經(jīng)常變動，某些資源的絕對位置不變<ahref="login/login.htm">登錄</a><ahref="/memAdmin/login/login.htm">登錄</a><ahref="">搜狐</a>郵件鏈接郵箱、QQ鏈接等<ahref=“mailto:">

站長信箱</a>超級鏈接的外觀默認(rèn)情況下瀏覽器給予帶有超級鏈接的文字以特殊的外觀效果IE瀏覽器的默認(rèn)效果文字帶有下劃線文字為藍(lán)色訪問過的文字顏色為紫色鼠標(biāo)浮在文字上方時變成手形修改默認(rèn)外觀的方法使用body元素的link、alink、vlink屬性不提倡使用css圖像文件的格式HTML支持三種格式的圖像文件,即JPEG(圖形圖像聯(lián)合專家組，JointPhotopraphicExpertsGroup)GIF(圖形接口格式,GraphicsInterfaceFormat)PNG(可移植網(wǎng)絡(luò)圖形,PortableNetworkGraphic)圖形格式JPEGJPEG格式采用有損壓縮算法，但是這種格式不會讓人感到和源文件（未壓縮）有任何的差別。而且它的壓縮比也是較大的，成為網(wǎng)絡(luò)上傳遞清晰照片的首選GIFGIF格式使用256色的方法來壓縮圖像，如果想傳遞的是一幅色彩豐富的圖像，盡量不要使用GIF格式，這樣會有較大的失真，GIF格式主要用于線條為主的圖像，或者圖像面幅很小的圖像，另外GIF支持動畫和透明圖像PNGPNG是最新開發(fā)的一種用于WEB的圖像格式，可以提供最好的畫面質(zhì)量，壓縮比也很理想，是今后WEB上的主要圖像格式，但目前不是所有的瀏覽器都能支持<img>圖像元素語法開始標(biāo)記：必需內(nèi)容：無結(jié)束標(biāo)記：禁用主要屬性src:圖像的URLalt:簡短的描述；用于純文本瀏覽器。width：圖像的寬度，用來改變圖像原來的寬度height：圖形的高度，用來改變圖像原來的高度ALT屬性的作用ALT屬性的作用是在圖像不能顯示的情況下，在圖像位置出現(xiàn)的提示文本，說明給圖像的內(nèi)容或其它信息圖像不能顯示的原因如下瀏覽器不支持圖像，或某些圖像格式瀏覽器被用戶設(shè)定為不下載圖像由于網(wǎng)絡(luò)速度圖形不能立即顯示，對于一些比較大的圖像，往往文字部分已經(jīng)顯示了很久之后才能下載完全<html><head><title>img</title></head><body><h1>這個示例演示了img標(biāo)記的使用</h1><imgsrc="p1.png"alt="這是alt屬性"/></body></html>ALT屬性的示例圖像元素應(yīng)用舉例<p><ahref=""> <imgsrc="image/W3C.jpg"alt=""width="315"height="48"hspace="20"vspace="10"border="20"align="middle"></a></p>圖像元素應(yīng)用舉例如果圖片刪除了或其它原因圖像不能顯示則會在圖像的位置出現(xiàn)以下效果圖像和文本的關(guān)系<p>網(wǎng)頁設(shè)計的天地</p><p><imgsrc="image/W3C.jpg"width="315"height="48"border="0"align="bottom">底部</p><p><imgsrc="image/W3C.jpg"width="315"height="48"align="top">頂端</p><p><imgsrc="image/W3C.jpg"alt="middleimage"width="315"height="48"align="middle">中間</p>熱點區(qū)域熱點區(qū)域的作用盡管圖像本身可以加上超級鏈接，但是有時候我們希望一幅圖像的不同部分能夠有不同的超級鏈接,這時可以使用熱點區(qū)域添加熱點區(qū)域需要兩個元素<map>映射元素定義一個客戶端映射<area>熱點元素一個幾何圖形區(qū)域，可以加上超級鏈接映像元素和熱點元素map語法開始標(biāo)記：必需內(nèi)容：

area元素結(jié)束標(biāo)記：必需主要屬性title,id,class,style,lang,dirname映射名，需要和img元素的usemap屬性保持相同area語法開始標(biāo)記：必需內(nèi)容：無結(jié)束標(biāo)記：禁用主要屬性id,class,lang,dircoords熱點的坐標(biāo)范圍href鏈接的URLnohref標(biāo)志有無鏈接的布爾型屬性圖像映像熱點實例<imgsrc="image/menu.jpg"width="411"height="27"border="0"usemap="#Map"><mapname="Map"><areashape="rect"coords="45,3,96,19"href="#"><areashape="rect"coords="162,5,239,22"href="#"><areashape="rect"coords="293,5,348,24"href="#"></map>其他標(biāo)簽--div塊元素分組<div>的作用為塊元素提供分組的方法常被用于和樣式表配合使用<div>還被用來作為層用于頁面布局<html><head><title>第一個HTML網(wǎng)頁</title></head><body><h1>這是使用html語言創(chuàng)建的一個網(wǎng)頁!</h1>oracle<p>abcd<div>1234</div>abcd1234</p>oracle</body></html>塊元素分組語法開始標(biāo)記：<div>必需內(nèi)容：嵌套其他塊元素內(nèi)聯(lián)元素文本結(jié)束標(biāo)記：</div>必需主要屬性id、class、align、title、style、lang等<span>內(nèi)聯(lián)元素分組<span>元素的作用span提供了一種對內(nèi)聯(lián)元素分組的方法span常用來和樣式表配合<span>往往被用來設(shè)置同一行文字內(nèi)的不同格式<span>內(nèi)聯(lián)元素語法開始標(biāo)記：<span>必需內(nèi)容：嵌套其他塊元素內(nèi)聯(lián)元素文本結(jié)束標(biāo)記：</span>必需主要屬性Id、class、align、title、style、lang等div、span應(yīng)用舉例<p><spanstyle="font-size:18pt">學(xué)而時習(xí)之，</span>不亦說乎？<divstyle="color:green;font-size:21pt">有朋自遠(yuǎn)方來，不亦樂乎？</div></p>Div與span的區(qū)別<span>元素包含的內(nèi)容，在顯示格式上沒有任何變化，沒有因為插入<span>元素而產(chǎn)生換行或者其他排版效果。這樣的顯示效果稱為“行內(nèi)元素”，我們可以在一段文本中插入任意多對<span>元素，然后添加字體、顏色、背景、邊框和邊距等各種格式。<div>元素所包含的內(nèi)容，在格式上有所變化，每一個<div>元素所包含的內(nèi)容都另起一行，瀏覽器為他們分配了一個獨(dú)立區(qū)域，形成一個一個“塊”，因此<div>也被稱作“塊級元素”。不過除了這個區(qū)別，在其他方面<span>和<div>基本相同，它們都可以為其中內(nèi)容添加各種樣式。網(wǎng)頁中的實體實體指網(wǎng)頁中表達(dá)一些在HTML語言中有特殊意義的字符，直接使用它們會帶來誤會比如<、>、&、”、還有空格等鍵盤上沒有的，但常常會使用比如：?：版權(quán)符號?：商標(biāo)符號?：注冊符號實體表示方式有三種方式來表示實體一般，以”&”號開始，并以分號”;”結(jié)束使用轉(zhuǎn)義字符比如：©；代表版權(quán)符號?注意：并不是所有實體都有相應(yīng)的轉(zhuǎn)義字符使用十進(jìn)制符號在&后加上#和一個十進(jìn)制的數(shù)字來表示實體比如：版權(quán)符號可以表示成©；使用十六進(jìn)制符號和十進(jìn)制相同，但在#后面加上的是一個十六進(jìn)制的值并在值前加上小寫的x表示十六進(jìn)制比如：版權(quán)符號表示成十六進(jìn)制為©常見實體表示字符串

表示值& &< <> >© ?® ?™ ?£ ￡¥ ￥€ €

網(wǎng)頁中設(shè)置文本的字體、字號、和顏色屬性說明face設(shè)置字體的類型size設(shè)置字體的大小，取值范圍為1~7，依次增大，默認(rèn)值為3color設(shè)置字體的顏色，默認(rèn)值為<body>的text

屬性所設(shè)置的字體顏色

如果希望改變網(wǎng)頁中文本的字體、字號、顏色，則通常使用<font>標(biāo)記，其屬性如表：

網(wǎng)頁中設(shè)置文本的字體、字號、和顏色

代碼如下：

<html>

<head>

<title>設(shè)置字體、字號和顏色</title></head>

<body>

<h1>設(shè)置字體、字號和顏色</h1>

<hralign=“l(fā)eft”width=“400”>

<p><font

face

="宋體”size=“3”color=“red”>這是宋體3號紅色字

</font></p>

<p><font

face

="仿宋_GB2312”size=“4”color=“green”>這是仿宋

4號綠色字</font></p>

<p><font

face

="楷體_GB2312”size=“5”color=“blue”>這是楷體

5號藍(lán)色字</font></p>

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論