1、超文本標記語言第1頁，共74頁，2022年，5月20日，10點27分，星期三目 錄3.1 HTML概述3.2 文字與段落標記3.3 列表標記3.4 表格標記3.5 圖像和多媒體標記3.6 超鏈接標記3.7 表單標記3.8 框架標記3.9 本章小結3.10 習題第2頁，共74頁，2022年，5月20日，10點27分，星期三3.1 HTML概述3.1.1 HTML的基本概念1.HTML介紹 HTML是Hyper Text Markup Language（超文本標記語言）的縮寫，它是構成Web頁面的基本元素，它是一種規范，一種標準，幾乎所有的網頁都是以HTML格式書寫的。 HTML不是一種編程語言，

2、而是一種描述性的標記語言，它通過標識符來標識網頁中內容的顯示方式，比如圖片的顯示尺寸、文字的大小、顏色、字體等。而WWW瀏覽器的功能就是對這些標記進行解釋，按要求顯示出文字、圖像、動畫、媒體等網頁內容。第3頁，共74頁，2022年，5月20日，10點27分，星期三HTML語言主要功能格式化文本 創建列表 建立表格 插入圖片 加入多媒體 添加交互式表單 第4頁，共74頁，2022年，5月20日，10點27分，星期三2.標記符 標記符又稱標簽，用來控制網頁內容顯示效果。它在使用時必須用“”括起來。絕大多數標記符都是成對出現的，包括開始標記符和結束標記符。標記符是不區分大小寫的，但通常約定標記符使用

3、大寫字母，這有利于HTML文檔的維護，其格式為：受影響的內容第5頁，共74頁，2022年，5月20日，10點27分，星期三3.標記符的屬性 標記符僅僅用來標識所顯示的內容，但如何控制這些內容，這就需要在標記符后面加上相關的屬性來實現，屬性是用來描述標記符標識對象的特征。其格式為： 受影響的內容 例如：屬性示例 第6頁，共74頁，2022年，5月20日，10點27分，星期三3.1.2 HTML的基本結構 HTML網頁文件主要由文件頭和文件體兩部分內容構成。HTML文件開始 文件頭開始 文件頭 文件頭結束 文件體開始 文件體 文件體結束HTML文件結束HTML網頁的基本結構 第7頁，共74頁，20

4、22年，5月20日，10點27分，星期三1.HTML文件標記符 和標記符放在網頁文檔的最外層，表示這對標記符之間的內容是HTML文件。處于文件的最前端，表示HTML文件的開始，即瀏覽器從開始解釋，而則位于文件的最后一行，這表示這一整份的文檔都是HTML語法的文檔。2.HEAD文件頭標記符 和是HTML文件頭標記符，它用來說明文檔的整體信息，所標記的內容并不會出現在WWW瀏覽器所看到的窗體中。HEAD通常與某些標記符一起使用。第8頁，共74頁，2022年，5月20日，10點27分，星期三3.BODY文件體標記符 是HTML文件的主體標記符。網頁正文中的所有內容包括文字、表格、圖像、聲音和動畫等都

5、包含在這對標記符之間，它的格式為： bgcolor：標識HTML文檔的背景顏色，默認設置為白色。 background：設置HTML文檔的背景圖片，可以使用的圖片格式為GIF，JPG等。 text：標識HTML文檔的正文文字顏色，它定義的顏色將應用于整篇文檔。 超級鏈接顏色：link、vlink、alink分別控制普通超級鏈接、訪問過的超級鏈接、當前活動超級鏈接的顏色。（5）topmargin和leftmargin：設置網頁主體內容距離網頁頂端和左端的距離。第9頁，共74頁，2022年，5月20日，10點27分，星期三4.第一個網頁【實例3-1】HTML基本結構網頁 my first page

6、 This is my first homepage! 第10頁，共74頁，2022年，5月20日，10點27分，星期三3.1.3 HTML的基本語法規則（1）HTML文件以純文本形式存放，擴展名為“.HTM”或“.HTML”。如果系統為UNIX系統，則擴展名必須為“.HTML”。（2）HTML不區分大小寫，例如和是相同的。（3）多數HTML標記可以嵌套，但不可以交叉。（4）HTML文件一行可以寫多個標記，一個標記也可以分多行書寫，不用任何續行符號。第11頁，共74頁，2022年，5月20日，10點27分，星期三（5）HTML源文件中的換行、回車符和多個連續空格在顯示效果中是無效的。（6）網頁

