第二講HTML語(yǔ)言

1、HTML語(yǔ)言語(yǔ)言HTMLHTML文檔基本架構(gòu)文檔基本架構(gòu) 網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)標(biāo)題 HTML 語(yǔ)言語(yǔ)言 說(shuō)明：說(shuō)明： 元素是元素是HTML文檔的最高層元素。文檔的最高層元素。 元素用來(lái)標(biāo)識(shí)網(wǎng)頁(yè)的頭部。元素用來(lái)標(biāo)識(shí)網(wǎng)頁(yè)的頭部。 元素用來(lái)指定瀏覽器所要顯示的標(biāo)題文字。元素用來(lái)指定瀏覽器所要顯示的標(biāo)題文字。 元素用來(lái)標(biāo)識(shí)元素用來(lái)標(biāo)識(shí)HTML文檔的主體部分文檔的主體部分。 HTMLHTML文檔基本架構(gòu)文檔基本架構(gòu)頭部標(biāo)記頭部標(biāo)記 和和是是HTML的頭部標(biāo)記，其中的頭部標(biāo)記，其中主要包括對(duì)當(dāng)前網(wǎng)頁(yè)的一些基本描述信息，例如網(wǎng)主要包括對(duì)當(dāng)前網(wǎng)頁(yè)的一些基本描述信息，例如網(wǎng)頁(yè)標(biāo)題、一些說(shuō)明信息和搜索關(guān)鍵字等。頁(yè)標(biāo)題、一

2、些說(shuō)明信息和搜索關(guān)鍵字等。 1網(wǎng)頁(yè)標(biāo)題標(biāo)記網(wǎng)頁(yè)標(biāo)題標(biāo)記 2元信息標(biāo)記元信息標(biāo)記格式：格式： 標(biāo)題文字標(biāo)題文字 示例：示例： 訪客留言簿訪客留言簿標(biāo)記是標(biāo)記是HTML頭部標(biāo)記中常見(jiàn)的元信息標(biāo)頭部標(biāo)記中常見(jiàn)的元信息標(biāo)記，可重復(fù)出現(xiàn)在頭部標(biāo)記中記，可重復(fù)出現(xiàn)在頭部標(biāo)記中. 作用：作用： 指明本網(wǎng)頁(yè)的作者、網(wǎng)頁(yè)制作工具、所包含的指明本網(wǎng)頁(yè)的作者、網(wǎng)頁(yè)制作工具、所包含的的關(guān)鍵字，以及其他一些描述網(wǎng)頁(yè)信息。的關(guān)鍵字，以及其他一些描述網(wǎng)頁(yè)信息。 創(chuàng)建創(chuàng)建HTTP響應(yīng)頭，以便讓瀏覽器知道如何去響應(yīng)頭，以便讓瀏覽器知道如何去處理這個(gè)網(wǎng)頁(yè)，例如這個(gè)網(wǎng)頁(yè)什么時(shí)候過(guò)期，隔多處理這個(gè)網(wǎng)頁(yè)，例如這個(gè)網(wǎng)頁(yè)什么時(shí)候過(guò)期，隔多

3、少時(shí)間自動(dòng)刷新等。少時(shí)間自動(dòng)刷新等。標(biāo)志：標(biāo)志： 說(shuō)明：說(shuō)明： 是是HTML文檔的主體標(biāo)記，其內(nèi)包括了將在網(wǎng)文檔的主體標(biāo)記，其內(nèi)包括了將在網(wǎng)頁(yè)中顯示的文字、圖片、表格、鏈接、表單等所頁(yè)中顯示的文字、圖片、表格、鏈接、表單等所有內(nèi)容。有內(nèi)容。1標(biāo)記的屬性及其說(shuō)明標(biāo)記的屬性及其說(shuō)明屬屬 性性描描 述述TEXT設(shè)定頁(yè)面文字的顏色BGCOLOR設(shè)定頁(yè)面背景的顏色BACKGROUND設(shè)定頁(yè)面背景的圖像BGPROPERTIES設(shè)定頁(yè)面背景圖像是否隨頁(yè)面的滾動(dòng)而動(dòng)LINK設(shè)定默認(rèn)的鏈接顏色ALINK設(shè)定鼠標(biāo)靠近時(shí)的鏈接顏色VLINK設(shè)定已訪問(wèn)過(guò)的鏈接顏色TOPMARGIN設(shè)定頁(yè)面上邊與瀏覽器窗口頂端的距離L

