網(wǎng)絡(luò)建設(shè)基礎(chǔ)

上傳人：0*** IP屬地：湖北上傳時(shí)間：2023-02-03 格式：PPT 頁數(shù)：83 大小：137KB 積分：30 舉報(bào) 版權(quán)申訴

已閱讀5頁，還剩78頁未讀，繼續(xù)免費(fèi)閱讀

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

文檔簡介

靜態(tài)網(wǎng)頁設(shè)計(jì)HTML表示超文本標(biāo)記語言（HyperTextMarkupLanguage）。HTML文件是一個(gè)包含標(biāo)記的文本文件。這些標(biāo)記保證瀏覽器怎樣顯示這個(gè)頁面。HTML文件必須有htm或者h(yuǎn)tml擴(kuò)展名。HTML文件可以用一個(gè)簡單的文本編輯器創(chuàng)建。HTML文件是什么？

1.HTML編輯器

關(guān)于HTML編輯器：

用一些所見即所得的編輯器，比如frontpage，dreamweaver，你可以很容易創(chuàng)建一個(gè)頁面，而不需要在純文本中編寫代碼。

但是假如你想成為一名熟練的網(wǎng)絡(luò)開發(fā)者，我們強(qiáng)烈推薦你用純文本編輯器編寫代碼，這有助于學(xué)習(xí)HTML基礎(chǔ)。

2. HTML文件結(jié)構(gòu)的格式2.1HTML的基本語法

1 了解HTML的標(biāo)記HTML文件是由標(biāo)記和文本組成

格式為：〈標(biāo)記〉受標(biāo)記影響的文本〈／標(biāo)記〉標(biāo)記的屬性。標(biāo)記需要通過屬性制作各種效果。格式為： <標(biāo)記屬性1＝屬性值屬性2＝屬性值…〉受影響的文本〈／標(biāo)記〉

<fontsize=4color=red>屬性示例注意：使用時(shí)屬性之間沒有順序。對(duì)同一段文本，可以用多個(gè)標(biāo)記來共同作用，產(chǎn)生一定的效果。HTML也有注釋標(biāo)記?！?lt;!--”和“-->”之間的部分為注釋內(nèi)容,可以插入文本的任何地方。

標(biāo)記和屬性不區(qū)分大小寫。

2 HTML的基本結(jié)構(gòu) HTML文件以<html>開頭,以</html>結(jié)尾。 HTML文件包括頭部<head>和主體<body>?；窘Y(jié)構(gòu)為：<html><head>

網(wǎng)頁內(nèi)容</body></html>【例1】簡單的HTML文件<html> <head>

<body>

我的第一個(gè)網(wǎng)頁！ </body></html>2.2 文件結(jié)構(gòu)的格式標(biāo)記1、 HTML文檔標(biāo)記 HTML文檔標(biāo)記的格式為:<html>HTML文檔內(nèi)容</html><html>處于文檔的最前面，表示HTML文檔的開始，即瀏覽器從<html>開始解釋，直到遇到</html>為止。每個(gè)HTML文件均以<html>開始，以</html>結(jié)束。

2、HTML文件頭標(biāo)記<head>..</head> HTML文件頭標(biāo)記的格式為： <head>頭部內(nèi)容</head>文件頭部在文件標(biāo)記<html>之后，其內(nèi)容可以是標(biāo)題名，文本文件地址、創(chuàng)作信息等網(wǎng)頁信息說明，對(duì)應(yīng)于相應(yīng)的標(biāo)記。如標(biāo)題標(biāo)記<title>…</title>。3 HTML文件標(biāo)題標(biāo)記

<title>標(biāo)題名<／title>【例2】如果沒有使用<head>標(biāo)記，而單獨(dú)使用<title>，<title>標(biāo)記仍可設(shè)定。<html><title>

網(wǎng)頁設(shè)計(jì)</title><body>無<head>時(shí)，<title>；標(biāo)記仍起作用</body></html>顯示結(jié)果描述實(shí)體不可拆分的空格 <小于<>大于>&and符號(hào)&“引號(hào)"‘單引號(hào)

想要在HTML中顯示一個(gè)小于號(hào)“<”，需要用到字符實(shí)體。一個(gè)字符實(shí)體擁有三個(gè)部分：一個(gè)and符號(hào)（&），一個(gè)實(shí)體名或者一個(gè)實(shí)體號(hào)，最后是一個(gè)分號(hào)（;）

