第2章+html網(wǎng)頁制作(1)_第1頁
第2章+html網(wǎng)頁制作(1)_第2頁
第2章+html網(wǎng)頁制作(1)_第3頁
第2章+html網(wǎng)頁制作(1)_第4頁
第2章+html網(wǎng)頁制作(1)_第5頁
已閱讀5頁,還剩69頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、信息學(xué)院 趙燕在在Internet中,應(yīng)用最廣泛的無中,應(yīng)用最廣泛的無疑為疑為World Wide Web了,無論是了,無論是Web應(yīng)用還是開發(fā),都應(yīng)該對標(biāo)記語言應(yīng)用還是開發(fā),都應(yīng)該對標(biāo)記語言HTML有一個(gè)基本的認(rèn)識(shí)。有一個(gè)基本的認(rèn)識(shí)。n2.1 Html語言概括和結(jié)構(gòu)n2.2 常用標(biāo)記(排版、文字、鏈接)n2.3 標(biāo)記(表格、表單、框架)5.1 HTML語言nHTML(Hyper Text Markup Language,超文本標(biāo)記語言)是一種用來制作超文本文檔的簡單標(biāo)記語言。用HTML語言編寫的超文本文件稱為HTML文件,也稱為Web文件。HTML文件的擴(kuò)展名為.htm或.html。 n之所

2、以被稱為超文本,因?yàn)镠TML文檔中可以加入圖片、聲音、動(dòng)畫、影視等內(nèi)容,并且這些內(nèi)容可以被標(biāo)記成超鏈接。用瀏覽器用瀏覽器打開打開 HTML文件是一種標(biāo)準(zhǔn)的純文本文件,可以使用任何文本編輯器,如:“記事本”和“寫字板”。n但是利用文本編輯器軟件編寫HTML文件非常麻煩,效率很低,因此有很多專門的優(yōu)秀的 HTML編輯器。n常用的HTML編輯軟件有FrontPage,Dreamweaver等,它們都是所見即所得的編輯器,借助于HTML專用工具,在屏幕上頁面進(jìn)行交互設(shè)計(jì),將自動(dòng)生成對應(yīng)的 HTML文件,并且具有預(yù)覽功能,大大提高了設(shè)計(jì)WEB頁的效率。5.1.1 HTML語言概述5.1.2 HTML標(biāo)記

