HTML語言程序設(shè)計

上傳人：q*** IP屬地：湖北上傳時間：2023-02-04 格式：PPTX 頁數(shù)：66 大?。?38.05KB 積分：28 舉報 版權(quán)申訴

已閱讀5頁，還剩61頁未讀，繼續(xù)免費閱讀

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

文檔簡介

HTML語言基礎(chǔ)1.1基本概念

1.什么是HTML

2.HTML的作用

3.HTML的編輯環(huán)境

4.專用的網(wǎng)頁編輯器1.什么是HTMLHTML是HyperTextMarkupLanguage（超文本標記語言）的縮寫，它是構(gòu)成Web頁面（Page）的主要工具，是用來表示網(wǎng)上信息的符號標記語言。HTML是一種用于網(wǎng)頁制作的排版語言，是Web最基本的構(gòu)成元素。HTML并非一種編程語言。

特點：簡易性，可擴展性，平臺無關(guān)性。

歷史：1.019934.011999w3c標準

5.02008IE-遨游、360、騰訊、世界之窗IE為內(nèi)核

Safari、Chrome、Firefox、Opera常見瀏覽器2.HTML的作用①格式化文本。如設(shè)置標題、字體、字號、顏色；設(shè)置文本的段落、對齊方式等。②建立超鏈接。通過超鏈接檢索在線的信息，只需用鼠標單擊，就可以到達任何一處。③創(chuàng)建列表。把信息用一種易讀的方式表現(xiàn)出來。④插入圖像。使網(wǎng)頁圖文并茂，還可以設(shè)置圖像的各種屬性，如大小、邊框、布局等。⑤建立表格。表格為瀏覽者提供了快速找到需要信息的顯示方式，還可以用表格來設(shè)定整個網(wǎng)頁的布局。⑥加入多媒體。可以在網(wǎng)頁中加入音頻、視頻、動畫，還能設(shè)定播放的時間和次數(shù)。⑦交互式窗體、計數(shù)器等。為獲取遠程服務(wù)而設(shè)計窗體，可用于檢索信息、定購產(chǎn)品等。3.HTML的編輯環(huán)境

HTML要求的軟件環(huán)境更為簡單，任何文本編輯器都可以用來制作網(wǎng)頁，包括記事本、寫字板、Word、WPS等編輯程序。不過在保存時，一定要用純文本方式存盤。

HTML文件的設(shè)計制作與一般程序設(shè)計語言之間最大的不同在于，HTML具有跨平臺的處理能力。4.專用的網(wǎng)頁編輯器FrontPageDreamweaver2.HTML基本標記2.2.1HTML基礎(chǔ)2.2.2HTML入門——簡單標記的認識與使用2.2.3段落和文字標記2.2.4建立超級鏈接2.2.5加入圖片2.2.1HTML基礎(chǔ)

1.HTML文件的組成

2.標記

3.標記的屬性

4.HTML文件的基本結(jié)構(gòu)1.HTML文件的組成①標記：是HTML的基本元素，可以說一個HTML文件大部分都是由字符信息加上一些標記呈現(xiàn)出來的?；镜臉擞浛煞譃閮煞N：單一標記和成對標記②文字與圖形資料③統(tǒng)一資源定位器URL（UniformResourceLocator）：2.標記

<標記>受標記影響的內(nèi)容</標記>說明：①每個標記都用“<”（小于號）和“>”（大于號）圍住，如<P>，<Table>，以表示這是HTML代碼而非普通文本。注意，“<”與標記名之間不能留有空格或其它字符。②在標記名前加上符號“/”便是其結(jié)束標記，表示這種標記內(nèi)容的結(jié)束，如</FONT>。標記也有不用</標記>結(jié)尾的，稱之為單標記。③標記字母大小寫皆可，沒有限制。

對同一段要標記的內(nèi)容，可以用多個標記來共同作用，產(chǎn)生一定的效果。此時，各個標記間的順序也是任意的。3.標記的屬性每個標記有一系列的屬性。標記要通過屬性來制作出各種效果。格式為：

<標記屬性1=屬性值屬性2=屬性值…>

受影響的內(nèi)容</標記>

例如字體標記<FONT>，有屬性size和color等。屬性size表示文字的大小，屬性color表示文字的顏色。表示為：

