第五章 網(wǎng)頁編程語言 電子教案_第1頁
第五章 網(wǎng)頁編程語言 電子教案_第2頁
第五章 網(wǎng)頁編程語言 電子教案_第3頁
第五章 網(wǎng)頁編程語言 電子教案_第4頁
第五章 網(wǎng)頁編程語言 電子教案_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、第五章 網(wǎng)頁編程語言 電子教案這一章主要闡述標(biāo)記語言HTML、層疊樣式表（CSS）和腳本語言JavaScript。分為三節(jié)。5.1 HTMLHTML 是一種超文本標(biāo)記語言，用于創(chuàng)建頁面并在瀏覽器中顯示超文本文件的格式早在1945年就由Vannevar Bush提出，他在理論上建立了一個(gè)超文本文件系統(tǒng)。1965年Ted Nelson第一次使用“超文本”一詞來形容這種管理信息的系統(tǒng)。與Bush一樣，他的超文本文件系統(tǒng)“Xanadu”，最終也未獲得成功。1967年，在IBM資助下，世界上第一個(gè)真正運(yùn)行成功的“超文本編輯系統(tǒng)”建成，這項(xiàng)研究由Andries Van Dam主持，在美國布朗大學(xué)最終完成。

2、1969年，美國國防部高級(jí)研究計(jì)劃署建立了ARPA網(wǎng)，該網(wǎng)絡(luò)最成功的技術(shù)就是TCP/IP 協(xié)議。 HTML 語言起源于標(biāo)準(zhǔn)綜合標(biāo)記語言(Standard Generalized Markup Language 簡稱 SGML) ，是由 CERN (歐洲粒子物理實(shí)驗(yàn)室)首先提出來的。其最早版本起源于1992年，HTML 4.01版于1999年12月24日被推薦使用。HTML最初用于發(fā)布信息，并沒有在網(wǎng)絡(luò)上使用。但它那極容易使用的顯著特點(diǎn)和隨著網(wǎng)絡(luò)帶寬的逐漸增加，人們便將其作為在各種網(wǎng)絡(luò)環(huán)境之間，不同文件格式之間進(jìn)行交流的一種語言格式。它通過文件格式標(biāo)準(zhǔn)化，統(tǒng)一使用一些標(biāo)記符號(hào)( TAG )，對(duì)文

3、件的內(nèi)容進(jìn)行標(biāo)注，指出內(nèi)容的輸出格式，如字體大小、顏色，背景顏色，表格形式，各部分之間邏輯上的組織等。使用支持 HTML 的瀏覽軟件，其它用戶就可以對(duì)文件進(jìn)行自由的跳躍式的閱讀，還可自行調(diào)整顯示和閱讀的形式。由于它簡單易學(xué)，表現(xiàn)力強(qiáng)，適用廣泛 , ）。超文本標(biāo)識(shí)語言結(jié)構(gòu)簡單，語法較松散，易學(xué)易用。它是一種文字處理語言，而不是“程序”語言。超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。序（HTML的版本聲明）是超文本標(biāo)識(shí)語言的附加標(biāo)識(shí)，放在HTML文檔的第一行。在一般的文檔中也許沒有，序只是用來告知瀏覽器所遵循的HTML版本，當(dāng)前

4、的瀏覽器一般不要求含有序，而且也不會(huì)處理序，因此該標(biāo)識(shí)可以忽略。但是若想保持編寫嚴(yán)格遵循標(biāo)準(zhǔn)通用標(biāo)識(shí)語言（SGML）的HTML文檔，那么就該保留序的位置。 <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01/EN"> <!序><HTML><HEAD>頭 部 信 息</HEAD><BODY>文 檔 主 體， 正 文 部 分</BODY></HTML> 其中<HTML>在最外層， 表示這對(duì)標(biāo)記間的內(nèi)容是HTML文 檔。我們還會(huì)看到一些Ho

5、mpage省略<HTML>標(biāo)記，因?yàn)?html 或.htm 文件被Web瀏覽器默認(rèn)為是HTML文檔。<HEAD> 之間包括文檔的頭部信息，如文檔總標(biāo)題等，若不需頭部信息則可省略此標(biāo)記。<BODY> 標(biāo)記一般不省略， 表示正文內(nèi)容的開始。下面是一個(gè)最基本的超文本文檔的源代碼：文件體文件頭<HTML><HEAD><TITLE>一個(gè)簡單的HTML示例</TITLE></HEAD><BODY><CENTER><H3>歡迎光臨我的主頁</H3><BR>

6、;<HR><FONT SIZE=2>這是我第一次做主頁，無論怎么樣，我都會(huì)努力做好！</FONT></CENTER></BODY></HTML>例5.1 使用多種標(biāo)識(shí)元素的超文本文檔(L5-1.htm)。<HTML><HEAD> <TITLE>對(duì)文字、圖片、文檔作不同處理</TITLE></HEAD><BODY> <H2>鏈接圖片、文檔，改變字體、字號(hào)等</H2> <OL><LI><FONT fac

7、e="隸書">劃卻君山好，平鋪湘流水。</FONT> <LI><FONT face="華文行楷">巴陵無限酒，醉殺洞庭秋。</FONT> </OL> <IMG border="0" src="Js.gif" width="108" height="70"> <FONT size="5">湖光、山色</FONT><BR>岳陽</A>&