4、EFTMARGIN設(shè)定頁(yè)面左邊與瀏覽器窗口左端的距離1標(biāo)題文字標(biāo)記標(biāo)題文字標(biāo)記 標(biāo)題文字標(biāo)題文字 2分段標(biāo)記分段標(biāo)記 文字文字 說(shuō)明：分段標(biāo)記不僅使得后面的文字換行輸出，還將說(shuō)明：分段標(biāo)記不僅使得后面的文字換行輸出，還將在兩個(gè)段落之間產(chǎn)生一個(gè)空行。分段結(jié)束標(biāo)志在兩個(gè)段落之間產(chǎn)生一個(gè)空行。分段結(jié)束標(biāo)志 可以省略?？梢允÷?。3換行標(biāo)記換行標(biāo)記 說(shuō)明：可以連續(xù)使用多個(gè)說(shuō)明：可以連續(xù)使用多個(gè) 標(biāo)記來(lái)產(chǎn)生多個(gè)空行標(biāo)記來(lái)產(chǎn)生多個(gè)空行4橫線標(biāo)記橫線標(biāo)記5文本縮排標(biāo)記文本縮排標(biāo)記 文字文字 1字體標(biāo)記字體標(biāo)記格式：格式：文文字字2文字修飾標(biāo)記文字修飾標(biāo)記標(biāo)標(biāo) 記記描描 述述將文字設(shè)置為粗體字將文字設(shè)置為斜體字

5、設(shè)置為帶有下劃線的文字設(shè)置為位于右上角的上標(biāo)文字設(shè)置為位于右下角的下標(biāo)文字設(shè)置為帶有刪除線的文字標(biāo)明其間的文字為地址內(nèi)容強(qiáng)調(diào)其間的文字（通常為斜體）強(qiáng)調(diào)其間的文字（通常為黑體）特殊字符標(biāo)記特殊字符標(biāo)記字字 符符對(duì)應(yīng)字符標(biāo)記對(duì)應(yīng)字符標(biāo)記對(duì)應(yīng)十進(jìn)制編碼標(biāo)記對(duì)應(yīng)十進(jìn)制編碼標(biāo)記說(shuō)說(shuō) 明明>>大于符號(hào)&&AND符號(hào)""雙引號(hào)   空格··中點(diǎn)§§分節(jié)符號(hào)©©版權(quán)符

6、號(hào)®®注冊(cè)符號(hào)1有序列表標(biāo)記有序列表標(biāo)記格式：格式： 列表項(xiàng)列表項(xiàng)1 列表項(xiàng)列表項(xiàng)2 列表項(xiàng)列表項(xiàng)n 2無(wú)序列表標(biāo)記無(wú)序列表標(biāo)記格式：格式： 列表項(xiàng)列表項(xiàng)1 列表項(xiàng)列表項(xiàng)2 列表項(xiàng)列表項(xiàng)n3HTML自定義列表自定義列表格式：格式： 列表項(xiàng)列表項(xiàng)1 說(shuō)明說(shuō)明1 列表項(xiàng)列表項(xiàng)n 說(shuō)明說(shuō)明n格式：格式：格式：格式：用作鏈接的文字或圖像用作鏈接的文字或圖像回到回到id為為top 的標(biāo)志符處的標(biāo)志符處給我寫(xiě)郵件給我寫(xiě)郵件打開(kāi)打開(kāi)1網(wǎng)頁(yè)中的表格網(wǎng)頁(yè)中的表格 網(wǎng)頁(yè)中經(jīng)常需要使用各種表格元素，設(shè)計(jì)網(wǎng)頁(yè)中經(jīng)常需要使用各種表格元素，設(shè)計(jì)者不僅可以通過(guò)表格來(lái)輸出諸如者不僅可以通過(guò)表

7、格來(lái)輸出諸如“商品表商品表”或或“員工表員工表”中的各行信息，更重要的是可以利中的各行信息，更重要的是可以利用表格來(lái)方便地控制網(wǎng)頁(yè)中各種元素的布局，用表格來(lái)方便地控制網(wǎng)頁(yè)中各種元素的布局，以便整齊地安排網(wǎng)頁(yè)中眾多的文字和圖片等。以便整齊地安排網(wǎng)頁(yè)中眾多的文字和圖片等。 Border 控制表格邊框的寬度控制表格邊框的寬度Cellspacing 控制單元格邊框到表格邊框的距離控制單元格邊框到表格邊框的距離Cellpadding 控制單元格內(nèi)文字到單元格邊框的距離控制單元格內(nèi)文字到單元格邊框的距離Width 控制表格的寬度控制表格的寬度height 控制表格的高度控制表格的高度bocolor 控制表