注意：實(shí)體名是大小寫敏感的。4HTML文件主體標(biāo)記格式為：<body>background=”文件名”text=”顏色”link=”顏色值”vlink=”顏色值”alink=”顏色值”<／body>background設(shè)置網(wǎng)頁的背景圖像：bgcolor設(shè)置網(wǎng)頁的背景色；text設(shè)置文本的顏色：link設(shè)置未被訪問過的超文本鏈接的顏色，默認(rèn)為藍(lán)色；vlink設(shè)置已被訪問過的超文本鏈接的顏色，默認(rèn)為藍(lán)色；alink設(shè)置超文本鏈接在被訪問瞬間的顏色，默認(rèn)為藍(lán)色

3 HTML文字格式與頁面格式3.1設(shè)置標(biāo)題格式設(shè)置標(biāo)題格式的格式為：<hnalign=對(duì)齊方式>標(biāo)題<／hn>屬性align用來設(shè)置標(biāo)題在頁面中的對(duì)齊方式：left(左對(duì)齊)、center(居中)或right(右對(duì)齊)。屬性n用來指定標(biāo)題文字的大小。n可以取1—6的整數(shù)值，取1時(shí)文字最大，6時(shí)文字最小，默認(rèn)時(shí)為<h1>。 <hn>…<／hn>這些標(biāo)記顯示宋體字。<hn>…<／hn>標(biāo)記會(huì)自動(dòng)插入一個(gè)空行，不必用標(biāo)記再加空行。在一個(gè)標(biāo)題行中無法使用不同大小的字體。

【例3】用<hn>設(shè)置標(biāo)題的大小。<html> <head> <title> 網(wǎng)頁設(shè)計(jì) </title> </head> <body> <h1>今天天氣真好!</hl> <h2>今天天氣真好!</h2> <h3>今天天氣真好!</h3> <h4align=left>今天天氣真好!</h4> <h5align=center>今天天氣真好!</h5> <h6align=right>今天天氣真好!</h6> <h>今天天氣真好!<h> </body></html>3.2設(shè)置強(qiáng)制換行標(biāo)記 放在一行的末尾，可使后面的文字換到下一行，而又不會(huì)在行與行之間留下空行。強(qiáng)制換行標(biāo)記的格式為：

文字 換行標(biāo)記單獨(dú)使用，可使頁面清晰、整齊?！纠?】強(qiáng)制換行標(biāo)記的使用，

<html> <head> <title>強(qiáng)制換行標(biāo)記的使用</title> </head> <body> 歡迎進(jìn)入牡丹園! 新聞

影視 聊

天

室 </body></html>3.3設(shè)置文字格式1設(shè)置文字的大小設(shè)置文字的大小的格式為：<fontsize=數(shù)字face=字體名color=顏色>被設(shè)置的文字<／font>標(biāo)記可設(shè)定文字的字體、字號(hào)和顏色。size用來設(shè)置文字的大小。數(shù)字的取值范圍從1～7，size取1時(shí)最小，取7時(shí)最大。face用來設(shè)置字體。如黑體、宋體、楷體—GB2312、仿宋—GB2312、隸書、TimesNewRoman等。color用來設(shè)置文字顏色。和<hn>標(biāo)記都可以設(shè)置文字的大小，當(dāng)中的size取7時(shí)的文字比<h1>要大。

【例5】用設(shè)置文字的大小。<html> <head> <title>用設(shè)置文字的大小</title> </head> <body> <h1>文字的大小!</h1> <fontsize=1>文字的大小size=1 <fontsize=2>文字的大小size=2 <fontsize=3>文字的大小size=3 <fontsize=4>文字的大小size=4 <fontsize=5>文字的大小size=5 <fontsize=6>文字的大小size=6 <fontsize=7>文字的大小size=7 </body></html>2設(shè)置字體

當(dāng)文字是漢字時(shí)，格式中的“字體名”可以為：宋體、幼圓、隸書、楷體_GB2312、黑體、仿宋_GB2312等。當(dāng)文字為英文時(shí)，字體名可以為TimesNewRoman等約50種字體。