8、lt;/BODY></HTML>說明：可以將例5.1寫入“記事本”，保存文件的擴(kuò)展名必須是.htm或.html；例中鏈接圖片、文檔，改變字體、字號(hào)等的主要標(biāo)識(shí)有：<H2></H2>設(shè)置標(biāo)題文字，<FONT></FONT>設(shè)置字體、字號(hào)等，<IMG>設(shè)置圖片超鏈接，<A></A>設(shè)置文本等超鏈接。其他標(biāo)識(shí)的含義請(qǐng)見后續(xù)例題或附錄A。例5.1的運(yùn)行結(jié)果見圖5-1。圖5-1 例5.1的執(zhí)行結(jié)果 HTML是標(biāo)準(zhǔn)通用標(biāo)識(shí)語言(Standard Generalized Markup Language，SG

9、ML)的一個(gè)子集，是標(biāo)識(shí)的集合。一般標(biāo)識(shí)是由一個(gè)起始標(biāo)識(shí)(Opening Tag)和一個(gè)結(jié)束標(biāo)識(shí)(Ending Tag)所組成，其語法為：<x>受控文字</x>其中，x代表標(biāo)記名稱。<x>和</x>就如同一組開關(guān)：起始標(biāo)識(shí)<x>為開啟(ON)的某種功能，而結(jié)束標(biāo)識(shí)</x>(通常為起始標(biāo)識(shí)加上一個(gè)斜線/)為關(guān)(OFF)功能，受控制的文字信息便放在兩標(biāo)識(shí)之間。例如：<i>這是斜體字</i>。標(biāo)識(shí)之中還可以附加一些屬性(Attribute)，用來完成某些特殊效果或功能。例如：<x a1="

10、v1",a2="v2",.,an="vn">受控文字</x>其中，a1,a2,.,an為屬性名稱，而v1,v2,.,vn則是其所對(duì)應(yīng)的屬性值，屬性值加不加引號(hào)，目前所使用的瀏覽器都可接受，但依據(jù)W3C的新標(biāo)準(zhǔn)，屬性值是要加引號(hào)的，所以最好養(yǎng)成加引號(hào)得習(xí)慣。如“基本結(jié)構(gòu)樣板”中的頭標(biāo)識(shí)<HEAD>和</HEAD>，<HEAD>為起始標(biāo)識(shí)，加斜線的<HEAD>即</HEAD>，為結(jié)束標(biāo)識(shí)。除此以外，還有單標(biāo)識(shí)，如例5.1中的<IMG>。色彩斑斕的網(wǎng)頁世界就是由

11、這些形式、功能各異的標(biāo)識(shí)經(jīng)過有機(jī)地組合而形成的。 標(biāo)識(shí)(Tags)和屬性(Attributes)構(gòu)建了HTML的語法。瀏覽器只要讀到HTML的標(biāo)識(shí)和屬性，就會(huì)將其解釋成網(wǎng)頁或網(wǎng)頁的某個(gè)組成部分，它們的基本構(gòu)成如下：1.標(biāo)識(shí)： 標(biāo)識(shí)就是給文檔中某些具有特殊含義的部分作標(biāo)記的過程，標(biāo)識(shí)的符號(hào)(如：<BR>、<LI>、<H2>等等，常簡稱標(biāo)識(shí)或標(biāo)記)是該過程的具體實(shí)現(xiàn)。HTML標(biāo)識(shí)通?？煞譃閮深悾活愑脕碜R(shí)別網(wǎng)頁上的組件或描述組件的樣式，如網(wǎng)頁的標(biāo)題(<TITLE>)、網(wǎng)頁的主體(<BODY>)、標(biāo)題（<H1>）、標(biāo)題（<

12、H2>）、粗體（<B>）、斜體（<I>）、段落（<P>）、分項(xiàng)符號(hào)清單（<UL>）和編號(hào)清單(<OL>) 等；另一類用來指向其他資源，如<A>用來識(shí)別網(wǎng)頁內(nèi)的位置或超鏈接、<IMG>用來插入圖片、<EMBED>用來插入聲音等。HTML的標(biāo)識(shí)嵌于文本格式的文檔中，用來控制文字、圖片等在瀏覽器中的表現(xiàn)，以及如何建立圖片、文件之間的鏈接。使用超文本標(biāo)識(shí)語言“修飾”過的文檔一般都應(yīng)該滿足，無論在什么操作系統(tǒng)下，使用什么瀏覽器，讀起來或看上去其“模樣”都不會(huì)改變。2.屬性：屬性是存儲(chǔ)屬性值的變量。HTM