<FONTsize=3color=red>屬性示例</FONT>需要注意的是：①并不是所有的標記都有屬性，如換行標記就沒有。②根據(jù)需要可以用該標記的所有屬性，也可以只用需要的幾個屬性，在使用時，屬性之間沒有順序。多個屬性之間用空格隔開。

4.HTML文件的基本結(jié)構(gòu)

HTML文件是一種純文本格式的文件，HTML文件包括頭部（head）和主體（body）。文件的基本結(jié)構(gòu)為：

網(wǎng)頁的內(nèi)容

</BODY></HTML>

說明：①HTML文件以<HTML>開頭，以</HTML>結(jié)尾。②<HEAD>…</HEAD>：表示這是網(wǎng)頁的頭部，用來說明文件命名和與文件本身的相關(guān)信息?？梢园ňW(wǎng)頁的標題部分：<TITLE>…</TITLE>。③<BODY>…</BODY>：表示網(wǎng)頁的主體即正文部分。④HTML語言并不要求在書寫時縮進，但為了程序的易讀性，建議網(wǎng)頁設(shè)計制作者使標記的首尾對齊，內(nèi)部的內(nèi)容向右縮進幾格。簡單的HTML文件。

<HTML><HEAD><TITLE>簡單的HTML文件</TITLE></HEAD><BODY>

最簡單的網(wǎng)頁

</BODY></HTML>例2-1的顯示效果

2.2.2HTML入門

1.HTML文檔標記<HTML>…</HTML>

2.HTML文件頭標記<HEAD>…</HEAD>

3.HTML文件標題標記<TITLE>…</TITLE>

4.HTML文件主體標記<BODY>…</BODY>

5.注釋標記1.HTML文檔標記<HTML>…</HTML>HTML文檔標記的格式為：

<HTML>HTML文檔的內(nèi)容</HTML>HTML文檔的標記。<HTML>處于文檔的最前面，表示HTML文檔的開始，即瀏覽器從<HTML>開始解釋，直到遇到</HTML>為止。每個HTML文件均以<HTML>開始，以</HTML>結(jié)束。2.HTML文件頭標記<HEAD>…</HEAD>HEAD是英文“頭”的意思，習慣上將HTML文檔分為文件頭和文件主體兩個部分。文件主體是在Web瀏覽器窗口的用戶區(qū)顯示的內(nèi)容，而文件頭則用來規(guī)定該文檔的標題（瀏覽器標題欄中的內(nèi)容）和文檔的一些屬性。HTML文件頭標記的格式為：<HEAD>頭部的內(nèi)容</HEAD>

說明：HTML文件的頭部在文件標記<HTML>之后，在開始標記<HTML>和結(jié)束標記</HTML>間定義。其內(nèi)容可以是標題名，文本文件地址、創(chuàng)作信息等網(wǎng)頁信息說明。對應(yīng)于相應(yīng)的標記，有標題標記<TITLE>…</TITLE>等。

<HEAD>標記在HTML文件中不是必須的，如果沒有，瀏覽器也會照常解讀文件。3.HTML文件標題標記<TITLE>…</TITLE>HTML文件標題標記的格式為：

設(shè)定HTML文件標題的標記。在文件頭部定義的標題內(nèi)容不在瀏覽器窗口中顯示，而是在瀏覽器的標題欄中顯示。盡管頭部定義的信息很多，但能在瀏覽器標題欄中顯示的信息只有標題。4.HTML文件主體標記<BODY>…</BODY>HTML文件主體標記的格式為：

說明：①主體位于頭部之后，以<BODY>為開始標記，</BODY>為結(jié)束標記。它定義了網(wǎng)頁上顯示的主要內(nèi)容與顯示格式，是整個網(wǎng)頁的核心，網(wǎng)頁中要真正顯示的內(nèi)容都包含在本標記中。②<BODY>有很多屬性，這些屬性用于設(shè)定網(wǎng)頁的總體風格，可以定義頁面的背景圖像、背景顏色、文字顏色、超文本鏈接的顏色。其中常用的屬性見表2-1。表2-1<BODY>標記的屬性值說明background設(shè)置網(wǎng)頁的背景圖像。Bgcolor設(shè)置網(wǎng)頁的背景色。Text設(shè)置文本的顏色。Link設(shè)置尚未被訪問過的超文本鏈接的顏色，默認為藍色。vlink設(shè)置已被訪問過的超文本鏈接的顏色，默認為藍色。alink設(shè)置超文本鏈接在被訪問瞬間的顏色，默認為藍色。

