html基礎(chǔ)教程.doc

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