3、及語法 簡單地說HTML文件包含文檔數(shù)據(jù)和顯示格式兩部分。 文檔數(shù)據(jù) 顯示W(wǎng)WW瀏覽器中的數(shù)據(jù)內(nèi)容。 顯示格式 這些內(nèi)容以何種格式顯示。 Html語言使用標(biāo)記對的方法編寫文件,既簡單又方便,它通常使用 來表示標(biāo)志的開始和結(jié)束。有的控制語句僅需一個(gè)標(biāo)記,沒有尾標(biāo)記。標(biāo)記可以嵌套使用。 HTML中的標(biāo)記大致可分為:文檔標(biāo)記、排版標(biāo)記、字體標(biāo)記、表格標(biāo)記、圖像與控制標(biāo)記、超級鏈接標(biāo)記等。 文章的頭部,包括標(biāo)文章的頭部,包括標(biāo)題(雙標(biāo)記題(雙標(biāo)記)提綱提綱文章的正文文章的正文我的第一個(gè)網(wǎng)頁我的第一個(gè)網(wǎng)頁大家好!我是濟(jì)南大學(xué)的學(xué)生。大家好!我是濟(jì)南大學(xué)的學(xué)生。 你們對制作網(wǎng)頁有興趣嗎?你們對制作網(wǎng)頁有興

4、趣嗎? 文檔頭文檔頭標(biāo)題標(biāo)題文文檔檔體體單標(biāo)記單標(biāo)記標(biāo)記嵌套標(biāo)記嵌套 許多單標(biāo)記和雙標(biāo)記的首標(biāo)記內(nèi)可以包含一些許多單標(biāo)記和雙標(biāo)記的首標(biāo)記內(nèi)可以包含一些屬性。屬性。語法:語法:例:例: Hr:在文檔的當(dāng)前位置劃一條水平線的標(biāo)記在文檔的當(dāng)前位置劃一條水平線的標(biāo)記 Size 屬性定義線的粗細(xì)屬性定義線的粗細(xì) Align 屬性定義對齊方式屬性定義對齊方式 Width 屬性定義線的長度屬性定義線的長度 (1) 標(biāo)志用于標(biāo)志用于Html文檔的最前邊,用來標(biāo)識(shí)文檔的最前邊,用來標(biāo)識(shí)Html文檔的開始。而文檔的開始。而標(biāo)志恰恰相反,它放在標(biāo)志恰恰相反,它放在Html文檔文檔的最后邊,用來標(biāo)識(shí)的最后邊,用來標(biāo)識(shí)

5、Html文檔的結(jié)束。文檔的結(jié)束。 (2) 和和構(gòu)成構(gòu)成Html文檔的頭部信息文檔的頭部信息,在此標(biāo)在此標(biāo)志對之間可以使用志對之間可以使用 、 等等等等標(biāo)志對,這些標(biāo)志對都是描述標(biāo)志對,這些標(biāo)志對都是描述Html文檔相關(guān)信息的標(biāo)志文檔相關(guān)信息的標(biāo)志對,對, 標(biāo)志對之間的內(nèi)容不會(huì)在瀏覽器的框標(biāo)志對之間的內(nèi)容不會(huì)在瀏覽器的框內(nèi)顯示出來。內(nèi)顯示出來。1、文檔標(biāo)記(3) 使用過瀏覽器的人可能都會(huì)注意到瀏覽器窗口最上邊藍(lán)使用過瀏覽器的人可能都會(huì)注意到瀏覽器窗口最上邊藍(lán)色部分顯示的文本信息,那些信息一般是網(wǎng)頁的色部分顯示的文本信息,那些信息一般是網(wǎng)頁的“主題主題”,要將您的網(wǎng)頁的主題顯示到瀏覽器的頂部其實(shí)很

6、簡單,只要要將您的網(wǎng)頁的主題顯示到瀏覽器的頂部其實(shí)很簡單,只要在在 標(biāo)志對之間加入您要顯示的文本即可。標(biāo)志對之間加入您要顯示的文本即可。注意:注意: 標(biāo)志對只能放在標(biāo)志對只能放在 標(biāo)標(biāo)志對之間。志對之間。(4) 是是Html文檔的主體部分,此標(biāo)志對之間文檔的主體部分,此標(biāo)志對之間可包含可包含 、 、 等眾多的標(biāo)志,它等眾多的標(biāo)志,它們所定義的文本、圖像等將會(huì)在瀏覽器框內(nèi)顯示出來。們所定義的文本、圖像等將會(huì)在瀏覽器框內(nèi)顯示出來。|bgcolor 設(shè)置背景顏色設(shè)置背景顏色|text 設(shè)置文本顏色設(shè)置文本顏色例:例:|background 設(shè)置背景圖片設(shè)置背景圖片例:例:|link 設(shè)置鏈接顏色設(shè)置

7、鏈接顏色|vlink 設(shè)置已使用的鏈接的顏色設(shè)置已使用的鏈接的顏色|alink 設(shè)置正在被擊中的鏈接的顏色設(shè)置正在被擊中的鏈接的顏色標(biāo)志中常用屬性:標(biāo)志中常用屬性:補(bǔ)充屬性:bgproperties :取fixed 值時(shí)設(shè)置背景不隨滾動(dòng)條滾動(dòng),不設(shè)此屬性時(shí)背景隨滾動(dòng)條滾動(dòng)。 顏色設(shè)定顏色設(shè)定的三種常用方法:的三種常用方法: 用顏色常量名表示,如:用顏色常量名表示,如:Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Fuchsia、Silver、Red、Blue等。等。例:例: 紅色背景紅色背景 用六位十六進(jìn)制用六位十六進(jìn)制(rrgg

8、bb)表示:前兩位表示紅,中間表示:前兩位表示紅,中間兩位表示綠色、后兩位為藍(lán)色。數(shù)字以兩位表示綠色、后兩位為藍(lán)色。數(shù)字以#開頭。開頭。例:例: 藍(lán)色文本藍(lán)色文本 用用RGB函數(shù)表示:函數(shù)表示:格式為格式為RGB(紅色值紅色值,綠色值綠色值,藍(lán)色值藍(lán)色值)例:例: 藍(lán)色文本藍(lán)色文本 (5) 設(shè)置背景音樂,單標(biāo)記n屬性:src:指明背景音樂所有路徑及文件完整名稱:指明背景音樂所有路徑及文件完整名稱loop:指定音樂播放的次數(shù):指定音樂播放的次數(shù)使用方法:使用方法:水平線水平線標(biāo)記:標(biāo)記:單標(biāo)記。在該位置加入一條水平線。單標(biāo)記。在該位置加入一條水平線。 屬性:屬性:Size,Color,Width

9、,Align,Noshade。 粗細(xì)粗細(xì) 顏色顏色 長度長度 對齊方式對齊方式 無陰影無陰影演示 我的第一個(gè)網(wǎng)頁我的第一個(gè)網(wǎng)頁 大家好!我是濟(jì)南大學(xué)的學(xué)生大家好!我是濟(jì)南大學(xué)的學(xué)生 你們對制作網(wǎng)頁有興趣嗎?你們對制作網(wǎng)頁有興趣嗎? 例例: Html文檔中基本標(biāo)志的使用文檔中基本標(biāo)志的使用簡單網(wǎng)頁制作示例簡單網(wǎng)頁制作示例(1) 標(biāo)記:標(biāo)記:書寫說明文字,內(nèi)容不書寫說明文字,內(nèi)容不在瀏覽器中顯示。在瀏覽器中顯示。(2) 標(biāo)記:標(biāo)記:雙標(biāo)記。用來創(chuàng)建一個(gè)段落的標(biāo)記,雙標(biāo)記。用來創(chuàng)建一個(gè)段落的標(biāo)記,標(biāo)記間的文本按照段落的格式在瀏覽器中顯示。標(biāo)記間的文本按照段落的格式在瀏覽器中顯示。 屬性:屬性:Ali

10、gn(對齊方式對齊方式):):可以是可以是Left(左對齊左對齊)、Center(居中居中)和和Right(右對齊右對齊)三個(gè)值中的任何一個(gè)。三個(gè)值中的任何一個(gè)。(3) 標(biāo)記:標(biāo)記:單標(biāo)記。用來創(chuàng)建一個(gè)回車單標(biāo)記。用來創(chuàng)建一個(gè)回車換行換行2. 排版標(biāo)記排版標(biāo)記 換行與分段換行與分段春雪春雪飛雪帶春風(fēng)飛雪帶春風(fēng)徘徊亂繞空徘徊亂繞空君看似花處君看似花處偏在洛城中偏在洛城中春雪春雪飛雪帶春風(fēng)飛雪帶春風(fēng)徘徊亂繞空徘徊亂繞空君看似花處君看似花處偏在洛城中偏在洛城中和和標(biāo)記的區(qū)別標(biāo)記的區(qū)別(5) 標(biāo)記:標(biāo)記:雙標(biāo)記。預(yù)排版文本標(biāo)記,輸出雙標(biāo)記。預(yù)排版文本標(biāo)記,輸出時(shí),不希望對內(nèi)容重新排版而使用。時(shí),不希望