【例6】設(shè)置字體<html><head><title>設(shè)置字體</title></head><body><fontsize=4> <fontface=幼圓>幼圓 <fontface=隸書>隸書 <fontface=黑體>黑體 <fontface=楷體_GB2312>楷體_GB2312 <fontface=仿宋_GB2312>仿宋_GB2312 </body></html>3設(shè)置字型字形就是文字的風(fēng)格，如加粗、斜體、帶下劃線、上標(biāo)、下標(biāo)等。字型的控制標(biāo)記見表2-3【例7】設(shè)置字型<html><head><title>設(shè)置字型</title></head> <body>

設(shè)置字體黑體 設(shè)置字體斜體 設(shè)置字體帶下劃線 設(shè)置字體<strike>帶刪除線</strike> 設(shè)置字體下標(biāo) </body></html>

4設(shè)置文字顏色(a)<body>標(biāo)記中的text屬性

利用<body>標(biāo)記的text屬性，可以設(shè)定整個(gè)網(wǎng)頁文字的顏色。格式：

<bodytext=顏色>受影響的文字</body> <body>與</body>標(biāo)記所含的內(nèi)容是HTML文件的主體，所以它帶來的參數(shù)對(duì)整個(gè)文件起作用。顏色可以用相應(yīng)英文單詞或以“#”引導(dǎo)的一個(gè)十六進(jìn)制代碼表示，【例8】用<body>標(biāo)記設(shè)定文字的顏色<html><head><title>用<body>標(biāo)記設(shè)定文字的顏色</title></head><bodytext=blue><h3>靜夜思</h3> <fontface=宋體size=4>李白 <fontface=楷體>

床前明月光，疑是地上霜，