表2-1中，涉及顏色的屬性，取值可以是英文顏色名，也可以用“#”引導的一個十六進制數(shù)代碼來表示，見表2-2。如果顏色值用十六進制數(shù)代碼，則顏色數(shù)比表2-2列出的數(shù)目多得多。表2-2顏色代碼表名稱英文顏色名16進制代碼黑色black#000000藍色blue#0000FF棕色brown#A52A2A青色cyan#00FFFF灰色gray#808080綠色green#008000乳白色ivory#FFFFF0桔黃色orange#FFA500粉紅色pink#FFC0CB紅色red#FF0000白色white#FFFFFF黃色yellow#FFFF00深紅色crimson#CD061F黃綠色greenyellow#0B6EFF水藍色dodgerblue#0B6EFF淡紫色lavender#DBDBF8【例2-2】使用網(wǎng)頁的背景色（bgcolor）屬性，可以設(shè)定整個網(wǎng)頁的背景顏色；使用網(wǎng)頁的文本色（text）屬性，可以設(shè)定整個網(wǎng)頁文字的顏色。<HTML><HEAD>

這是主體之外的文本

<TITLE>試試BODY標記的屬性</TITLE></HEAD><BODYbgcolor=greenyellowtext=blue>

設(shè)置網(wǎng)頁的背景色屬性為"黃綠色",

設(shè)置網(wǎng)頁的文本色屬性為"藍色"</BODY></HTML>

顯示效果如圖2-2所示。圖2-2使用網(wǎng)頁的bgcolor屬性5.注釋標記

html中使用“注釋”為文中的不同部分加上說明，以方便日后閱讀和修改。注釋標記的格式為：

注釋內(nèi)容不局限于一行，長度也不受限制。即結(jié)束標識符不必與開始標識符在同一行上。2.2.3段落和文字標記

1.標題文字標記

2.文本文字標記

3.設(shè)置字型

4.強制換行、換段標記

5.分區(qū)顯示標記

6.水平線

7.特殊符號

在多數(shù)網(wǎng)頁中，文檔是核心內(nèi)容，所以要經(jīng)常設(shè)置文檔的格式。設(shè)置文檔的標記包括標題和文字的字體、字號、字型、顏色、段落格式、文本的布局等。1.標題文字標記標題是指頁面中文本的標題，而不是用<TITLE>…</TITLE>定義的網(wǎng)頁標題，標題格式顯示在瀏覽器窗口內(nèi)。

標記的格式為：

<Hnalign=對齊方式>標題文字</Hn>

說明：①屬性n用來指定標題文字的大小。n可以取1～6的整數(shù)值，取1時文字最大，6時文字最小。②屬性align用來設(shè)置標題在頁面中的對齊方式，取值有：left（左對齊）、center（居中）或right（右對齊）。③<H>…</H>標記缺省顯示宋體字。<H>…</H>標記會自動插入一個空行。在一個標題行中無法使用不同大小的字體。【例2-3】使用標題標記設(shè)置標題內(nèi)容的大小與對齊方式。<HTML><HEAD><TITLE>設(shè)置標題</TITLE></HEAD><BODY><H1>第1級標題（H1）</H1><H2>第2級標題（H2）</H2><H3>第3級標題（H3）</H3><H4align=left>第4級標題（H4）（居左）</H4><H5align=center>第5級標題（H5）（居中）</H5><H6align=right>第6級標題（H6）（居右）</H6></BODY></HTML>圖2-3設(shè)置標題文字大小

2.文本文字標記在網(wǎng)頁中為了增強頁面的層次，其中的文字可以用不同的大小、字體、字型、顏色。文本文字標記<FONT>用來設(shè)定文字的字體、字號和顏色。其格式為：

<FONTsize=數(shù)字face=字體名color=顏色>

被設(shè)置的文字</FONT>