8、格的背景顏色控制表格的背景顏色Align 控制整個(gè)表格水平對(duì)齊方式控制整個(gè)表格水平對(duì)齊方式Height 在在中，控制行高中，控制行高bordercolor 表格某行的外框顏色表格某行的外框顏色bocolor 控制單元格的背景顏色控制單元格的背景顏色Align 控制單元格水平對(duì)齊方式控制單元格水平對(duì)齊方式Valign 控制單元格在垂直方向的對(duì)齊方式控制單元格在垂直方向的對(duì)齊方式bordercolor 單元格邊框顏色單元格邊框顏色colspan 單元格合并右方單元格數(shù)單元格合并右方單元格數(shù)rowspan 單元格合并下方單元格數(shù)單元格合并下方單元格數(shù)bocolor 單元格的背景顏色單元格的背景顏色A

9、lign，Valign 控制整個(gè)表格水平、垂直對(duì)齊方式控制整個(gè)表格水平、垂直對(duì)齊方式案例案例 用表格布局用表格布局網(wǎng)頁(yè)中的框架網(wǎng)頁(yè)中的框架 框架元素用來(lái)將整個(gè)瀏覽器窗口劃分為多個(gè)不框架元素用來(lái)將整個(gè)瀏覽器窗口劃分為多個(gè)不同的矩形區(qū)域，在一個(gè)區(qū)域內(nèi)可以獨(dú)立顯示與區(qū)域同的矩形區(qū)域，在一個(gè)區(qū)域內(nèi)可以獨(dú)立顯示與區(qū)域之外不同的之外不同的HTML文檔內(nèi)容。文檔內(nèi)容。 框架元素的定義需要用到框架集標(biāo)記和框架標(biāo)框架元素的定義需要用到框架集標(biāo)記和框架標(biāo)記，框架集標(biāo)記記，框架集標(biāo)記用來(lái)定義一個(gè)窗口用來(lái)定義一個(gè)窗口內(nèi) 的 框 架 數(shù) 、 各 框 架 的 尺 寸 等 ， 框 架 標(biāo) 記內(nèi) 的 框 架 數(shù) 、 各 框

10、架 的 尺 寸 等 ， 框 架 標(biāo) 記則用來(lái)具體定義某個(gè)框架的名稱、在該則用來(lái)具體定義某個(gè)框架的名稱、在該框架中顯示的框架中顯示的HTML文檔等。文檔等。 表單的英文名稱為表單的英文名稱為form ，用于在網(wǎng)頁(yè)中為，用于在網(wǎng)頁(yè)中為瀏覽者提供一個(gè)輸入各種信息的界面，以便瀏覽者提供一個(gè)輸入各種信息的界面，以便Web應(yīng)用程序和應(yīng)用程序和Web數(shù)據(jù)庫(kù)獲取這些信息。大數(shù)據(jù)庫(kù)獲取這些信息。大多數(shù)網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)都需要使用表單元素，例多數(shù)網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)都需要使用表單元素，例如通過(guò)表單來(lái)完成用戶注冊(cè)信息的輸入或者商如通過(guò)表單來(lái)完成用戶注冊(cè)信息的輸入或者商品訂購(gòu)信息的輸入等。品訂購(gòu)信息的輸入等。 說(shuō)明：說(shuō)明： 標(biāo)

11、記中可以有標(biāo)記中可以有6個(gè)屬性，分別為：個(gè)屬性，分別為：type、name、value、size、maxlength和和checked。 其中其中type屬性用來(lái)指定表單域的類型，其值允許有：屬性用來(lái)指定表單域的類型，其值允許有：text（文本框）、（文本框）、password（密碼框）、（密碼框）、button（普（普通按鈕）、通按鈕）、image（圖片按鈕）、（圖片按鈕）、file（文件框）、（文件框）、raido（單選按鈕）、（單選按鈕）、checkbox（復(fù)選框）、（復(fù)選框）、submit（提交按鈕）、（提交按鈕）、reset（重置按鈕）、（重置按鈕）、hidden（隱藏）（隱藏）等多

12、種表單域類型。等多種表單域類型。格式格式 文字文字 文字文字 現(xiàn)有用戶注冊(cè)會(huì)員的需求，需要用戶輸入以下數(shù)據(jù)：現(xiàn)有用戶注冊(cè)會(huì)員的需求，需要用戶輸入以下數(shù)據(jù)：用戶名（長(zhǎng)度用戶名（長(zhǎng)度620），密碼，郵箱，性別（需選），密碼，郵箱，性別（需選擇），選擇喜好（游戲、軟件、電影、運(yùn)動(dòng)），個(gè)擇），選擇喜好（游戲、軟件、電影、運(yùn)動(dòng)），個(gè)人介紹，同時(shí)表單需要提交按鈕和重置按鈕。人介紹，同時(shí)表單需要提交按鈕和重置按鈕?，F(xiàn)要求畫(huà)出此表單，并用表格來(lái)布局?，F(xiàn)要求畫(huà)出此表單，并用表格來(lái)布局。 HTML元素序列元素序列 在在HTML文檔中除了可用各種標(biāo)記對(duì)文字或文檔中除了可用各種標(biāo)記對(duì)文字或段落等元素分別設(shè)置格式外，還