舉頭望明月，低頭思故鄉(xiāng)。 </body></html>(b）標(biāo)記中的color屬性利用標(biāo)記中的color屬性，可以設(shè)定段落、短語、詞或字的顏色。格式為:<fontcolor=顏色>受影響的文字顏色的取值與<body>標(biāo)記的取值方法相同?！纠?】用標(biāo)記設(shè)定文字的顏色。<html><head><title>用標(biāo)記設(shè)定文本的顏色</title></head><body><fontcolor=black>黑色<fontcolor=blue>藍(lán)色 <fontcolor=brown>棕色<fontcolor=cyan>青色 <fontcolor=white>白色<fontcolor=green>綠色 <fontcolor=red>紅色<fontcolor=yellow>黃色 </body></html>c）<body>與的優(yōu)先級(jí)

當(dāng)<body>與同時(shí)對(duì)文字顏色進(jìn)行定義時(shí)，標(biāo)記優(yōu)先。

3.4設(shè)置段落格式1強(qiáng)制換段標(biāo)記強(qiáng)制換段標(biāo)記的格式為：

文字段落標(biāo)記放在這段文字的末尾，就定義了一個(gè)新段落的開始。標(biāo)記不但能使后面的文字換到下一行，還可以使兩段之間留一空行。強(qiáng)制換段標(biāo)記可以看作強(qiáng)制換行標(biāo)記 和加一行空行。

【例2-10】<html><head><title>強(qiáng)制換段標(biāo)記</title></head><body>

歡迎訪問吉林大學(xué)主頁學(xué)校概貌美麗校園吉大簡報(bào)</body></html>

2設(shè)置段落標(biāo)記設(shè)置段落標(biāo)記的格式為： <palign=對(duì)齊方式>文字其中屬性align用來設(shè)置段落的對(duì)齊方式，可以為left、center或right，分別表示居左、居中、居右。默認(rèn)時(shí)為left。

3顯示預(yù)排格式標(biāo)記<pre>…<／pre>

當(dāng)用其他編輯工具編排好了一段文字后，其中很可能有一些HTML文件不支持的控制符號(hào)，如回車、多個(gè)空格、Tab鍵等。如果希望在瀏覽網(wǎng)頁時(shí)仍保留在編輯工具中已經(jīng)排好的段落格式，可以使用<pre>標(biāo)記將預(yù)先排好的格式保留下來。顯示預(yù)排格式標(biāo)記的格式為：

<pre>預(yù)先排好的格式<／pre>【例2-11】預(yù)排格式標(biāo)記的使用。<html><head><title>顯示預(yù)排格式</title></head><body><pre><fontsize=3color=blue><h3><fontcolor=purple><palign=center>唐詩二首</h3><fontface=黑體color=black>

賦得古原草送別

長

相

思

唐·白居易

離離原上草，一歲一枯榮。

汴水流，泗水流，

野火燒不盡，春風(fēng)吹又生。

流到瓜洲古渡頭。

遠(yuǎn)芳侵古道，晴翠接荒城。

吳山點(diǎn)點(diǎn)愁。

又送王孫去，萋萋滿別情。

思悠悠，恨悠悠，

恨到歸時(shí)方始休。

月明人依樓。</pre></body></html>

4 設(shè)置超級(jí)鏈接、列表和表格

4.1設(shè)置超級(jí)鏈接1 錨點(diǎn)標(biāo)記<a>…<／a>

錨點(diǎn)(anchor)標(biāo)記由<a>定義，它在網(wǎng)頁上建立超文本鏈接。通過單擊一個(gè)詞、句或圖片，可從此處轉(zhuǎn)到另一個(gè)鏈接資源(目標(biāo)資源)，這個(gè)目標(biāo)資源有唯一的地址(URL)。以上特點(diǎn)的詞、句或圖片就稱為熱點(diǎn)。標(biāo)記的格式為：<ahref=”地址”或name=”字符串”>熱點(diǎn)</a>屬性href為超文本引用，它的值為一個(gè)URL，是目標(biāo)資源的有效地址。屬性name指定當(dāng)前文檔內(nèi)的一個(gè)字符串，作為鏈接時(shí)可以使用的有效的目標(biāo)資源的地址。熱點(diǎn)可以根據(jù)需要設(shè)置顏色，利用<body>標(biāo)記中相關(guān)的屬性。

2 建立指向其他頁面的鏈接其格式為：

<ahref=”目標(biāo)文件的路徑／目標(biāo)文件名.html”>熱點(diǎn)文本</a>根據(jù)目標(biāo)文件與當(dāng)前文件的目錄關(guān)系，有如以下4種寫法。1）鏈接到同一目錄內(nèi)的網(wǎng)頁文件鏈接到同—目錄內(nèi)的網(wǎng)頁文件的格式為：<ahref=”目標(biāo)文件名.html”>熱點(diǎn)文本</a>2）鏈接到下一級(jí)目錄中的網(wǎng)頁文件鏈接到下一級(jí)目錄中的網(wǎng)頁文件的格式為：<ahref=”子目錄名／目標(biāo)文件名．html”>熱點(diǎn)文本<／a>3）鏈接到上一級(jí)目錄中的網(wǎng)頁文件鏈接到上一級(jí)目錄中的網(wǎng)頁文件的格式為：<ahref=”.／目標(biāo)文件名．Html”>熱點(diǎn)文本<／a>其中“．／”表示退到上一級(jí)目錄中。4）鏈接到同級(jí)目錄中的網(wǎng)頁文件鏈接到同級(jí)目錄中的網(wǎng)頁文件的格式為：

<ahref=”..／子目錄名／目標(biāo)文件名．html”>熱點(diǎn)文本<／a>5）創(chuàng)建指向本頁中的鏈接要在當(dāng)前頁面內(nèi)實(shí)現(xiàn)超鏈接，需要定義兩個(gè)標(biāo)記：一個(gè)為超鏈接標(biāo)記，另一個(gè)為書簽標(biāo)記。超鏈接標(biāo)記的格式為：

<ahref=”#記號(hào)名”>熱點(diǎn)文本<／a>即單擊熱點(diǎn)文本，將跳轉(zhuǎn)到“記號(hào)名”開始的文本。書簽就是用<a>標(biāo)記對(duì)該文本做一個(gè)記號(hào)。若有多個(gè)鏈接的書簽名，書簽名在<a>的name屬性中定義。格式為：

<aname=”記號(hào)名”>目標(biāo)文本附近的字符串<／a>【例2-14】鏈接本頁中的文本<html><head><title>鏈接本頁中的文本</title></head><bodylink=greenalink=bluevlink=black><h2align=center>學(xué)院概況</h2><fontsize=3color=purple><center>

<ahref="#1">1專業(yè)課</a><ahref="#2">2實(shí)驗(yàn)室</a><ahref="#3">3資料室</a><center><divalign=left><aname="1"></a>1專業(yè)設(shè)置 …… <aname="2"></a>2實(shí)驗(yàn)室 …… <<aname="3"></a>3資料室 …… </div></body></html>6.創(chuàng)建指向電子郵件的鏈接若要?jiǎng)?chuàng)建指向電子郵件的鏈接，在<a>標(biāo)記的href屬性中加入mailto，其格式為：<ahref=”mailto：E-mail地址”>熱點(diǎn)文本</a>例如：E-mail地址是kmas@163.com，建立如下鏈接：信箱：<ahref=”mailto：kmas@163.com”>kmas@163.com</a>4.2 設(shè)置列表列表分為無序列表和有序列表兩類。帶序號(hào)標(biāo)志(如數(shù)字、字母等)的表項(xiàng)就組成有序列表，否則為無序列表。

