第二講HTML語言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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