HTML語(yǔ)言程序設(shè)計(jì)_第1頁(yè)
HTML語(yǔ)言程序設(shè)計(jì)_第2頁(yè)
HTML語(yǔ)言程序設(shè)計(jì)_第3頁(yè)
HTML語(yǔ)言程序設(shè)計(jì)_第4頁(yè)
HTML語(yǔ)言程序設(shè)計(jì)_第5頁(yè)
已閱讀5頁(yè)，還剩61頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

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

1.什么是HTML

2.HTML的作用

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

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

特點(diǎn)：簡(jiǎn)易性，可擴(kuò)展性，平臺(tái)無(wú)關(guān)性。

歷史：1.019934.011999w3c標(biāo)準(zhǔn)

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

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

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

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

1.HTML文件的組成

2.標(biāo)記

3.標(biāo)記的屬性

4.HTML文件的基本結(jié)構(gòu)1.HTML文件的組成①標(biāo)記：是HTML的基本元素，可以說(shuō)一個(gè)HTML文件大部分都是由字符信息加上一些標(biāo)記呈現(xiàn)出來(lái)的。基本的標(biāo)記可分為兩種：?jiǎn)我粯?biāo)記和成對(duì)標(biāo)記②文字與圖形資料③統(tǒng)一資源定位器URL（UniformResourceLocator）：2.標(biāo)記

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

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

<標(biāo)記屬性1=屬性值屬性2=屬性值…>

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

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

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

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

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

<HTML><HEAD><TITLE>網(wǎng)頁(yè)的標(biāo)題</TITLE></HEAD><BODY>

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

</BODY></HTML>

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

<HTML><HEAD><TITLE>簡(jiǎn)單的HTML文件</TITLE></HEAD><BODY>

最簡(jiǎn)單的網(wǎng)頁(yè)

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

2.2.2HTML入門

1.HTML文檔標(biāo)記<HTML>…</HTML>

2.HTML文件頭標(biāo)記<HEAD>…</HEAD>

3.HTML文件標(biāo)題標(biāo)記<TITLE>…</TITLE>

4.HTML文件主體標(biāo)記<BODY>…</BODY>

5.注釋標(biāo)記1.HTML文檔標(biāo)記<HTML>…</HTML>HTML文檔標(biāo)記的格式為：

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

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

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

<TITLE>標(biāo)題名</TITLE>

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

<BODY>文件主體</BODY>

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

表2-1中，涉及顏色的屬性，取值可以是英文顏色名，也可以用“#”引導(dǎo)的一個(gè)十六進(jìn)制數(shù)代碼來(lái)表示，見(jiàn)表2-2。如果顏色值用十六進(jìn)制數(shù)代碼，則顏色數(shù)比表2-2列出的數(shù)目多得多。表2-2顏色代碼表名稱英文顏色名16進(jìn)制代碼黑色black#000000藍(lán)色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水藍(lán)色dodgerblue#0B6EFF淡紫色lavender#DBDBF8【例2-2】使用網(wǎng)頁(yè)的背景色（bgcolor）屬性，可以設(shè)定整個(gè)網(wǎng)頁(yè)的背景顏色；使用網(wǎng)頁(yè)的文本色（text）屬性，可以設(shè)定整個(gè)網(wǎng)頁(yè)文字的顏色。<HTML><HEAD>

這是主體之外的文本

<TITLE>試試BODY標(biāo)記的屬性</TITLE></HEAD><BODYbgcolor=greenyellowtext=blue>

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

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

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

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

<!--注釋內(nèi)容-->

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

1.標(biāo)題文字標(biāo)記

2.文本文字標(biāo)記

3.設(shè)置字型

4.強(qiáng)制換行、換段標(biāo)記

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

6.水平線

7.特殊符號(hào)

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

標(biāo)記的格式為：

<Hnalign=對(duì)齊方式>標(biāo)題文字</Hn>

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

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

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

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

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

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

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

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