7、中所有的顯示內容都應該受限于一個或多個標記，不應有游離于標記之外的文字或圖像等，以免產生錯誤。（7）所有用到的標點符號應使用英文半角狀態下的標點符號，否則將會出現語法錯誤，但是字符串中的標點符號除外。第12頁，共74頁，2022年，5月20日，10點27分，星期三3.2.1 標題字標記功能：用于定義文章內章節標題的顯示格式，并且標題字會單獨成行。格式： 標題文字 屬性：n用來指定標題文字字號的大小。n可以取 16的整數值，數字越小，字號越大。 align用來設置標題在頁面中的對齊方式，取值有：left（左對齊）、center（居中）、right（右對齊）、bottom（位于底端）和top（位于

8、頂端）。3.2 文字與段落標記第13頁，共74頁，2022年，5月20日，10點27分，星期三 設置標題 第1級標題（H1） 第2級標題（H2） 第3級標題（H3） 第4級標題（H4）（居左） 第5級標題（H5）（居中） 第6級標題（H6）（居右） 【實例3-2】使用標題字標記設置標題的大小與對齊方式。第14頁，共74頁，2022年，5月20日，10點27分，星期三3.2.2 文字格式標記 功能：設置網頁中普通文字的顯示效果，如：文字大小、字體、顏色等。 格式：被設置的文字 屬性： face， size， colorface屬性用來設置字體。當文字為漢字時，格式中的“字體”可以為：宋體、幼圓、

9、隸書、楷體_GB2312、黑體、仿宋_GB2312等。當文字為英文時，字體名可以為Times New Roman等約50種字體。size屬性用來設置文字的大小。數字的取值范圍從17，size取1時最小，取7時最大。color屬性用來設置文字的顏色，顏色的取值可以是十六進制的RGB顏色碼或者HTML給定的顏色常量名。第15頁，共74頁，2022年，5月20日，10點27分，星期三【實例3-3】使用標記的size屬性設置文字的大小，face屬性設置字體，color屬性設置文字顏色。 文字格式標記 設置文字的格式 1號字青色 2號字綠色 3號幼圓桔黃色 4號隸書深紅色 5號黑體黃綠色 6號方正舒體水

10、藍色 Welcome My Homepage! 第16頁，共74頁，2022年，5月20日，10點27分，星期三3.2.3 字型標記功能：設置文字的風格，如：加粗、斜體、帶下劃線、上標、下標等。格式：這是一組標記，它們可以單獨使用，也可以混合使用產生復合修飾效果。 第17頁，共74頁，2022年，5月20日，10點27分，星期三【實例3-4】使用字型標記設置文字的風格。 設置字型 黑體 斜體 帶下劃線 粗體并且斜體 帶刪除線 H2o X3 大字體 小字體 第18頁，共74頁，2022年，5月20日，10點27分，星期三3.2.4 段落標記和強制換行標記 在HTML文檔中，無法用多個回車、空格、

11、Tab鍵來調整文檔段落的格式，而要用HTML的標記來強制換行和分段。第19頁，共74頁，2022年，5月20日，10點27分，星期三1.段落標記功能：段落標記定義一個新段落的開始，它不但能使后面的文字換到下一行，還可以使兩段之間多一空行。由于一段的結束意味著新一段的開始，所以使用也可省略結束標記。格式：或 屬性：段落標記的align屬性用來設置段落的對齊方式，其取值可以為left、center或right，分別表示居左、居中、居右，缺省時默認為left。第20頁，共74頁，2022年，5月20日，10點27分，星期三2. 強制換行標記功能：強制換行標記通常單獨出現，放在一行的末尾，可以使后面的

12、文字、圖片、表格等顯示于下一行，但是不會在行與行之間留下空行。格式：文字 注意：通常一個段落標記可以看作是兩個強制換行標記。第21頁，共74頁，2022年，5月20日，10點27分，星期三【實例3-5】段落標記與強制換行標記的使用。 段落標記與強制換行標記的使用 段落標記 段落標記 強制換行標記 強制換行標記 第22頁，共74頁，2022年，5月20日，10點27分，星期三3.2.5 水平線標記功能：水平線標記可以在頁面中顯示一條水平線，將不同功能的頁面內容分隔開，使之整齊明了。當瀏覽器執行HTML文件中的標記時，會在此處換行，并加入一條水平線段。格式：屬性： align， size， wid

