1、入門,HTML,第2章 HTML入門,2.1 HTML的基本概念 2.2 HTML文件結(jié)構(gòu)和標記 2.3 頁面布局與文字格式 2.4 列表 2.5 多媒體效果 2.6 表格 2.7 框架 習題2,本節(jié)知識點 HTML基礎(chǔ) 基本HTML文檔HTML(Hypertext Markup Language)即超文本描述語言，是一種用來制作超文本文檔的簡單標記語言。,2.1 HTML的基本概念,HTML概述,Web是計算機、Internet和多媒體技術(shù)結(jié)合的產(chǎn)物，而HTML(HyperText Markup Language，超文本標記語言)則是這一結(jié)合的實現(xiàn)者。由于有了HTML，才使得Web風行于In

2、ternet。,什么是HTML？,第2章 HTML入門,讓我們來了解HTML,在WWW上的一個超媒體文檔稱之為一個頁面（page）。作為一個組織或個人在萬維網(wǎng)上放置開始點的頁面稱為主頁Homepage，或首頁，主頁中通常包括有指向其他相關(guān)頁面或其他節(jié)點的指針（超級鏈接）。在邏輯上將視為一個整體的一系列頁面的有機集合稱為網(wǎng)站（Website或Site）。,設(shè)計 HTML 語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯(lián)系在一起，形成有機的整體，人們不用考慮具體信息是在當前電腦上還是在網(wǎng)絡(luò)的其它電腦上。這樣，你只要使用鼠標在某一文檔中點取一個圖標，Internet

3、就會馬上轉(zhuǎn)到與此圖標相關(guān)的內(nèi)容上去，而這些信息可能存放在網(wǎng)絡(luò)的另一臺電腦中。,第2章 HTML入門,HTML（Hyper Text Mark-up Language ）即超文本標記語言，是 WWW 的描述語言，由 Tim Berners-lee提出。 HTML文本是由 HTML命令組成的描述性文本，HTML 命令可以說明文字、 圖形、動畫、聲音、表格、鏈接等。 HTML的結(jié)構(gòu)包括頭部 (Head)、主體 (Body) 兩大部分。頭部描述瀏覽器所需的信息，主體包含所要說明的具體內(nèi)容。,第2章 HTML入門,雖然PC機大行其道，但使用MAC等其他機器的大有人在。 HTML是一種用來制作超文本文檔的

4、簡單標記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統(tǒng)平臺（如UNIX，WINDOWS等）。也就是說HTML是在各種網(wǎng)絡(luò)環(huán)境之間，不同文件格式之間進行交流的一種語言格式。,自1990年以來HTML就一直被用作World Wide Web 的信息表示語言，用于描述Homepage的格式設(shè)計和它與WWW上其它Homepage 的連結(jié)信息。使用HTML語言描述的文件，需要通過WWW瀏覽器顯示出效果。,第2章 HTML入門,HTML使用標簽符號(Tag)對文件的內(nèi)容進行標注，指定輸出格式，如字體大小、顏色、背景顏色、表格形式、各部分之間邏輯上的組織等，并控制文字、圖象的顯示方

5、式及附加動作。使用支持HTML的瀏覽軟件，瀏覽者就可以對文件進行自由的、跳躍式的閱讀，還可以自行調(diào)整顯示和閱讀的形式。,后續(xù)內(nèi)容會詳細介紹。,第2章 HTML入門,1990年HTML問世后很長一段時間里，人們?nèi)渴褂梦谋揪庉嬈鲿鴮慔TML文檔，用Web瀏覽器檢查網(wǎng)頁是否編寫好。 現(xiàn)在，有集成的網(wǎng)頁設(shè)計工具幫助我們以WYSIWYG（What-You-See-Is-What-You-Get，所見即所得）的方式生成HTML文檔。 HTML4.0能讓網(wǎng)站設(shè)計者在網(wǎng)頁上自由地放置圖片、美化文字、插入音頻、視頻文件，配合Web 數(shù)據(jù)庫和ASP、PHP、JSP等網(wǎng)絡(luò)編程，可以進行網(wǎng)站的遠程動態(tài)交互操作。,建