13、L中的許多標(biāo)識(shí)都可以提供相關(guān)信息的屬性設(shè)置。如設(shè)置文檔的第2級(jí)標(biāo)題文字，位置居中，文字為藍(lán)色。其例句如下：<FONT SIZE="3" COLOR="#FF0000">設(shè)置字符的尺寸和顏色</FONT> 起 空 屬 屬 空 屬 屬 內(nèi) 結(jié) 始 格 性 性 格 性 性 容 束 標(biāo) 值 值 標(biāo) 識(shí) 識(shí) 3.值： 標(biāo)識(shí)的屬性通常含有一個(gè)值(Value)，該值應(yīng)在規(guī)定的范圍內(nèi)選取。例如，<FONT>標(biāo)識(shí)中的SIZE屬性，其值為17，小于1或大于7均無效(注：但不會(huì)出錯(cuò))。 4. 嵌套標(biāo)識(shí)： 在網(wǎng)頁的設(shè)計(jì)中，不同頁面有不同的要求

14、，常常需用一個(gè)以上的標(biāo)識(shí)來表示頁面的數(shù)據(jù)，例如設(shè)置一串字符為：標(biāo)題3、斜體、粗體，可以使用標(biāo)識(shí)<H3>、<I>和<B>，例句如下： <H3><I><B>蓬萊閣</B></I></H3>注意標(biāo)識(shí)嵌套時(shí)的順序不應(yīng)交叉，下句則不對(duì)： <B><H3><I>蓬萊閣</H3></B></I> 雖說語法上該句是不對(duì)的，但I(xiàn)E和Netscape瀏覽器仍能正確識(shí)別和顯示，即瀏覽器一般總能最大限度地容忍錯(cuò)誤。不提倡使用嵌套標(biāo)識(shí)，注意語法

15、規(guī)則。5.空格符：HTML標(biāo)識(shí)間多余的空格符或回車符瀏覽器是不理會(huì)的。程序員通常利用該特點(diǎn)在HTML文檔上加空格、空行或回車，將HTML源代碼排列整齊，以利閱讀。 6.特殊字符：特殊字符通常不能直接用于HTML文檔在瀏覽器中顯示，如：字符（&）、雙引號(hào)(“ ”) 、小于(<)、大于(>)、空格符等。 1.基本標(biāo)識(shí)(Basic Tags) (1) <HTML></HTML> 定義超文本文檔，用于標(biāo)記 HTML 文檔的開始和結(jié)束。 (2) <HEAD></HEAD> 設(shè)置頁面的頭標(biāo)部分，用來包含當(dāng)前文檔的一些相關(guān)信息（如定義樣式、

16、網(wǎng)頁的標(biāo)題、網(wǎng)頁中使用的腳本語言等）。 (3) <TITLE></TITLE> HTML文檔均應(yīng)該包含<TITLE>標(biāo)識(shí)，用來指明文件的標(biāo)題。其內(nèi)容將顯示在瀏覽器的標(biāo)題欄內(nèi)。 (4) <BODY></BODY> 放置Web頁面的正文內(nèi)容，包含文件內(nèi)的文字、超級(jí)鏈接文字的顏色、背景色彩、圖片、動(dòng)畫、影像、音效等，幾乎所有對(duì)網(wǎng)頁的展示功能。 (5) <META> 用來介紹與文件內(nèi)容相關(guān)的信息。每一個(gè)<META>標(biāo)識(shí)用于指明一個(gè)名稱或數(shù)值對(duì)，常常放在頭標(biāo)識(shí)<HEAD>中。如： <meta http-

17、equiv="Content-Type" content="text/html; charset=gb2312"> (6) <BASE href=“URL”> 設(shè)置連接的基準(zhǔn)路徑，該標(biāo)識(shí)可以大大簡化網(wǎng)頁內(nèi)部超鏈接的全路徑，這里只要給出相對(duì)于Base原指定的基準(zhǔn)地址的相對(duì)路徑即可。<BASE>為單標(biāo)識(shí)，通常放在<HEAD>區(qū)內(nèi)。若文檔中寫有，且站內(nèi)有文件File1.htm，這樣可以在<BODY>中簡單地寫<A href=“File1.htm”></A>來鏈接文件“File1.ht

18、m”。 2. 文本、字符格式(Text & Char Format)（1） <Hn> 標(biāo)題文字(n=16), 用于指定不同級(jí)別的標(biāo)題。從<H1>到<H6>共有六種標(biāo)題標(biāo)識(shí)供標(biāo)識(shí)標(biāo)題文。例5.2：<HTML><HEAD><TITLE>HTML 簡介</TITLE></HEAD><BODY><H1>HTML 簡介</H1><H2>HTML 簡介</H2><H3>HTML 簡介</H3><H4>HTML

19、 簡介</H4><H5>HTML 簡介</H5><H6>HTML 簡介</H6></BODY></HTML>圖5-2運(yùn)行結(jié)果如圖5-2所示 (2) <BR> 換行標(biāo)識(shí)，單標(biāo)識(shí)。 (3) <P></P>定義段落（分段），常用雙標(biāo)識(shí)，也可以用單個(gè)標(biāo)識(shí)。 (4) <PRE></PRE>在<PRE></PRE>之間的內(nèi)容將以預(yù)格式化的文本方式顯示，包括回車換行以及跳格等。 例5.3：<HTML><HEAD><

20、;TITLE>學(xué)習(xí) HTML </TITLE></HEAD><BODY><P> PRE 標(biāo)記用于以預(yù)定義的格式顯示文本。 <PRE>輕輕的我走了，正如我輕輕的來。我輕輕的招手， 作別西天的云彩。 </PRE></BODY></HTML>運(yùn)行結(jié)果如圖5-3所示 圖5-3注：如有：<HTML><HEAD><TITLE>學(xué)習(xí) HTML </TITLE></HEAD><BODY bgcolor="LightGreen"