11、對內(nèi)容重新排版而使用。例:例: 華北華北 華東華東 華南華南- 234 244 243 123 345 333-標(biāo)標(biāo)記的使用記的使用文字分區(qū)-div 分區(qū): n把標(biāo)記中的內(nèi)容做為單獨(dú)的一塊處理 n可設(shè)置以下屬性 屬性 含義 align 設(shè)置段落的對齊方式,可取left、center、 right。 (1) 、. 雙標(biāo)記。雙標(biāo)記。他們是六他們是六種不同等級的種不同等級的標(biāo)題標(biāo)記標(biāo)題標(biāo)記,從大到小,可以增加屬性,從大到小,可以增加屬性Align,定義對齊方式。定義對齊方式。3、文本格式標(biāo)記、文本格式標(biāo)記標(biāo)題示例標(biāo)題示例這是一行普通文字這是一行普通文字一級標(biāo)一級標(biāo)題題二級標(biāo)題二級標(biāo)題三級標(biāo)題三級標(biāo)題

12、四級標(biāo)題四級標(biāo)題五級標(biāo)題五級標(biāo)題六級標(biāo)題六級標(biāo)題每一個(gè)標(biāo)題的字體每一個(gè)標(biāo)題的字體為黑體字,內(nèi)容文為黑體字,內(nèi)容文字前后都插入空行字前后都插入空行 演示(2) 標(biāo)記:標(biāo)記:雙標(biāo)記。用來設(shè)置輸出文本的字雙標(biāo)記。用來設(shè)置輸出文本的字體、字號(hào)、顏色等體、字號(hào)、顏色等。常用屬性:常用屬性:Face、Size、Color。例。例如:如:歡迎來到我歡迎來到我的樂園的樂園思考:思考:size=+1是什么意思,是什么意思,size=-2呢?呢?SIZE屬屬性的有效性的有效值范圍為值范圍為1-7,其中,其中缺省值為缺省值為3。補(bǔ)充:補(bǔ)充:標(biāo)記:用來設(shè)定網(wǎng)頁的標(biāo)記:用來設(shè)定網(wǎng)頁的默認(rèn)字體和字號(hào),通常放在默認(rèn)字體和字

13、號(hào),通常放在之間。之間。 This is a header This is a paragraph 例:basefont1例:basefont1(3)物理字體(固定效果):)物理字體(固定效果): 設(shè)置字體顯示樣式,主要有以下標(biāo)記設(shè)置字體顯示樣式,主要有以下標(biāo)記: 標(biāo)記 含義 設(shè)置標(biāo)記間的文字為粗體 設(shè)置標(biāo)記間的文字為斜體 設(shè)置標(biāo)記間的文字帶下劃線 設(shè)置標(biāo)記間的文字為上標(biāo) 設(shè)置標(biāo)記間的文字為下標(biāo) 設(shè)置標(biāo)記間的文字帶刪除線 設(shè)置標(biāo)記間的文字為插入 設(shè)置標(biāo)記間的文字方向,如:dir=“rtl” 設(shè)置文字為電傳打字機(jī)體 格式及排格式及排版示例版示例(4)邏輯字體(與瀏覽器相關(guān)):)邏輯字體(與瀏覽器

14、相關(guān)): 表現(xiàn)文字含義,主要有以下標(biāo)記:表現(xiàn)文字含義,主要有以下標(biāo)記: 標(biāo)記 含義 一般強(qiáng)調(diào)(emphasis),斜體 特別強(qiáng)調(diào),黑體 表示地址 定義引用 用戶鍵入的文字,字體變細(xì)變輕 一段引用的文字,斜體。用于書名、電影名 字體變小 字體變大 標(biāo)記 含義 取首字母縮寫 源代碼 變量 例子 定義術(shù)語 定義縮寫 (5)活動(dòng)字幕n 活動(dòng)字幕 Marquee:雙標(biāo)記 滾動(dòng)內(nèi)容滾動(dòng)內(nèi)容 主要屬性有:|direction:用于設(shè)定活動(dòng)字幕的滾動(dòng)方向是向左(left)、向右(right)、向上(up)、向下(down)。 |behavior:用于設(shè)定滾動(dòng)的方式,主要由三種方式:behavior= scro