說明：<FONT>標記的屬性包括：size、face、color。①size屬性用來設(shè)置文字的大小。數(shù)字的取值范圍從1～7，size取1時最小，取7時最大。②face屬性用來設(shè)置字體。如黑體、宋體、楷體_GB2312、隸書、TimesNewRoman等。當文字為漢字時，格式中的“字體名”可以為：宋體、幼圓、隸書、楷體_GB2312、黑體、仿宋_GB2312等。當文字為英文時，字體名可以為TimesNewRoman等約50種字體。其實，這里的字體名字就是在Word的“字體”工具欄中顯示的字體名。③color屬性用來設(shè)置文字顏色，其取值見表2-2?！纠?-4】使用<FONT>標記的size屬性設(shè)置文字的大小；face屬性設(shè)置字體。color屬性設(shè)置文字顏色。<HTML><HEAD><TITLE>使用FONT標記</TITLE></HEAD><BODY><H1>設(shè)置文字的屬性</H1><FONTsize=1color=cyan>1號字青色2號字綠色</FONT><FONTsize=3face=幼圓color=orange>3號幼圓桔黃色</FONT><FONTsize=4face=隸書color=crimson>4號隸書深紅色</FONT><FONTsize=5face=黑體color=greenyellow>5號黑體黃綠色</FONT><FONTsize=6face=方正舒體color=dodgerblue>6號方正舒體水藍色</FONT><FONTsize=7face=華文彩云color=lavender>7號華文彩云淡紫色</FONT></BODY></HTML>在瀏覽器中的顯示效果如圖2-4所示。圖2-4設(shè)置文本文字屬性

說明：①<FONT>和<Hn>標記都可以設(shè)置文字的大小，二者的區(qū)別見表2-3。標記對象用法文字大小n的取值字體加粗<FONT>一段文章、語句、短語<FONTsize=n>文字</FONT>n=1～7，取1時最小，7時最大不自動加粗<Hn>標題<Hn>文字</Hn>n=1～6，取6時最小，1時最大自動加粗表2-3<FONT>與<Hn>標記的區(qū)別

另外，當<FONT>中的size取7時，文字比<H1>要大。②<BODY>標記中的text屬性和<FONT>標記中的color屬性都可以設(shè)置文本的顏色，<FONT>標記直接作用其后的文字，可在文件中多處設(shè)定，使網(wǎng)頁中文字的顏色絢麗多彩。當<BODY>與<FONT>標記同時對文字顏色進行定義時，<FONT>標記優(yōu)先。3.設(shè)置字型字型就是文字的風格，如加粗、斜體、帶下劃線、上標、下標等。字型的控制標記見表2-4。表2-4設(shè)置各種字型的標記標記格式字體效果說明<B>受影響的文字</B>受影響的文字加粗<I>受影響的文字</I>受影響的文字斜體<U>受影響的文字</U>受影響的文字帶下劃線<TT>受影響的文字</TT>受影響的文字標準打印機字體<STRIKE>受影響的文字</STRIIKE>受影響的文字帶刪除線受影響的<SUB>文字</SUB>下標受影響的<SUP>文字</SUP>上標<BIG>受影響的文字</BIG>大字體文本<SMALL>受影響的文字</SMALL>小字體文本【例2-5】使用字型標記設(shè)置文字的風格。<HTML><HEAD><TITLE>設(shè)置字型</TITLE></HEAD><BODY><B>黑體</B><I>斜體</I><U>帶下劃線</U><TT>標準打印機字體</TT><STRIKE>帶刪除線</STRIKE><SUB>下標</SUB><SUP>上標</SUP><BIG>大字體</BIG><SMALL>小字體</SMALL></BODY></HTML>圖2-5設(shè)置文本的風格4.強制換行、換段標記在HTML文檔中，無法用多個回車、空格、〈Tab〉鍵來調(diào)整文檔段落的格式。要用HTML的標記來強制換行、分段。①強制換行標記<BR>放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會在行與行之間留下空行，即強制文本換行。由于瀏覽器會自動忽略原始碼中空白和換行的部分，這使<BR>成為最常用的標記之一。強制換行標記的格式為：文字<BR>

說明：瀏覽器解釋時，從該處換行。換行標記單獨使用，可使頁面清晰、整齊。②段落標記<P>定義一個新段落的開始。<P>標記不但能使后面的文字換到下一行，還可以使兩段之間多一空行。由于一段的結(jié)束意味著新一段的開始，所以使用<P>也可省略結(jié)束標記。強制換段標記的格式為：<P>