6、議大家多了解一下HTML語言！,第2章 HTML入門,HTML與Web的關(guān)系,HTML之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。所謂超級鏈接，就是一種URL指針，通過激活（點擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。 網(wǎng)頁的本質(zhì)就是HTML，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、CGI、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，HTML是Web編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。,第2章 HTML入門,HTML與Web的關(guān)系,HTML是Web的核心與基礎(chǔ),第2章 HTML入門,【實例2-1】 基本的HTML文

7、檔示例。一個簡單的HTML示例歡迎進入HTML天地,努力掌握HTML知識，做出內(nèi)容豐富，自己滿意的主頁！在瀏覽器中的顯示如圖2-1所示。,圖2-1 一個簡單的HTML示例,本節(jié)知識點HTML結(jié)構(gòu)HTML標記2.2.1 HTML文件結(jié)構(gòu)每個網(wǎng)頁都由一系列的元素和標簽組成，元素名不區(qū)分大小寫。HTML用標簽來規(guī)定元素的屬性和它在文件中的位置。,2.2 HTML文件結(jié)構(gòu)和標記,HTML超文本文檔分為文檔頭和文檔體兩部分，其HTML文件結(jié)構(gòu)為： 一個簡單的示例 歡迎光臨我的主頁 ,這是我第一次做主頁? ,2.2.2 HTML標記介紹HTML標記主要可分為以下八大類。1文件結(jié)構(gòu)標記(Document S

8、tructure Tags)2區(qū)段格式標記(Block Formatting Tags)3字符格式標記(Character Formatting Tags)4列表標記(List Tags)5鏈接標記(Anchor Tags)6多媒體標記(Multimedia Tags) 7表格標記(Table Tags) 8表單標記(Form Tags),本節(jié)知識點 HTML布局 HTML格式2.3.1 標題一個HTML文件的結(jié)構(gòu)基本上可以分為兩部分，一部分稱為標題區(qū)(Head Section)，另一部分稱為主體區(qū)(Body Section)。文件結(jié)構(gòu)標記用來標示標題區(qū)和主體區(qū)。,2.3 頁面布局與文字格式,

9、【實例2-2】 標題示例。標題示例,這是一行普通文字一級標題二級標題三級標題四級標題五級標題六級標題在瀏覽器中的顯示如圖2-2所示。,2.3.2 分行應(yīng)用【實例2-3】 無換行示例。 無換行示例靜夜思 床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。在瀏覽器中的顯示如圖2-3所示。,圖2-3 無換行示例,【實例2-4】 換行示例。換行示例靜夜思床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。在瀏覽器中的顯示如圖2-4所示。,圖2-4 換行示例,2.3.3 段落標記【實例2-5】 段落標簽。段落標簽靜夜思床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。在瀏覽器中的顯示如圖2-5所示。,圖2-5

10、段落標簽,2.3.4 水平線應(yīng)用水平線標簽可以在屏幕上顯示一條水平線，用以分割頁面中的不同部分。1線段粗細的設(shè)定【實例2-6】 線段粗細的設(shè)定。線段粗細的設(shè)定這是第一條線段，無size，取默認值size=1來顯示,這是第二條線段，size=5這是第三條線段，size=10在瀏覽器中的顯示如圖2-6所示。,圖2-6 線段粗細的設(shè)定,2線段長度的設(shè)定【實例2-7】 線段長度的設(shè)定。線段長度的設(shè)定這是第一條線段，無width設(shè)定，取width默認值100%來顯示,這是第二條線段，width=50(點數(shù)方式)這是第三條線段，width=50%(百分比方式)在瀏覽器中的顯示如圖2-7所示。,圖2-7 線