15、ll 表示由一端滾動(dòng)到另一端; behavior=slide 表示由一端快速滑動(dòng)到另一端,且不再重復(fù);behavior=alternate表示在兩端之間來回滾動(dòng)。|bgcolor:用于設(shè)定活動(dòng)字幕的背景顏色。|scrollamount:用于設(shè)定活動(dòng)字幕的滾動(dòng)速度。| height:用于設(shè)定滾動(dòng)字幕的高度,width:則設(shè)定滾動(dòng)字幕的寬度。 |loop:用于設(shè)定滾動(dòng)的次數(shù),當(dāng)loop=-1表示一直滾動(dòng)下去,直到頁面更新。n標(biāo)記的默認(rèn)情況是向左滾動(dòng)無限次,字幕高度是文本高度;n滾動(dòng)范圍:水平滾動(dòng)的寬度是當(dāng)前位置的寬度;垂直滾動(dòng)的高度是當(dāng)前位置的高度。n由于由于標(biāo)記只能作用于標(biāo)記只能作用于一段一段文

16、本,因此多行活文本,因此多行活動(dòng)字幕,分行時(shí)動(dòng)字幕,分行時(shí)只能用只能用標(biāo)記,標(biāo)記,不能用不能用標(biāo)記。標(biāo)記。例:滾動(dòng)文字示例例:滾動(dòng)文字示例1例:滾動(dòng)文字示例例:滾動(dòng)文字示例2列表 n列表: 用于列舉內(nèi)容 n列表分類 無序列表(unordered list) 有序列表(ordered list) 無序列表-ul n無序列表: 列表項(xiàng)以標(biāo)識(shí) 可以設(shè)置如下屬性: 屬性: type 含義 : 取值可以是disc、square、 circle,分別表示用實(shí)心圓點(diǎn)、實(shí)心方點(diǎn)、圓圈作為列表符號(hào)。 Coffee Tea Milk Coffee Tea Milk Coffee Tea Milk 例無序列表有序列

17、表-ol n有序列表: 列表項(xiàng)以標(biāo)識(shí) 每一項(xiàng)顯示時(shí)都有編號(hào) 可以設(shè)置如下屬性: n屬性 含義 type 取值可以是1、a、A、i、I,分別代表編號(hào)使 用阿拉伯?dāng)?shù)字、小寫英文字母、大寫英文字母、小寫羅馬數(shù)字、大寫羅馬數(shù)字。 start 指定序號(hào)的起始值,只能取數(shù)字。 Coffee Tea Milk Coffee Tea Milk Coffee Tea Milk 例有序列表 圖像是在網(wǎng)頁制作中是非常重要的一個(gè)方面。圖像是在網(wǎng)頁制作中是非常重要的一個(gè)方面。在在HTML中可以支持多種格式的圖片:中可以支持多種格式的圖片:bmp、gif、jpg。4、圖像標(biāo)記、圖像標(biāo)記圖像嵌入標(biāo)記為圖像嵌入標(biāo)記為單單標(biāo)記

18、。標(biāo)記。 標(biāo)記標(biāo)記并不是真正地把圖像加入到并不是真正地把圖像加入到HTML中,而是將標(biāo)中,而是將標(biāo)記的記的src屬性賦值為圖形文件所在的路徑。屬性賦值為圖形文件所在的路徑。路徑可路徑可以是相對路徑、絕對路徑,也可以是網(wǎng)址。以是相對路徑、絕對路徑,也可以是網(wǎng)址。標(biāo)記中必須為標(biāo)記中必須為src屬性賦值。屬性賦值。其他的屬性其他的屬性 (1) Alt :圖像不能下載時(shí)用以替代的文字。圖像不能下載時(shí)用以替代的文字。(2) Align:對齊方式。對齊方式。圖像和文字的對齊方式:圖像和文字的對齊方式:top、bottom、middle;圖像在頁面中的對齊方式:圖像在頁面中的對齊方式:left、right。

19、(3) Border:圖像的邊框。圖像的邊框。可取可取0的整數(shù)。的整數(shù)。(4) Width和和Height:圖像的高和寬。圖像的高和寬。(5) Hspace和和Vspace:圖片的水平位置和垂直位置。圖片的水平位置和垂直位置。圖像標(biāo)記的屬性圖像標(biāo)記的屬性例例5.3例例5.3屬性屬性注意:當(dāng)設(shè)置注意:當(dāng)設(shè)置 align為為left或或right時(shí),圖片和內(nèi)容會(huì)顯示在一行;時(shí),圖片和內(nèi)容會(huì)顯示在一行; 如果讓其它內(nèi)容換行,可以使用如果讓其它內(nèi)容換行,可以使用 n思考下面程序的含義:當(dāng)需要定義圖像、音樂、應(yīng)用程序或超媒體鏈當(dāng)需要定義圖像、音樂、應(yīng)用程序或超媒體鏈接的鏈接地址時(shí),需要使用鏈接標(biāo)記。接的