13、th， color。第23頁，共74頁，2022年，5月20日，10點27分，星期三【實例3-6】水平線標記的使用。 水平線段標記的應用 水平線 第24頁，共74頁，2022年，5月20日，10點27分，星期三3.2.6 其它標記1.分區顯示標記功能：分區顯示標記可以使文本塊或一段文字在網頁上：左對齊、居中對齊和右對齊。格式：文本或圖像屬性：屬性align的取值分別為：left、center和right。 第25頁，共74頁，2022年，5月20日，10點27分，星期三2.特殊符號標記 瀏覽器解釋HTML文件時，首先根據“”來識別HTML標記，然后再確定這兩個符號中的內容是否為HTML標記，如

14、果是HTML標記則按其規則解讀并且顯示輸出。因此，如果要在網頁中顯示“”等一些特殊字符時，就要用其代替字符。第26頁，共74頁，2022年，5月20日，10點27分，星期三3.3.1 無序列表標記功能：無序列表就是項目間并無順序關系，僅僅利用條列來呈現資料，此種無序列表標記，在各條列前面均有一符號以示區隔。格式： 列表項目一 列表項目二 列表項目三 屬性：無序列表使用和表示列表的開始和結束，標記表示每一個列表項目。3.3 列表標記第27頁，共74頁，2022年，5月20日，10點27分，星期三 無序列表標記在中，type屬性的使用 列表項目一 列表項目二 列表項目三 在中，type屬性的使用

15、DISC CIRCLE SQUARE 【實例3-9】無序列表標記的使用。第28頁，共74頁，2022年，5月20日，10點27分，星期三3.3.2 有序列表標記功能：有序列表用來設置有前后順序之分的列表項。格式： 列表項目一 列表項目二 列表項目三屬性：有序列表使用和表示列表的開始和結束，標記表示每一個列表項目。第29頁，共74頁，2022年，5月20日，10點27分，星期三【實例3-10】有序列表標記的使用。 有序列表標記 默認的有序列表 默認的有序列表 第1項 第2項 第3項 第30頁，共74頁，2022年，5月20日，10點27分，星期三3.3.3 自定義列表標記功能：用于需要對列表條目

16、進行簡短說明的場合。格式：列表條目一條目一的說明列表條目二條目二的說明屬性：自定義列表使用和表示列表的開始和結束。標記表示每項自定義條目名稱。標記表示每條自定義條目的說明，自動向右縮進。第31頁，共74頁，2022年，5月20日，10點27分，星期三【實例3-11】自定義列表標記的使用。 自定義列表標記這是一個定義性列表： DL標記符 代表HTML自定義列表。 DT標記符表示每個自定義列表項的標題。 DD標記符 用于描述自定義列表項的內容。 第32頁，共74頁，2022年，5月20日，10點27分，星期三3.4 表格標記 表格在網站開發中應用非常廣泛，用戶可以通過表格方便靈活的排版，目前很多大

17、型網站也都是借助表格排版和頁面布局的。表格可以把相互關聯的信息元素集中定位，使瀏覽者瀏覽頁面時一目了然。因此要制作出優秀的網頁，就應該熟練掌握表格標記。第33頁，共74頁，2022年，5月20日，10點27分，星期三功能：建立基本表格。格式：表格標題表頭一 表頭二表頭n表項一 表項二表項n表項一 表項二表項n第34頁，共74頁，2022年，5月20日，10點27分，星期三屬性：（1）標記用來創建一個表格。（2） 標記表示對表格標題的說明。（3）標記定義行，該標記中間的內容顯示在一行，此標記對只能放在標記之間使用。（4）和標記表示單元格標記，這兩個標記必須嵌套在標記中，成對出現。（5）要創建跨多

18、行、多列的單元格，只需在或中加入ROWSPAN或COLSPAN屬性的屬性值，表明了表格中要跨越的行或列的個數。第35頁，共74頁，2022年，5月20日，10點27分，星期三【實例3-12】表格標記的簡單應用。 表格標記 學生成績表 姓名 課程名稱 成績 蓉蓉 數學 86 妮妮 計算機基礎 90 娜娜 英語 82 第36頁，共74頁，2022年，5月20日，10點27分，星期三3.5 圖像和多媒體標記3.5.1 圖像標記 在網頁中加入適當的圖片可以使網頁豐富多彩，具有更強的吸引力。HTML提供了標記來處理圖像的輸出。功能：在當前位置插入圖像。格式：屬性：src，alt，width，height