說明：段落標記<P>的屬性align用來設(shè)置段落的對齊方式，其取值可以為left、center或right，分別表示居左、居中、居右。缺省時默認為left。一個強制換段標記<P>可以看作是兩個強制換行標記<BR><BR>。【例2-6】換行與換段標記的使用。<HTML><HEAD><TITLE>強制換行、換段標記的使用</TITLE></HEAD><BODY><H2align=center><FONTcolor=blue>學生之家</FONT></H2>

新

聞

學習窗口

聊天室

<Palign=center>來信

</BODY></HTML>圖2-6換行與換段標記的使用5.分區(qū)顯示標記分區(qū)顯示標記可以使文本塊或一段文字在網(wǎng)頁上：左對齊、居中和右對齊。分區(qū)顯示標記的格式為：

<DIValign=left|center|right>

文本或圖像</DIV>

說明：屬性align的取值分別為：left、center和right?！纠?-7】分區(qū)顯示標記的使用。<HTML><HEAD><TITLE>分區(qū)顯示標記的應(yīng)用</TITLE></HEAD><BODY><CENTER><H2>分區(qū)顯示標記的應(yīng)用</H2></CENTER><FONTcolor=blue><DIValign=center>居中center<BR>居中<BR>center</DIV><DIValign=left>居左left<BR>居左<BR>left</DIV><DIValign=right>居右right<BR>居右<BR>right</DIV></FONT></BODY></HTML>6.水平線水平線標記的格式為：

<HRalign=對齊方式size=橫線粗細

width=橫線長度color=橫線顏色noshade>

說明：①屬性align設(shè)定橫線放置的位置，可選擇left（居左）、right（居右）或center（居中）。②屬性size設(shè)定線條粗細，以像素為單位，默認為2。③屬性width設(shè)定線段長度，可以是絕對值（以像素為單位）或相對值（相對于當前窗口的百分比）。所謂絕對值，是指線段的長度是固定的，不隨窗口尺寸的改變而改變。所謂相對值，是指長度相對于窗口的寬度而定，窗口的寬度改變時，線段的長度也隨之增減，默認值為100%，即始終填滿當前窗口。④屬性color設(shè)定線條顏色，默認為黑色。可以采用顏色的名稱。顏色可以用相應(yīng)英文單詞或以“#”引導的一個十六進制數(shù)代碼來表示，見表2-2。⑤屬性noshade設(shè)定線條為平面顯示（沒有三維效果），若缺省則有陰影或立體效果?！纠?-8】水平線標記的使用。<HTML><HEAD><TITLE>水平線段標記的應(yīng)用</TITLE></HEAD><BODY><CENTER><H3>水平線</H3></CENTER><HR><HRalign=leftsize=6width=320><HRalign=centersize=8width=60%color=blue><HRalign=rightsize=8width=360color=red><HRsize=4width=80%color=#CD061F><HRsize=5noshade><HRwidth=70%noshade></BODY></HTML>

在瀏覽器中的顯示。瀏覽時，改變一下窗口的大小，可以看到線段的變化效果。7.特殊符號瀏覽器解釋HTML文件時，是根據(jù)“<”與“>”來識別標記的，然后再確定這兩個符號中的內(nèi)容是否為HTML文件標記，若是則按其規(guī)則解讀。所以，要在網(wǎng)頁中顯示“<”或“>”，就要作為特殊字符。其他常用的特殊字符見表2-5。表2-5特殊替換字符特殊字符所替代的字符說明&特殊字符的開始;特殊字符的結(jié)束Lt<小于號Gt>大于號Quot"雙引號nbsp空格2.2.4建立超級鏈接

1.熱點標記

2.創(chuàng)建指向其他頁面的鏈接

3.創(chuàng)建指向本頁中的鏈接