11、段長度的設(shè)定,3線段排列的設(shè)定【實例2-8】 線段排列的設(shè)定。線段排列的設(shè)定這是第一條線段，無align設(shè)定，“取默認值center顯示”,這是第二條線段，向左對齊這是第三條線段，向右對齊在瀏覽器中的顯示如圖2-8所示。,圖2-8 線段排列的設(shè)定,4無陰影的設(shè)定【實例2-9】 無陰影的設(shè)定。無陰影的設(shè)定,這是第一條線段，無noshade設(shè)定，取默認值陰影效果來顯示這是第二條線段，有noshade設(shè)定在瀏覽器中的顯示如圖2-9所示。,圖2-9 無陰影的設(shè)定,2.3.5 文字的大小、字體、樣式、顏色及位置1. 文字的大小設(shè)置【實例2-10】 字號大小。字號大小,這是size=7的字體這是size=

12、6的字體這是size=5的字體這是size=4的字體這是size=3的字體這是size=2的字體這是size=1的字體這是size=-1的字體在瀏覽器中的顯示如圖2-10所示。,圖2-10 字號大小,2文字的字體設(shè)置【實例2-11】 字體設(shè)置。字體,歡迎光臨歡迎光臨歡迎光臨 歡迎光臨Welcome my homepage.Welcome my homepage. 在瀏覽器中的顯示如圖2-11所示。,圖2-11 字體設(shè)置,3文字的樣式設(shè)置為了讓文字富有變化，或者為了著重強調(diào)某一部分，HTML提供了一些標簽以產(chǎn)生這些效果。常用的標簽如表2-1所示。,表2-1 常用的標簽,【實例2-12】 字體樣式

13、。 字體樣式 黑體字 斜體字, 加下劃線 大型字體 小型字體WelcomeWelcomeWelcome在瀏覽器中的顯示如圖2-12所示。,圖2-12 字體樣式,4文字的顏色設(shè)置 【實例2-13】 文字的顏色。 文字的顏色 ,文字的顏色文字的顏色 文字的顏色文字的顏色文字的顏色 文字的顏色文字的顏色在瀏覽器中的顯示如圖2-13所示。,圖2-13 文字的顏色,5文字的位置設(shè)置【實例2-14】 位置控制。位置控制,你好!你好!你好!在瀏覽器中的顯示如圖2-14所示。,圖2-14 位置控制,本節(jié)知識點HTML列表列表類別2.4.1 有序列表(Ordered List)【實例2-15】 有序列表。有序列

14、表,2.4 列 表,牛奶咖啡 在瀏覽器中的顯示如圖2-15所示。,圖2-15 有序列表,2.4.2 無序列表(Unordered List)【實例2-16】 無序列表。無序列表,牛奶咖啡 在瀏覽器中的顯示如圖2-16所示。,圖2-16 無序列表,2.4.3 自定義列表【實例2-17】 自定義列表。自定義列表,牛奶白色冷飲咖啡咖色熱飲 在瀏覽器中的顯示如圖2-17所示。,圖2-17 自定義列表,2.4.4 嵌套列表【實例2-18】 嵌套列表。嵌套列表飲品清單：牛奶茶葉,紅茶綠茶咖啡在瀏覽器中的顯示如圖2-18所示。,圖2-18 嵌套列表,本節(jié)知識點WWW與多媒體多媒體在網(wǎng)頁中的應(yīng)用2.5.1 插

15、入圖片及圖片大小的調(diào)整超文本支持的圖像格式一般有X Bitmap(XBM)、GIF、JPEG三種，所以對圖片處理后要將其保存為這三種格式中的任何一種，這樣才可以在瀏覽器中看到。,2.5 多媒體效果,2.5.2 滾動字幕標簽可以實現(xiàn)元素在網(wǎng)頁中移動的效果，以達到動感十足的視覺效果。標簽是一個成對的標簽，其應(yīng)用格式為：標簽有很多屬性(如表2-2所示)，用來定義元素的移動方式。,表2-2 的屬性,【實例2-19】 滾動字幕。滾動字幕我來了,我來了我來了我來了我來了我來了我來了我來了,我來了我來了我來了我來了 在瀏覽器中的顯示如圖2-19所示。,圖2-19 滾動字幕,2.5.3 嵌入背景音樂標簽用來設(shè)