19、，border，hspace，Vspace，align。第37頁，共74頁，2022年，5月20日，10點27分，星期三【實例3-14】圖像標記的應用。 圖像標記的應用第38頁，共74頁，2022年，5月20日，10點27分，星期三3.5.2 音頻標記功能：在網頁中加入聲音，聲音文件可以是*.WAV、*.AU、*.MID等。格式：。屬性：src屬性表示聲音文件的存放地址，loop控制播放次數，取-1或者INFINITE時，聲音將一直播放到瀏覽者離開該網頁時為止。 第39頁，共74頁，2022年，5月20日，10點27分，星期三【實例3-15】音頻標記的應用。背景聲音網頁的背景聲音第40頁，共7

20、4頁，2022年，5月20日，10點27分，星期三3.5.3 視頻標記功能：在頁面中放置如SWF動畫（即Flash動畫）、MP3音樂、電影等多種格式的多媒體信息。格式：屬性 ：src，height和width，hidden，autostart，loop 。第41頁，共74頁，2022年，5月20日，10點27分，星期三【實例3-16】視頻標記的應用。 第42頁，共74頁，2022年，5月20日，10點27分，星期三3.6 超鏈接標記 超級鏈接是整個WWW應用的核心和基礎，它可以把頁面一個個鏈接起來，使得網頁的瀏覽非常方便。所以，對超級鏈接的掌握具有特殊的意義。功能：建立超鏈接。格式：顯示的文本

21、或者圖像屬性：href，Target。第43頁，共74頁，2022年，5月20日，10點27分，星期三1.創建指向其它頁面的超鏈接 根據目標文件與當前文件的目錄關系，有6種放法： （1）鏈接到同一目錄內的網頁文件，其格式為： 顯示的文本或者圖像 目標文件名是鏈接所指向的文件，此時URL地址是相對路徑。 （2）鏈接到下一級目錄中的網頁文件，其格式為：顯示的文本或者圖像 此時URL地址是相對路徑。第44頁，共74頁，2022年，5月20日，10點27分，星期三（3）鏈接到上一級目錄中的網頁文件，其格式為： 顯示的文本或者圖像 其中“./”表示退到上一級目錄中，此時URL地址是相對路徑。（4）鏈接到

22、同級目錄中的網頁文件，其格式為： 顯示的文本或者圖像 表示先退到上一級目錄中，然后再進入到目標文件所在的目錄，此時URL地址是相對路徑。第45頁，共74頁，2022年，5月20日，10點27分，星期三（5）鏈接到Internet上的網頁，其格式為：顯示的文本或者圖像網址采用絕對路徑，即使用網絡上一個完整的路徑名稱。（6）E-mail超級鏈接 ，其格式為：指向E-mail地址的超級鏈接第46頁，共74頁，2022年，5月20日，10點27分，星期三2.創建指向本頁面中的超鏈接 要在當前頁面內實現超鏈接，需要定義兩個標記：一個為超鏈接標記，另一個為書簽標記。 超鏈接標記的格式：顯示的文本或者圖像

23、書簽標記的格式為： 目標文本附近的字符串 功能：單擊顯示的文本或者圖像，將跳轉到“記號名”開始的文本。第47頁，共74頁，2022年，5月20日，10點27分，星期三3.7 表單標記 表單是實現動態網頁的一種主要的外在形式，是HTML頁面與瀏覽器端實現交互的重要手段。它的主要功能是收集信息，當單擊表單中的提交按紐時，輸入在表單中的信息就會從客戶端的瀏覽器上傳到服務器中，然后由服務器中的有關表單處理程序（ASP、CGI等程序）進行處理，處理后再將用戶所需信息傳送到客戶端瀏覽器上，這樣網頁就具有了交互性。在這里只介紹如何使用HTML的表單標記來設計表單。第48頁，共74頁，2022年，5月20日，

