html基礎(chǔ)教程.doc

第一章HTML概述與基本結(jié)構(gòu)目前大部分的網(wǎng)頁都是用HTML配合其它語言寫成的。本章使用html語言來制作網(wǎng)頁，而現(xiàn)在的很多網(wǎng)頁制作工具軟件，比如FrontPage、DreamWave,.net等，可自動生成一些固定格式的網(wǎng)頁元素，在學(xué)習(xí)本章的過程中，不要一味去死記這些標(biāo)識內(nèi)容，我們學(xué)習(xí)這html語言的主要目的不是要大家完全使用html語言來制作一個(gè)完整的網(wǎng)頁，而是掌握其基本語法格式后應(yīng)用到動態(tài)程序中去。在學(xué)習(xí)過程中，我們要結(jié)合動態(tài)程序的方法來應(yīng)用這些標(biāo)識。如果用html完全編寫網(wǎng)頁，那是過時(shí)了；如果不懂html語言那是學(xué)網(wǎng)頁的無知，更談不上靈活運(yùn)用動態(tài)程序,php等。一、HTML的概述HTML（HyperTextMarkupLanguage的縮寫），即超文本鏈接標(biāo)記語言。它是在互聯(lián)網(wǎng)發(fā)布超文本文件(通常所說的網(wǎng)頁)的通用語言。所謂超文本，就是它可以加入圖片、聲音、動畫、影視等內(nèi)容，每一個(gè)HTML文檔都是一種靜態(tài)的網(wǎng)頁文件，這個(gè)文件里面包含了HTML標(biāo)記，這些標(biāo)記并不是一種程序語言，它只是一種排版網(wǎng)頁中資料顯示位置的標(biāo)記語言。每個(gè)標(biāo)記的符號都是一條命令、它告訴瀏覽器如何顯示文本。這些標(biāo)記均由符號以及一個(gè)字符串組成。而瀏覽器的功能是對這些標(biāo)記進(jìn)行解釋，顯示出文字、圖像、動畫、播放聲音。這些標(biāo)記符號用“”來表示。二、HTML的基本結(jié)構(gòu)：一個(gè)HTML文檔是由一系列的元素和標(biāo)記組成。元素名不區(qū)分大小寫，HTML用標(biāo)記來規(guī)定元素的屬性和它在文件中的位置，HTML超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。下面是一個(gè)最基本的html文檔的代碼:11.html-開始標(biāo)記-頭部標(biāo)記一個(gè)簡單的HTML示例 title-文件主體| 居中語句歡迎光臨我的主頁|這是我第一次做主頁| |-結(jié)尾標(biāo)記在文檔的最外層，文檔中的所有文本和html標(biāo)記都包含在其中，它表示該文檔是以超文本標(biāo)識語言（HTML）編寫的。是HTML文檔的頭部標(biāo)記,在瀏覽器窗口中，頭部信息是不被顯示在正文中的,在此標(biāo)記中可以插入其它標(biāo)記，用以說明文件的標(biāo)題和整個(gè)文件的一些公共屬性。該標(biāo)記可以省略。是嵌套在頭部標(biāo)記中的，標(biāo)記之間的文本是文檔標(biāo)題，它被顯示在瀏覽器窗口的標(biāo)題欄。該標(biāo)記可以省略。標(biāo)記一般不能省略，標(biāo)記之間的文本是正文，是在瀏覽器要顯示的頁面內(nèi)容。上面的這幾對標(biāo)記在文檔中都是唯一的，HEAD標(biāo)記和BODY標(biāo)記是嵌套在HTML標(biāo)記中的。三、HTML的標(biāo)記與屬性:對于剛剛接觸超文本的讀者，遇到的最大的障礙就是一些用“”括起來的句子，我們稱它為標(biāo)記，是用來分割和標(biāo)記文本的元素，以形成文本的布局、文字的格式及五彩繽紛的畫面。屬性是標(biāo)志里的參數(shù)的選項(xiàng)。HTML的標(biāo)記分單標(biāo)記和成對標(biāo)記兩種。成對標(biāo)記是由首標(biāo)記和尾標(biāo)記組成的，成對標(biāo)記的作用域只作用于這對標(biāo)記中的文檔。單獨(dú)標(biāo)記的格式，單獨(dú)標(biāo)記在相應(yīng)的位置插入元素就可以了，大多數(shù)標(biāo)記都有自己的一些屬性,屬性要寫在始標(biāo)記內(nèi)，屬性用于進(jìn)一步改變顯示的效果,各屬性之間無先后次序，屬性是可選的，屬性也可以省略而采用默認(rèn)值;其格式如下：內(nèi)容屬性值可以不用加雙引號，但是為了適應(yīng)XHTML規(guī)則，提倡全部對屬性值加雙引號。如：字體設(shè)置第二章HTML主體標(biāo)記及屬性、顏色的設(shè)定為了使網(wǎng)頁絢麗多姿，吸引更多的瀏覽者閱讀，可以給網(wǎng)頁添加更多的標(biāo)記及屬性，這是為了對網(wǎng)頁中的元素進(jìn)行修飾、布局。下面就來逐一介紹這些標(biāo)記。一、html的主體標(biāo)記在和中放置的是頁面中所有的內(nèi)容，如圖片、文字、表格、表單、超鏈接等設(shè)置。標(biāo)記有自己的屬性，設(shè)置標(biāo)記內(nèi)的屬性，可控制整個(gè)頁面的顯示方式。標(biāo)記的屬性屬性描述link設(shè)定頁面默認(rèn)的鏈接顏色alink設(shè)定鼠標(biāo)正在單擊時(shí)的鏈接顏色vlink設(shè)定訪問后鏈接文字的顏色background設(shè)定頁面背景圖像bgcolor設(shè)定頁面背景顏色leftmargin設(shè)定頁面的左邊距topmargin設(shè)定頁面的上邊距bgproperties設(shè)定頁面背景圖像為固定，不隨頁面的滾動而滾動text設(shè)定頁面文字的顏色格式：實(shí)例：2-1.html Link默認(rèn)的鏈接顏色 Alink 單擊時(shí)候的顏色 Vling訪問后的鏈接顏色bady的屬性實(shí)例設(shè)定不同的鏈接顏色測試body標(biāo)記各種鏈接顏色實(shí)例說明：的屬性設(shè)定了頁面的背景顏色，文字的顏色，鏈接的顏色為#3300ff，單擊的鏈接顏色為#ff00ff，單擊過后的顏色為#9900ff。對于上面的屬性在后面的章節(jié)中還會介紹，在這里就不逐一引用了，我們的學(xué)習(xí)目的主要是掌握標(biāo)記及屬性的使用方法。二、顏色的設(shè)定顏色值是一個(gè)關(guān)鍵字或一個(gè)RGB格式的數(shù)字。在網(wǎng)頁中用得很多，在此就先介紹一下。顏色是由redgreenblue三原色組合而成的，在HTML中對顏色的定義是用十六進(jìn)位的，對于三原色HTML分別給予兩個(gè)十六進(jìn)位去定義。例如：白色的組成是red=ff,green=ff,blue=ff,RGB值即為ffffff紅色的組成是red=ff,green=00,blue=00,RGB值即為ff0000黑色的組成是red=00,green=00,blue=00,RGB值即為000000應(yīng)用時(shí)常在每個(gè)RGB值之前加上“#“符號，如：bgcolor=#336699用英文名字表示顏色時(shí)直接寫名字。如bgcolor=green。第三章 文字版面的編輯3-1換行標(biāo)記換行標(biāo)記是個(gè)單標(biāo)記，也叫空標(biāo)記，不包含任和內(nèi)容，在html文件中的任何位置只要使用了標(biāo)記，該標(biāo)記之后的內(nèi)容將顯示在下一行。請看下面的例子：3-1無換行標(biāo)記：白日依山盡，黃河入海流。有換行標(biāo)記：白日依山盡，黃河入海流。3-2換段落標(biāo)記及屬性：由標(biāo)記所標(biāo)識的文字，表明是同一個(gè)段落的文字。兩個(gè)段落間的間距等于連續(xù)加了兩個(gè)換行符，也就是要隔一行空白行。格式：其中,ALIGN是標(biāo)記的屬性,屬性有三個(gè)參數(shù)left,center,right.這三個(gè)參數(shù)設(shè)置段落文字的左，中，右位置的對齊方式。實(shí)例:3-2 這是 第一段。 第二段。 第三段。3-3原樣顯示文字標(biāo)記要保留原始文字排版的格式,就可以通過標(biāo)記來實(shí)現(xiàn)，方法是把制作好的文字排版內(nèi)容前后分別加上始標(biāo)記和尾標(biāo)記。實(shí)例:3-3白日依山盡，黃河入海流。3-4居中對齊標(biāo)記在頁面中使用標(biāo)記進(jìn)行居中顯示,是成對標(biāo)記,在需要居中的內(nèi)容部分開頭處加,結(jié)尾處加。實(shí)例：3-4居中對齊標(biāo)記送孟浩然之廣陵故人西辭黃鶴樓，煙花三月下?lián)P州。孤帆遠(yuǎn)影碧山盡，惟見長江天際流。3-5水平分隔線標(biāo)記標(biāo)記是單獨(dú)使用的標(biāo)記，是水平線標(biāo)記。通過設(shè)置標(biāo)記的屬性值，可以控制水平分隔線的樣式。標(biāo)記的屬性屬性參數(shù)功能單位默認(rèn)值size設(shè)置水平分隔線的粗細(xì)pixel(像素）2width設(shè)置水平分隔線的寬度pixel(像素）、%100%alignLeft center right設(shè)置水平分隔線的對齊方式centercolor設(shè)置水平分隔線的顏色blacknoshade取消水平分隔線的3d陰影實(shí)例：3-5 測試水平分隔線標(biāo)記 春曉 春眠不覺曉， 處處聞啼鳥。 夜來風(fēng)雨聲， 花落知多少？ 3-6特殊字符在HTML文檔中，有些字符沒辦法直接顯示出來，例如?. 使用特殊字符可以將鍵盤上沒有的字符表達(dá)出來，而有些HTML文檔的特殊字符在鍵盤上雖然可以得到，但瀏覽器在解析HTML文當(dāng)時(shí)會報(bào)錯(cuò)，例如等，為防止代碼混淆，必須用一些代碼來表示它們。HTML幾種常見特殊字符及其代碼表特殊或?qū)Ｓ米址址a特殊或?qū)Ｓ米址址a>×&®"空格 實(shí)例：3-6 特殊字符 <這是我的e家> Copyright 2008 中國e家3-7注釋標(biāo)記在HTML文檔中可以加入相關(guān)的注釋標(biāo)記，便于查找和記憶有關(guān)的文件內(nèi)容和標(biāo)識，這些注釋內(nèi)容并不會在瀏覽器中顯示出來。注釋標(biāo)記的格式有如下：實(shí)例:3-7 <賦得古原草送別>離離原上草，一歲一枯榮。野火燒不盡，春風(fēng)吹又生。3-8字體屬性3-10-1標(biāo)題文字標(biāo)記標(biāo)記用于設(shè)置網(wǎng)頁中的標(biāo)題文字，被設(shè)置的文字將以黑體或粗體的方式顯示在網(wǎng)頁中。標(biāo)題標(biāo)記的格式：hn align=參數(shù)標(biāo)題內(nèi)容說明：標(biāo)記是成對出現(xiàn)的，標(biāo)記共分為六級，在.之間的文字就是第一級標(biāo)題，是最大最粗的標(biāo)題；.之間的文字是最后一級，是最小最細(xì)的標(biāo)題文字。align屬性用于設(shè)置標(biāo)題的對齊方式，其參數(shù)為 left（左）， enter（中)， right (右）。標(biāo)記本身具有換行的作用，標(biāo)題總是從新的一行開始。實(shí)例 3-10-1html 設(shè)定各級標(biāo)題 一級標(biāo)題。 二級標(biāo)題。 三級標(biāo)題。3-10-2文字格式控制標(biāo)記標(biāo)記用于控制文字的字體，大小和顏色。控制方式是利用屬性設(shè)置得以實(shí)現(xiàn)的。FONT標(biāo)記的屬性屬性使用功能默認(rèn)值face設(shè)置文字使用的字體宋體size設(shè)置文字的大小3color設(shè)置文字的顏色黑色格式：font face=值1 size=值2 color=值3文字 說明：如果用戶的系統(tǒng)中沒有face屬性所指的字體，則將使用默認(rèn)字體。size屬性的取值為17。也可以用+或-來設(shè)定字號的相對值。color屬性的值為：rgb顏色#nnnnnn或顏色的名稱。實(shí)例：3-10-2 盼望著，盼望著，東風(fēng)來了，春天腳步近了。3-10-3特定文字樣式標(biāo)記在有關(guān)文字的顯示中，常常會使用一些特殊的字形或字體來強(qiáng)調(diào)、突出、區(qū)別以達(dá)到提示的效果。(1)粗體標(biāo)記：放在與標(biāo)記之間的文字將以粗體方式顯示。(2)斜體標(biāo)記：放在與標(biāo)記之間的文字將以斜體方式顯示。(3)下劃線標(biāo)記：放在與標(biāo)記之間的文字將以下劃線方式顯示。實(shí)例3-10-3 這些文字是粗體的 這些文字是斜體的 這些文字帶有下劃線 第四章 建立超鏈接HTML文件中最重要的應(yīng)用之一就是超鏈接，超級鏈接除了可鏈接文本外，也可鏈接各種媒體，如聲音、圖象、動畫。target建立超鏈接的標(biāo)記為: href target 格式為：顯示內(nèi)容上述語法格式包含標(biāo)記的以下基本屬性：HREF：該屬性是必選項(xiàng)，用于指定目標(biāo)端點(diǎn)的URL地址，可以包含一個(gè)或多個(gè)參數(shù)。具體地，如果是與站點(diǎn)以外頁面鏈接的情況，就為URL；如果是與站點(diǎn)內(nèi)頁面鏈接，則為文件名。TARGET：該屬性是可選項(xiàng)，用于指定一個(gè)窗口或框架的名稱，目標(biāo)文檔將在該窗口或框架中打開。如果省略該屬性，則目標(biāo)文檔將取代包含該超鏈接的文檔。TARGET屬性的取值既可以是窗口或框架的名稱，也可以用“_blank”指定將鏈接的目標(biāo)文件加載到未命名的新瀏覽器窗口中；用“_parent”指定將鏈接的目標(biāo)文件加載到包含鏈接的父框架頁或窗口中，如果包含鏈接的框架不是嵌套的，則鏈接的目標(biāo)文件加載到整個(gè)瀏覽器窗口中；用“_self”指定將鏈接的目標(biāo)文件加載到鏈接所在的同一框架或窗口中，這是默認(rèn)值；用“_top”指定將鏈接的目標(biāo)文件加載到整個(gè)瀏覽器窗口中，并由此刪除所有框架。TITLE：該屬性也是可選項(xiàng)，用于指定指向超鏈接時(shí)所顯示的標(biāo)題文字。4-1 鏈接路徑路徑是指從站點(diǎn)根文件夾或當(dāng)前文件夾到目標(biāo)文件所經(jīng)過的路線，可以使用路徑來指定超鏈接中目標(biāo)端點(diǎn)的位置。路徑有以下幾種類型：絕對路徑：也稱為絕對URL，它給出目標(biāo)文件的完整URL地址，包括傳輸協(xié)議在內(nèi)。如果要鏈接的文件位于外部服務(wù)器上，則必須使用絕對路徑。相對路徑：也稱為相對URL，是指以當(dāng)前文檔所在位置為起點(diǎn)到目標(biāo)文檔所經(jīng)過的路徑。若要將當(dāng)前文檔與處在同一文件夾中的另一個(gè)文檔鏈接，或者將同一站點(diǎn)中不同文件夾下的文檔相互鏈接，都可以使用相對路徑，此時(shí)可以省去當(dāng)前文檔與目標(biāo)文檔完整URL中的相同部分，只留下不同部分。根相對路徑：是指從站點(diǎn)根目錄到被鏈接文件的路徑。使用這種路徑是指定站點(diǎn)內(nèi)文檔鏈接的最好方式。4-2 超鏈接的應(yīng)用 1.超鏈接的形式按照目標(biāo)端點(diǎn)的不同，可以將超鏈接分為以下幾種常見形式。文件超鏈接：這種鏈接的目標(biāo)端點(diǎn)是一個(gè)文件，當(dāng)然包括各種文件，如頁面文件，它可以位于當(dāng)前網(wǎng)頁所在的服務(wù)器上，此時(shí)可稱為“站點(diǎn)內(nèi)頁面的鏈接”，也可以位于其他服務(wù)器，此時(shí)可稱為“與站點(diǎn)外頁面的鏈接”。書簽超鏈接：這種鏈接的目標(biāo)端點(diǎn)是網(wǎng)頁中的一個(gè)位置，通過這種鏈接可以從當(dāng)前網(wǎng)頁跳轉(zhuǎn)到本頁面或其他頁面中的指定位置。E-mail鏈接：通過這種鏈接可以啟動電子郵件客戶端程序(如Outlook或FoxMail等)，并允許訪問者向指定的地址發(fā)送郵件。圖像超鏈接：這種鏈接是在圖像上建立若干個(gè)區(qū)域稱為“鏈接區(qū)”，通過它可以跳轉(zhuǎn)到其他目標(biāo)端點(diǎn)去。2常見鏈接的創(chuàng)建(1)創(chuàng)建文件鏈接在HTML語言中，可以使用標(biāo)記來創(chuàng)建超鏈接，基本語法格式如下：文本(2)創(chuàng)建書簽鏈接創(chuàng)建書簽鏈接時(shí)，要在頁面的某處設(shè)置一個(gè)位置標(biāo)記(即所謂書簽)，并給該位置指定一個(gè)名稱，以便在同一頁面或其他頁面中引用。通過創(chuàng)建書簽鏈接，可以使超鏈接指向當(dāng)前頁面或其他頁面中的指定位置。若要?jiǎng)?chuàng)建書簽鏈接，首先在頁面中為需要跳轉(zhuǎn)的位置命名，即在該位置上放置一個(gè)A標(biāo)記并通過NAME屬性為該位置指定一個(gè)名稱，一般不要在和標(biāo)記之間放置任何文字。例如，可以使用A標(biāo)記在test.htm頁面頂部創(chuàng)建一個(gè)書簽：創(chuàng)建書簽后，可以使用A標(biāo)記來創(chuàng)建指向該書簽的超鏈接。例如，要在同一個(gè)頁面中跳轉(zhuǎn)到名為“top”的書簽處，可以使用以下HTML代碼：返回頂部 若要在其他頁面中跳轉(zhuǎn)到該書簽，則使用以下HTML代碼：跳轉(zhuǎn)到test.htm頁的頂部(3)創(chuàng)建郵件鏈接使用A標(biāo)記創(chuàng)建郵件鏈接，該標(biāo)記的HREF屬性應(yīng)由三個(gè)部分組成：第一部分是電子郵件協(xié)議名稱mailto，第二部分是電子郵件地址，第三部分是可選的郵件主題，其形式為“subject=主題”。第一部分與第二部分之間用冒號(:)分隔，第二部分與第三部分之間用問號(?)分隔。例如：給我寫信當(dāng)訪問者在瀏覽器窗口中單擊郵件鏈接時(shí)，將會自動啟動電子郵件客戶端程序(例如Outlook Express或FoxMail等)，并將指定的主題填入“主題”欄中。(4)創(chuàng)建圖像超鏈接圖像的超鏈接與文本超鏈接差不多，就是將標(biāo)記放在圖片兩端即可。例如語句：當(dāng)單擊dysb.jpg圖片時(shí)將轉(zhuǎn)向Default.htm網(wǎng)頁。3示例超鏈接主要形式的示例(注：下面的“”代表熱點(diǎn)，即一般用鼠標(biāo)指向時(shí)，鼠標(biāo)指針變手形的區(qū)域)。(1)創(chuàng)建指向本地頁面的鏈接 (鏈接到本地磁盤上同一目錄下的頁面) (鏈接到本地磁盤上不同目錄下的頁面)(2)創(chuàng)建指向其他服務(wù)器的頁面鏈接(鏈接到Internet上其他服務(wù)器上的頁面)(3)創(chuàng)建一個(gè)指向頁面特定部分的鏈接 (鏈接到本頁面內(nèi)的某指定位置)(鏈接到其他服務(wù)器上頁面的某指定位置)(4)創(chuàng)建一個(gè)指向電子郵件的鏈接第五章 建立列表 在html也面中，合理的使用列表標(biāo)記可以起到提綱和格式排序文件的作用。列表分為兩類，一是無序列表，一是有序列表，無序列表就是項(xiàng)目各條列間并無順序關(guān)系，純粹只是利用條列來呈現(xiàn)資料而已，此種無序標(biāo)記，在各條列前面均有一符號以示區(qū)隔。而有序條列就是指各條列之間是有順序的，比如從1、2、3一直延伸下去。5-1 無序列表無序列表使用的一對標(biāo)記是，無序列表指沒有進(jìn)行編號的列表,每一個(gè)列表項(xiàng)前使用。的屬性type有三個(gè)選項(xiàng),這三個(gè)選項(xiàng)都必須小寫:disc實(shí)心園circle空心園square小方塊如果不使用其項(xiàng)目的屬性值,即默認(rèn)情況下的會加實(shí)心園。格式:第一項(xiàng)第二項(xiàng)第三項(xiàng)第四項(xiàng)示例 5-1 無序列表 默認(rèn)的無序列表加實(shí)心園 無序列表square加方塊 無序列表circle加空心園 5-2 有序列表有序列表和無序列表的使用格式基本相同，它使用標(biāo)記，每一個(gè)列表項(xiàng)前使用。列表的結(jié)果是帶有前后順序之分的編號。如果插入和刪除一個(gè)列表項(xiàng)，編號會自動調(diào)整。順序編號的設(shè)置是由的兩個(gè)屬性type和start來完成的。start=編號開始的數(shù)字，如start=2則編號從2開始，如果從1開始可以省略，或是在標(biāo)記中設(shè)定valuen改變列表行項(xiàng)目的特定編號，例如。type=用于編號的數(shù)字,字母等的類型，如type=a，則編號用英文字母。為了使用這些屬性，把它們放在或的的初始標(biāo)記中。有序列表type的屬性：type=1表示列表項(xiàng)目用數(shù)字標(biāo)號（1,2,3.）type=A表示列表項(xiàng)目用大寫字母標(biāo)號（A,B,C.）type=a表示列表項(xiàng)目用小寫字母標(biāo)號（a,b,c.）type=I表示列表項(xiàng)目用大寫羅馬數(shù)字標(biāo)號（,.）type=i表示列表項(xiàng)目用小寫羅馬數(shù)字標(biāo)號（i,ii,iii.）格式1第1項(xiàng)第2項(xiàng)第1項(xiàng)第2項(xiàng)實(shí)例：5-2.html 默認(rèn)的有序列表 默認(rèn)的有序列表 第1項(xiàng) 第2項(xiàng) 第4項(xiàng) 第六章 圖像的處理瀏覽器可以顯示的圖像格式有jpeg，bmp，gif，png。其中bmp文件存儲容量大，不提倡用，jpeg圖像支持?jǐn)?shù)百萬種顏色，即使在傳輸過程中丟失數(shù)據(jù)，也不會在質(zhì)量上有明顯的不同，文件容量比gif大，gif圖像僅包括265色彩，雖然質(zhì)量上沒有jpeg圖像高，但文件容量小，下載速度最快、支持動畫效果及背景色透明等特點(diǎn)。PNG圖像是網(wǎng)絡(luò)圖像中的通用格式，也是Fireworks軟件的基本格式。它用一種無損壓縮的方法，最多可支持32位顏色，但它不支持動畫，如果沒有相應(yīng)的插件，有的瀏覽器可能不支持這種格式。因此使用圖像美畫頁面可視情況而決定使用那種格式。6-1 網(wǎng)頁中插入圖片標(biāo)記網(wǎng)頁中插入圖片用單標(biāo)記，如果要對插入的圖片進(jìn)行修飾時(shí)，還要配合其它屬性來完成。 的格式及一般屬性設(shè)定：圖片標(biāo)記的屬性：Src：圖像的url的路徑Alt：提示文字Width：寬度 通常只設(shè)為圖片的真實(shí)大小以免失真,改變圖片大小最好用圖像工具.Height：高度 通常只設(shè)為圖片的真實(shí)大小以免失真,改變圖片大小最好用圖像工具.Align；圖像和文字之間的排列屬性Border:邊框6-2 圖像的超鏈接 6-3-1 圖像的超鏈接 圖像的鏈接和文字的鏈接方法是一樣的，都是用標(biāo)記來完成，只要將標(biāo)記放在和只見就可以了。用圖像鏈接的圖片的上有藍(lán)色的邊框，這個(gè)邊框顏色也可以在標(biāo)記中設(shè)定。 實(shí)例：6-3-1 6-3 用標(biāo)記插入avi文件 格式： 標(biāo)記插入avi文件的屬性 屬性：描 述Dynsrc：指定avi文件所在路徑Loop：設(shè)定avi文件循環(huán)次數(shù)Loopdelay：設(shè)定avi文件循環(huán)延遲Start：設(shè)定文件播放方式fileopen/mouseover(網(wǎng)頁打開時(shí)即播放/當(dāng)鼠標(biāo)滑到avi文件時(shí)播放）實(shí)例：6-.html 第七章 TABLE表格 table表格在網(wǎng)站應(yīng)用中非常廣泛,可以方便靈活的排版,很多動態(tài)大型網(wǎng)站也都是借助表格排版,表格可以把相互關(guān)聯(lián)的信息元素集中定位,使瀏覽頁面的人一目了然.所以說要制作好網(wǎng)頁,就要學(xué)好表格7-1 定義表格的基本語法在html文檔中，表格是通過,標(biāo)記來完成的，如下表所示：表格標(biāo)記標(biāo) 簽描 述.用于定義一個(gè)表格開始和結(jié)束.定義表頭單元格。表格中的文字將以粗體顯示，在表格中也可以不用此標(biāo)記，標(biāo)記必須放在標(biāo)記內(nèi).定義一行標(biāo)記，一組行標(biāo)記內(nèi)可以建立多組由或標(biāo)記所定義的單元格.定義單元格標(biāo)記，一組標(biāo)記將將建立一個(gè)單元格，標(biāo)記必須放在標(biāo)記內(nèi)在一個(gè)最基本的表格中，必須包含一組標(biāo)記，一組標(biāo)記和一組標(biāo)記或。7-2 表格屬性（1) 標(biāo)記的屬性表格標(biāo)記有很多屬性，最常用的屬性有：width：表格的寬度height：表格的高度align：表格在頁面的水平擺放位置background：表格的背景圖片bgcolor：表格的背景顏色border：表格邊框的寬度（以像素為單位）bordercolor：表格邊框顏色bordercolorlight：表格邊框明亮部分的顏色bordercolordark：表格邊框昏暗部分的顏色cellspacing：單元格之間的間距cellpadding：單元格內(nèi)容與單元格邊界之間的空白距離的大?。?) 標(biāo)記的屬性表格是按行和列（單元格）組成的，一個(gè)表格有幾行組成就要有幾個(gè)行標(biāo)記，行標(biāo)記用它的屬性值來修飾，屬性都是可選的。標(biāo)記的屬性如下：align：行內(nèi)容的水平對齊valign：行內(nèi)容的垂直對齊bgcolor：行的背景顏色bordercolo：行的邊框顏色bordercolorlight：行的亮邊框顏色bordercolordark：行的暗邊框顏色 的參數(shù)設(shè)定（常用）： 實(shí)例：7-2-1.html表格的控制姓 名性 別年 齡專 業(yè)咚 咚男18學(xué) 生楠 楠女17學(xué) 生（3) 標(biāo)記的屬性和都是插入單元格的標(biāo)記，這兩個(gè)標(biāo)記必須嵌套在標(biāo)記內(nèi)。是成對出現(xiàn)的。用于表頭標(biāo)記，表頭標(biāo)記一般位于首行或首列，標(biāo)記之間的內(nèi)容就是位于該單元格內(nèi)的標(biāo)題內(nèi)容，其中的文字以粗體居中顯示。數(shù)據(jù)標(biāo)記就是該單元格中的具體數(shù)據(jù)內(nèi)容,和標(biāo)記的屬性都是一樣的，屬性設(shè)定如下：width/height：單元格的寬和高，接受絕對值（如 80）及相對值（如 80%）。 colspan：單元格向右打通的欄數(shù)rowspan：單元格向下打通的列數(shù)align：單元格內(nèi)字畫等的擺放貼，位置（水平），可選值為： left, center, right。valign：單元格內(nèi)字畫等的擺放貼位置（垂直），可選值為： top, middle, bottom。bgcolor：單元格的底色bordercolor：單元格邊框顏色bordercolorlight：單元格邊框向光部分的顏色bordercolordark：單元格邊框背光部分的顏色background：單元格背景圖片 （4) 設(shè)定跨多行多列單元格要?jiǎng)?chuàng)建跨多行、多列的單元格，只需在或中加入ROWSPAN或COLSPAN屬性的屬性值，默認(rèn)值為1。表明了表格中要跨越的行或列的個(gè)數(shù)。Rowspan 多行 colspan 多列 跨多列的語法： colspan表示跨越的列數(shù)，例如colspan=2表示這一格的寬度為兩個(gè)列的寬度?？缍嘈械恼Z法： rowspan所要表示的意義是指跨越的行數(shù)，例如rowspan=2就表示這一格跨越表格兩個(gè)行的高度。7-3 表格的標(biāo)題標(biāo)記表格標(biāo)題的位置，可由ALIGN屬性和VALIGN屬性來設(shè)置，align屬性設(shè)置標(biāo)題位于文檔的左，中，右。 valign屬性設(shè)置標(biāo)題位于表格的上方和表格的下方。下面為表格標(biāo)題位置的設(shè)置格式。Bottom下面 top 上面語法格式：表格標(biāo)題 應(yīng)放在標(biāo)記內(nèi)，在表格行標(biāo)記標(biāo)記之前。標(biāo)記的默認(rèn)屬性是標(biāo)題位于表格的上方中間位置。實(shí)例：7-7.html 表格的標(biāo)題標(biāo)記 學(xué)生信息表 學(xué)生基本信息 成 績 姓 名 專 業(yè) 課 程 分 數(shù) 蓉蓉 計(jì)算機(jī) 程序設(shè)計(jì) 88 喃 喃 89 7-4 表格的嵌套在html頁面中，使用表格排版是通過嵌套來完成的，即一個(gè)表格內(nèi)部可以嵌套另一個(gè)表格，用表格來排版頁面的思路是：由總表格規(guī)劃整體的結(jié)構(gòu)，由嵌套的表格負(fù)責(zé)各個(gè)子欄目的排版，并插入到表格的相應(yīng)位置，這樣就可以使頁面的各個(gè)部分有條不紊，互不沖突，看上去清晰整潔。在實(shí)際做網(wǎng)頁時(shí)一般不顯示邊框,邊框的顯示可根據(jù)自己的愛好來設(shè)定。在實(shí)例中為了讓大家能夠看清楚，都設(shè)置了有邊框。實(shí)例7-8.html表格嵌套網(wǎng)頁標(biāo)志廣告條標(biāo)題欄標(biāo)題欄標(biāo)題欄標(biāo)題欄標(biāo)題欄標(biāo)題欄標(biāo)題欄標(biāo)題欄標(biāo)題欄內(nèi)容六內(nèi)容一內(nèi)容二內(nèi)容三內(nèi)容四內(nèi)容五第八章網(wǎng)頁的動態(tài)、多媒體效果在網(wǎng)頁的設(shè)計(jì)過程中，動態(tài)效果的插入，會使網(wǎng)頁更加生動靈活、豐富多彩。8-1 滾動字幕標(biāo)記可以實(shí)現(xiàn)元素在網(wǎng)頁中移動的效果，以達(dá)到動感十足的視覺效果。標(biāo)記是一個(gè)成對的標(biāo)記。應(yīng)用格式為:.標(biāo)記有很多屬性，用來定義元素的移動方式:align：指定對齊方式top,middle,bottomscroll：單向運(yùn)動slide：如幻燈片,一格格的，效果是文字一接觸左邊就停止。alternate：左右往返運(yùn)動bgcolor：設(shè)定文字卷動范圍的背景顏色loop：設(shè)定文字卷動次數(shù)，其值可以是正整數(shù)或 infinite表示無限次，默認(rèn)為無限循環(huán)height：設(shè)定字幕高度width：設(shè)定字幕寬度scrollamount：指定每次移動的速度,數(shù)值越大速度越快scrolldelay：文字每一次滾動的停頓時(shí)間，單位是毫秒。時(shí)間越短滾動越快hspace：指定字幕左右空白區(qū)域的大小vspace：指定字幕上下空白區(qū)域的大小direction：設(shè)定文字的卷動方向,left表示向左,right表示向右,up表示往上滾動behavior：指定移動方式，scroll表示滾動播出，slibe表示滾動到一方后停止，alternate表示滾動到一方后向相反方向滾動。8-1 實(shí)例h8-1.html 滾動字幕啦啦啦我會跑了啦啦啦我會往上跑了啦啦啦我會往上跑了8-2 插入多媒體文件在網(wǎng)頁中可以用標(biāo)記將多媒體文件插入，比如可以插入音樂和視頻等。用瀏覽器可以播放的音樂格式有：MIDI音樂、WAV音樂、mp3、AIFF、AU格式等；視頻有avi，swf等。另外在利用網(wǎng)絡(luò)下載的各種音樂格式中，M