16、置網(wǎng)頁的背景音樂，但只適用于IE，其設(shè)定的參數(shù)不多。其格式如下： 其中：src=your.mid：設(shè)定midi檔案及路徑，可以是相對地址或絕對地址。聲音文件可以是wav、midi、mp3等類型的。,表格是用于排列內(nèi)容的最佳手段，在html頁面中，絕大多數(shù)頁面都是使用表格進行排版的。,2.6 表 格,表格,行,單元格,本節(jié)知識點HTML表格表格結(jié)構(gòu)2.6.1 表格的基本結(jié)構(gòu)表格是用標簽定義的。表格被劃分為行(使用標簽)，每行又被劃分為數(shù)據(jù)單元格(使用標簽)。td表示“表格數(shù)據(jù)”(table data)，即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖像、列表、段落、表單、水平線、表格等。表格標記如

17、表2-3所示。,表2-3 表格標記,【實例2-20】 一個簡單的表格。一個簡單的表格,行1，列1行1，列2行2，列1行2，列2 在瀏覽器中的顯示如圖2-20所示。,圖2-20 一個簡單的表格,2.6.2 表格的標簽1表格標簽的屬性表格標簽有很多屬性，最常用的屬性如表2-4所示。,表2-4 表格標簽的屬性,【實例2-21】 表格標簽的屬性。表格標簽的屬性, 第1行中的第1列 第1行中的第2列 第1行中的第3列 第2行中的第1列 第2行中的第2列 第2行中的第3列, 在瀏覽器中的顯示如圖2-21所示。,圖2-21 表格標簽的屬性,2表格的邊框顯示狀態(tài)frame表格的邊框分別有上邊框、下邊框、左邊框

18、和右邊框。這四個邊框都可以設(shè)置為顯示或隱藏狀態(tài)。表格的邊框顯示狀態(tài)frame值的語法格式如下：frame值的設(shè)定如表2-5所示。,表2-5 表格的邊框顯示狀態(tài)frame值的設(shè)定,【實例2-22】 表格邊框的顯示狀態(tài)。表格邊框的顯示狀態(tài),姓名性別年齡專業(yè)張三男,20計算機在瀏覽器中的顯示如圖2-22所示。,圖2-22 表格邊框的顯示狀態(tài),3設(shè)置分隔線的顯示狀態(tài)rules分隔線的顯示狀態(tài)rules的語法格式如下： rules值的設(shè)定如表2-6所示。,表2-6 分隔線的顯示狀態(tài)rules值的設(shè)定,【實例2-23】 設(shè)置分隔線的顯示狀態(tài)。設(shè)置分隔線的顯示狀態(tài),姓名性別年齡專業(yè)李四女19計算機,姓名性別

19、年齡專業(yè),李四女19計算機在瀏覽器中的顯示如圖2-23所示。,圖2-23 設(shè)置分隔線的顯示狀態(tài),4表格中空白單元格的顯示【實例2-24】 表格中空白單元格的顯示。表格中空白單元格的顯示,行 1， 列 1行 1， 列 2行 2， 列 1 在瀏覽器中的顯示如圖2-24所示。,圖2-24 表格中空白單元格的顯示,2.6.3 表格中單元格的設(shè)定【實例2-25】 跨多行跨多列的單元格。跨多行跨多列的單元格table border=10 width=80% align=center height=150 background=././imge/b0024.gif,bordercolorlight=#999

20、9FF bordercolordark=#9900CC學生基本信息成績姓名性別專業(yè)課程分數(shù),張三男計算機程序設(shè)計91,李四女88在瀏覽器中的顯示如圖2-25所示。,圖2-25 跨多行跨多列的單元格,2.6.4 表格內(nèi)文字的對齊/布局 【實例2-26】 表格中文字的對齊。表格中文字的對齊,居左居中居右 a b c 在瀏覽器中的顯示如圖2-26所示。,圖2-26 表格中文字的對齊,2.6.6 表格的嵌套 【實例2-27】 表格嵌套。表格嵌套,網(wǎng)頁標志廣告,標題欄1標題欄2標題欄3標題欄4,標題欄5標題欄6標題欄7標題欄8,標題欄9第六單元,第一單元第二單元第三單元,第四單元第五單元,在瀏覽器中的顯