21、;> 春隨香草千年艷； 人與梅花一樣清。</BODY></HTML>則在瀏覽器窗口內(nèi)<BODY>中的文字排在一行，不會(huì)分行顯示。因?yàn)闉g覽器回忽略HTML標(biāo)識(shí)見多余的空格符或回車符，因此，不能利用空格符或回車符排列格式化網(wǎng)頁的內(nèi)容。(5) <HR>作為文本與文本之間的分界標(biāo)識(shí)，通常是一個(gè)全寬的水平線，還可以用它來畫豎線。 (6) 字符格式: <SUP></SUP> 定義上標(biāo) <SUB></SUB> 定義下標(biāo) <B></B> 粗體 <I></I> 斜

22、體 <U></U> 顯示文字加下劃線 <EM></EM> 強(qiáng)調(diào)（通常用斜體） <STRONG></STRONG> 著重強(qiáng)調(diào)（通常用粗體） <TT></TT> 定義等寬字體（打字機(jī)字體） 例5.4：<HTML><HEAD> <TITLE>HTML 學(xué)習(xí)</TITLE></HEAD><BODY><P><B>這很有趣</B> <BR><BR>水的分子式是 H<SUB&g

23、t;2</SUB>O。<BR><BR>求圓的面積的公式為：pi*r<SUP>2</SUP><BR><BR><I>足球是人們最喜愛的比賽。</I><BR><BR><U>信息技術(shù)是發(fā)展的關(guān)鍵。</U><BR><BR><EM>我們玩得很開心</EM> </P></BODY></HTML>運(yùn)行結(jié)果如圖5-4所示 圖5-4(7) 字體: <BASEFONT>

24、; 變更網(wǎng)頁默認(rèn)字體、尺寸與顏色 <FONT></FONT> 改變字符串的字體、尺寸與顏色<FONT> 元素和其相關(guān)的屬性如 SIZE、COLOR 和 FACE 可以用來控制網(wǎng)頁中文本的顯示。例5.5：<HTML><HEAD><TITLE>歡迎進(jìn)入 HTML </TITLE><BODY><H3><FONT SIZE = 3 COLOR = BLUE FACE = Times New Roman> 我的第一個(gè) HTML 文檔 </FONT></H3>&l

25、t;P>這 <FONT COLOR = BLUE SIZE = 6>將</FONT>成為真正的樂趣</BODY></HTML>運(yùn)行結(jié)果如圖5-5所示圖5-53.列表標(biāo)識(shí)(Lists) (1) 定義列表(Definition List) <DL></DL> 設(shè)定定義列表的標(biāo)識(shí) <DT> 設(shè)定定義列表的項(xiàng)目 <DD> 設(shè)定定義列表的項(xiàng)目說明 <DL compact> 設(shè)定緊密排列的定義列表(2) 有序號(hào)列表(Ordered List) (如圖5-6所示) 例如：<OL type=

26、"A"> <LI>項(xiàng)目一 <LI>項(xiàng)目二 <OL type="a"> <LI>子項(xiàng)目A <LI>子項(xiàng)目B </OL> <LI>項(xiàng)目三 </OL>(3)無序號(hào)列表(Unordered List) 例如：<UL type="square">圖5-6 無序號(hào)和有序號(hào)列表 <LI>第一章 <LI>第二章 <P>下篇 <LI>第一章</UL>5.表格(Tables)可以用表

27、格來精確定義頁面文本或圖片等的排版格式，這是一種常用的頁面內(nèi)容組織形式，許多網(wǎng)站的頁面采用表格來布局網(wǎng)頁內(nèi)容。<TH></TH> 表頭單元。<TD></TD> 表格單元。<TR></TR> 表格行。<TABLE></TABLE> 用來定義一個(gè)表格。<CAPTION></CAPTION> 給出表格的標(biāo)題。列單元格行表格組成如下圖所示：例5.6：創(chuàng)建一個(gè)有三個(gè)單元格的表格：第一個(gè)單元格的內(nèi)容是“足球”，第二個(gè)單元格的內(nèi)容是“籃球”，第三個(gè)單元格的內(nèi)容是“武術(shù)”；表的邊框不可見&l

28、t;HTML><HEAD><TITLE>使用表格</TITLE></HEAD><BODY><TABLE> <TR> <TD>足球</TD> <TD>籃球</TD> <TD>武術(shù)</TD> </TR>圖5-7</TABLE></BODY></HTML>運(yùn)行結(jié)果如圖5-7所示表格由行組成（<TR> 標(biāo)記包含在 <TABLE> 和</TABLE>標(biāo)記里面），

29、每一行由單元格組成（<TD> 標(biāo)記包含在 <TR>和</TR> 標(biāo)記里面）例5.7 <HTML><HEAD><TITLE>使用表</TITLE></HEAD><BODY><TABLE> <TR> <TD>Beckham</TD> <TD>Michael Jordan</TD> <TD>Bruce Lee</TD> </TR> <TR> <TD>Ronaldo