1、無序列表無序列表中每一個(gè)表項(xiàng)的前面是項(xiàng)目符號(hào)（如●、■等）。建立無序列表使用<ul>標(biāo)記和<li>表項(xiàng)標(biāo)記。格式為：<ul><li>第一個(gè)列表項(xiàng)<li>第二個(gè)列表項(xiàng)……</ul>注意:<li>是單標(biāo)記,即一個(gè)一個(gè)表項(xiàng)的開始,就是前一個(gè)表項(xiàng)的結(jié)束.

無序列表的特點(diǎn)：列表項(xiàng)目作為一個(gè)整體,與上下段文本間各有一行空白;表項(xiàng)向右縮進(jìn)并左對(duì)齊,每行前面有項(xiàng)目符號(hào)。每個(gè)表項(xiàng)左端的項(xiàng)目符號(hào)可為disc（實(shí)心圓點(diǎn)）、circle（空心圓點(diǎn)）、square（方塊），也可為圖像。例如<ultype=”disc”><ultype=”graph1.gif”>【例15】無序列表應(yīng)用示例<html><head><title>無序列表</title></head><body><palign=center><fontcolor=bluesize=4>專業(yè)設(shè)置<ul> <litype="circle">計(jì)算機(jī)應(yīng)用 <litype="square">計(jì)算機(jī)軟件 <litype="disc">計(jì)算機(jī)圖形學(xué)</ul></body></html>2、創(chuàng)建有序列表通過帶序號(hào)的列表可以更清楚地表達(dá)信息的順序。使用<ol>標(biāo)記可以建立有序列表，表項(xiàng)的標(biāo)記為<li>，格式為：<ol><li>第一個(gè)列表項(xiàng)<li>第二個(gè)列表項(xiàng)……</ol>在瀏覽器中顯示時(shí)，有序列表整個(gè)表項(xiàng)與上下段之間各有一行空白，列表項(xiàng)目向右縮進(jìn)并左對(duì)齊，各表項(xiàng)前帶序號(hào)。

