靜態(tài)網(wǎng)頁制作教程(入門級)_第1頁
靜態(tài)網(wǎng)頁制作教程(入門級)_第2頁
靜態(tài)網(wǎng)頁制作教程(入門級)_第3頁
靜態(tài)網(wǎng)頁制作教程(入門級)_第4頁
靜態(tài)網(wǎng)頁制作教程(入門級)_第5頁
已閱讀5頁，還剩260頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

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

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

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

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

溫馨提示

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

評論

0/150

提交評論