20、鏈接地址時(shí),需要使用鏈接標(biāo)記。為雙標(biāo)為雙標(biāo)記,標(biāo)記對之間加入需要在瀏覽器中顯示的鏈接名記,標(biāo)記對之間加入需要在瀏覽器中顯示的鏈接名稱。稱。5. 超級鏈接標(biāo)記超級鏈接標(biāo)記 相關(guān)文字相關(guān)文字 超鏈接的常用屬性nHref屬性屬性:指明要鏈接對象的地址,:指明要鏈接對象的地址, Href的值可的值可以是以是URL形式,網(wǎng)址或相對路徑,也可以是形式,網(wǎng)址或相對路徑,也可以是mailto,即發(fā)送,即發(fā)送E-mail形式。形式。 a頁面 網(wǎng)易 我的郵箱 點(diǎn)擊這里跳轉(zhuǎn)例5-4Target屬性:屬性:定義被鏈接的目標(biāo)在指定的窗口中打開。定義被鏈接的目標(biāo)在指定的窗口中打開。超鏈接的常用屬性例5-4加targetN

21、ame屬性:屬性:用來在用來在HTML文檔中創(chuàng)建一個(gè)書簽文檔中創(chuàng)建一個(gè)書簽(或稱錨或稱錨點(diǎn)點(diǎn))。語法:語法: 在當(dāng)前位置建立一個(gè)名字叫在當(dāng)前位置建立一個(gè)名字叫l(wèi)abel的書簽的書簽(也叫錨點(diǎn)也叫錨點(diǎn))。例:例:錢塘湖春行錢塘湖春行創(chuàng)建書簽就是為了在創(chuàng)建書簽就是為了在HTML文檔中創(chuàng)建一些鏈接,以方便文檔中創(chuàng)建一些鏈接,以方便地找到文檔中有書簽的地方。要找到同一頁面書簽所在地,必地找到文檔中有書簽的地方。要找到同一頁面書簽所在地,必須使用書簽鏈接:須使用書簽鏈接:鏈接到當(dāng)前文檔中名字叫鏈接到當(dāng)前文檔中名字叫l(wèi)abel的書簽位置;的書簽位置;例如:例如:要找到要找到“平安平安”這個(gè)書簽,代碼如下:

22、這個(gè)書簽,代碼如下: 回到錢塘湖春行回到錢塘湖春行書簽書簽.html如果想讓整個(gè)頁面中的所有鏈接標(biāo)識(shí)都具有如果想讓整個(gè)頁面中的所有鏈接標(biāo)識(shí)都具有Target=_blank屬性,而在每一個(gè)屬性,而在每一個(gè)標(biāo)記中都加上標(biāo)記中都加上Target=_blank又太麻煩,這時(shí)可以在又太麻煩,這時(shí)可以在 標(biāo)標(biāo)記之間加上記之間加上,如果有某一鏈接需要在如果有某一鏈接需要在當(dāng)前窗口打開,那么只要將鏈接加上當(dāng)前窗口打開,那么只要將鏈接加上Target=_self屬性即可。屬性即可。還有一個(gè)屬性還有一個(gè)屬性Href,用法與用法與Target相同,如果將相同,如果將標(biāo)識(shí)的標(biāo)識(shí)的Href屬性聲明為某個(gè)地址,那么網(wǎng)頁中

23、原來的屬性聲明為某個(gè)地址,那么網(wǎng)頁中原來的所有相對路徑都變成了絕對路徑。所有相對路徑都變成了絕對路徑。補(bǔ)充:補(bǔ)充: 標(biāo)記的應(yīng)用標(biāo)記的應(yīng)用BASE標(biāo)記的應(yīng)用標(biāo)記的應(yīng)用.html 使用圖像作為超級鏈接源使用圖像作為超級鏈接源 可以用一個(gè)頁面上的圖片建立超級鏈接,只要將可以用一個(gè)頁面上的圖片建立超級鏈接,只要將圖片的圖片的標(biāo)記包含在標(biāo)記包含在標(biāo)記之中即可。標(biāo)記之中即可。圖像作為超級鏈接源示例圖像作為超級鏈接源示例.html 6、聲音標(biāo)記、聲音標(biāo)記將音樂做成一個(gè)鏈接,只需用鼠標(biāo)在上面單擊,就將音樂做成一個(gè)鏈接,只需用鼠標(biāo)在上面單擊,就可以聽到動(dòng)人的音樂了,這樣做的方法很簡單:可以聽到動(dòng)人的音樂了,這樣

24、做的方法很簡單:樂曲名樂曲名 點(diǎn)播音樂點(diǎn)播音樂例如:例如:菊花臺(tái)菊花臺(tái)寧夏寧夏原來你也在這里原來你也在這里 把我們喜歡的音樂收集起來,作成一個(gè)音樂庫,隨時(shí)都可把我們喜歡的音樂收集起來,作成一個(gè)音樂庫,隨時(shí)都可以讓自己和別人徜徉在音樂的海洋中,已經(jīng)有人這樣做了,你以讓自己和別人徜徉在音樂的海洋中,已經(jīng)有人這樣做了,你一定已經(jīng)遇到很多,而且自己也可以試著去做了!一定已經(jīng)遇到很多,而且自己也可以試著去做了!點(diǎn)播音樂點(diǎn)播音樂.html前面,我們是借助鏈接來實(shí)現(xiàn)網(wǎng)上播放音樂前面,我們是借助鏈接來實(shí)現(xiàn)網(wǎng)上播放音樂這一功能的,我們還可以讓音樂自動(dòng)載入,你可這一功能的,我們還可以讓音樂自動(dòng)載入,你可以讓它出現(xiàn)