超鏈接（Hyperlink）可以看作是一個“熱點”，它可以從當前Web頁定義的位置跳轉(zhuǎn)到其他位置，包括當前頁的某個位置、Internet或本地硬盤或局域網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖片等多媒體文件。瀏覽Web頁是超鏈接最普遍的一種應(yīng)用，通過超鏈接還可以獲得不同形態(tài)的服務(wù)，如文件傳輸、資料查詢、電子函件、遠程訪問等。當Web頁包含超鏈接時，Web頁中的外觀形式為彩色（一般為藍色）且?guī)聞澗€的文字或圖片。單擊這些文本或圖片，可跳轉(zhuǎn)到相應(yīng)位置。鼠標指針指向超鏈接的顯示文本或圖片時，將變成手形。超文本鏈接使用熱點標記<A>來定義。1.熱點標記熱點由<A>標記定義，它在網(wǎng)頁上建立超文本鏈接。通過單擊一個詞、句或圖片，可從此處轉(zhuǎn)到另一個鏈接資源（目標資源），這個目標資源有唯一的地址（URL）。具有以上特點的詞、句或圖片就稱為熱點。<A>標記的格式為：

<Ahref=地址name=字符串target=打開窗口方式>

熱點</A>

說明：①href為超文本引用，它的值為一個URL，是目標資源的有效地址。在書寫URL時要注意，如果資源放在自己的服務(wù)器上，可以寫相對路徑。否則，應(yīng)寫絕對路徑。href不能與name同時使用。②name指定當前文檔內(nèi)的一個字符串作為鏈接時可以使用有效的目標資源的地址。③target設(shè)定鏈接被按后結(jié)果所要顯示的窗口?？蛇x值為：_blank，_parent，_self，_top，框架名稱。其說明見表2-6。取值說明target="_blank"或target="new"將鏈接的畫面內(nèi)容，開在新的瀏覽器窗口中。target="_parent"將鏈接的畫面內(nèi)容，顯示在直接父框架窗口中。target="_self"將鏈接的畫面內(nèi)容，顯示在當前窗口中（默認值）。target="_top"將框架中連結(jié)的畫面內(nèi)容，顯示在沒有框架的窗口中（即除去了框架）。target="框架名稱"只運用于框架中，若被設(shè)定則鏈接結(jié)果將顯示于該“框架名稱”指定的框架窗口中，框架名稱是事先由框架標記所命名的。表2-6target屬性的取值2.創(chuàng)建指向其他頁面的鏈接創(chuàng)建指向其他頁面的鏈接，就是在當前頁面與其他相關(guān)頁面間建立超鏈接。無論目標文件與當前文件的目錄關(guān)系如何，其格式為：

<Ahref="目標文件的路徑/目標文件名.html">

熱點</A>

根據(jù)目標文件與當前文件的目錄關(guān)系，有4種寫法：①鏈接到同一目錄內(nèi)的網(wǎng)頁文件，其格式為：

<Ahref="目標文件名.html">熱點</A>

目標文件名是鏈接所指向的文件。②鏈接到下一級目錄中的網(wǎng)頁文件，其格式為：

<Ahref="子目錄名/目標文件名.htm">

熱點</A>③鏈接到上一級目錄中的網(wǎng)頁文件，其格式為：

<Ahref="../目標文件名.html">熱點</A>

其中“../”表示退到上一級目錄中。④鏈接到同級目錄中的網(wǎng)頁文件，其格式為：

<Ahref="../子目錄名/目標文件名.html">

熱點</A>

表示先退到上一級目錄中，然后再進入到目標文件所在的目錄。3.創(chuàng)建指向本頁中的鏈接要在當前頁面內(nèi)實現(xiàn)超鏈接，需要定義兩個標記：一個為超鏈接標記，另一個為書簽標記。超鏈接標記的格式為：

<Ahref="#記號名">熱點</A>

單擊熱點文本，將跳轉(zhuǎn)到“記號名”開始的文本。書簽就是用<A>標記對該文本作一個記號。如果有多個鏈接，不同目標文本要設(shè)置不同的書簽名，書簽名在<A>的name屬性中定義。格式為：

<Aname=“記號名”>目標文本附近的字符串

</A>【例2-9】鏈接本頁中的文本。<HTML><HEAD><TITLE>學生之家</TITLE></HEAD><BODYlink=redalink=bluevlink=green><Aname="0"></A><H2align=center><B>歡迎來到“學生之家”</B></H2><FONTsize=3color=purple><CENTER><Ahref="#news">新聞</A><Ahref="#study">學習園地</A><Ahref="#health">健康信箱</A><P></CENTER></FONT><Aname="news"></A>新聞<BR><BR><Ahref="#0">返回</A><P><Aname="study"></A>學習園地<BR><BR><Ahref="#0">返回</A><P><Aname="health"></A>健康信箱<BR><BR><Ahref="#0">返回</A><P></BODY></HTML>2.2.5加入圖片

