【正文】 見圖 810。另外還有一些常用得字符級(jí)標(biāo)記見表 82。燴場(chǎng)圖濫園然績(jī)切蓋垛拖拂畸莫鵬啤蜀勛梯斬女大欣雇們貞均異謀涕慰癬第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言表 82常用的字符級(jí)標(biāo)記標(biāo)記 描述 示例 b…/b 粗體文本 b這是一種很有趣的體驗(yàn) /btt…/tt 固定寬度的字體 b這是一種 tt很 /tt有趣的體驗(yàn) /b sub…/sub 下標(biāo)文本 p水的化學(xué)符號(hào)： Hsub2/subO/p em…/em 強(qiáng)調(diào)文本 pem這是一種很有趣的體驗(yàn) /em/p code…/code 用于顯示編程代碼 codex=x+2bry=x/code cite…/cite 用于引文和引用 智慧的頭腦只會(huì)欣賞一種觀點(diǎn)而不會(huì)輕易的接受 cite亞里士多德 /cite 熔墑刮獻(xiàn)饅頓拷代胎痊驟攝挨怯氈麓緝翰天耿嚷餃細(xì)來茬卞體柴昨鏈癰珊第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言實(shí)例 87 字體和圖像標(biāo)記u一、 學(xué)習(xí)目標(biāo)u掌握字體標(biāo)記的使用u掌握字體標(biāo)記的屬性設(shè)定u掌握在 html文檔中如何插入圖像u了解圖像的相關(guān)知識(shí)銘喚纏棍胸餒戀砧擾貌靛米逼鴿勁得苔診肢冬默袁桿黎總竅翁佃落狠淌澎第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言圖 811字體和圖像標(biāo)記的使用替代文本二、實(shí)例結(jié)果，如圖所示廬幽憨醒姑盛新咀咨銹鱗歉圓徑研困偏獅皮憫咬浩犀摘踞使紳攫呸漏妥雖第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言u(píng)過程與步驟：u1．通過依次單擊任務(wù)欄上的【開始】 → 【程序】 → 【附件】 → 【記事本】菜單命令打開記事本u2．在記事本的編輯面板中輸入以下代碼： htmluheadtitle字體和圖像標(biāo)記/title/headubodyup正常文本 /pupfont size=7 color=0000FF這些大字體的文本 /font/p仲零毯柄囑崖境碼構(gòu)爺旬鈴?fù)砼銎贫伎諗克窋U(kuò)抒誨阿昧憤煙桃翼蜂拄同恐第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言u(píng)pfont size=+2這些文本的字體比正常的文本字體大 2號(hào) /font/pupfont size=2這些文本的字體比正常的文本字體小 2號(hào) /font/pupfont size=5 face=隸書 這些文本的字體是隸書 /font/pu圖片插入： img src=清華 .JPG alt=我們?cè)谇迦A大學(xué) width=150 height=150 align=middle /body/html 。u4．運(yùn)行結(jié)果如圖 811所示。陀朱魏儲(chǔ)詣卯硯啼疾條沏乞僳胞貉居藉姿貶區(qū)祁鰓卞滯案圃勞挨知船函土第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言u(píng)三、 涵蓋知識(shí)點(diǎn)：u font標(biāo)記用于控制文本在網(wǎng)頁上的顯示?？梢灾付?size（大小）、 color（顏色）、 style（樣式）等屬性。具體見表 83。 表 83字體標(biāo)記常用屬性屬性 描述color 用于指定字體的顏色，可以使用顏色名稱或十六進(jìn)制值 size 用于指定字體的大小。可指定的字體 利鞋譚受頃芥馳邀室癥枕瘩鐵涅翹勢(shì)徹膿責(zé)舞區(qū)哲島樟函洛峰鐳漾籬灣箔第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言大小范圍為 1到 7，最大為 7，最小為 1。還可以指定相對(duì)大小。例如，如果基本大小為 3，那么size=+4會(huì)使字體大小增加至 7size=1會(huì)使字體大小減小至 2 face 用于指定字體，可以指定一系列字體類型，按優(yōu)先級(jí)列出來，用逗號(hào)分開，例如 “隸書， Arial”，這樣設(shè)置以后文本就會(huì)優(yōu)先顯示為隸書字體，若客戶機(jī)沒有安裝這種字體，則會(huì)顯示為 Arial字體。 在本實(shí)例中具體文字效果可以看圖 811所示。代曙寵鱉緯立蟻淌鞍巳傍妨寅果窿別翼謀泉盒摧幀慌土果沃草擋尉賺膿筷第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言u(píng)2．圖像標(biāo)記u 當(dāng)我們要在網(wǎng)頁中嵌入圖片時(shí)，就不得不用到 img標(biāo)記，我們看到， img標(biāo)記沒有終止符。其常用參數(shù)也不太多，非常容易記住?；菊Z法：uimg src=圖片地址 border=數(shù)值 align=對(duì)齊方式 …在我們的實(shí)例中用到了很多 img的屬性。如本例代碼：u圖片插入： img src=清華 .JPG alt=我們?cè)谇迦A大學(xué) width=150 height=150 align=middle 敦單籽仰穎悸撞蓖隔屯顧隙絲瀾喘芝罕雁貫踞雕鼠介剛盒攢僅陪霄具匆祥第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言u(píng)src：圖片地址。我們這里用的是相對(duì)地址（即和我們的網(wǎng)頁在同一目錄下）。uborder：圖片的邊框。取值范圍為正整數(shù)，邊框顏色不可改變（黑色）。多數(shù)論壇里的圖片都會(huì)鏈接到自身，當(dāng)用戶點(diǎn)擊過它，它的邊框顏色通常就是默認(rèn)的藍(lán)色，故為美觀起見，建議設(shè)置為 0，缺省為 0。ualign：圖片與文字的位置關(guān)系。這個(gè)內(nèi)容，我們?cè)谏弦还?jié)已經(jīng)講過，還不太熟悉的請(qǐng)參閱排版標(biāo)記。父措玖掛鈕僥削遇打壁咐塘森鑰解瀑饞獅是各號(hào)臣瓢陣笆毆帽膨盆抖瘤葛第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言u(píng) alt、 title：說明、標(biāo)題。都是當(dāng)鼠標(biāo)移到圖片時(shí)彈出的文字。在本例中鼠標(biāo)指針移到圖片上，看到 “我們?cè)谇迦A大學(xué) ”uwidth：圖片的寬度（象素）。uheight：圖片的高度（象素）。u “圖片一張，勝過千言萬語 ”這句話的確非常適合于網(wǎng)頁。可以插入到網(wǎng)頁中的圖像稱為嵌入式圖像。圖像可以是圖標(biāo)、項(xiàng)目符號(hào)、照片、公司徽標(biāo)等等。苗儉鬼廣尸斤骨咸福剪到大眷坯狐寐犯許靴紗佛饒唁森肘鼻染吮墑氖豢玲第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言u(píng) 目前常用的圖形格式有多種。但是，web上的情況稍有不同?？梢栽诖蠖鄶?shù)瀏覽器上顯示的三種常見的圖形格式為：u＆ GIF(Graphics Interchange Format)圖像（ .GIF）u GIF是 html文檔中最常用的格式。GIF文件具有獨(dú)立于平臺(tái)的格式且支持 256色。 GIF文件的優(yōu)點(diǎn)在于文件比較小因此在低速調(diào)制解調(diào)器線路上它們也比較容易傳輸。 GIF文件有兩種標(biāo)準(zhǔn) 87a和 89a（支持透明）。牲數(shù)屈券開私體陛鍍照乍悟棲肚懦鎮(zhèn)虧萬廁擰丑靶擾瞞荔后眶妥戈利寫瘸第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言u(píng)GIF支持圖形漸進(jìn)：指圖形是漸漸顯示在屏幕上的。對(duì)于不支持圖形漸進(jìn)的圖片格式，只有在完整的圖形被下載以后才能顯示出來，相反，支持圖形漸近的圖片格式，可以在下載文件的同時(shí)，逐行顯示在屏幕上。但這種顯示的形式隨瀏覽器的不同而不同。u透明 GIF圖像：像素可以是透明的或不透明的。透明的 GIF圖像其背景色是透明的。例如，圖標(biāo)和項(xiàng)目符號(hào)應(yīng)該是透明的 GIF圖像，以便與文檔的背景色融合在一起。俄噪裝茄淫莽備貢陡稗榨瞇礬苫棺夫侯屆冕遠(yuǎn)繪笆肋劈鷗險(xiǎn)跟含角蕊慕換第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言u(píng)GIF支持動(dòng)畫：通過一些專門的軟件將多個(gè) GIF圖像組合在一起，就形成了動(dòng)畫效果，以做一些簡(jiǎn)單的動(dòng)畫。uGIF支持無損壓縮：無損壓縮是不損失圖形的細(xì)節(jié)而壓縮圖形的有效方法。 GIF文件通過壓縮以減少占用的磁盤空間，這樣就會(huì)減少下載時(shí)間。 GIF比較適合線條、圖標(biāo)和圖紙等圖片。uGIF圖片最大的缺點(diǎn)就是只支持 256種顏色，這對(duì)于真正的照片質(zhì)量的圖形是遠(yuǎn)遠(yuǎn)不夠的，這樣的圖片一般使用 JPEG格式。烏卸允送介境哎承舌妄憲式拼莽敞烴駱?biāo)脶t(yī)勃憑股千椿吉葛平矛中抒周欄第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言u(píng)(2)JPEG（ Joint Photographics Experts Group）圖像（ .JPG）uJPEG壓縮是一種有損壓縮方案。這意味著產(chǎn)生的壓縮圖像與原始圖像并不完全相同。但是，在回放過程中，圖像幾乎與原始圖像一樣好。以 JPEG格式保存圖像時(shí)，可以指定壓縮比率。該比率越高，圖像的質(zhì)量就會(huì)比原始圖像的越差。 JPEG支持上百萬種顏色，通常用于真彩色圖像。uJPEG（ .jpg文件擴(kuò)展名）和 GIF文件格式兩者都可以通過壓縮圖像來確保在 Inter上達(dá)到更快的傳輸速率。根據(jù)不同的特點(diǎn)和實(shí)際需要，使用不同的圖片格式。裁突窘士溶鐐糠滔闖吸蔭憐褐蚜閃調(diào)札鏡筋鍘留棍遙啼習(xí)乳由看兆彪陸撕第8章 HTML標(biāo)記語言第8章 HTML標(biāo)記語言u(píng)(3)PNG（ Portable Network Graphics）uPNG文件支持無損壓縮。 PNG文件也支持灰度和真彩色圖像。也可以壓縮 PNG圖像以便在網(wǎng)絡(luò)上傳輸。但目前只有少數(shù)瀏覽器支持此種圖片格式。u在決定采用哪一種圖形格式時(shí)，應(yīng)考慮下列因素：u圖像品質(zhì)－在顯示過程中圖像的品質(zhì)有多重要？u數(shù)據(jù)大?。募酱?，傳輸時(shí)間越長(zhǎng)。u顯示要求－圖像是否支持透明、流式顯示或漸進(jìn)顯示等功能？瞇魄游痘烘琵尚歡熏仆湍畢券葷襲女耕諒戮呀翱鉚優(yōu)巧混樟痛默婁箱蓋鉚第8章 H