25、控制面板或當(dāng)背景音樂來使用。基本以讓它出現(xiàn)控制面板或當(dāng)背景音樂來使用?;菊Z法:語法:該功能也適用于視頻文件的載入。該功能也適用于視頻文件的載入。自動(dòng)載入音樂的標(biāo)記還有一些常用的屬性自動(dòng)載入音樂的標(biāo)記還有一些常用的屬性: 自動(dòng)載入音樂自動(dòng)載入音樂自動(dòng)載入音樂標(biāo)記的屬性SRC=FILENAME設(shè)定音樂文件的路徑AUTOSTART=TRUE/FALSE是否要音樂文件傳送完就自動(dòng)播放,TRUE是要,F(xiàn)ALSE是不要,默認(rèn)為FALSELOOP=n/TRUE/FALSE設(shè)定播放重復(fù)次數(shù),LOOP=6表示重復(fù)6次,TRUE表示無限次播放,F(xiàn)ALSE播放一次即停止。STARTIME=分:秒設(shè)定樂曲的開始播放

26、時(shí)間,如20秒后播放寫為STARTIME=00:20VOLUME=0-100設(shè)定音量的大小。如果沒設(shè)定的話,就用系統(tǒng)的音量。WIDTH HEIGHT設(shè)定控制面板的大小HIDDEN=TRUE隱藏控制面板CONTROLS=CONSOLE/SMALLCONSOLE設(shè)定控制面板的樣子例:例:背景音樂背景音樂 播放音樂播放音樂 作為背景音樂來播放。作為背景音樂來播放。 自動(dòng)播放隱藏 例:控制音樂 播放音樂 出現(xiàn)控制面板了,你可以控制它的開與關(guān),還可以調(diào)節(jié)音量的大小。 用瀏覽器可以播放的格式有:用瀏覽器可以播放的格式有:mov、avi、wmv、mpg、dat等格式。等格式。 |鏈接一個(gè)視頻文件鏈接一個(gè)視頻

27、文件視頻名稱視頻名稱|嵌入一個(gè)視頻文件嵌入一個(gè)視頻文件Embed Src=文件地址及名稱文件地址及名稱 autostart=true|false |自動(dòng)載入視頻:自動(dòng)載入視頻: 播放視頻(補(bǔ)充)播放視頻(補(bǔ)充)n例:視頻播放nn播放視頻nn n n 視頻點(diǎn)播n 小狗寶寶的童年n n n 可愛的北極熊它在干嗎呢?n n嵌入視頻自動(dòng)載入視頻鏈接視頻表格表格(Table)是網(wǎng)頁制作中安排布局最好的工是網(wǎng)頁制作中安排布局最好的工具,因?yàn)楸砀癫坏梢院芎玫陌才盼谋净驁D像的具,因?yàn)楸砀癫坏梢院芎玫陌才盼谋净驁D像的顯示位置,而且還可以任意的進(jìn)行背景和前景顏顯示位置,而且還可以任意的進(jìn)行背景和前景顏色的設(shè)置

28、。色的設(shè)置。7、表、表 格格 標(biāo)記標(biāo)記 雙標(biāo)記,用來創(chuàng)建一個(gè)表格。雙標(biāo)記,用來創(chuàng)建一個(gè)表格。 標(biāo)記標(biāo)記有許多屬性,用來定義表格的外觀特征。詳細(xì)的表有許多屬性,用來定義表格的外觀特征。詳細(xì)的表格屬性有:格屬性有:屬 性 用 途Bgcolor設(shè)置表格的背景色Background表格的背景圖片Border設(shè)置邊框的寬度,邊框?qū)挾饶J(rèn)是0無邊框,無格線Bordercolor設(shè)置邊框的顏色bordercolorlight設(shè)置邊框明亮部分的顏色bordercolordark設(shè)置邊框昏暗部分的顏色Cellspacing設(shè)置單元格之間空間的大小Cellpadding設(shè)置表格單元格邊框與其內(nèi)部內(nèi)容之間的距離Wi

29、dth設(shè)置表格的寬度Height設(shè)置表格的高度 一個(gè)表格由若干行一個(gè)表格由若干行(Row)構(gòu)成,每一行又由若干個(gè)構(gòu)成,每一行又由若干個(gè)單元格單元格(Cell)組成,另外一個(gè)表格還可能具有一個(gè)標(biāo)題組成,另外一個(gè)表格還可能具有一個(gè)標(biāo)題(Caption)。 標(biāo)記標(biāo)記 表行標(biāo)記表行標(biāo)記屬性:屬性:Align水平對齊方式:水平對齊方式:left(左對齊左對齊),center(居中居中),right (右對齊右對齊) Valign垂直對齊方式:垂直對齊方式:top(頂端對齊頂端對齊),),middle(居中對齊居中對齊),bottom(底端對齊底端對齊)表格標(biāo)記示例表格標(biāo)記示例.html 、標(biāo)記標(biāo)記 表頭