【例2-17】有序列表應(yīng)用示例<html><head><title>有序列表</title></head><body><palign=center><fontcolor=bluesize=4>專業(yè)設(shè)置<ol> <li>計(jì)算機(jī)應(yīng)用 <li>計(jì)算機(jī)軟件 <li>計(jì)算機(jī)圖形學(xué)</ol></body></html>列表的嵌套列表嵌套把主頁分為多個(gè)層次，例如書的目錄，給人以很強(qiáng)的層次感。有序列表和無序列表不僅可以自身嵌套，而且可以相互嵌套。1、無序列表中套無序列表【例2-19】無序列表中套無序列表<html><head><title>無序列表中套無序列表</title></head><body><ul> <li>第一層無序列表1 <ul> <li>第二層無序列表 <li>第二層無序列表 </ul> <li>第一層無序列表2 <ul> <li>第二層無序列表 <li>第二層無序列表 <li>第二層無序列表 </ul></ul></body></html>(2)無序列表嵌套有序列表【例2-20】無序列表中套有序列表<html><head><title>無序列表中套有序列表</title></head><body> <ul> <li>第一層序列表1 <ol> <li>第二層有序列表 <li>第二層有序列表 </ol> <li>第一層無序列表2 <ol> <li>第二層有序列表 <li>第二層有序列表 <li>第二層有序列表 </ol></body></html>4.3設(shè)置表格1建立簡單表格最簡單的表格僅包括行和列.表格的標(biāo)記為<table>,行的標(biāo)記為<tr>,表頭的標(biāo)記為<th>，表項(xiàng)的標(biāo)記為<td>。其中，<tr>是單標(biāo)記。表項(xiàng)內(nèi)容寫在<td>與</td>之間。<table>則必須成對(duì)使用。其格式為：<tableborder=-nwidth=x或x％height=y或y％cellspacing=icellpadding=j><tr><th>表頭1<／th><th>表頭2<／th><th>…<／th><th>表頭n<／th> <tr><td>表項(xiàng)1<／td><td>表項(xiàng)2<／td><td>…<／td><td>表項(xiàng)n<／td>……<tr><td>表項(xiàng)1<／td><td>表項(xiàng)2<／td><td>…<／td><td>表項(xiàng)n<／td><／table>在瀏覽器中顯示時(shí)，<th>標(biāo)記的文字按粗體顯示，<td>標(biāo)記的文字按正常字體顯示。表格的整體外觀由<table>標(biāo)記的屬性決定：border定義表格邊框的粗細(xì)，n取整數(shù)，單位是像素(如果省略，則不帶邊框)width定義表格的寬度，x為像素?cái)?shù)或占窗口的百分比height定義表格的高度，y為像素?cái)?shù)或占窗口的百分比cellspacing定義表項(xiàng)間隙，單位是像素cellpadding定義表項(xiàng)內(nèi)部空白，單位是像素。【例2-21】建立有框線和無框線簡單表格。

<html><head><title>建立有框線和無框線簡單表格</title></head><body><tableborder=-3><tr><th>學(xué)號(hào)</th><th>姓名</th><th>語文</td><th>數(shù)學(xué)</th><th>平均分?jǐn)?shù)</th><tr><td>0001</td><td>張三</td><td>92</td><td>98.5</td><td>95.3</td><tr><td>0002</td><td>李四</td><td>88</td><td>82</td><td>85</td><tr><td>0006</td><td>王麻子</td><td>68.5</td><td>90</td><td>79.3</td></table></body></html>2.給表格加上標(biāo)題

用<caption>標(biāo)記給表格加標(biāo)題，其格式為：

<table> <captionalign=left/right/top/bottom valign=top/bottom>標(biāo)題</caption></table>其中：valign 設(shè)置標(biāo)題放在表的上部top（默認(rèn)），還是下部bottom;align 設(shè)置標(biāo)題放在表的上部top或下部的中間（缺生），左邊left，還是右邊right；3 跨多行多列的表項(xiàng) 使用<tr>、<td>、<th>標(biāo)記的colspan和rowspan屬性，可以分別制作跨多行（合并行）和跨多列（何并列）的表格?？缍嗔械谋碓?lt;thcolspan=#>例如：<tableborder><tr><thcolspan=3>MorningMenu</th><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>跨多行的表元<throwspan=#><tableborder><tr><throwspan=3>MorningMenu</th><th>Food</th><td>A</td></tr><tr><th>Drink</th><td>B</td></tr><tr><th>Sweet</th><td>C</td></tr></table>【例2-22】建立多重表頭的格式<html><head><title>建立多重表頭的格式</title></head><body><tableborder=5><capton><fontsize=5>成績表</caption><tr><throwspan=2>學(xué)號(hào)<throwspan=2>姓名<thcolspan=3>成績<tr><th>語文<th>數(shù)學(xué)<th>總分?jǐn)?shù)<tr><td>1<td>張三<td>85<td>65<td>150<tr><td>2<td>李四<td>76<td>97<td>173<tr><td>3<td>王武<td>87<td>78<td>165</table></body></html>4、表格在頁面中的屬性（1）設(shè)定表格在頁面中的位置表格瀏覽器窗口的位置也有三種：居左、居中和居右。使用<table>標(biāo)記的align屬性，格式為：<tablealign=left或center或right>left表示居左，center表示居中，right表示居右。當(dāng)表格位于頁面的左側(cè)或右側(cè)時(shí)，文本填充在另一側(cè)。當(dāng)表格居中時(shí)，表格兩邊沒有文本。當(dāng)align屬性默認(rèn)時(shí)，文本在表格的下面。（2）表格的圖像背景可以在<table>、<th>、<tr>、<td>標(biāo)記中使用下面屬性：background=”圖像文件名”設(shè)置背景圖像；bordercolor=”顏色”設(shè)定表格邊框顏色；bordercolorlight=”顏色”設(shè)定表格邊框亮部顏色；rules=”row,cols或none”設(shè)定表內(nèi)線的顯示方法；另外，還可以用<td>標(biāo)記中bgcolor屬性給表格的每個(gè)單元設(shè)置背景色：<tdbgcolor=”顏色或顏色值”【例2-23】設(shè)定表格在頁面中的位置和圖像背景<html><head><title>設(shè)定表格在頁面中的位置和圖像背</title></head><body><tableborder=-3align=centerbackground="p1.jpg"width=400height=100rules=none><caption><fontsize=5>成績表</caption><tr><th>學(xué)號(hào)</th><th>姓名</th><th>語文</td><th>數(shù)學(xué)</th><th>平均分?jǐn)?shù)</th><tr><td>0001</td><td>張三</td><td>92</td><td>98.5</td><td>95.3</td><tr><td>0002</td><td>李四</td><td>88</td><td>82</td><td>85</td><tr><td>0006</td><td>王武</td><td>68.5</td><td>90</td><td>79.3</td></table></body></html>5.1設(shè)置圖像標(biāo)記<img>Img標(biāo)簽和src屬性