21、示如圖2-27所示。,圖2-27 表格嵌套,什么是框架如果網(wǎng)頁的各部分為相互獨立的網(wǎng)頁，又由一個網(wǎng)頁將這些分開的網(wǎng)頁組成一個完整的網(wǎng)頁，顯示于瀏覽者的瀏覽器中，重復(fù)出現(xiàn)的內(nèi)容被固定下來，每次瀏覽者發(fā)出對頁面的請求時，只下載發(fā)生變化的框架的頁面，其它子頁面保持不變，必然會給瀏覽者帶來方便，節(jié)約時間。框架的作用就是把瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁。使用框架可以非常方便地完成導(dǎo)航工作，而且各個框架之間決不存在干擾問題，所以框架技術(shù)一直普遍應(yīng)用于頁面導(dǎo)航。,2.7 框 架,使用框架網(wǎng)頁最主要的目的是創(chuàng)建鏈接的結(jié)構(gòu)。導(dǎo)航條被放置于一個框架之中，可以單擊導(dǎo)航條向服務(wù)器請求網(wǎng)頁，

22、鏈接的網(wǎng)頁出現(xiàn)在另外的框架中，而導(dǎo)航欄所在的網(wǎng)頁不發(fā)生變化。這就好比是看電視時使用遙控器，電視畫面出現(xiàn)在電視機中。不管顯示在電視中的頻道發(fā)生怎樣的變化，手中的遙控器不會變化。,同時框架網(wǎng)頁還可以免除瀏覽器來回滾動窗口。如果網(wǎng)頁中的內(nèi)容部分很長，瀏覽者拖動滾動條到了頁面底部后要切換到別的頁面，可以不必再拖動滾動條返回頁面頂部，因為導(dǎo)航條在另外的框架中，并不受內(nèi)容框架的影響。,框架主要包括兩個部分，一個是框架集，另一個就是框架。框架集是在一個文檔內(nèi)定義的一組框架結(jié)構(gòu)的html網(wǎng)頁?？蚣芗x了在一個窗口中顯示的框架數(shù)、框架的尺寸、載入到框架的網(wǎng)頁等。而框架則是指在網(wǎng)頁上定義的一個顯示區(qū)域。,本節(jié)知

23、識點框架標記框架應(yīng)用是個單標簽，標簽要放在框架集frameset中，設(shè)置了幾個子窗口就必須對應(yīng)幾個標簽，而且每一個標簽內(nèi)還必須設(shè)定一個網(wǎng)頁文件(src=*.html)，其常用屬性如表2-7所示。,2.7 框 架,表2-7 常用屬性,框架主要的分割方式有以下三種：左右分割窗口上下分割窗口嵌套分割窗口,2.7.1 窗口的左右設(shè)定【實例2-28】 窗口的左右設(shè)定。首先新建一個文件夾，然后做三個要放到子窗口中的頁面：實例2-1.htm、實例2-2.htm和實例2-3.htm。,表示左邊框架占整個瀏覽器的80%，而右邊占20%；2個值加起來正好到100%， *代表1份 cols=“30%，*”表示左邊框架占整個瀏覽器的30%，而右邊占70%；cols=“*，2*，3*”表示左邊框架占六分之一，中間的占六分之二也就是三分之一，右邊則二分之一；cols=“80，*，70”表示左邊和右邊框架占整個瀏覽器的80和70像素，而中間的則占剩余的全部 ；,在瀏覽器中的顯示如圖2-28所示。,圖2-28 窗口的左右設(shè)定,2.7.2 子窗口的上下設(shè)定【實