30、</TD> <TD>Kobe Bryant</TD> <TD>Jackie Chan</TD> </TR></TABLE></BODY></HTML>運(yùn)行結(jié)果如圖5-8所示圖5-8§ 表格邊框<TABLE> 標(biāo)記的 BORDER 屬性用于指定表格的邊框。如果將值設(shè)置為 0，則不會(huì)顯示邊框例5.8:<HTML><HEAD><TITLE>使用表格</TITLE></HEAD><BODY><TA

31、BLE BORDER = 2><TR><TD>Beckham</TD><TD>Michael Jordan</TD><TD>Bruce Lee</TD><TR><TD>Ronaldo</TD><TD>Kobe Bryant</TD><TD>Jackie Chan</TD>圖5-9</TABLE></BODY></HTML>運(yùn)行結(jié)果如圖5-9所示§ 表格的標(biāo)題<CAPTIO

32、N> 標(biāo)記緊跟在 <TABLE> 標(biāo)記后面，該標(biāo)記用于指定表格的標(biāo)題(簡要說明)。 <TH> 標(biāo)記用于指定每一列的標(biāo)題例5.9 <HTML><HEAD><TITLE>使用表格</TITLE></HEAD><BODY><TABLE BORDER = 2><CAPTION>體育項(xiàng)目</CAPTION><TR> <TH>足球</TH> <TH>籃球</TH> <TH>武術(shù)</TH>

33、 </TR> <TR> <TD>Beckham</TD> <TD>Michael Jordan</TD> <TD>Bruce Lee</TD> <TR> <TD>Ronaldo</TD> <TD>Kobe Bryant</TD> <TD>Jackie Chan</TD></TABLE></BODY>圖5-10</HTML>運(yùn)行結(jié)果如圖5-10所示§ 插入行和列可以使用&l

34、t;TD> 和 <TR>標(biāo)記在表中插入行和列例5.10 <HTML><HEAD><TITLE>使用表格</TITLE></HEAD><BODY><TABLE BORDER = 2> <TR> <TD>Beckham</TD> <TD>Michael Jordan</TD> <TD>Bruce Lee</TD> <TD>Richard Gere</TD><TR> <TD&

35、gt;Ronaldo</TD> <TD>Kobe Bryant</TD> <TD>Jackie Chan</TD> <TD>Jack</TD><TR> <TD>Zidane</TD> <TD>Rose</TD> <TD>Mary</TD> <TD>Richard</TD></TR></TABLE>圖5-11</BODY></HTML>運(yùn)行結(jié)果如圖5-11所示

36、§ 合并單元格（列）COLSPAN 屬性用于創(chuàng)建跨多列的單元格。例5.11 <HTML><HEAD><TITLE>使用表格</TITLE></HEAD><BODY><TABLE BORDER = 2><CAPTION>創(chuàng)建表格</CAPTION> <TR> <TH COLSPAN = 3>第一學(xué)期 </TH> <TH COLSPAN = 3>第二學(xué)期 </TH></TR> <TR> <TD

37、>數(shù)學(xué)</TD> <TD>科學(xué)</TD> <TD>英語</TD> <TD>數(shù)學(xué)</TD> <TD>科學(xué)</TD> <TD>英語</TD> </TR> <TR> <TD>98</TD> <TD>95</TD> <TD>80</TD> <TD>95</TD> <TD>87</TD> <TD>88</TD

38、>圖5-12 </TR></TABLE></BODY></HTML>運(yùn)行結(jié)果如圖5-12所示§ 合并單元格（行）ROWSPAN 屬性用于創(chuàng)建跨多行的單元格。例5.12 <HTML><HEAD><TITLE>使用表格</TITLE></HEAD><BODY><TABLE BORDER = 2><CAPTION>創(chuàng)建表格</CAPTION> <TR> <TH></TH> <TH>&

39、lt;/TH> <TH>螺母</TH> <TH>螺銓</TH> <TH>錘子</TH> </TR><TR> <TD ROWSPAN = 3>第一季度</TD> <TD>一月份</TD> <TD>2500</TD> <TD>1000</TD> <TD>1240</TD></TR> <TR> <TD>二月份</TD> <TD&

40、gt;3000</TD> <TD>2500</TD> <TD>4000</TD></TR> <TR> <TD>三月份</TD> <TD>3200</TD> <TD>1000</TD> <TD>2400</TD></TR></TABLE></BODY>圖5-13</HTML>運(yùn)行結(jié)果如圖5-13所示§ 格式化表格例5.13 <HTML><HEA

41、D><TITLE>使用表格</TITLE></HEAD><BODY><TABLE BORDER = 2 WIDTH = 50% BGCOLOR = lavender> <TR BORDERCOLOR = "blue"> <TD ALIGN = left VALIGN = bottom>Beckham</TD> <TD>Michael Jordan</TD> <TD>Bruce Lee</TD> <TR BORDERCOL

42、OR = "blue"> <TD ALIGN = left VALIGN = top>Ronaldo</TD> <TD>Kobe Bryant</TD> <TD>Jackie Chan</TD></TABLE></BODY></HTML>運(yùn)行結(jié)果如圖5-14所示圖5-14說明: <TABLE> 標(biāo)記的 WIDTH 屬性設(shè)置為 50% 。這使得表格的寬度覆蓋瀏覽器窗口的 50% 。使用 BGCOLOR 屬性設(shè)置表格的背景顏色。ALIGN 屬性指定水平對(duì)

