靜態(tài)網(wǎng)頁(yè)制作教程(入門級(jí))

第1章網(wǎng)頁(yè)基礎(chǔ)一.www基礎(chǔ)二.網(wǎng)站和網(wǎng)頁(yè)三.Html基礎(chǔ)及簡(jiǎn)單頁(yè)面設(shè)計(jì)四.Web頁(yè)面的顏色五.給html文檔加注釋一.www基礎(chǔ)www（worldwideweb，簡(jiǎn)稱互聯(lián)網(wǎng)），一直被人們稱作internet的“殺手應(yīng)用程序”。它可以顯示普通文字和圖像并訪問其他頁(yè)面，而信息子頁(yè)則使得它成為internet上發(fā)展最快的部分。你可能已經(jīng)掌握了在web上如何探索信息世界，但也有可能不太清楚如何向全世界發(fā)布你自己的信息——有關(guān)你自己的信息，如你個(gè)人的興趣、你的工作等。要?jiǎng)?chuàng)建自己的頁(yè)面，最基礎(chǔ)技術(shù)就是html（hypertextmakeuplanguage，超文本標(biāo)記語言），現(xiàn)在絕大多數(shù)web文檔都是由html編寫的。www是一個(gè)全球性的、交互式的、動(dòng)態(tài)的、多平臺(tái)的、分布式的、圖像超文本的信息系統(tǒng)。要能在web上四處遨游，首先必須安裝一個(gè)web瀏覽器。有了自己的web瀏覽器后，在web上導(dǎo)航最簡(jiǎn)單的方法就是結(jié)合瀏覽器的各種性能在各頁(yè)上移動(dòng)。你可以通過選擇指定的高亮度顯示的文字、詞或圖像從一個(gè)頁(yè)面移至另一頁(yè)面，也可以利用該頁(yè)的地址或url（uniformresourcelocator）統(tǒng)一資源定位器來直接移至該指定頁(yè)。不受地域的限制，只要互聯(lián)網(wǎng)保持連通就可以訪問者和網(wǎng)站有交互的過程，提交信息、反饋信息網(wǎng)站上的信息可以隨時(shí)隨地進(jìn)行更新不受操作系統(tǒng)平臺(tái)的限制，如windows、linnux等系統(tǒng)平臺(tái)一臺(tái)服務(wù)器，多臺(tái)客戶機(jī)構(gòu)成分布式可以在www上發(fā)布多媒體信息，如圖像和聲音、視頻等Web瀏覽器的選用現(xiàn)在可以得到許多web瀏覽器，他們遍及了幾乎所有的計(jì)算機(jī)系統(tǒng)。Web瀏覽器的功能是充當(dāng)與web的接口，它們?cè)趇nternet上對(duì)特定的web頁(yè)面和文檔發(fā)出請(qǐng)求，當(dāng)它們接收到文件后，就將格式化后的版本返回html文件并顯示到屏幕之上。安裝了web瀏覽器的計(jì)算機(jī)還可以處理ftp等方法的信息請(qǐng)求。以下是常用的瀏覽器1.Mosaic：最早開始web研究時(shí)使用的瀏覽器，不過現(xiàn)在一般沒人用了。2.Lynx：基于文本的瀏覽器，是web訪問中僅限于文本訪問的最佳選擇。但無法通過該瀏覽器看到web頁(yè)面的圖像。3.Netscapenavigator：曾一度是最流行的瀏覽器，它通過開發(fā)html擴(kuò)展來提高web頁(yè)面的圖形品質(zhì)。4.Internetexplor：簡(jiǎn)稱ie，已經(jīng)擁有同netscapenavigator基本相同的特性，更由于其方便快捷、免費(fèi)等特性而成了當(dāng)今最流行的瀏覽器尋找一個(gè)web編寫工具Html編輯器或編寫工具是指不用進(jìn)入html核心而為web頁(yè)面創(chuàng)建html文檔的程序。這些程序所使用的格式與允許人們?cè)谝豁?yè)上輸入文件或圖形的字處理器或頁(yè)面設(shè)計(jì)程序相似。許多字處理器，如microsoftword都具有html的編輯功能。一般的，人們都使用windows自帶的文本編輯器——記事本程序來編寫。還有一些軟件，如microsoftfrontpage和dreamweaver都內(nèi)置一web編寫工具，這使得初學(xué)者在創(chuàng)建web頁(yè)面時(shí)更簡(jiǎn)單。但是要學(xué)習(xí)更好的網(wǎng)頁(yè)設(shè)計(jì)制作（如動(dòng)態(tài)網(wǎng)頁(yè)等），必須要掌握html的基本原理，所以這種情況下不宜使用frontpage和dreamweaver等可視化的網(wǎng)頁(yè)開發(fā)工具。了解html的發(fā)展信息要掌握html，就必須了解它的發(fā)展。大家可以通過下面?zhèn)z個(gè)鏈接了解html文檔草案的現(xiàn)狀、未來html的發(fā)展已經(jīng)url的工作原理的升級(jí)文檔等。1./:提供一個(gè)鏈接指向描述已被確認(rèn)為internet標(biāo)準(zhǔn)及現(xiàn)在被所有瀏覽器支持的html特性的文檔。2./hypertext/www/addressing/addressing.html:講解url的各種類型和如何在web文檔中使用它們。創(chuàng)建自己web頁(yè)面的要點(diǎn)有了上訴基本知識(shí)以后，就可以開始學(xué)習(xí)創(chuàng)建自己的web頁(yè)面了。不過，在創(chuàng)建自己的頁(yè)面過程中，有一些非常有用的技巧，必須好好的記住。1.首先要搞清楚自己要說的東西。這看起來是很自然的，但是許多頁(yè)面的不成功就是由于它們?nèi)鄙僦攸c(diǎn)，因?yàn)橐故窘o讀者的觀點(diǎn)一定要清楚明了。如果別人搞不懂你想說什么，就不會(huì)有興趣去讀你的主頁(yè)和其他頁(yè)面。2.確定好目標(biāo)之后，就應(yīng)該考慮頁(yè)面應(yīng)包括的內(nèi)容。此時(shí)就應(yīng)該按內(nèi)容分割材料。材料可以分布在幾頁(yè)上，也可以組合在同一頁(yè)面中，這取決于你的寫作方式。3.除非頁(yè)面非常短，否則編寫一個(gè)簡(jiǎn)單介紹web站點(diǎn)的目標(biāo)、可得到信息及途徑的簡(jiǎn)單頁(yè)面是很有幫助的。這一頁(yè)面應(yīng)包括內(nèi)容介紹及目錄，它可以使讀者能對(duì)繼續(xù)閱讀哪一頁(yè)做出迅速的判斷。此外，這一頁(yè)上還可包括指向有關(guān)所述論題的、更多信息的頁(yè)面鏈接。4.如果可能，應(yīng)該將每一頁(yè)都設(shè)計(jì)的簡(jiǎn)短一些，每一頁(yè)的文本及圖形不應(yīng)該超過一到兩個(gè)屏幕。如果一頁(yè)太長(zhǎng)，則讀者不得不來回滾動(dòng)屏幕以閱讀整份頁(yè)面，這樣就會(huì)打斷文檔的流暢性。如果頁(yè)面必須很長(zhǎng)，則應(yīng)在文檔中包括目錄和指向特殊位置的鏈接，以使讀者便于找到所需信息。5.不要在頁(yè)面上設(shè)置太多的圖形。圖形文件很大，意味著瀏覽器裝載一頁(yè)包括圖形的頁(yè)面會(huì)非常費(fèi)時(shí)。盡管你的網(wǎng)絡(luò)連接可能非常的迅速，但是別人訪問你網(wǎng)頁(yè)可能相對(duì)很慢。6.在決定將自己的頁(yè)面推向世界之前，應(yīng)仔細(xì)檢查一下是否有錯(cuò)誤和不佳之處。二.網(wǎng)站和網(wǎng)頁(yè)在我們開始學(xué)習(xí)網(wǎng)頁(yè)制作之前呢，先讓我們了解一下關(guān)于網(wǎng)頁(yè)的一些知識(shí)。1.網(wǎng)頁(yè)和網(wǎng)站2.動(dòng)態(tài)網(wǎng)站和靜態(tài)網(wǎng)站3.web1.0和web2.0三.Html基礎(chǔ)及簡(jiǎn)單頁(yè)面設(shè)計(jì)HTML的編寫是指創(chuàng)制和定義html文檔的過程。重要內(nèi)容:1.Html標(biāo)記2.Html的基本結(jié)構(gòu)3.創(chuàng)建一個(gè)簡(jiǎn)單頁(yè)面4.瀏覽自己的頁(yè)面文檔結(jié)構(gòu)和格式的定義是由html元素來完成的。而html元素是由單個(gè)或一對(duì)標(biāo)記定義的包含范圍。一對(duì)標(biāo)記是指一個(gè)起始標(biāo)記和一個(gè)結(jié)束標(biāo)記。一個(gè)起始標(biāo)記是由一個(gè)元素名和后面的一個(gè)在小于號(hào)（<）和大于號(hào)（>）之間的屬性/值對(duì)系列組成。結(jié)束標(biāo)記在元素前有一個(gè)斜杠（/），此外，它并不包括屬性/值列表。1.Html標(biāo)記在html中，標(biāo)記的語法如下：<標(biāo)記名稱>要控制的文字</標(biāo)記名稱>當(dāng)用一組html標(biāo)記將一段文字夾在中間時(shí)，這段文字與夾文字的標(biāo)記被稱為一個(gè)組件。如：<title>hehe</title>這就是一個(gè)組件，其中的title即為元素名，<title>就是一個(gè)標(biāo)記，hehe為該元素的內(nèi)容，有時(shí)在元素名后面還有屬性。因此，在html文件中某個(gè)組件的完整定義語法如下:<標(biāo)記名稱屬性1=“值1”屬性2=“值2”屬性3=“值3”……>組件數(shù)據(jù)</標(biāo)記名稱>由以上可知，標(biāo)記元素有四種格式：空元素（沒有內(nèi)容的元素）帶有屬性的空元素帶有內(nèi)容的元素帶有內(nèi)容和屬性的元素注意：在html標(biāo)記中，英文大小寫字母的意義是相同的，也就是說<html>和<HTML>標(biāo)記是一樣的。由于標(biāo)記的存在和使用，html擁有層次極為分明的基本結(jié)構(gòu)。這對(duì)頁(yè)面的制作有很大的幫助。2.Html的基本結(jié)構(gòu)由于在HTML語法中，每個(gè)由html標(biāo)記與文字所形成的組件還可以包括另一組組件，因此，整個(gè)html文件就像一個(gè)大組件，還包含了許多小組件。其中，所有的html文件最外層的組件，是由<html>標(biāo)記所建立的，在<html>標(biāo)記所建構(gòu)的組件中，還包含了兩個(gè)主要的子組件，這兩個(gè)子組件是由<head>標(biāo)記與<body>標(biāo)記建立的。<head>標(biāo)記：建立的組件的內(nèi)容為文件標(biāo)題。其中并不放網(wǎng)頁(yè)的任何內(nèi)容，而是放置有關(guān)有關(guān)html文件的信息，例如：文件的標(biāo)題、編輯方式……等等。這些信息大部分是提供索引、辨認(rèn)和其他應(yīng)用之使用。<body>標(biāo)記：建立的組件是html文件的主體，也就是網(wǎng)頁(yè)的主要內(nèi)容。依照各種html的控制，這些內(nèi)容將呈現(xiàn)在瀏覽器的窗口中。因此，所有文件的最基本結(jié)構(gòu)如下：<html><head>……</head><body>……</body></html>Htmlheadbody從上圖中，我們可以容易的了解到整個(gè)html文件中所有的數(shù)據(jù)均被建立為一個(gè)一個(gè)組件，并組織為一個(gè)層次化的結(jié)構(gòu)。當(dāng)利用html標(biāo)記來定義組件時(shí)，定義標(biāo)記不可交錯(cuò)，否則將造成錯(cuò)誤。下面的語法中，<head>標(biāo)記與<body>標(biāo)記彼此交錯(cuò)，這樣是不對(duì)的，如果標(biāo)記交錯(cuò)時(shí)，我們無法區(qū)別兩個(gè)組件的范圍<html> <head> …… <body> </head> …… </body></html>錯(cuò)誤使用記事本程序