24、10點27分，星期三1.標記功能：標記用來創建一個表單，即定義表單的開始與結束位置。格式：。屬性：name ，action，method第49頁，共74頁，2022年，5月20日，10點27分，星期三2.標記功能：輸入標記是表單中最常用的標記之一。該標記用來定義一個輸入區，可在其中輸入信息，此標記必須放在標記對之間。格式：。屬性：name屬性設置輸入區域的名稱，服務器就是通過name來獲得該區域數據的。 type屬性設置輸入區域的類型 第50頁，共74頁，2022年，5月20日，10點27分，星期三表單輸入標記示例用戶信息調查姓名：網址：密碼：確認密碼：請上傳你的照片：請選擇你喜歡的音樂：搖滾

25、樂爵士樂流行樂【實例3-19】表單輸入標記示例。第51頁，共74頁，2022年，5月20日，10點27分，星期三請選擇你居住的城市：北京上海南京第52頁，共74頁，2022年，5月20日，10點27分，星期三3. 和標記功能： 標記用來創建一個下拉列表框或可以復選的列表框，它必須放在標記對之間。標記用來指定菜單和列表中的一個選項，它放在標記對之間。格式：選項一選項二。屬性：name,multiple,value第53頁，共74頁，2022年，5月20日，10點27分，星期三表單菜單和列表標記示例用戶信息調查請選擇你喜歡的體育項目：足球籃球乒乓球網球【實例3-20】表單菜單和列表標記的應用。第5

26、4頁，共74頁，2022年，5月20日，10點27分，星期三請選擇你居住的城市：北京上海南京廣州第55頁，共74頁，2022年，5月20日，10點27分，星期三4. 標記功能：用來創建一個可以輸入多行的文本框，可以在其中輸入更多的文本，此標記放在標記對之間。格式：。屬性：name屬性設置文本框的名稱。Rows屬性設置文本框的行數，以字符數為單位。cols屬性設置文本框的列數，以字符數為單位。第56頁，共74頁，2022年，5月20日，10點27分，星期三表單文本框標記示例用戶信息調查請留言：【實例3-21】表單文本框標記的應用。第57頁，共74頁，2022年，5月20日，10點27分，星期三

27、框架的作用就是把瀏覽器窗口劃分成幾個子窗口，每個子窗口可以調入各自的HTML文檔形成不同的頁面，也可以按照一定的方式組合在一起完成特殊的效果。框架通常的使用方法是在一個框架中放置目錄并設置鏈接，點擊鏈接，內容顯示在另一個框架中；或者有時一個網頁的不同部分由不同的人員制作，可以每人完成一個子窗口，然后利用框架技術將它們合并在一起形成一個完整的頁面。 3.8 框架標記第58頁，共74頁，2022年，5月20日，10點27分，星期三1. 標記功能：定義分割窗口，即定義主文檔中有幾個框架并且各個框架是如何排列的。格式：。屬性：cols屬性與rows屬性分別表示左右和上下分割窗口（用“，”分割，valu

28、e為定義各個框架的寬度值，單位可以是百分比、絕對像素值或星號(“*”)，其中星號表示剩余部分）。 framespacing：設定框架集的邊框寬度。 bordercolor：設定框架集邊框顏色。第59頁，共74頁，2022年，5月20日，10點27分，星期三2. 標記功能：定義某一個具體的框架。格式：。屬性：src屬性設置框架顯示的文件路徑。 Name屬性定義此框架的名字。 scrolling屬性設定滾動條是否顯示。 noresize屬性禁止改變框架的尺寸大小。第60頁，共74頁，2022年，5月20日，10點27分，星期三3. 標記 標記對放在標記對之間，用來在那些不支持框架的瀏覽器中顯示文本

29、或圖像信息。第61頁，共74頁，2022年，5月20日，10點27分，星期三 HTML語言是網頁制作的一種規范，一種標準，是網站開發和網頁設計的最基本知識，幾乎所有的網頁都是以HTML規范書寫的，它通過標識符來標記網頁的各個部分。 本章首先介紹了HTML語言的基本概念、基本結構和基本語法規則。然后重點介紹了使用HTML制作網頁的各種標記的使用方法，主要包括文字與段落標記、列表標記、表格標記、多媒體標記、超鏈接標記、表單標記和框架標記。熟練掌握這些標記的使用，將對網頁的設計打下良好的基礎。3.9 本章小結第62頁，共74頁，2022年，5月20日，10點27分，星期三3.10 習題一、填空題1.HTML不是一種編程語言，而是一種描述性的標記語言，它通過_來標識網頁中內容