1.圖片文件的格式

2.設(shè)置網(wǎng)頁的背景

3.圖片標記

4.用圖片作為超鏈接1.圖片文件的格式加入網(wǎng)頁中的圖片，通常使用GIF格式和JPEG格式。

GIF格式文件最多只能顯示256種顏色,優(yōu)點在于制作透明、隔行和動畫效果。

JPEG格式文件可以擁有計算機所能提供的最多種顏色，適合存放高質(zhì)量的彩色圖片、照片。相同的圖片，所占空間比GIF文件小，所以下載時間較短，瀏覽速度較快。但是，JPEG格式的文件沒有GIF格式文件的三種特殊效果。2.設(shè)置網(wǎng)頁的背景網(wǎng)頁的背景可以是某種顏色，也可以是圖片。無論是圖片，還是背景色，都通過<BODY>標記的相應(yīng)屬性來設(shè)置。

(1)設(shè)置背景色利用色彩作背景，比較容易在顏色上協(xié)調(diào)，而且下載速度比采用圖片作為背景快。網(wǎng)頁缺省為白色，<BODY>的bgcolor屬性用于設(shè)置網(wǎng)頁的背景色。格式為：

<BODYbgcolor=顏色值>

其中，“顏色值”可以為顏色的英文名或相應(yīng)十六進制值。(2)用圖片作為背景使用<BODY>標記的background屬性，可為網(wǎng)頁鋪上背景圖片。格式為：

<BODYbackground=圖片文件名>

其中“圖片文件名”包括文件存放的路徑，可以是相對路徑，也可以是絕對路徑。圖片文件可為GIF格式或JPEG格式的文件。在瀏覽器中，作為背景的圖片將按原來的大小復(fù)制，重復(fù)鋪滿整個網(wǎng)頁。作為背景的圖片文件，要做的很小，以便加快下載速度?！纠?-10】圖片背景。<HTML><HEAD><TITLE>圖片背景</TITLE></HEAD><BODYbackground=bg1.gif><H2align=CENTER>用圖片作為背景</H2><FONTsize=4>

在瀏覽器中，作為背景的圖片將按原來的大小復(fù)制，重復(fù)鋪滿整個網(wǎng)頁。因此，作為背景的圖片文件，要做的很小，以便加快下載速度。<BR></FONT></BODY></HTML>3.圖片標記使用圖片標記，可以把一幅圖片加入到網(wǎng)頁中。用圖片標記還可以設(shè)置圖片的替代文本、尺寸、布局等屬性。格式為：<IMGsrc=文件名alt=說明width=xheight=yborder=nhspace=hvspace=valign=對齊方式>

說明：標記中的屬性說明見表2-7。名稱說明src指出要加入圖片的文件名，即“圖片文件的路徑\圖片文件名”。alt在瀏覽器尚未完全讀入圖片時，在圖片位置顯示的文字。width寬度（像素數(shù)或百分數(shù)）。通常只設(shè)為圖片的真實大小以免失真，若需要改變圖片大小最好事先使用圖片編輯工具。height設(shè)定圖片的高度（像素數(shù)或百分數(shù)）。hspace設(shè)定圖片邊沿空白，以免文字或其它圖片過于貼近。設(shè)定圖片左右的空間水平方向空白像素數(shù)。vspace設(shè)定圖片上下的空間，空白高度采用像素作單位。align圖片在頁面中的對齊/布局方式，或圖片與文字的對齊方式。表2-7圖片標記的屬性說明(1)圖片的尺寸使用<IMG>標記的width和height屬性可以設(shè)置圖片的大小，width和height屬性的值可取像素數(shù)，也可取百分數(shù)（瀏覽器窗口）。如果不設(shè)定圖片的尺寸，圖片將按照其本身的大小顯示。

【例2-11】設(shè)置圖片的尺寸。<HTML><HEAD><TITLE>設(shè)定圖片的尺寸</TITLE></HEAD><BODY><H4align=center>設(shè)定圖片的尺寸</H

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

HTML語言程序設(shè)計

文檔簡介

溫馨提示

最新文檔

評論

HTML語言程序設(shè)計

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