在HTML里面，圖像是由<img>標(biāo)簽定義的。

<img>是空標(biāo)簽，意思是說，它只擁有屬性，而沒有結(jié)束標(biāo)簽。

想要在頁面上顯示一個(gè)圖像，需要使用src屬性?！皊rc”表示“源”的意思?！皊rc”屬性的值是所要顯示圖像的URL。

插入圖像的語法：

<imgsrc="url">5設(shè)置多媒體與框架

標(biāo)記中的屬性說明如下：src屬性

指出想要加入圖像的文件名，即“圖像文件的路徑＼圖像文件名”：alt屬性

在瀏覽器尚未完全讀入圖像時(shí)，在圖像位置顯示的文字：width屬性

圖像的寬度(像素?cái)?shù)或百分?jǐn)?shù))height屬性

圖像的高度(像素?cái)?shù)或百分?jǐn)?shù))hspace屬性

水平方向空白像素?cái)?shù)：vspace屬性

垂直方向空白像素?cái)?shù)：align屬性

圖像在頁面中的對(duì)齊／布局方式，或圖像與文字的對(duì)齊方式?！纠?-24】設(shè)置圖像的尺寸。<html><head><title>設(shè)定圖像的尺寸</title></head><body><imgsrc="p1.jpg"alt="圖片">原始大小<imgsrc="p1.jpg"alt="圖片"width=60height=100>寬60高100<imgsrc="p1.jpg"alt="圖片"width=15%height=40%>寬15%高40%</body></html>5.4設(shè)置網(wǎng)頁的背景1．

設(shè)置背景色格式為：

<bodybgcolor=”顏色值”>“顏色值”可以為顏色的英文名或相應(yīng)十六進(jìn)制值。2．用圖像作為背景其格式為<bodybackground=”圖像文件名”>“圖像文件名”中包括圖像文件的路徑可以是相對(duì)路經(jīng)也可以是絕對(duì)路徑。圖像文件可為GIF格式或JPEG格式的文件。圖像文件要做得很小，以便加快下載速度。

【例2-25】圖像作背景。<html><head><title>用圖像作為背景</title></head><bodybackground="p1.jpg"><h4align=center>用圖像作為背景</h4></body></html>3用圖像作為超鏈接

圖像也可以作為熱點(diǎn)，可以為圖像設(shè)置超連接，格式為：<ahref=”鏈接到的文件名”><imgsrc=”圖像文件名”></a>鏈接到的文件名和圖像文件名中均須寫出所需的路徑。5.5設(shè)置框架1.建立框架框架的建立使用<frameset>、<frame>兩個(gè)標(biāo)記。它與一般的HTMl文件并無大的區(qū)別，只是將<frameset>標(biāo)記取代<body>標(biāo)記，用來聲明框架的定義。<frame>標(biāo)記用來聲明其中框架頁面的內(nèi)容。其基本結(jié)構(gòu)為：