43、齊方式，而 VALIGN 用于指定垂直對(duì)齊方式。§ CELLSPACING 屬性和CELLPADDING屬性 CELLPADDING 屬性定義單元格中的文本與單元格邊框之間的間距例5.14 <HTML><HEAD><TITLE>使用表格</TITLE></HEAD><BODY><TABLE BORDER = 2 BGCOLOR = lavender CELLSPACING = 9 CELLPADDING = 15> <TR> <TD>Beckham</TD> <

44、;TD>Michael Jordan</TD> <TD>Bruce Lee</TD> <TR> <TD>Ronaldo</TD> <TD>Kobe Bryant</TD> <TD>Jackie Chan</TD></TABLE></BODY></HTML>運(yùn)行結(jié)果如圖5-15所示圖5-156. 表單（Forms）表單與表格的作用完全不同，表單是程序設(shè)計(jì)者編制的一種特殊的HTML文件，它提供一組準(zhǔn)備讓用戶填寫欄目，其目的是等待用戶填寫完

45、表單的內(nèi)容，確定以后提交給服務(wù)器，以獲取用戶的填寫數(shù)據(jù)。 表單的一般標(biāo)識(shí)有： <FORM></FORM> 交互式表單； <INPUT> 輸入表單控件； <OPTION></OPTION> 菜單類控件中的可選項(xiàng)，在中<SELECT>使用； <SELECT></SELECT> 菜單類控件； <TEXTAREA></TEXTAREA> 多行文本域。 例如: <HTML><HEAD><TITLE>表單示例</TITLE></HEA

46、D><BODY bgColor="#ccccff" Text="#000099"><FORM ACTION="" METHOD="POST"><B><H2 align=“l(fā)eft”>2004 年歐錦賽</H2></B><P><B>預(yù)測“最佳球員”</B></P><P><INPUT TYPE="RADIO"NAME="RESULT_RadioBu

47、tton-3" VALUE="Radio-0”>Ronaldo<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1"> Beckham<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2"> Zidane</P><P><B>預(yù)測大賽“亞軍”</

48、B></P><P><INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4” VALUE="CheckBox-0">巴西<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">法國<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4"

49、VALUE="CheckBox-2">阿根廷<BR></P><P><B>預(yù)測誰將成為 2004 年歐錦賽冠軍？</B></P><P><INPUT TYPE="TEXT" NAME="TextField-6" SIZE="30" MAXLENGTH="30"></P><P><INPUT TYPE="SUBMIT" NAME="Submit

50、" VALUE="提交"><INPUT TYPE="RESET" NAME="Reset" VALUE="重置"></P></FORM></BODY></HTML> 運(yùn)行結(jié)果如圖5-8所示圖5-87. 樣式表單（Style sheets） 提供樣式表單標(biāo)識(shí)的目的是要在HTML文件中插入層疊樣式表(見5.2節(jié))，它可以提升網(wǎng)頁的性能，使頁面的功能更加豐富。 <STYLE></STYLE> 嵌入式樣式表單，一般放在頭標(biāo)識(shí)

51、內(nèi)。樣式表單標(biāo)識(shí)的使用可參見例5.2。 5.2 層疊樣式表層疊樣式表簡介樣式表是一種將樣式（如字體、顏色、間距）添加到網(wǎng)頁中的簡單機(jī)制。它由樣式規(guī)則組成，這些規(guī)則告訴瀏覽器如何呈現(xiàn)一個(gè)文檔。一、 概念與功能1 樣式表：包含HTML元素樣式定義的列表。以下為樣式表示例：<STYLE TYPE=”text/css”><!- - H2color:limegreen; Pfont-weight:bold;- -></STYLE>2 樣式規(guī)則：定義元素內(nèi)文本的樣式。例如，可以創(chuàng)建一個(gè)樣式規(guī)則，指定所有<H2>標(biāo)題的顏色都為暗綠色，還可以對(duì)選定的網(wǎng)頁部分應(yīng)用

52、樣式規(guī)則。例如，可以指定網(wǎng)頁的某一特定段落顯示為粗體。樣式規(guī)則示例如下：H2color:limegreen;規(guī)則的第一部分稱為選擇器。每個(gè)選擇器都有屬性以及對(duì)應(yīng)的屬性值。上面的示例中H2是規(guī)則選擇器。大括號(hào)內(nèi)的部分稱為聲明。聲明由兩部分組成：冒號(hào)前面的部分是屬性，后面的部分是該屬性的值。例如：H1 color:blue;其中，H1為選擇器，color:blue為聲明。在該聲明中，color是屬性，blue是屬性值。下面通過一個(gè)示例來理解樣式規(guī)則：<HTML><HEAD><TITLE>應(yīng)用樣式</TITLE><STYLE TYPE="