30、單元格標(biāo)記表頭單元格標(biāo)記,表頭數(shù)據(jù)自動(dòng)加,表頭數(shù)據(jù)自動(dòng)加粗并且居中顯示,其他與粗并且居中顯示,其他與一樣。一樣。 數(shù)據(jù)單元格標(biāo)記數(shù)據(jù)單元格標(biāo)記屬性:屬性: Align, Valign , width,Colspan,Rowspan和和Nowrapwidth:單元格的寬度,單位用絕對像素值或總寬度的百分比單元格的寬度,單位用絕對像素值或總寬度的百分比表示;表示;Colspan:設(shè)置一個(gè)表格單元格跨占的列數(shù)設(shè)置一個(gè)表格單元格跨占的列數(shù)(缺省值為缺省值為1);Rowspan:設(shè)置一個(gè)表格單元格跨占的行數(shù)設(shè)置一個(gè)表格單元格跨占的行數(shù)(缺省值為缺省值為1);Nowrap:禁止表格單元格內(nèi)的內(nèi)容自動(dòng)換行。

31、禁止表格單元格內(nèi)的內(nèi)容自動(dòng)換行。n n n 列1 n 列2 n 列3 n n n表 數(shù)據(jù)21 n格 數(shù)據(jù)22 n 數(shù)據(jù)23 n n n 數(shù)據(jù)31 n 數(shù)據(jù)32 n 數(shù)據(jù)33 n n 第一行第一行 第二行第二行第三行第三行、或或之間有著之間有著 嚴(yán)格的層次關(guān)系。嚴(yán)格的層次關(guān)系。雙標(biāo)記。表示表格的標(biāo)題,一般出現(xiàn)在雙標(biāo)記。表示表格的標(biāo)題,一般出現(xiàn)在首標(biāo)記與第一個(gè)首標(biāo)記與第一個(gè)之間。之間。 標(biāo)記標(biāo)記屬性:屬性:Align 對齊方式對齊方式Left,center,right,top,bottom Valign 垂直對齊方式垂直對齊方式Top,bottom 例:例:表格標(biāo)記示例表格標(biāo)記示例 在在HTML中

32、有些字符具有特殊的含義,若在數(shù)據(jù)中中有些字符具有特殊的含義,若在數(shù)據(jù)中包含這些字符,它們就不能正確地顯示出來。包含這些字符,它們就不能正確地顯示出來。例如例如 “”等。等。因此數(shù)據(jù)中如果要包含這些字因此數(shù)據(jù)中如果要包含這些字符時(shí),應(yīng)使用特殊字符標(biāo)記。符時(shí),應(yīng)使用特殊字符標(biāo)記。8、特殊字符標(biāo)記、特殊字符標(biāo)記 特殊字符的標(biāo)記為:特殊字符的標(biāo)記為:&字符串字符串; 常用的特殊字符見書常用的特殊字符見書P129表表5-1 空格:空格: 或或  :"或或" :>或或> &:&

33、或或& 需要說明的是:需要說明的是: 轉(zhuǎn)義序列各字符之間不能有空格;轉(zhuǎn)義序列各字符之間不能有空格; 轉(zhuǎn)義序列必須以分號(hào)結(jié)束;轉(zhuǎn)義序列必須以分號(hào)結(jié)束; 單獨(dú)的單獨(dú)的&不被認(rèn)為是轉(zhuǎn)義開始。不被認(rèn)為是轉(zhuǎn)義開始。對于無法直接輸入的字符,可以通過該字符的對于無法直接輸入的字符,可以通過該字符的ASCII碼實(shí)現(xiàn)輸入。碼實(shí)現(xiàn)輸入。格式為:格式為: &#; 例:例:要顯示要顯示“”,應(yīng)該寫為:應(yīng)該寫為:< font > 表單表單(Form)在在Web網(wǎng)頁中用來給訪問者填寫信息,網(wǎng)頁中用來給訪問者填寫信息,從而能獲得用戶信息,使網(wǎng)頁具有交互能力。從而能

34、獲得用戶信息,使網(wǎng)頁具有交互能力。表單和表單和Windows的對話框類似,由若干控件組成的,的對話框類似,由若干控件組成的,用于實(shí)現(xiàn)和用戶的交互。用于實(shí)現(xiàn)和用戶的交互。當(dāng)用戶填寫完信息后進(jìn)行提交當(dāng)用戶填寫完信息后進(jìn)行提交(Submit)操作,于是表單的內(nèi)容就從客戶端的瀏覽器傳操作,于是表單的內(nèi)容就從客戶端的瀏覽器傳送到服務(wù)器上。經(jīng)過送到服務(wù)器上。經(jīng)過Web服務(wù)器上的服務(wù)器上的 ASP 或或 CGI 等處理等處理程序處理后,再將用戶所需信息傳送回客戶端的瀏覽器上,程序處理后,再將用戶所需信息傳送回客戶端的瀏覽器上,這樣網(wǎng)頁就具有了交互性這樣網(wǎng)頁就具有了交互性 。9、 表表 單單雙標(biāo)記。用來創(chuàng)建一