3.創(chuàng)建一個(gè)簡(jiǎn)單頁(yè)面創(chuàng)建一簡(jiǎn)單頁(yè)面的基本步驟1.打開一個(gè)html編輯器2.編輯你的html文檔3.保存html文檔4.瀏覽你做的頁(yè)面文件擴(kuò)展名為.html格式

兩種方法：1.打開ie瀏覽可以通過ie的菜單選項(xiàng)打開.html文件

<html><head><title>我終于會(huì)自己設(shè)計(jì)頁(yè)面了</title></head><body>我終于會(huì)自己設(shè)計(jì)頁(yè)面了哈哈</body></html>四.Web頁(yè)面的顏色通過<body>標(biāo)記內(nèi)屬性的設(shè)置，來達(dá)到控制web頁(yè)面的顏色的效果，主要內(nèi)容：1.為web頁(yè)面設(shè)置背景顏色2.為web頁(yè)面設(shè)置文本顏色3.在web頁(yè)面設(shè)置中為超文本鏈接設(shè)置顏色4.利用圖像作為web頁(yè)面使得背景1.為web頁(yè)面設(shè)置背景顏色Html允許編寫者為其web頁(yè)面選擇各種各樣的顏色，包括背景、文本等等，這通過這種<body>標(biāo)記的常用屬性Bgcolor屬性（用來控制頁(yè)面的背景顏色）語法：bgcolor=“顏色”其中，顏色可以通過兩種方式來表示，可以直接指定顏色的英文名稱，常用的基本顏色名稱如表：另外，也可以利用十六進(jìn)制數(shù)值方式來指定顏色，顏色的表示方法如下：#RRGGBB其中，RR代表紅色、GG代表綠色、BB代表藍(lán)色，我們以00到FF的值表示三種顏色成分的多少，以指定出三種原色以多少的成分組成新顏色。語法如下：<bodybgcolor=“#00ff00”>另外，ie支持3位數(shù)的顏色表示方法。與六位數(shù)的表示方法類似，不過就是位數(shù)少而已#RGB分別表示紅綠藍(lán)的成分。例如：綠色可以用“#0F0”表示（實(shí)例）2.為web頁(yè)面設(shè)置文本顏色Text屬性此屬性用于控制網(wǎng)頁(yè)中文字的顏色Text=“顏色值”有關(guān)顏色值的設(shè)定，與前面bgcolor屬性的說明一樣。（實(shí)例）3.在web頁(yè)面設(shè)置中為超文本鏈接設(shè)置顏色Link屬性、alink屬性、vlink屬性Link屬性：控制的是網(wǎng)頁(yè)中未被選擇過的超鏈接的顏色vlink屬性：控制的是網(wǎng)頁(yè)中已經(jīng)被選擇過的超鏈接的顏色Alink屬性：設(shè)置超鏈接在被選擇時(shí)的顏色它們的語法分別為：Link=顏色值Vlink=顏色值A(chǔ)link=顏色值有關(guān)顏色值的設(shè)定，與bgcolor的顏色值的設(shè)定完全相同4.利用圖像作為web頁(yè)面使得背景Background屬性指定作為html文件背景的圖片，可以使用的圖文件格式為gif和jpg，其語法如下：Background=“文件名稱與路徑”假如引用c:/html/sub/目錄下的bg.gif圖文件作為html文件背景時(shí)，此屬性的設(shè)置語法如下：Background=“c:/html/sub/bg.gif”五.給html文檔加注釋和一般的程序語言一樣，html編輯者也可以對(duì)自己的語句進(jìn)行注釋。一般來說，注釋是用來標(biāo)示html語句的作用的，對(duì)程序的讀寫都有重要的作用。注釋的格式如下:<!—注釋的內(nèi)容-->或<!注釋內(nèi)容>一般來說，注釋有兩個(gè)用途;1.在創(chuàng)建文檔時(shí)，為編輯文檔設(shè)計(jì)提供途徑，此類注釋將會(huì)對(duì)維護(hù)和修改極有幫助2.一些應(yīng)用程序要利用注釋在html中包括額外應(yīng)用程序的特定信息注釋的一般步驟如下：1.打開一個(gè)html文檔2.確定要添加注釋的位置3.將插入點(diǎn)移至該位置，插入注釋語句4.保存文檔為.html文檔，在瀏覽器中查看顯示效果（實(shí)例）第1章特殊字符、邏輯效果一.特殊字符二.字符的物理效果三.字符的邏輯效果一.特殊字符在網(wǎng)頁(yè)中會(huì)看到許多特殊的符號(hào)標(biāo)記，其中許多標(biāo)記是不可能通過鍵盤直接輸入的，比如“<”和“>”是html的一種標(biāo)記，如果直接輸入這些標(biāo)記，就會(huì)產(chǎn)生意想不到的錯(cuò)誤。而一些ASCII之外的特殊字符也是無法直接輸入的。如果要顯示這些字符，就必須進(jìn)行特殊符號(hào)的引用。在html文檔中可以指定任何isolatin1字符，但是一般的編譯環(huán)境卻不一定包括這些字符。Html提供兩種引用類型來包含字符，這樣可以很方便地使用它們。（實(shí)例1.html）1.字符引用：通過使用isolatin1字符代碼可以包含任何字符。2.實(shí)體引用：一些常用的字符已經(jīng)被指定了助記符。可以通過指定恰當(dāng)?shù)闹浄麃戆@些字符。無論是字符的引用還是實(shí)體引用，都可在html文檔中輸入任何一個(gè)isolatin1字符。只是因?yàn)樵S多平臺(tái)并不支持全部的isolatin1字符集，html才提供了這兩種方法。二.字符的物理效果創(chuàng)建html頁(yè)面時(shí)，我們有時(shí)需要強(qiáng)調(diào)或?qū)⒁粋€(gè)單詞或詞組同其他文本分開。這需要給特定的字符或文本以特殊的效果。正如字處理器提供了一些樣式（如黑體或斜體）來改變文本的顯示一樣，html也提供了一套改變字符顯示效果的手法，如黑體、斜體、下劃線以及替換文本的尺寸和顏色。這樣的效果被稱為字符的物理效果。字符顯示效果有黑體、斜體、下劃線等等，每種效果對(duì)應(yīng)一個(gè)標(biāo)記(2.html)<b></b>:可使短至一個(gè)字母長(zhǎng)至一整段的文本成為黑體。<i></i>:使其間的任何文本用斜體顯示出來<tt></tt>:任何位于<tt></tt>之間的文本均以固定寬度的字體顯示出來，從而保證字的準(zhǔn)確定位。<u></u>:給其間任意長(zhǎng)的文本加下劃線。<s></s>:將位于<s></s>之間的文本以刪除線格式顯示出來。和:Sub標(biāo)記將其間的文本放置在低于一行的位置上。Sup標(biāo)記之間的文本則比一行中的其他文本都要高一些。對(duì)于文字而言，我們除了可以使用以上標(biāo)記來控制其顯示效果外，還可以通過<font>標(biāo)記控制字符的字體、大小與顏色等。<font屬性=值1屬性=2屬性=3……>要控制的文字</font>Font標(biāo)記的屬性1.Face屬性：控制字符使用字體的屬性，其語法如下：Face=“字體名稱”，如果在所指定的字體名稱并不存在于用戶的系統(tǒng)中，將使用默認(rèn)的字體。2.Size屬性：控制字符大小的屬性。語法如下：Size=“字符等級(jí)”在ie中，字符的等級(jí)共有7級(jí)，7為最大的字號(hào)。3.Color屬性：控制字符的顏色，語法如下：Color=“顏色”顏色的設(shè)定可運(yùn)用英文名稱或十六進(jìn)制數(shù)值，與<body>標(biāo)記中bgcolor的設(shè)定方法一樣。實(shí)例(4.html)<basefont>標(biāo)記在文檔的開頭位置使用<basefont>標(biāo)記來改變整個(gè)文檔的大小，利用size屬性來改變默認(rèn)的字符大小。例如，要?jiǎng)?chuàng)建一個(gè)默認(rèn)字符大小為2的文檔。<basefontsize=2>其余同<font>標(biāo)記實(shí)例(9.html)專門控制字符大小的標(biāo)記<big>和<small>實(shí)例(3.html)以上幾種方法可以達(dá)到改變字符大小原理：當(dāng)瀏覽器遇到一個(gè)<big>或<small>標(biāo)記時(shí)，它就會(huì)將<big>和</big>(或<small></small>)之間的文本按預(yù)定量放大或縮小。當(dāng)瀏覽器遇到一個(gè)<font>標(biāo)記時(shí)，它讀取其屬性并對(duì)字符的大小和顏色作出變動(dòng)。當(dāng)瀏覽器遇到一個(gè)<basefont>標(biāo)記時(shí)，它按size屬性指定的字符大小調(diào)整這個(gè)頁(yè)面上所有文本。三.字符的邏輯效果除了字符的物理效果外，html還提供了一套稱為邏輯效果的標(biāo)記，它們不僅可以指定在文檔文本中特定格式的效果，還能標(biāo)出文本的含義。如標(biāo)題樣式的使用、特別強(qiáng)調(diào)、制定引用等。1.標(biāo)題樣式的使用2.增加強(qiáng)調(diào)和特別強(qiáng)調(diào)3.包含小段代碼和變量4.提供文字字符的樣本5.指示作為鍵盤輸入的文本6.指定一個(gè)地址1.標(biāo)題樣式的使用有時(shí)候，我們要給頁(yè)面添加幾個(gè)標(biāo)題，有主標(biāo)題和副標(biāo)題等，但是又不想使各個(gè)標(biāo)題的字號(hào)一樣大。這時(shí)候，我們可以通過<hn>標(biāo)記來標(biāo)識(shí)文檔中包含不同大小字號(hào)的主標(biāo)題和副標(biāo)題。Hn標(biāo)記標(biāo)示的字符將以粗體的形式顯示在網(wǎng)頁(yè)中，語法如下：<hn>標(biāo)題字符</hn>其中n是1至6的數(shù)字，表示標(biāo)題的層次。<h1>的標(biāo)題最大，<h6>的標(biāo)題最小在<hn>標(biāo)記中有一個(gè)較為常用的屬性align，用于控制標(biāo)題的對(duì)齊方式。語法如下：Align=left或Align=center或Align=right這三個(gè)設(shè)定值依序把標(biāo)題文字的對(duì)齊方式設(shè)為靠左對(duì)齊、居中對(duì)齊、靠右對(duì)齊。實(shí)例(6.html)2.增加強(qiáng)調(diào)和特別強(qiáng)調(diào)在頁(yè)面中，我們可以不通過黑體或斜體的方法，而達(dá)到強(qiáng)調(diào)頁(yè)面中某些字詞的目的，這需要使用<em></em>和<strong></strong>標(biāo)記。它們分別用作一般性強(qiáng)調(diào)和特別強(qiáng)調(diào)，可以高亮度顯示文本的特定區(qū)域。當(dāng)瀏覽器遇到一個(gè)<em>標(biāo)記時(shí)，它就使用瀏覽器中強(qiáng)調(diào)文本的特殊指示來強(qiáng)調(diào)位于<em></em>之間的文本。當(dāng)瀏覽器遇到一個(gè)<strong>標(biāo)記時(shí)，它就強(qiáng)調(diào)位于該標(biāo)記之間的文本，如果再一次使用該標(biāo)記，表示特別強(qiáng)調(diào)文本的特殊指示。實(shí)例(7.html)3.包含小段代碼和變量有時(shí)候我們有一些程序代碼樣本和變量需要放置在web頁(yè)面上。我們想使其同其他文本有所區(qū)別，但又不愿在物理形式處理上花費(fèi)太多時(shí)間。我們可以使用<code>和<var>標(biāo)記來實(shí)現(xiàn)這種效果。<code>標(biāo)記將程序代碼段以固定寬度字符顯示。這是因?yàn)闉g覽器將位于<code>和</code>標(biāo)記之間的文本按其顯示代碼的樣式顯示。而位于<var>和</var>之間的文本則按變量的樣式處理，所以<var>標(biāo)記將程序或其他程序的變量以斜體顯示。4.提供文字字符的樣本在html中，我們使用<samp>標(biāo)記來將位于<samp>和</samp>作為文字字符的樣本顯示。當(dāng)瀏覽器遇到一個(gè)<samp>標(biāo)記時(shí)，它就根據(jù)其內(nèi)置的規(guī)則格式化位于<samp>和</samp>之間的文本，通常，這種顯示文本的字符是固定寬度的。另外，盡管<samp>標(biāo)記的文本同用其他樣式標(biāo)出的文本的顯示看起來是一樣的，但是最好還是用<samp>來引用一個(gè)特殊的樣本。5.指示作為鍵盤輸入的文本有時(shí)候設(shè)計(jì)者想在web頁(yè)中將一些輸入的樣本包括在一段計(jì)算機(jī)程序中，且使這些樣本樣式與格式化的標(biāo)準(zhǔn)文本不同。在html中，我們使用html鍵盤樣式標(biāo)記<kbd>來標(biāo)記由用戶自己輸入的文本，還可以使用它顯示計(jì)算機(jī)命令、參數(shù)，尤其是由用戶輸入的內(nèi)容。由<kbd>標(biāo)記的文本通常是使用固定寬度的字符。6.指定一個(gè)地址Html還運(yùn)行用戶使用<address>標(biāo)記來指導(dǎo)有關(guān)web頁(yè)的創(chuàng)建者或維護(hù)者的信息。這一信息可以包括姓名、電子郵件地址、電話號(hào)碼、信件地址或其他相關(guān)信息。實(shí)例(8.html)以上我們掌握了字符效果的基本樣式，包括字符的物理效果和邏輯效果。在實(shí)際應(yīng)用中，如何利用這些樣式來美化自己的主頁(yè)，提出幾點(diǎn)建議1.只有越少使用它們，才能越有效果。如果每隔一個(gè)詞就用黑體表示或?qū)⒁淮蠖挝谋撅@示為斜體，是不會(huì)引起讀者任何注意的。2.除了要少用強(qiáng)調(diào)外，頻繁地把普通樣式改為黑體或斜體等樣式也會(huì)使文檔的閱讀變得困難，這是因?yàn)檠芯勘仨毾韧Ｏ聛聿⒄{(diào)整到新的類型樣式之后才能繼續(xù)的閱讀下去。減少樣式的變換可以防止這個(gè)問題。3.在www用戶和文檔創(chuàng)建者之間一直有很多關(guān)于正確使用<b>與<strong>及<i>與<em>的討論。在大多數(shù)瀏覽器中，這些標(biāo)記的功能是相同且可互換的。這里并沒有一條使用這些標(biāo)記的正確方法。但是作為一條普通規(guī)律，我們應(yīng)該考慮一下規(guī)則：在要強(qiáng)調(diào)一個(gè)字或詞時(shí)，使用<em>或<strong>。當(dāng)某個(gè)字或詞要求一個(gè)特殊的樣式時(shí)，例如書名或特定名稱，則使用<I>或<b>。當(dāng)有疑問的適合，則強(qiáng)調(diào)包含這些字詞的句子，這時(shí)用<I>或<b>。如果想格式化一個(gè)文檔突出強(qiáng)調(diào)的字詞時(shí)，則用<em>或<strong>。4.Html還提供了一些在大多數(shù)瀏覽器中顯示時(shí)難以區(qū)分的標(biāo)記：<tt>、<code>、<samp>、<kbd>，它們均可使文本以固定寬度字符樣式顯示。但實(shí)際上，它們之間差別很大。當(dāng)從一個(gè)程序中插入一些代碼時(shí)，使用<code>標(biāo)記。當(dāng)你想要顯示用戶輸入程序的信息時(shí)，請(qǐng)使用<kbd>標(biāo)記。而利用<samp>標(biāo)記就可以顯示文字字符的一個(gè)樣本，其他需要用固定寬度字符顯示的情況則可用<tt>處理。這些區(qū)別不僅使瀏覽器選用最佳方式來顯示信息，還可使掃描web頁(yè)的索引程序通過標(biāo)記的使用準(zhǔn)確識(shí)別代碼和鍵盤輸入等等。如果對(duì)于所有需要使用固定寬度字符的要求均只使用<tt>,則大多數(shù)瀏覽器的輸出看起來都是一樣的，但索引程序卻很難找出web頁(yè)面中的代碼和鍵盤輸入。準(zhǔn)確使用這些樣式，可以為自己的新主頁(yè)添色不少，也可使它們更易閱讀。如果小心使用，物理樣式可以提高web頁(yè)的顯示效果。此外，正確使用內(nèi)容樣式可以使讀者找到它們感興趣的東西，同時(shí)也便于索引程序更好地做出web頁(yè)內(nèi)容的目錄。第3章表格表格在對(duì)web頁(yè)上的信息格式和布局進(jìn)行控制的較好方法，它定義格式化信息有著強(qiáng)大的功能，能夠控制各種信息的位置，使得頁(yè)面結(jié)構(gòu)協(xié)調(diào)一致。一.創(chuàng)建一個(gè)簡(jiǎn)單表格二.定義單元格的高度和寬度三.控制表格的邊框及邊框線四.創(chuàng)建跨單元格的存儲(chǔ)格在網(wǎng)頁(yè)中，表格的運(yùn)用是非常重要的技巧。在html中，表格的建立主要就運(yùn)用<table>、<tr>、<td>、<th>四種標(biāo)記來顯示完成的1.<table>和</table>標(biāo)記：用于表示一個(gè)表格的組件。一個(gè)表格組件將由數(shù)個(gè)行<tr>、存儲(chǔ)格<td>、標(biāo)題格<th>子組件所組成。2.<tr></tr>：用于定義表格的一行，一組<tr>標(biāo)記內(nèi)通常包含數(shù)組由<td>或<th>標(biāo)記所定義的存儲(chǔ)格。3.<td></td>用于定義表格的存儲(chǔ)格。4.<th></th>：用于定義表格的標(biāo)題存儲(chǔ)格，此存儲(chǔ)格中的文字將以粗體的方式顯示。在一個(gè)最基本的表格組件中，必須包含一組<table>標(biāo)記，一組<tr>標(biāo)記與一組<td>標(biāo)記。語法如下：<table><tr><td></td></tr></table>一.創(chuàng)建一個(gè)簡(jiǎn)單表格1.創(chuàng)建一個(gè)簡(jiǎn)單的表格2.給表格添加一個(gè)標(biāo)題3.如果需要，把表格的第一行設(shè)計(jì)為表頭4.給單元格和表格元素定義數(shù)據(jù)1.創(chuàng)建一個(gè)簡(jiǎn)單的表格輸入<table>和</table>標(biāo)記。如果要顯示表格單元格的邊框，則需在<table>標(biāo)記中添加border屬性。并為Border屬性設(shè)置值。如：<tableborder=2></table>2.給表格添加一個(gè)標(biāo)題使用<caption>和</caption>標(biāo)記來添加標(biāo)題，語法：<caption>表格標(biāo)題</caption>如果要添加的標(biāo)題位于表格的上方，則將<caption>表格標(biāo)題</caption>置于<table>標(biāo)記下一行，如：<table><caption>表格標(biāo)題</caption>……</table>如果要將標(biāo)題置于表格下方，則將<caption>表格標(biāo)題</caption>置于</table>標(biāo)記之前。如：<table>……<caption>表格標(biāo)題</caption></table>我們還可以像對(duì)待其他文本一樣，格式化<caption>和</caption>中的文本<caption>表格標(biāo)題</caption>3.把表格的第一行設(shè)計(jì)為表頭通過<th>標(biāo)記來指定表格中特殊表頭單元格，<th>標(biāo)記之后的文本作為表頭單元格的一部分?？梢栽诒砀竦娜我獾胤绞褂眠@個(gè)標(biāo)記，表頭也不是必須要放在各列的頂部。當(dāng)表格的<table>標(biāo)記和表格標(biāo)題輸入之后，在表格的每一列中放置一個(gè)<th>標(biāo)記和該列中的文本。<table><caption>表格標(biāo)題</caption><th>第一列<th>第二列<th>第三列</table>4.給單元格和表格元素定義數(shù)據(jù)使用<td>標(biāo)記來建立單元格，并往其中添加數(shù)據(jù)，它的用法與<th>標(biāo)記的用法十分相似。<table><caption>個(gè)人資料</caption><tr><th>姓名<th>居住地<th>職業(yè)</tr><tr><td>張三<td>北京<td>學(xué)生</tr><tr><td>李四<td>上海<td>工程師</tr><tr><td>王五<td>深圳<td>老師</tr></table><tr>標(biāo)記的用法同<th>類似，表格是用來創(chuàng)建表格中行的。如實(shí)例所示，表格的每一行都是由<tr>標(biāo)記來建立。根據(jù)需要，可把某個(gè)單元格設(shè)置成空數(shù)據(jù)格，即不輸入數(shù)據(jù)到該格中，也就是在<td>標(biāo)記之后不輸入數(shù)據(jù)。<tr><td>李四<td><td>工程師</tr>二.定義單元格的高度和寬度表格的寬度由<table>標(biāo)記的width屬性來控制，而高度則是由<table>標(biāo)記的height屬性來控制的。語法分別為：Width=數(shù)值Height=數(shù)值數(shù)值的設(shè)定值若為一整數(shù)，則其單位為像素，若設(shè)定值為n%，則代表表格的寬度為整個(gè)網(wǎng)頁(yè)寬度的百分之n。如：將width屬性設(shè)為50%，代表此表格寬度為整個(gè)網(wǎng)頁(yè)寬度的一半。<tablewidth=300height=50><caption>個(gè)人資料</caption><tr><th>姓名<th>居住地<th>職業(yè)</tr><tr><td>張三<td>北京<td>學(xué)生</tr><tr><td>李四<td>上海<td>工程師</tr><tr><td>王五<td>深圳<td>老師</tr></table><tablewidth=50%height=40%><caption>個(gè)人資料</caption><tr><th>姓名<th>居住地<th>職業(yè)</tr><tr><td>張三<td>北京<td>學(xué)生</tr><tr><td>李四<td>上海<td>工程師</tr><tr><td>王五<td>深圳<td>老師</tr></table>兩者設(shè)置寬度和高度的區(qū)別，當(dāng)改變?yōu)g覽器窗口大小的時(shí)候，用百分比設(shè)置的表格會(huì)隨瀏覽器窗口的變化而變化，而通過像素設(shè)定寬度和高度的表格的大小不會(huì)變化。以上是對(duì)整個(gè)表格的所有單元格的高度和寬度的控制，也可以在<tr>標(biāo)記中添加width和height屬性來控制某一行的寬度和高度。如：<trwidth=300height=100></tr><trwidth=40%height=20%></tr>三.控制表格的邊框及邊框線通過<table>標(biāo)記的屬性可以控制整個(gè)表格組件的格式。1.Border屬性：用來控制表格邊框線的厚度，語法如下：Border=數(shù)值，數(shù)值的設(shè)定若為整數(shù)，則其單位為像素(pixel)。2.Cellspacing屬性：用于控制存儲(chǔ)格邊框到表格邊框的距離，框線的寬度。Cellspacing=數(shù)值3.cellpadding:用于控制存儲(chǔ)格內(nèi)文字的邊緣到存儲(chǔ)格邊框的距離。cellpadding=數(shù)值<tableborder=10width=500height=500><caption>設(shè)置表格的邊框</caption><tr><th>姓名<th>居住地<th>職業(yè)</tr><tr><td>張三<td>北京<td>學(xué)生</tr><tr><td>李四<td>上海<td>工程師</tr><tr><td>王五<td>深圳<td>老師</tr></table>4.設(shè)置表格背景顏色與邊框厚度顏色<table>標(biāo)記還有兩個(gè)屬性Bgcolor屬性：控制表格的背景顏色bordercolor屬性：控制表格厚度的顏色<tablebgcolor=bluebordercolor=red>5.設(shè)置表格的對(duì)齊方式表格對(duì)齊方式有兩種：水平方向和垂直方向align(水平方向)：Align=left（水平左對(duì)齊）Align=right(水平右對(duì)齊)Align=center(水平居中對(duì)齊)Valign(垂直方向)Valign=top(垂直頂部對(duì)齊)valign=bottom(垂直底部對(duì)齊)Valign=baseline(垂直一條公共基線對(duì)齊)valign=middle(垂直居中對(duì)齊)(1).align屬性可以放置于<table>標(biāo)記中，控制整個(gè)表格在網(wǎng)頁(yè)中的對(duì)齊方式。<html><body><tablealign=left><tr><td>靠左對(duì)齊表格</tr></table><br><tablealign=center><tr><td>居中對(duì)齊表格</tr></table><br><tablealign=right><tr><td>靠右對(duì)齊表格</tr></table><br></body></html>(2).align和valign屬性也可以在<tr>標(biāo)記中控制對(duì)齊方式<html><body><table><tralign=leftvalign=top><td>張三<td>北京<td>學(xué)生</tr><tralgin=centervalign=bottom><td>李四<td>上海<td>工程師</tr><tralign=rightvalign=center><td>王五<td>深圳<td>老師</tr></table></body></html>四.創(chuàng)建跨單元格的存儲(chǔ)格我們常常會(huì)看到有的表格里的某些存儲(chǔ)格跨了好幾個(gè)單元格，這是通過colspan和rowspan屬性來控制而達(dá)到的。Colspan屬性：水平延伸存儲(chǔ)格，語法：Colspan=nN為整數(shù)，代表此存儲(chǔ)格水平延伸的存儲(chǔ)格數(shù)。Rowspan屬性：垂直延伸存儲(chǔ)格數(shù)<html><body><tableborder=3><tr><thcolspan=3>個(gè)人資料</tr><tr><th>姓名<th>居住地<th>職業(yè)</tr></table><br><tableborder=3><tr><throwspan=3>個(gè)人資料<th>姓名</tr><tr><th>居住地</tr><tr><th>職業(yè)</tr></table><br><tableborder=3><tr><throwspan=2>姓名<thcolspan=2>個(gè)人資料</tr><tr><th>居住地<th>職業(yè)</tr><tr><td>張三<td>北京<td>學(xué)生</tr><tr><td>李四<td>上海<td>工程師</tr><tr><td>王五<td>深圳<td>老師</tr></table><br></body></html>第3章列表有些信息最好是以列表的形式表現(xiàn)出來，比如一個(gè)菜譜的配料、最喜歡的10套唱片、一個(gè)演出大綱以及一套術(shù)語的定義。雖然可以利用<p>和<br>之類的標(biāo)記來管理在文檔中各項(xiàng)目的位置及創(chuàng)建列表，但是這些標(biāo)記使用起來很麻煩，而且對(duì)于最合適信息的列表類型的創(chuàng)建也無多大的靈活性。所有html提供了一些標(biāo)記用來創(chuàng)建包括有數(shù)字編號(hào)、點(diǎn)或圈標(biāo)志、縮進(jìn)及其他性能的列表：而且，html4.0還包含了一些為建立以最佳形式表達(dá)數(shù)據(jù)的列表提供更多功能的屬性。將文字內(nèi)容以條列的方式顯示，對(duì)于閱讀者來說通常是比較清除而易讀的。Html共提供了三種用于條列文字的標(biāo)記，它們是有序條列與無序條列以及說明項(xiàng)目條列標(biāo)記1.有序號(hào)條列就是有一定順序的列表，比如有數(shù)字編號(hào)的列表和指定編號(hào)的列表等。2.無序號(hào)條列就是有標(biāo)志但不管順序的列表，如點(diǎn)圈標(biāo)志等。3.說明項(xiàng)目條列就是沒有標(biāo)志，且排列內(nèi)容無一定次序的列表。1.建立一個(gè)有數(shù)字編號(hào)的列表2.指定編號(hào)的格式和順序3.創(chuàng)建一個(gè)帶有點(diǎn)或圈標(biāo)志的列表4.創(chuàng)建一個(gè)無標(biāo)志列表5.建立一個(gè)菜單列表6.建立目錄列表7.建立術(shù)語列表8.嵌套列表9.利用列表使主頁(yè)更有活力1.建立一個(gè)有數(shù)字編號(hào)的列表在html中可以創(chuàng)建一個(gè)在各項(xiàng)目之前自動(dòng)生成數(shù)字編號(hào)的排序類別。項(xiàng)目之前的數(shù)字取決于該項(xiàng)目在列表中的位置：若第一項(xiàng)是1，則第二項(xiàng)是2，以此類推。這是通過<ol>和<li>標(biāo)記來實(shí)現(xiàn)的語法如下：<ol><li>條列1<li>條列2<li>條列3……</ol>建立一個(gè)有數(shù)字編號(hào)的列表的一般步驟如下：<html><body><ol><li>紅色<li>綠色<li>藍(lán)色<li>紫色</ol></body></html>實(shí)例：1.html一些瀏覽器允許將列表做的更緊湊一些來節(jié)省空間。在一個(gè)緊湊的列表中列表項(xiàng)目間通?？崭窈苄?，且會(huì)使用更小更緊縮的字體。如要指定一個(gè)壓縮的列表，只需用<olcompact>標(biāo)記代替列表開頭的<ol>標(biāo)記。2.指定編號(hào)的格式和順序有時(shí)候編號(hào)不一定是數(shù)字，或者是數(shù)字也不一定是從1開始。如果是這樣，我們可以通過<ol>標(biāo)記的屬性start和type來控制。如果不是以數(shù)字1開始，則在列表的開始處的<ol>標(biāo)記中放置一個(gè)start屬性，其后是等號(hào)(=)及第一個(gè)數(shù)字的值。例如要?jiǎng)?chuàng)建一個(gè)以100為開頭的列表如下：<html><body><olstart=100><li>紅色<li>綠色<li>藍(lán)色<li>紫色</ol></body></html>可以在<li>標(biāo)記中使用value屬性來改變列表內(nèi)的標(biāo)號(hào)順序。例如要從3開始，但是列表后部的值更大一些，下面的html語句創(chuàng)建的列表首先從3開始，到了藍(lán)色這一欄將從10開始。（實(shí)例：13.html）<html><body><olstart=3><li>紅色<li>綠色<livalue=10>藍(lán)色<li>紫色</ol></body></html>利用type屬性來控制序號(hào)的種類，語法如下：Type=1type=Atype=atype=itype=I屬性值定義1使用標(biāo)準(zhǔn)數(shù)字，此為默認(rèn)值(1、2、3等)A使用大寫字母(A、B、C等)a使用小寫字母(a、b、c等)I使用羅馬大寫字母(I、II、III等)i使用羅馬小寫字母(i、ii、iii等)例如要在列表中使用大寫字母，則輸入：<oltype=A> <li>紅色 <li>綠色 <li>藍(lán)色 <li>紫色</ol>我們還可以在<li>標(biāo)記中使用type屬性來更改列表中的編號(hào)體系。例如將標(biāo)準(zhǔn)數(shù)字改為羅馬大寫數(shù)字，則輸入：<html><body><ol><li>紅色<li>綠色<litype=I>藍(lán)色<li>紫色</ol></body></html>實(shí)例：2.html3.html當(dāng)一個(gè)html瀏覽器遇到一個(gè)帶有等于某值的start屬性編號(hào)列表時(shí)，它可用這個(gè)值開始為列表編號(hào)。類似的，當(dāng)它遇到一個(gè)等于某值的type屬性時(shí)，它就用此數(shù)值匹配編號(hào)類型的預(yù)定義列表，并使用恰當(dāng)類型為列表編號(hào)。當(dāng)瀏覽器在一列表元素中遇到一個(gè)type或value標(biāo)記時(shí)，它就根據(jù)標(biāo)記中設(shè)置的值改變列表編號(hào)系統(tǒng)。3.創(chuàng)建一個(gè)帶有點(diǎn)或圈標(biāo)志的列表Html可以用來創(chuàng)建帶有圈標(biāo)志的或稱為無序的列表，其中的點(diǎn)圈能夠自動(dòng)生成并置于每一個(gè)列表項(xiàng)之前。這一技術(shù)極像編號(hào)列表中使用的技術(shù)，其唯一區(qū)別僅在于使用的標(biāo)記不同。這里使用的標(biāo)記是<ul>和<li>。用法與<ol>和<li>基本相同。不同的地方在于type屬性的不同，此標(biāo)記的語法如下：<ul> <li>條列1 <li>條列2 <li>條列3 ……</ul>這里type屬性用于設(shè)定項(xiàng)目符號(hào)，用法為：Type=circleType=discType=square其中，三種type值所代表的條列符號(hào)分分別為圓圈○、實(shí)心圓●、實(shí)心正方體■。實(shí)現(xiàn)步驟與前面有數(shù)字編號(hào)的列表的建立步驟完全一樣，只不過是要把<ol>和</ol>換成<ul>和</ul>。實(shí)例：4.html4.創(chuàng)建一個(gè)無標(biāo)志列表在html中，我們可以創(chuàng)建一個(gè)沒有任何標(biāo)志的列表，這個(gè)通過使用<dl>和<dt>標(biāo)記來完成。建立無標(biāo)志列表步驟與有數(shù)字列表建立步驟一樣。不過要把<ol>和</ol>換成<dl>和</dl>,同時(shí)把<li>換成<dt>。如果要?jiǎng)?chuàng)建的是不同于普通文本的縮進(jìn)式列表，則不用<dt>而用<dd>代替<li>實(shí)例：5.html上例中縮進(jìn)式列表原理是<dd>標(biāo)記在列表項(xiàng)之前又加了一個(gè)制表符。不過，縮進(jìn)量是由瀏覽器設(shè)置的，而不能由文檔控制。5.建立一個(gè)菜單列表使用<menu>標(biāo)記和<li>標(biāo)記可以使列表各項(xiàng)以菜單的形式顯示。用法與<ol>和<li>基本相同。用<menu>標(biāo)記替換<ol>標(biāo)記。實(shí)例：6.html6.建立目錄列表使用<dir>標(biāo)記和<li>標(biāo)記可以使列表各項(xiàng)以一個(gè)相關(guān)條目的形式顯示。用法與<ol>和<li>基本相同。實(shí)例：6.html7.建立術(shù)語列表通過前面的學(xué)習(xí)，我們已經(jīng)了解<dl>、<dt>、和<dd>標(biāo)記。在那里，<dd>和<dt>標(biāo)記是分開使用的。但是它們卻可以共同使用來創(chuàng)建一個(gè)術(shù)語列表。也就是說，以帶有術(shù)語及其帶有的列表形式顯示處理，并且強(qiáng)調(diào)指出這些詞語及其定義。實(shí)例：7.html8.嵌套列表我們經(jīng)?？梢钥吹竭@樣的列表，既有主標(biāo)題，每個(gè)主標(biāo)題下又有子標(biāo)題，并能以此類推。這就叫嵌套式列表。在html中，嵌套是很容易實(shí)現(xiàn)的1.數(shù)字編號(hào)列表（實(shí)例：8.html）2.點(diǎn)圈標(biāo)志列表（實(shí)例：9.html）3.菜單列表（實(shí)例：10.html）4.無標(biāo)志列表（實(shí)例：11.html）5.混合列表（實(shí)例：12.html）9.利用列表使主頁(yè)更有活力列表的使用有利也有弊。用的好，讀者通過它能很快地找到所需的信息。通過將相關(guān)信息分組并使用平行結(jié)構(gòu)，用戶可以很容易地根據(jù)提供信息進(jìn)行分類。但是，如果用得不好，反而會(huì)有很差的效果。在使用html創(chuàng)建列表時(shí)，要注意以下幾點(diǎn)：1.避免列表太長(zhǎng)。太長(zhǎng)的列表會(huì)令人生厭并不易閱讀，而且讀者也很難找到所需的特定信息。在這種情況下，應(yīng)該把它拆成小的列表，并標(biāo)以不同的題目。這也就是嵌套式列表的有用之處。2.保持列表的一貫性，在一個(gè)列表中間不要更換動(dòng)詞時(shí)態(tài)或做其他形式上的改動(dòng)。3.在各行中，使各項(xiàng)保持相同的長(zhǎng)度。列表可以做成只有一個(gè)詞的短表，也可以做成包括成段句子的長(zhǎng)表；但是這兩種類型不能混用。第4章超級(jí)鏈接只需少量的標(biāo)記就可以格式化文本文件并使其在worldwideweb上高效地顯示出來，它使html和www成為在internet上發(fā)表文檔的好方法。但這僅僅是利用了worldwideweb的極少量的能力。文檔閱讀者可以設(shè)想只需通過簡(jiǎn)簡(jiǎn)單單的鍵盤敲擊和鼠標(biāo)摁動(dòng)，就可移至該文檔的其他位置上、本臺(tái)計(jì)算機(jī)的其他文檔上，或者是全世界的internet資源上。www提供了一種工具來完全地實(shí)現(xiàn)上述功能。它就是超級(jí)鏈接。1.url介紹2.創(chuàng)建鏈接3.創(chuàng)建一個(gè)簡(jiǎn)單的鏈接4.創(chuàng)建一個(gè)指向頁(yè)面特定部分的鏈接5.在表格和列表中使用鏈接1.url介紹url（uniformresourcelocator，全球資源定位器），是worldwideweb瀏覽器用來定位在internet上文件的工具，為使用各種協(xié)議訪問信息提供了一個(gè)簡(jiǎn)單連貫的方法。一個(gè)url包括3部分：一個(gè)協(xié)議代碼、一個(gè)裝有所需文件的計(jì)算機(jī)地址（或一個(gè)電子郵件地址或是新聞組名稱），以及包含所需信息的文件地址和文件名。如：/main.html當(dāng)瀏覽器遇到一個(gè)url時(shí)，它首先檢查其協(xié)議以決定程序獲取信息必須使用的方法。之后瀏覽器取得計(jì)算機(jī)的地址，然后訪問站點(diǎn)，并使用url中的路徑信息找到文件并將它的一個(gè)拷貝返回到瀏覽器所在的計(jì)算機(jī)上。1.解釋一個(gè)urlurl包括3個(gè)部分，第一部分是協(xié)議，協(xié)議表明應(yīng)使用何種方法獲得所需信息?，F(xiàn)在worldwideweb上共有7個(gè)主要協(xié)議。在這7種協(xié)議中的5種（ftp、gopher、http、telnet和wais）協(xié)議后均需接一個(gè)冒號(hào)和兩個(gè)斜杠（//），斜杠之后則是相關(guān)信息的主機(jī)地址。如：而在mailto協(xié)議之后緊跟一個(gè)冒號(hào)，其后就是e-mail地址了。如：mailto:john@263.net在news協(xié)議中，協(xié)議后跟一個(gè)冒號(hào)，其后是usenet新聞的名稱。如：News:alt.widgets對(duì)于除了mailto和news之外的協(xié)議，計(jì)算機(jī)地址之后都接著所需文件或目錄的路徑。如：/pub/teams/yankees.html/incoming/fjm/1.doc2.理解相對(duì)的url有時(shí)候url只是一個(gè)文件或某種路徑，并不包括任何種類的協(xié)議。此時(shí)可以利用路徑名來尋找各個(gè)目錄中的文件，如:C://mydocuments/mydoc/2.doc同時(shí)，web瀏覽器會(huì)假設(shè)給出的位置與當(dāng)前頁(yè)面的位置相關(guān)，它將使用路徑信息在目錄中上移或下移以達(dá)到該位置并檢索此文件。也就是說，不用寫出完整的路徑名就能指定頁(yè)面和其他文件的位置如下目錄結(jié)構(gòu)圖如要訪問一個(gè)與當(dāng)前頁(yè)面所處目錄相同的文件，則只需將該文件的名稱作為url。如：現(xiàn)在是在page1.html中，想要到page2.html中，則只需輸入：page2.html如果要訪問的文件位于當(dāng)前頁(yè)面所在目錄的子目錄中，則需包括子目錄名，并將其余文件名用一個(gè)斜杠（/）分開，如由page1.html到page3.html中，則輸入：flash/page3.html如果對(duì)于父目錄（高于當(dāng)前目錄所在目錄的目錄）中的文件，則在兩個(gè)句號(hào)（..）和文件名之間用一個(gè)斜杠分隔開。例如，想由page3.html到page1.html中，則輸入：../page1.html由上兩步綜合起來使用，可由一個(gè)目錄轉(zhuǎn)移到任何一個(gè)其他目錄。例如要從page3.html到page4.html中，則輸入：../image/page4.html實(shí)例：1.html2.創(chuàng)建鏈接要將你的文檔或信息與別的資源連接起來，就必須創(chuàng)建它們之間的鏈接。創(chuàng)建鏈接的方式有兩種：1.可以使用<link>來指定一個(gè)文檔同其他資源的關(guān)系，包括之前和之后的文檔、表格內(nèi)容、索引以及其他文檔部分。瀏覽器閱讀和存儲(chǔ)包含在<link>元素中的信息，并將其作為相關(guān)文件的位置。2.使用<a></a>標(biāo)記可以創(chuàng)建各種各樣的鏈接，如指向本地頁(yè)面的鏈接、指向其他頁(yè)面的鏈接、指向頁(yè)面特定部分的鏈接以及指向服務(wù)器或站點(diǎn)的鏈接等。當(dāng)用戶選擇建立于頁(yè)面中的鏈接后，瀏覽器便會(huì)瀏覽該超級(jí)鏈接位置的網(wǎng)頁(yè)。建立超級(jí)鏈接所使用的標(biāo)記為<a></a>，其語法為：<ahref=“鏈接位置”>超級(jí)鏈接名稱</a>此語句的各個(gè)部分1.超級(jí)鏈接名稱此字符串將顯示于網(wǎng)頁(yè)中，代表此超級(jí)鏈接，并供用戶選擇超級(jí)鏈接之用。除了可以使用字符串外，在<a></a>標(biāo)記中，也可以插入圖像文件，這樣該圖像文件便可代表該超級(jí)鏈接。當(dāng)用戶把鼠標(biāo)移到代表該超級(jí)鏈接的文字或圖片上時(shí)，光標(biāo)的形狀將變成手狀，表示該用戶可選擇該鏈接。2.鏈接位置用于指定href屬性中超級(jí)鏈接的目標(biāo)位置，這可使用url來指定。url的格式由使用的通訊協(xié)議、鏈接地址與文件位置所組成下面列舉一些常見的鏈接位置的設(shè)定方式(1).通過http協(xié)議鏈接至其他網(wǎng)頁(yè)<ahref=/main.html>(2).指定通過ftp協(xié)議鏈接至網(wǎng)絡(luò)上的ftp服務(wù)器<ahref=>(3)telnet鏈接：<ahref=“telnet://”?>(4)電子郵件<ahref=mailto:hehe@263.net>(5)鏈接至同一服務(wù)器上的其他網(wǎng)頁(yè)<ahref=“c:\index.html”>3.創(chuàng)建一個(gè)簡(jiǎn)單的鏈接創(chuàng)建簡(jiǎn)單鏈接的一般步驟：1.打開或創(chuàng)建一個(gè)需要使用鏈接的文檔，并定位要用于鏈接的字或詞。2.通過在錨點(diǎn)文本的前后放置<a>和</a>標(biāo)記來標(biāo)出用作鏈接的文本。3.在<a>標(biāo)記中放置href屬性并使其等于要鏈接的對(duì)象的url4.保存文檔，查看效果實(shí)例：2.html5.創(chuàng)建一個(gè)指向頁(yè)面特定部分的鏈接通過上面的學(xué)習(xí)，我們能夠創(chuàng)建從一個(gè)頁(yè)面到另外一個(gè)頁(yè)面的鏈接，但有時(shí)候你只需從一個(gè)頁(yè)面到另一個(gè)頁(yè)面的一個(gè)指定位置之間的鏈接，例如鏈接到第二個(gè)頁(yè)面的第四部分，這應(yīng)該怎么達(dá)到呢？方法就是在第二個(gè)頁(yè)面的html文檔中建立一個(gè)錨。所謂錨，就是鏈接到文檔內(nèi)部的指定位置。在第一個(gè)頁(yè)面建立的鏈接將包含鏈接的文件名和錨的名字。然后，當(dāng)瀏覽器按這個(gè)鏈接查找時(shí)，就把第二個(gè)頁(yè)面裝入，然后向下滾動(dòng)到錨的指定位置。如果第二個(gè)頁(yè)面就是第一個(gè)頁(yè)面，這也是可行的。也就是說，進(jìn)行的是從一個(gè)頁(yè)面到該頁(yè)面本身某個(gè)位置的鏈接。這種鏈接常用在web頁(yè)面較長(zhǎng)，無法在一頁(yè)中顯示的情況下。實(shí)例：first.html6.在表格和列表中使用鏈接設(shè)計(jì)者可以將表格或列表與超級(jí)鏈接聯(lián)合起來使用，比如建立一個(gè)菜單用以組織一套指向不同頁(yè)面的鏈接?？梢韵駷槠胀?yè)面添加鏈接一樣在列表和表格中添加鏈接。實(shí)例：2.html第3章分節(jié)分欄、html擴(kuò)展1.在web頁(yè)中創(chuàng)建分節(jié)2.利用表格進(jìn)行web頁(yè)面的布局控制3.給滾動(dòng)的文本添加滾動(dòng)的文本框4.控制頁(yè)面的顯示效果的一些方法1.在web頁(yè)中創(chuàng)建分節(jié)在web頁(yè)中創(chuàng)建分節(jié)是由<div>和</div>標(biāo)記來實(shí)現(xiàn)的。當(dāng)瀏覽器遇到<div>標(biāo)記時(shí)，它取出<div>和<div>之間的所有文本，并根據(jù)<div>標(biāo)記中的屬性所包含的指示格式化該文本。<div>標(biāo)記的屬性主要有align,設(shè)置文本的定位，可設(shè)置為left、right和center。實(shí)例12.利用表格進(jìn)行web頁(yè)面的布局控制表格的應(yīng)用非常廣泛且靈活，為控制web頁(yè)的圖像、文本和其他對(duì)象提供了極有力的途徑。我們可以在表格單元格中插入文本、圖像及其他對(duì)象，并控制它們?cè)跒g覽器窗口中的確切位置。1.安排圖像、嵌入對(duì)象和文本2.創(chuàng)建分欄文本，將文本分為若干列，在屏幕上一個(gè)挨一個(gè)地排列1.安排圖像、嵌入對(duì)象和文本實(shí)例12.創(chuàng)建分欄文本，將文本分為若干列，在屏幕上一個(gè)挨一個(gè)地排列所謂在web頁(yè)中分欄，就是說將文本分為若干列，在屏幕上一個(gè)挨一個(gè)地排列。在html中，我們可以利用表格來達(dá)到。實(shí)例1由于www的迅猛發(fā)展，計(jì)算機(jī)技術(shù)更新速度越來越快。瀏覽器的升級(jí)速度更是如此，隨著瀏覽器的不斷升級(jí)，可供web頁(yè)的創(chuàng)建者使用的技術(shù)范圍越來越廣。3.給滾動(dòng)的文本添加滾動(dòng)文本框4.控制頁(yè)面的顯示效果的一些方法3.給滾動(dòng)的文本添加滾動(dòng)的文本框讓文本在一個(gè)頁(yè)面滾動(dòng)是吸引讀者注意力的一個(gè)獨(dú)特的技巧。通過<marquee>標(biāo)記可以達(dá)到此效果。主要語法如下：<marquee>要控制的文本</marquee>我們還可以使用它的各種屬性來控制滾動(dòng)文本框的尺寸、滾動(dòng)行為和顏色等。<marquee>標(biāo)記的屬性主要有：1.Behavior屬性：用來控制滾動(dòng)類型。它支持3種值，如下表，默認(rèn)為scroll設(shè)置值描述alternate文本在屏幕的兩端來回滾動(dòng)scroll從屏幕的一邊開始顯示文本，并在文本框中不斷的移動(dòng)直到屏幕的另一端slide從屏幕的一邊開始顯示文本，并在滾動(dòng)文本框中移動(dòng)文本直到文本碰到屏幕另一邊的界面2.Direction屬性：控制文本在滾動(dòng)文本框中移動(dòng)的方向。有兩個(gè)設(shè)定值：left和right。分別代表文本從右向左滾動(dòng)和從左向右滾動(dòng)。默認(rèn)值為left。3.Scrollamount屬性：用來設(shè)置滾動(dòng)文本框每次重畫間隔的像素?cái)?shù)，也就是說，控制的是在滾動(dòng)文本框下一次顯示時(shí)，滾動(dòng)文本框的內(nèi)容將要向下移動(dòng)的像素?cái)?shù)。4.Scrolldelay控制重畫間的延遲，也就是重畫之間的間隔時(shí)間，一微秒為單位。5.Loop屬性：用來設(shè)置滾動(dòng)文本框滾動(dòng)的次數(shù)。Loop=nN代表滾動(dòng)的次數(shù)。如果n=-1或infinite，則此時(shí)代表滾動(dòng)文本框?qū)⑦B續(xù)不停的滾動(dòng)。6.Bgcolor屬性：用來設(shè)置滾動(dòng)文本框的背景顏色。與以前學(xué)過的bgcolor的設(shè)置完全相同。7.Height屬性：控制滾動(dòng)文本框的高度。8.Width屬性：控制滾動(dòng)文本框的寬度。9.Align屬性：控制滾動(dòng)文本框周圍的文本對(duì)齊方式。有3個(gè)設(shè)定值：top、middle和bottom。分別代表文本與滾動(dòng)文本框的頂部、中部和底部對(duì)齊。10.Hspace屬性：用于調(diào)整滾動(dòng)文本框的水平邊界。設(shè)定值單位為像素。11.Vspace屬性：用于調(diào)整滾動(dòng)文本框的垂直邊界。設(shè)定值單位為像素。實(shí)例1第3章管理文檔空間Web頁(yè)的布局或空間設(shè)計(jì)對(duì)于使頁(yè)面的結(jié)構(gòu)緊湊且易懂是十分重要的。在設(shè)計(jì)頁(yè)面時(shí)，設(shè)計(jì)者通常不太注意空間的布置，而這恰恰是錯(cuò)誤的。一個(gè)空間布局合理的頁(yè)面是很容易閱讀的，因此人們也就會(huì)經(jīng)常的訪問它。一個(gè)空間布置不當(dāng)?shù)捻?yè)面會(huì)因?yàn)槠浣Y(jié)構(gòu)過于松散或擁擠不堪而使讀者錯(cuò)過了應(yīng)注意的信息。1.在文檔中添加水平線2.利用表格將文本與一條線對(duì)齊、居中對(duì)齊文本3.分段與換行1.在文檔中添加水平線使用<hr>標(biāo)記來實(shí)現(xiàn)，它沒有關(guān)閉標(biāo)記，只在頁(yè)面上創(chuàng)建一條水平線，將文檔頁(yè)面中一部分信息同其他信息分隔開。例如，標(biāo)題在前，或從一個(gè)項(xiàng)目列表中分離出文本主體，都可使用水平線來實(shí)現(xiàn)。<hr>標(biāo)記注意主要屬性有：Width屬性：控制表現(xiàn)的長(zhǎng)度，單位為像素Width=n或width=n%Size屬性：控制標(biāo)線的寬度Size=nN為數(shù)字，代表以像素為單位的該線的粗細(xì)程度，默認(rèn)為2Align屬性：控制標(biāo)線的對(duì)齊方式。Align=leftrightcenter實(shí)例12.利用表格將文本與一條線對(duì)齊表格可以將文本與一表格行的頂部或底部對(duì)齊，這是格式化文本的一個(gè)有用的性能。這是通過<valign>標(biāo)記來實(shí)現(xiàn)的。<valign>屬性的語法如下：<valign>=top<valign>=center<valign>=bottom當(dāng)瀏覽器在一個(gè)表格單元格中遇到<valign>標(biāo)記時(shí)，它將單元格的內(nèi)容與單元格的頂部、中部或底部對(duì)齊。單元格的大小由該行中所有單元格的內(nèi)容決定。實(shí)例23.分段與換行分段使用<p>,而換行使用的是<br>標(biāo)記。實(shí)例1同其他的標(biāo)記使用的方法相同，即在不想有行中斷的位置放置<nobr>標(biāo)記，在保持不中斷的文本片段末尾放置</nobr>標(biāo)記。瀏覽器遇到<nobr>標(biāo)記且當(dāng)前行中沒有足夠的空間來放置<nobr>標(biāo)記和</nobr>標(biāo)記之間的文本時(shí)，它就將文本移至新的一行中。如果當(dāng)前行有足夠的空間放置，則仍位于此行中。4.在web頁(yè)面中包含預(yù)先格式化的文本同其他的標(biāo)記使用的方法相同，即在預(yù)先設(shè)置了格式的文本的開頭放置<pre>標(biāo)記，末尾放置</pre>標(biāo)記。瀏覽器以固定的字體顯示<pre></pre>標(biāo)記之間的所有文本，且不忽略回車符和制表符等。實(shí)例1第六章樣式表Html可以定義文檔的結(jié)構(gòu)，但是有些具體的內(nèi)容并不能被精確的定義。從前面我們所學(xué)的各種標(biāo)記和屬性的應(yīng)用可以看出，到目前為止沒有一種方式能夠精確指定某一元素的絕對(duì)位置，元素的位置隨著瀏覽器窗口的變化而不斷地變化。利用樣式表可以精確地定義如何表達(dá)元素、方便地改變文檔的風(fēng)格。一個(gè)很經(jīng)典的樣式表能為開發(fā)web網(wǎng)頁(yè)起到事半功倍的作用。多個(gè)樣式表可以精確地控制html文檔在瀏覽器中的顯示效果，并能創(chuàng)造出更多的效果，同時(shí)還可以表達(dá)某些特定頁(yè)面的內(nèi)容。樣式表提供了增強(qiáng)、擴(kuò)展和改進(jìn)瀏覽器顯示web頁(yè)面的方法，所以它已經(jīng)成為html功能最為強(qiáng)勁的特性之一。樣式表的各種長(zhǎng)度單位如下表樣式表可以分為級(jí)聯(lián)樣式表css(cascadingstylesheets)和動(dòng)態(tài)樣式表。后者是由級(jí)聯(lián)式樣式表和javascript組合在一起的，它具有級(jí)聯(lián)式樣式表的功能，所以它的功能要比前者強(qiáng)大得多。我們所要學(xué)習(xí)的是級(jí)聯(lián)樣式表，一般來講，樣式表是級(jí)聯(lián)式樣式表的簡(jiǎn)稱，而不包含動(dòng)態(tài)樣式表。樣式表主要是通過把各種樣式屬性按照要求組合在一起，從而形成對(duì)指定元素的樣式修飾。而這些放在一起的樣式屬性就構(gòu)成了樣式規(guī)則，因?yàn)樗鼈円?guī)定了指定元素在頁(yè)面中的顯示樣式。下面主要介紹有關(guān)樣式表的基本內(nèi)容和應(yīng)用樣式表的常用標(biāo)記。1.級(jí)聯(lián)樣式表的基本規(guī)則樣式表實(shí)際上是由一些具體的樣式屬性所組成的，如顏色屬性、文本屬性、以及位置屬性等，并由這些樣式屬性來精確、詳細(xì)地格式化文檔顯示。尤其是樣式表中可以應(yīng)用位置屬性，主要就可以控制元素在頁(yè)面中的具體位置，如元素在頁(yè)面中的絕對(duì)位置等。顯示在頁(yè)面上的元素樣式可能很復(fù)雜，樣式表可以根據(jù)具體的要求，通過添加相關(guān)的樣式屬性來描述指定的樣式，所以這就使得樣式表的使用及其靈活、多樣。在實(shí)踐的基礎(chǔ)上可以創(chuàng)建各種經(jīng)典的樣式表應(yīng)用與各種html文檔中的描述元素，同時(shí)主要做還可以使不同的頁(yè)面達(dá)到比較一致的顯示效果?？傊?，樣式表是由<style>標(biāo)記及其屬性來實(shí)現(xiàn)的，使用標(biāo)記或者屬性可以指定任意的樣式屬性來組成樣式表。級(jí)聯(lián)樣式表主要分為內(nèi)部級(jí)聯(lián)和外部級(jí)聯(lián)。內(nèi)部級(jí)聯(lián)是指在html文檔代碼中直接使用樣式標(biāo)記或者樣式屬性來描述元素的樣式，而外部級(jí)聯(lián)是指通過引用在html文檔以外建立的樣式表來描述文檔元素。現(xiàn)在大部分情況下所謂的樣式表或者級(jí)聯(lián)樣式表都是指內(nèi)部級(jí)聯(lián)樣式表。級(jí)聯(lián)樣式表的一般語法格式為：<styletype=“text/css”>樣式標(biāo)記名1{樣式規(guī)則1}……樣式標(biāo)記名n{樣式規(guī)則n}</style>或<標(biāo)記style=“樣式規(guī)則”>這里使用的“text/css”屬性值所表示的是級(jí)聯(lián)式樣式表，而不是“text/javascript”形式的動(dòng)態(tài)樣式表。在樣式表的應(yīng)用中，只要語法格式正確，瀏覽器就可以自動(dòng)識(shí)別是哪種樣式表，所以在html文檔中不標(biāo)志級(jí)聯(lián)樣式表也是允許的。在上面兩種形式中，第一種是用標(biāo)記來進(jìn)行樣式表處理的，它的樣式標(biāo)記名就是前面涉及到的標(biāo)記名稱。在這里，標(biāo)記不能包含兩邊的尖括號(hào)（“<”和“>”），例如，表格標(biāo)記<table>在樣式表中作為樣式名稱只能寫出table，而不能包含尖括號(hào)。樣式規(guī)則的格式為：屬性名1:屬性值1；屬性名2：屬性值2；……屬性名和屬性值之間用一個(gè)：分開，不同的屬性之間用；分開，而其中最后一個(gè)屬性值后可以不加；所以的屬性都使用{}包含起來。例如：<styletype=text/css>P{font-family:’宋體’;font-size:10pt;font-color:yellow}p.Isleft{text-align:left}p.Isright{text-align:right}p.Iscenter{text-align:center}</style>上面的代碼將所有段落標(biāo)志的字體都設(shè)置為宋體，大小為10pt，顏色為黃色。另外，由于排版的需要又分成了3個(gè)樣式類，它們分別具有不同的排版屬性。第二種形式就是直接在標(biāo)記內(nèi)使用屬性style，其中的樣式規(guī)則和第一種一樣：屬性名1：屬性值1；屬性名2：屬性值2；……這種方法比較常見，又很靈活，可以在任何位置直接使用。例如：<pstyle=“font-size:24;font-style:italic;font-color:red;”>這樣就設(shè)置<p>標(biāo)記的樣式為：段落內(nèi)的字符大小為24，顏色為深藍(lán)色，字符為斜體。2.級(jí)聯(lián)式樣式表的屬性級(jí)聯(lián)式樣式表共有8種屬性，如下表應(yīng)用樣式表的兩個(gè)常用標(biāo)記<div>和<span>在html文檔中經(jīng)常會(huì)用到樣式表的兩個(gè)標(biāo)記<div>和<span><div>標(biāo)記表示分界，通過這個(gè)標(biāo)記可以對(duì)文本的元素進(jìn)行分界格式化的處理。<span>標(biāo)記則定義了html文檔的間隔，使用<span>標(biāo)記可以限定標(biāo)記范圍內(nèi)元素的背景范圍（這也是應(yīng)用樣式表的結(jié)果）創(chuàng)建一個(gè)級(jí)聯(lián)樣式表創(chuàng)建一個(gè)級(jí)聯(lián)樣式表的一般步驟:1.選擇想要插入的元素和屬性。2.在文本編輯器中打開樣式單3.如果要修改已有的條目或?yàn)槠湓鎏硪粋€(gè)屬性，則移到表單中的那個(gè)條目上，并按步驟（4）進(jìn)行處理。否則指定要修改的html元素選項(xiàng)4.在“{”和“}”之間插入該選項(xiàng)的聲明。例如下面的聲明至少瀏覽器用綠色顯示特定的元素。{color:green}5.返回到步驟（3）繼續(xù)編輯，否則保存樣式表級(jí)聯(lián)樣式表的創(chuàng)建方式上面介紹了樣式表的一般創(chuàng)建步驟。實(shí)際上，樣式表的創(chuàng)建方法有很多種?？梢栽趆tml中之間創(chuàng)建，也可以通過文本編輯器或者專門的樣式表編輯器以外部文件的形式創(chuàng)建。樣式表的創(chuàng)建方式大體上分為五類1.聲明方式2.限定范圍方式3.歸類引用方式4.聯(lián)合聲明方式5.使用id方式1.聲明方式聲明方式可以把單個(gè)標(biāo)記元素或者多個(gè)元素放在一起，以同一類別的方式進(jìn)行聲明。所謂聲明，就是指直接對(duì)標(biāo)記進(jìn)行樣式的定義。它的語法格式為：聲明{樣式規(guī)則}或聲明1，聲明2，……聲明n{樣式規(guī)則}前面的表達(dá)式是對(duì)單獨(dú)的標(biāo)記元素進(jìn)行樣式設(shè)定，樣式規(guī)則就是內(nèi)部級(jí)聯(lián)樣式表中所講的以分號(hào)分割各種屬性和屬性值的聯(lián)合體，即“屬性：屬性值；……”的形式。后面一種是把多種標(biāo)記做相同的樣式規(guī)則處理，即把它們當(dāng)作樣式相同的同一類。每?jī)蓚€(gè)（標(biāo)記聲明）之間都要逗號(hào)“，”分隔開，它的樣式規(guī)則也是“屬性：屬性值；……”的形式。這兩種表達(dá)方式在級(jí)聯(lián)式樣式表種比較常用，用法也相對(duì)簡(jiǎn)單。例如對(duì)于單獨(dú)的樣式聲明：P{font-size:18pt;margin-left:50px}上面的樣式聲明設(shè)定了段落標(biāo)記<p>的樣式表樣式為：段落中字符大小為18pt，左邊距50px。而對(duì)于多種標(biāo)記的樣式聲明，如果是同一類的聲明，樣式規(guī)則將它們?cè)O(shè)定相同的樣式。例如：P,ul,ol{color:red;text-decoration:underline;Font-style:italic;font-weight:bold}該段代碼表示所有的標(biāo)記<p>、<ul>、和<ol>都應(yīng)該遵守背景紅色，字符加下劃線，其字體為斜體和粗體的樣式規(guī)則。實(shí)例：1.html2.限定范圍方式這種樣式表的創(chuàng)建方法是根據(jù)聲明的某一標(biāo)記，把它的作用范圍放到指定的標(biāo)記元素之內(nèi)。語法格式為：指定標(biāo)記元素產(chǎn)生樣式標(biāo)記元素{樣式規(guī)則}指定元素和產(chǎn)生樣式標(biāo)記元素之間要有空格，這樣按照樣式規(guī)則產(chǎn)生的樣式表就只在指定元素標(biāo)記范圍內(nèi)起作用了。例如：Pem{font-size:30pt;color:red;font-weight:bold}Ulli{font-weight:bold;color:yellow}Olli{font-style:italic;color:yellow}此段html代碼可解釋為：<em>標(biāo)記內(nèi)的樣式為：字符大小為30pt，粗體，字符的顏色為紅色。但是它的的作用范圍是<p>和</p>標(biāo)記，也就是說，只在兩者之間有效，放在其他地方則該樣式表將失效，只按默認(rèn)效果顯示。對(duì)于無序列表中的每一個(gè)條目<li>標(biāo)記所限定的樣式為：字符字體為粗體，字符顏色為黃色。這種樣式只在無序列表中有效。同樣的，有序列表中的每一個(gè)條目<li>標(biāo)記所限定的樣式為：字符字體為斜體，字符顏色為黃色，這種樣式只在有序列表中有效。實(shí)例：2.html3.歸類引用方式該方式可以把不同的樣式表描述為不同的類，這樣可以組合成任意的類供不同標(biāo)記的引用。這種創(chuàng)建方法極大地提高了樣式表的靈活性和可擴(kuò)充性。語法規(guī)則：.類名稱{樣式規(guī)則}在引用的時(shí)候，只需要使用標(biāo)記的class屬性來引用類名稱就可以了，即：<標(biāo)記名class=類名稱>需要注意的是，類名稱前面的句點(diǎn)“.”符號(hào)一定不能丟掉，而且這個(gè)符號(hào)不能寫成與句號(hào)容易混淆的符號(hào)。如：.11{font-weight:bold;color:red}這個(gè)語句描述了紅色粗體的字符。所有的標(biāo)記屬性class都能夠標(biāo)志該標(biāo)記所屬的類別。在這里定義了樣式類名稱class1，同樣也可以定義成其他任意的名稱。大部分標(biāo)記都有class屬性，例如<p>標(biāo)記、<span>標(biāo)記等，這樣就可以引用樣式表中創(chuàng)建的樣式類來描述元素的樣式。例如：<pclass=11>使用class屬性</p><spanclass=11>使用class屬性</span>這樣就完成了樣式引用。其中有一點(diǎn)需要注意：在創(chuàng)建樣式類時(shí)樣式類名稱前面一定要加上句點(diǎn)，而在標(biāo)記中引用時(shí)卻不能在樣式類名稱前面加句點(diǎn)。實(shí)例：3.html4.聯(lián)合聲明方式這種方式是對(duì)標(biāo)記進(jìn)行類聲明，使得該標(biāo)記只有使用相應(yīng)的類時(shí)才改變樣式效果。標(biāo)記名稱.類名稱{樣式規(guī)則}標(biāo)記名稱和類名稱之間一定要加上句點(diǎn)”.“，而不能添加句點(diǎn)之類的相似符號(hào)。例如：p.class1{font-size:15pt;font-weight:bold;color:purple}此句代碼表示對(duì)于<p>標(biāo)記的class1類樣式表描述了字符大小為15pt，字符為粗體，字符顏色為紫色的樣式。只有當(dāng)class1類被標(biāo)記<p>引用的時(shí)候，<p>標(biāo)記所指定范圍內(nèi)的字符才能以類所標(biāo)記的樣式顯示。和上面的歸類引用方式一樣，class1也可以被定義成其他任意的名稱，同時(shí)也應(yīng)該保證類名稱容易理解。實(shí)例：4.html5.使用id方式這種創(chuàng)建方法是利用了html文檔中每一個(gè)標(biāo)記元素都有惟一的標(biāo)志號(hào)”id“的特性，為樣式表創(chuàng)建一個(gè)標(biāo)志名稱，標(biāo)記就可以進(jìn)行惟一的引用來應(yīng)用樣式了。語法格式如下：#id名稱{樣式規(guī)則}在id名稱前一定要加上“#”。Id名稱可以是字母組合、數(shù)字組合或者數(shù)字和字母的組合，只有“#”和id名稱完整才能構(gòu)成一個(gè)標(biāo)準(zhǔn)的標(biāo)準(zhǔn)名稱，而且“#”和id名稱之間不能有空格，如果有空格則標(biāo)記即使引用了id名稱也不能顯示樣式表定義的樣式效果。由于這里的id名稱可以是任意的合法字符，所以靈活性就體現(xiàn)出來了，即用戶可以定義大量的帶有不同id名稱的樣式表來描述元素的樣式。一般也要求id名稱具有一定的意義而且比較簡(jiǎn)短，這樣比較容易理解。#font1{font-style:italic;color:red}實(shí)例：5.html應(yīng)用樣式的兩個(gè)常用標(biāo)記——<div>和<span>標(biāo)記<span>標(biāo)記和<div>標(biāo)記便于在html文件的某一部分中應(yīng)用樣式，他們可以和class、id等屬性連用。例如：<spanclass=idname>網(wǎng)頁(yè)元素</span>可以應(yīng)用樣式表中idname類的樣式。Span和div的區(qū)別在于：div是一個(gè)塊級(jí)元素，div可以包含段落、標(biāo)題、表格甚至其他部分，這使得div便于建立不同集成的類，如章節(jié)、摘要或備注；而span是個(gè)行內(nèi)元素，如同<a>標(biāo)記一樣，span前后都不會(huì)換行。Span沒有結(jié)構(gòu)的意義，它的存在純粹是應(yīng)用樣式。當(dāng)其他的行內(nèi)元素都不適用時(shí)，可以命名為span。實(shí)例：6.html第六章樣式表的繼承和沖突繼承是css中一個(gè)非常重要的概念。通過前面的學(xué)習(xí)，我們已經(jīng)學(xué)會(huì)了怎么去創(chuàng)建一個(gè)樣式表，它們只是單獨(dú)在html文檔中的應(yīng)用。這種情況比較簡(jiǎn)單。Html還提供了樣式表的嵌套，即在一個(gè)標(biāo)記范圍內(nèi)又有另一個(gè)標(biāo)記而兩種標(biāo)記又使用了不同的樣式表，那么就可能出現(xiàn)內(nèi)部標(biāo)記所修飾的元素具有外部標(biāo)記所引用的樣式表所描述的樣式，這就是樣式表的繼承，也就是，除了自身的樣式之外，這些被修飾的元素遺傳了上一層標(biāo)記所引用樣式表的樣式。例如：<h1>這個(gè)標(biāo)題<em>文本</em>很重要。</h1>在上面的代碼中，<h1>標(biāo)記中包含了<em>標(biāo)記。現(xiàn)在假設(shè)把<h1>的顏色設(shè)置為藍(lán)色，而不去設(shè)置<em>顏色，那么<em>標(biāo)記中的“文本”將“繼承”上級(jí)元素<h1>的樣式設(shè)置，仍為藍(lán)色。這就是繼承。對(duì)于樣式表的繼承，其中的內(nèi)部標(biāo)記引用的樣式表與外部引用的一樣。如果他們引用的樣式表的定義不一樣，那么對(duì)于內(nèi)部的標(biāo)記而言，它將采用哪一種樣式定義呢？例如對(duì)于上面的例子<h1>這個(gè)標(biāo)題<em>文本</em>很重要。</h1>如果<h1>的顏色設(shè)置為藍(lán)色，而<em>的顏色色設(shè)置為紅色，瀏覽器將顯示什么呢？這就是樣式表的沖突。樣式表的繼承當(dāng)子元素沒用被定義樣式的情況下，它將繼承上級(jí)元素的樣式定義。實(shí)例：1.html通過1.html實(shí)例，可以看出，數(shù)字編號(hào)的列表的每個(gè)條目除來自自身的粗體形式外，還繼承了無序列表斜體樣式。樣式?jīng)_突的解決對(duì)于樣式?jīng)_突，在html文檔中，樣式表規(guī)則的最具體描述占