說(shuō)明：段落標(biāo)記<P>的屬性align用來(lái)設(shè)置段落的對(duì)齊方式，其取值可以為left、center或right，分別表示居左、居中、居右。缺省時(shí)默認(rèn)為left。一個(gè)強(qiáng)制換段標(biāo)記<P>可以看作是兩個(gè)強(qiáng)制換行標(biāo)記<BR><BR>?！纠?-6】換行與換段標(biāo)記的使用。<HTML><HEAD><TITLE>強(qiáng)制換行、換段標(biāo)記的使用</TITLE></HEAD><BODY><H2align=center><FONTcolor=blue>學(xué)生之家</FONT></H2>

新

聞

學(xué)習(xí)窗口

<P>健康信箱<BR>

聊天室

<Palign=center>來(lái)信

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

<DIValign=left|center|right>

文本或圖像</DIV>

說(shuō)明：屬性align的取值分別為：left、center和right?！纠?-7】分區(qū)顯示標(biāo)記的使用。<HTML><HEAD><TITLE>分區(qū)顯示標(biāo)記的應(yīng)用</TITLE></HEAD><BODY><CENTER><H2>分區(qū)顯示標(biāo)記的應(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.水平線水平線標(biāo)記的格式為：

<HRalign=對(duì)齊方式size=橫線粗細(xì)

width=橫線長(zhǎng)度color=橫線顏色noshade>

說(shuō)明：①屬性align設(shè)定橫線放置的位置，可選擇left（居左）、right（居右）或center（居中）。②屬性size設(shè)定線條粗細(xì)，以像素為單位，默認(rèn)為2。③屬性width設(shè)定線段長(zhǎng)度，可以是絕對(duì)值（以像素為單位）或相對(duì)值（相對(duì)于當(dāng)前窗口的百分比）。所謂絕對(duì)值，是指線段的長(zhǎng)度是固定的，不隨窗口尺寸的改變而改變。所謂相對(duì)值，是指長(zhǎng)度相對(duì)于窗口的寬度而定，窗口的寬度改變時(shí)，線段的長(zhǎng)度也隨之增減，默認(rèn)值為100%，即始終填滿當(dāng)前窗口。④屬性color設(shè)定線條顏色，默認(rèn)為黑色。可以采用顏色的名稱。顏色可以用相應(yīng)英文單詞或以“#”引導(dǎo)的一個(gè)十六進(jìn)制數(shù)代碼來(lái)表示，見(jiàn)表2-2。⑤屬性noshade設(shè)定線條為平面顯示（沒(méi)有三維效果），若缺省則有陰影或立體效果?！纠?-8】水平線標(biāo)記的使用。<HTML><HEAD><TITLE>水平線段標(biāo)記的應(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>

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

1.熱點(diǎn)標(biāo)記

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

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

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

<Ahref=地址name=字符串target=打開(kāi)窗口方式>

熱點(diǎn)</A>

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

<Ahref="目標(biāo)文件的路徑/目標(biāo)文件名.html">

熱點(diǎn)</A>

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

<Ahref="目標(biāo)文件名.html">熱點(diǎn)</A>

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

<Ahref="子目錄名/目標(biāo)文件名.htm">

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

<Ahref="../目標(biāo)文件名.html">熱點(diǎn)</A>

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

<Ahref="../子目錄名/目標(biāo)文件名.html">

熱點(diǎn)</A>

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

<Ahref="#記號(hào)名">熱點(diǎn)</A>

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

<Aname=“記號(hào)名”>目標(biāo)文本附近的字符串

</A>【例2-9】鏈接本頁(yè)中的文本。<HTML><HEAD><TITLE>學(xué)生之家</TITLE></HEAD><BODYlink=redalink=bluevlink=green><Aname="0"></A><H2align=center><B>歡迎來(lái)到“學(xué)生之家”</B></H2><FONTsize=3color=purple><CENTER><Ahref="#news">新聞</A><Ahref="#study">學(xué)習(xí)園地</A><Ahref="#health">健康信箱</A><P></CENTER></FONT><Aname="news"></A>新聞<BR><BR><Ahref="#0">返回</A><P><Aname="study"></A>學(xué)習(xí)園地<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)頁(yè)的背景

3.圖片標(biāo)記

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

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

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

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

<BODYbgcolor=顏色值>

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

<BODYbackground=圖片文件名>

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

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

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

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論