53、;text/css"><!- H1 color:blue;-></STYLE></HEAD><BODY><H1>這是應(yīng)用了樣式的標(biāo)題 1</H1></BODY>圖5-9</HTML>運(yùn)行結(jié)果如圖5-9所示二、 樣式表的優(yōu)點(diǎn)樣式表可用于：1 覆蓋瀏覽器的默認(rèn)設(shè)置：每個(gè)瀏覽器都有其獨(dú)特的網(wǎng)頁顯示方式。早先，開發(fā)人員無法控制瀏覽器中網(wǎng)頁的顯示方式。通過使用樣式表，用戶可以使用自己的設(shè)置覆蓋瀏覽器的常規(guī)設(shè)置。例如，可以使用樣式表，指定H1元素內(nèi)文本字體的大小。<html><

54、head><style type=” text/css”><!- - H1 font-size:9pt; H1 color:blue;-> </style> </head> <body><H1>更改H1的默認(rèn)設(shè)置</H1></body></html>2 頁面布局：使用樣式表可以指定顯示的字體、修改文本的顏色等，而無需更改網(wǎng)頁結(jié)構(gòu)。這意味著設(shè)計(jì)人員可以將網(wǎng)頁的視覺設(shè)計(jì)從網(wǎng)頁的邏輯設(shè)計(jì)中分離出來，對(duì)二者分別進(jìn)行設(shè)計(jì)。3 多個(gè)文檔鏈接到一個(gè)樣式表上：可以將樣式表存成一個(gè)單獨(dú)的文檔，然后將

55、其鏈接到多個(gè)網(wǎng)頁中，這樣會(huì)使這些網(wǎng)頁具有相同的外觀，而且，對(duì)樣式表進(jìn)行修改時(shí)，所有與該樣式表鏈接的文檔都會(huì)體現(xiàn)所做的修改。（樣式表可以令到網(wǎng)頁制作者的工作更加輕松。例如，當(dāng)每個(gè)水平規(guī)則的語句都需要使用<HR WIDTH="75%" SIZE=5 ALIGN=center>的時(shí)候，網(wǎng)頁制作者將覺得非常麻煩。使用樣式表，只需要指定這樣的參數(shù)一次，樣式就會(huì)被整個(gè)網(wǎng)站所應(yīng)用。而且如果網(wǎng)頁制作者覺得WIDTH="50%"會(huì)更好的話，那么他只需要在一處地方改變這個(gè)參數(shù)，而不是找遍幾百頁來更改HTML。）今天，越來越多的瀏覽器實(shí)現(xiàn)了樣式表，允許改善整個(gè)展示

56、同時(shí)保留平臺(tái)獨(dú)立性的獨(dú)有特性開闊了網(wǎng)頁制作者的視野。樣式表文件主要由兩部分組成，選擇器(Selector)和樣式規(guī)則(Rule)。如Body Font-family:”宋體”; Color:”#00FF00”; Font-size=”12pt”; Letter-spacing:”12pt”;在上面的樣式表文件中，body是選擇器，大括號(hào)中的語句是樣式規(guī)則。樣式規(guī)則用于設(shè)定樣式內(nèi)容，由屬性（如color）和屬性值（如#00FF00）組合而成。分號(hào)是多重屬性之間的間隔符，上例中采用分行書寫，這樣語句更清晰，可讀性更強(qiáng)。 有很多將樣式規(guī)則加入到HTML文檔的方法，但最簡單的啟動(dòng)方法是使用HTML的S

57、TYLE組件。 這個(gè)元素放置于文檔的HEAD部分， 包含網(wǎng)頁的樣式規(guī)則。樣式規(guī)則組成如下:選擇器 屬性: 值 單一選擇器的復(fù)合樣式聲明應(yīng)該用分號(hào)隔開:選擇器 屬性1: 值1; 屬性2: 值2 其中，一個(gè)屬性被指定到選擇器是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。值是一個(gè)屬性接受的指定。例如，屬性顏色能接受值red。一、在樣式表中設(shè)置屬性可在樣式表中設(shè)置的一些常用屬性如下表：屬性CSS名稱說明顏色Color設(shè)置或檢索文本的顏色背景屬性Background-color設(shè)置或檢索對(duì)象的背景顏色Background-image設(shè)置或檢索背景圖像字體屬性Font-family設(shè)置或檢索要應(yīng)用于

58、文本字體Font-size設(shè)置或檢索文本字體的大小Font-style設(shè)置或檢索文本的字體樣式。如： 斜體文本屬性Text-align設(shè)置或檢索文本的對(duì)齊方式，包括：右對(duì)齊、左對(duì)齊、居中對(duì)齊或兩端對(duì)齊Text-indent設(shè)置或檢索文本第一行的縮進(jìn)Vertical-align設(shè)置或檢索文本的縱向位置邊框?qū)傩訠order-style設(shè)置或檢索對(duì)象的邊框樣式Border-width設(shè)置或檢索邊框的寬度Border-bottom設(shè)置或檢索下邊框的屬性Border-color設(shè)置或檢索邊框顏色定位屬性Width設(shè)置或檢索對(duì)象寬度Height設(shè)置或檢索對(duì)象的高度Left設(shè)置或檢索對(duì)象的左定位Top設(shè)置或