13、可應(yīng)用樣式來(lái)進(jìn)段落等元素分別設(shè)置格式外，還可應(yīng)用樣式來(lái)進(jìn)行格式設(shè)置。在設(shè)計(jì)行格式設(shè)置。在設(shè)計(jì)HTML網(wǎng)頁(yè)時(shí)，可采用下列網(wǎng)頁(yè)時(shí)，可采用下列方式定義和應(yīng)用樣式：方式定義和應(yīng)用樣式： 在文檔頭部定義樣式塊在文檔頭部定義樣式塊 在文檔主體部分對(duì)個(gè)別元素（如段落、表格單元在文檔主體部分對(duì)個(gè)別元素（如段落、表格單元等）單獨(dú)定義樣式。等）單獨(dú)定義樣式。 使用外部樣式表或稱層疊樣式表使用外部樣式表或稱層疊樣式表CSS（Cascading Style Sheets）。）。1格式：格式： HTML標(biāo)記標(biāo)記屬性名稱：屬性值；屬性名稱：屬性值屬性名稱：屬性值；屬性名稱：屬性值 HTML標(biāo)記標(biāo)記屬性名稱：屬性值；屬性名

14、稱：屬性值屬性名稱：屬性值；屬性名稱：屬性值 2樣式塊中的各種屬性樣式塊中的各種屬性屬屬 性性說(shuō)說(shuō) 明明取取 值值Font-Size字體大小Points、 Inches、 Pixels、 CentimeterFont-Family字體FontNameFont-Weight字體粗細(xì)Lighter、 Medium、 BoldFont-Style斜體Normal、 ItalicLine-Height行距Points、 Inches、 Pixels、 CentimeterColor文本顏色ColorName、 RGB tripletText-Decoration文本修飾效果None、 Underlin

15、e、 Italic、 Line-ThroughText-Aligh文本對(duì)齊Left、 Right、 CenterText-Indent文本縮進(jìn)Points、 Inches、 Pixels、 CentimeterMargin-Left頁(yè)面左邊界Points、 Inches、 Pixels、 CentimeterMargin-Right頁(yè)面右邊界Points、 Inches、 Pixels、 CentimeterBackground背景圖片或顏色URL、 Color-Name、 RGB triplet對(duì)一些元素單獨(dú)設(shè)置對(duì)一些元素單獨(dú)設(shè)置style屬性示例：屬性示例： 這這是一段紅色粗體文字是一段紅

16、色粗體文字這是這是一個(gè)棕色宋體字標(biāo)題一個(gè)棕色宋體字標(biāo)題163網(wǎng)站網(wǎng)站 姓名姓名 級(jí)聯(lián)樣式表級(jí)聯(lián)樣式表CSS實(shí)際上是用來(lái)規(guī)范實(shí)際上是用來(lái)規(guī)范HTML文文檔格式的樣式定義文件，可統(tǒng)一定義網(wǎng)站中多個(gè)檔格式的樣式定義文件，可統(tǒng)一定義網(wǎng)站中多個(gè)網(wǎng)頁(yè)內(nèi)容的顯示格式。此種定義方式不僅能夠大網(wǎng)頁(yè)內(nèi)容的顯示格式。此種定義方式不僅能夠大大減少大減少THML文檔中各種重復(fù)標(biāo)記的數(shù)目，而且文檔中各種重復(fù)標(biāo)記的數(shù)目，而且有利于整個(gè)網(wǎng)站頁(yè)面風(fēng)格的統(tǒng)一。此外，使用有利于整個(gè)網(wǎng)站頁(yè)面風(fēng)格的統(tǒng)一。此外，使用CSS可將網(wǎng)頁(yè)要展示的內(nèi)容與其樣式定義分開(kāi)，可將網(wǎng)頁(yè)要展示的內(nèi)容與其樣式定義分開(kāi)，即把網(wǎng)頁(yè)的外觀設(shè)計(jì)從網(wǎng)頁(yè)內(nèi)容中獨(dú)立出來(lái)集中即把網(wǎng)頁(yè)的外觀設(shè)計(jì)從網(wǎng)頁(yè)內(nèi)容中獨(dú)立出來(lái)集中管理。這樣，當(dāng)需要改變網(wǎng)頁(yè)外觀時(shí)，