35、個(gè)表單,即定義表單的開始和結(jié)束位置,雙標(biāo)記。用來創(chuàng)建一個(gè)表單,即定義表單的開始和結(jié)束位置,標(biāo)記對之間的內(nèi)容都屬于表單的內(nèi)容。標(biāo)記對之間的內(nèi)容都屬于表單的內(nèi)容。屬性:屬性:Action 處理程序的網(wǎng)絡(luò)路徑和程序名。處理程序的網(wǎng)絡(luò)路徑和程序名。例:例:Methed:用來定義處理程序從表單中獲得信息的方式??扇≈涤脕矶x處理程序從表單中獲得信息的方式??扇≈禐闉間et或或post,默認(rèn)為,默認(rèn)為post 。get方式方式是處理程序從當(dāng)前是處理程序從當(dāng)前HTML文檔中獲取數(shù)據(jù),數(shù)據(jù)量有限,文檔中獲取數(shù)據(jù),數(shù)據(jù)量有限,一般限制在一般限制在1KB以下。以下。Post方式方式方式與方式與get相反,當(dāng)前的相

36、反,當(dāng)前的HTML把數(shù)據(jù)傳送給處理程序,把數(shù)據(jù)傳送給處理程序,傳送的數(shù)據(jù)量大。傳送的數(shù)據(jù)量大。Target:屬性用來指定目標(biāo)窗口或目標(biāo)幀。屬性用來指定目標(biāo)窗口或目標(biāo)幀。 (1)表單標(biāo)記)表單標(biāo)記例例 5.8 表單應(yīng)用示例表單應(yīng)用示例單標(biāo)記。用來定義表單內(nèi)的控件類型,此標(biāo)記必須放在單標(biāo)記。用來定義表單內(nèi)的控件類型,此標(biāo)記必須放在標(biāo)志對之間。通過該標(biāo)記的標(biāo)志對之間。通過該標(biāo)記的type來指定控件的類型。來指定控件的類型。該標(biāo)記內(nèi)都有該標(biāo)記內(nèi)都有Name和和Value屬性,另外還可有屬性,另外還可有size屬性。屬性。(2)標(biāo)記標(biāo)記屬性值控件類型屬性值控件類型Text單行文本框Reset重填按鈕Ch

37、eckbox復(fù) 選 框 Button普通按鈕Radio單 選 按 鈕Image提交圖片Password密碼輸入框Hidden隱藏控件Submit提 交 按 鈕File文件上傳表單上的單行文本框可以接收用戶輸入的文本數(shù)據(jù),表單上的單行文本框可以接收用戶輸入的文本數(shù)據(jù),但不能包含換行符,數(shù)據(jù)必須在一行中寫完。但不能包含換行符,數(shù)據(jù)必須在一行中寫完。 單行文本框單行文本框 基本形式:基本形式:string:文本框的初值文本框的初值 n:文本框的寬度文本框的寬度m:字符串的最大字符數(shù)字符串的最大字符數(shù) Readonly:指定控件是否可讀指定控件是否可讀例例:INPUT Type=text Name=T

38、1 Value=這里顯示默這里顯示默認(rèn)文本認(rèn)文本 密碼框同文本框,所不同的是密碼框中顯示的密碼框同文本框,所不同的是密碼框中顯示的數(shù)據(jù)為數(shù)據(jù)為“*”所代替,從而起到保密的作用。所代替,從而起到保密的作用。 基本形式:基本形式: 各屬性與文本框控件的相同。各屬性與文本框控件的相同。例:例:請輸入密碼請輸入密碼:INPUT Type=password Name=P1 Size=10 密碼框密碼框密碼框密碼框.html是從多個(gè)選項(xiàng)中選擇其中之一的控件。是從多個(gè)選項(xiàng)中選擇其中之一的控件?;拘问剑夯拘问剑篘ame:控件名控件名 Value:選中該項(xiàng)時(shí)的取值選中該項(xiàng)時(shí)的取值Checked:該項(xiàng)默認(rèn)為選

39、中狀態(tài)該項(xiàng)默認(rèn)為選中狀態(tài) 單選按紐單選按紐注意:注意:同一組的單選按鈕的控件名必須相同;不指定同一組的單選按鈕的控件名必須相同;不指定Checked時(shí),默認(rèn)第一個(gè)選項(xiàng)被選中;各時(shí),默認(rèn)第一個(gè)選項(xiàng)被選中;各Value不能相同。不能相同。 單選按紐舉例單選按紐舉例你來自何處:你來自何處:山東山東上海上海海南海南同名表示同名表示為一組為一組單選按鈕單選按鈕.html 復(fù)選框是表單上可供用戶選擇輸入的控件,有選中和復(fù)選框是表單上可供用戶選擇輸入的控件,有選中和不選中兩種狀態(tài)。選中時(shí)將在控件中打上不選中兩種狀態(tài)。選中時(shí)將在控件中打上“”。 基本形式:基本形式: Name:控件名控件名 Checked:控件默認(rèn)選中控件默認(rèn)選中 復(fù)選框控件后面一般帶有文字說明,可以在該語句后復(fù)選框控件后面一般帶有文字說明,可以在該語句后添加必要的文本。例如:添加必要的文本。例如:我同意所列條款我同意所列條款 將在頁面上顯示:將在頁面上顯示: 我同意所列條款我同意所列條款 復(fù)選框復(fù)選框你的愛好:你

溫馨提示

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

最新文檔

評論

0/150

提交評論