59、檢索對(duì)象的頂部定位Position設(shè)置或檢索對(duì)象的定位形式z-index設(shè)置或檢索對(duì)象的疊層順序示例如下：<HTML><HEAD><STYLE TYPE="text/css"><!-H1 color:limegreen;H1 font-family:Arial;H2 color:limegreen;H2 font-family:Arial;-></STYLE></HEAD><BODY><H1>這是 H1 元素</H1><H2>這是 H2 元素</H2

60、><H3>這是 H3 元素，其默認(rèn)樣式如瀏覽器所示</H3></BODY></HTML>運(yùn)行結(jié)果如圖5-10所示圖5-10也可以將樣式規(guī)則的聲明組合在一起，如以下代碼所示，用分號(hào)將各聲明分隔開：<HTML><HEAD><STYLE TYPE="text/css"><!- H1, H2color:limegreen;font-family:Arial;-></STYLE></HEAD><BODY> <H1>這是 H1 元素<

61、;/H1> <H2>這是 H2 元素</H2> <H3>此處，H1和H2的樣式聲明組合在單個(gè)語句中</H3></BODY></HTML>運(yùn)行結(jié)果如圖5-11所示圖5-11二、樣式表中的選擇器可以將選擇器定義為一個(gè)字符串，用以標(biāo)識(shí)要應(yīng)用相應(yīng)規(guī)則的元素。（1）HTML 選擇器：都是HTML標(biāo)記,這些選擇器使用 HTML 元素的名稱。唯一的區(qū)別在于去掉括號(hào)。任何HTML元素都可以是一個(gè)CSS1的選擇器。選擇器僅僅是指向特別樣式的元素。例如，P text-indent: 3em 當(dāng)中的選擇器是P。例如: <HTML&g

62、t;<HEAD><STYLE TYPE="text/css"><!-Pfont-style:italic; font-weight:bold; color:limegreen;-></STYLE></HEAD><Body><P>這些選擇器使用 HTML 元素的名稱。唯一的區(qū)別在于去掉括號(hào)。</P></BODY></HTML>運(yùn)行結(jié)果如圖5-12所示圖5-12例如：<HTML><HEAD><TITLE>設(shè)置屬性</T

63、ITLE><STYLE TYPE="text/css"><!- BODY background-image: url(holiday.gif); P text-align: center; font-size:50px; color:blue; -></STYLE></HEAD><BODY> <P>學(xué)習(xí)樣式表</P></BODY></HTML>運(yùn)行結(jié)果如圖5-13所示圖5-13（2）CLASS選擇器（類選擇器）：指定與特定HTML元素有關(guān)的補(bǔ)充樣式定義。這種選擇

64、器使用HTML元素的CLASS屬性。每個(gè)可見元素均有一個(gè)用于指派類的CLASS屬性?？梢詾槊總€(gè)不同的元素指派一個(gè)類名，也可以將多個(gè)相同類型的元素指派不同的類，以顯示不同的效果。例如，一個(gè)網(wǎng)頁制作者也許希望視其語言而定，用不同的顏色顯示代碼 :code.html color: #191970 code.css color: #4b0082 以上的例子建立了兩個(gè)類，css和html，供HTML的CODE元素使用。類的聲明也可以無須相關(guān)的元素:.note font-size: small 在這個(gè)例子，名為note的類可以被用于任何元素。類選擇器前面是一個(gè)稱為標(biāo)記字符的圓點(diǎn)（）,其后是類名。最好根據(jù)元

65、素的用途定義類的名稱。一個(gè)良好的習(xí)慣是在命名類的時(shí)候，根據(jù)它們的功能而不是根據(jù)它們的外觀。上述例子中的note類也可以命名為small，但如果網(wǎng)頁制作者決定改變這個(gè)類的樣式，使得它不再是小字體的話，那么這個(gè)名字就變得毫無意義了。例如: <HTML><HEAD><STYLE TYPE="text/css"><!-.Water color:blue; .Fire color:red; -></STYLE></HEAD><BODY> <P CLASS=Water>測試水 <P C

66、LASS=Fire>測試危險(xiǎn)物圖5-11<P>沒有樣式<BR><EM CLASS=Fire>斜體</EM></BODY></HTML>運(yùn)行結(jié)果如圖5-11所示例如: <HTML><HEAD><STYLE TYPE="text/css"><!-P.BLUE color:blue; font-weight:bold;H5.RED color:red; font-weight:bold;-></STYLE></HEAD><BO

67、DY BGCOLOR=lavender><H5 CLASS=RED>這是使用 RED 類的 H5 元素</H5><H5>這是沒有應(yīng)用樣式的 H5 元素。</H5><P CLASS=BLUE>這個(gè)段落使用 BLUE 類</P><P>這個(gè)段落不使用 BLUE 類</P></BODY></HTML>運(yùn)行結(jié)果如圖5-12所示圖5-12（3）ID 選擇器: ID 選擇器使用 HTML 元素的 ID 屬性。ID 選擇器將樣式應(yīng)用于網(wǎng)頁上的單個(gè)元素。如果沒有明確說明，同一個(gè)樣式不會(huì)應(yīng)用于相同頁面上出現(xiàn)的另一個(gè)相同的元素。一個(gè)ID選擇符的指定要有指示符"#"在名字前面

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(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)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論