<frameset><framesrc="URL"></frameset>1)<frameseb>標(biāo)記<frameset>標(biāo)記用來定義—個(gè)框架組的屬性，格式為：

<framesetrow=”數(shù)”cols=”數(shù)”border=”像素?cái)?shù)”bordercolor=”顏色”

frameboder=”yes/no”framespacing="值”>…</frameset>其中屬性：row設(shè)定橫向分割的框架數(shù)日：cols設(shè)定縱向分割的框架數(shù)日：border設(shè)定邊框的寬度；bordercolor設(shè)定邊框的顏色：frameborder設(shè)定有／無邊框；framespacing設(shè)置各窗口間的空白。2)<frame>標(biāo)記<frame>標(biāo)記用于給各個(gè)框架指定頁面的內(nèi)容，也就是，它將各個(gè)框架和包含內(nèi)容的那個(gè)文件聯(lián)系在一起。<frame>是一個(gè)單標(biāo)記，格式為：

<framesrc=”源文件名.html”name=”框架名”border=”像素?cái)?shù)”bordercolor=”顏色”frameborde=yes或nomarginwidth=xscrolling=yes或no或autonoresize>屬性：src表示該框架對(duì)應(yīng)的源文件：

name指定框架名。框架名由字母開頭，下劃線開頭的名字無效，例如<flamesrc=“aaal．html”，name=“rgl”><flamesrc=”../webl/page.html”，name=”sub1”><framesrc=”http：//.ch/book.html”>，也就是說，源文件可以是某個(gè)網(wǎng)址上的文件，只需寫上URL；border設(shè)定邊框的寬度；bordercolor設(shè)定邊框的顏色；frameborder設(shè)定有(yes)／無(no)邊框：marginwidth設(shè)置框架內(nèi)容與左右邊框的空白marginheight設(shè)置框架內(nèi)容與上下邊框的空白scrolling設(shè)置是(yes)/否no/自動(dòng)(auto)加入滾動(dòng)條；noresize設(shè)置不允許窗口改變大小，默認(rèn)設(shè)置是允許窗口改變大小;【例2-27】建立橫向排列的框架<html><head><title>建立橫向排列的框架</title></head><framesetrows=20%,30%,50%><framesrc="局域網(wǎng).htm"><framesrc="遠(yuǎn)程計(jì)算機(jī)網(wǎng)絡(luò).htm"><framesrc="因特網(wǎng).htm"></frameset></html>【例2-28】建立縱橫排列的框架(本例題中的網(wǎng)頁文件為本章中的例題)<html><head><title>建立縱橫排列的框架</title></head><framesetcols=20%,*><framesrc="因特網(wǎng).htm"><framesetrows=40%,*><framesrc="局域網(wǎng).htm"><framesrc="遠(yuǎn)程計(jì)算機(jī)網(wǎng)絡(luò).htm"></frameset></frameset></html>2.設(shè)置框架屬性1）

設(shè)定框架的有無和顏色利用<frameset>和<frame>標(biāo)記可以設(shè)置邊框的外觀，如大小、顏色。兩個(gè)標(biāo)記所不同的是，<frameset>標(biāo)記設(shè)置的是整個(gè)框架的屬性，而<frame>只能設(shè)置它所控制的框架。設(shè)定無邊框格式為：<framesetframeborder=yes或no或1或0>

或<frameframeborder=yes或no或1或0>其中取值yes或1（默認(rèn)）表示生成立體的邊框，no或0表示無邊框。

【例2-29】將【例2-28】縱向框架設(shè)置為有表框，其他設(shè)為無邊框。<html><head><title>建立縱橫排列的框架</title></head><framesetcols=20%,*><framesrc=”2-9.htm”frameborder=yes><framesetrows=40%,*><framesrc=”2-10.htm”frameborder=no><framesrc=”2-11.htm”frameborder=no></frameset></frameset></html>2）設(shè)定邊框顏色利用<frameset>和<frame>標(biāo)記的bordercolor屬性給邊框著色。格式為：

人人文庫> 全部分類> 教育資料 > 輔導(dǎo)培訓(xùn)

溫馨提示

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

網(wǎng)絡(luò)建設(shè)基礎(chǔ)

文檔簡介

溫馨提示

最新文檔

評(píng)論

網(wǎng)絡(luò)建設(shè)基礎(chǔ)

文檔簡介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