1、第第 二二 章章 2回顧：回顧：v掌握HTML文檔的結構v掌握HTML標記構成及其使用方法v熟練使用超鏈接 制作制作Web頁面的基本編程語言頁面的基本編程語言 一系列標記的集合一系列標記的集合 用用HTML編寫的超文本文檔稱為編寫的超文本文檔稱為HTML文檔。文檔。 手工直接編寫：手工直接編寫：記事本、記事本、EditPlus等，存成等，存成.htm 或或.html文件文件 可視化編輯器可視化編輯器：Dreamweaver、 Frontpage等等 由由Web 服務器實時動態地生成：服務器實時動態地生成：IIS、Tomcat等等4HTML 文檔的結構文檔的結構HTML 部分文檔頭部分包含：網頁

2、標題、網頁說明、CSS樣式、腳本代碼等文檔體部分瀏覽器頁面的顯示內容歡迎進入 HTML 世界這會是一種很有趣的體驗基本結構：運行結果5vHTML 標記的格式組成：元素 - 標識標記屬性 - 描述標記值 - 分配給屬性的內容標記:人(事物) 屬性:性別、頭發、職業值:女性、長頭發、工程師 男性、黃頭發、培訓師6超鏈接：錨記超鏈接：錨記AHREF 指定鏈接目標點的地址或名稱 Hypertext NAME 給鏈接目標點命名texteg.文檔2互聯網部分文檔2的互聯網部分地大網 語法為:7內部鏈接1、到同一網站內的其它網頁的鏈接2、到同一文檔內的其他部分的鏈接外部鏈接到其他網站或服務器上的頁面的鏈接。

3、- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Web站點1Web站點2鏈接類型鏈接類型8鏈接到其他文檔鏈接到其他文檔 使用鏈接 本頁的所有內容都講述關于如何創建到文檔的鏈接 單擊此處查看文檔2 9鏈接到同一文檔的各個部分鏈接到同一文檔的各個部分 使用鏈接 互聯網 HTML簡介 多樣化和統一性 互聯網 互聯網是網絡的網絡。也就是說，計算機網絡可以跨越國家甚至全球的范圍連接到其他網絡。世界上所有的計算機都

4、可以通過TCP/IP傳輸協議綁定在一起。 HTML簡介 超文本標記語言是Web用來創建和識別文檔的標準語言。雖然它不是標準通用標記語言 (SGML) 的子集，但與它有著某種程度上的關聯。SGML是一種文檔格式語言表示方法。 多樣性和統一性 萬事萬物都離不開多樣性和統一性這樣一條基本準則。也就是說，所有的事物都可以融合成一個整體，同時，又保持自己獨特的與眾不同的一面。站點的獨特性恰恰來源于它的一致性。顏色、字體、分欄布局以及其他設計元素應在站點的每個部分都保持一致。 單擊10鏈接到另一文檔中某個特定位置鏈接到另一文檔中某個特定位置 主文檔 互聯網 HTML簡介 多樣性和統一性 單擊11鏈接到另一

5、文檔中某個特定位置鏈接到另一文檔中某個特定位置 副文檔 互聯網 互聯網是網絡的網絡。也就是說，計算機網絡可以跨越國家甚至全球的范圍連接到其他網絡。世界上所有的計算機都可以通過TCP/IP傳輸協議綁定在一起。 HTML簡介 超文本標記語言是Web用來創建和識別文檔的標準語言。雖然它不是標準通用標記語言 (SGML) 的子集，但與它有著某種程度上的關聯。SGML是一種文檔格式語言表示方法。 多樣性和統一性 萬事萬物都離不開多樣性和統一性這樣一條基本準則。也就是說，所有的事物都可以融合成一個整體，同時，又保持自己獨特的與眾不同的一面。站點的獨特性恰恰來源于它的一致性。顏色、字體、分欄布局以及其他設計

6、元素應在站點的每個部分都保持一致。 單擊12鏈接到其他文檔鏈接到其他文檔 使用鏈接 本頁的所有內容講述鏈接到其它網站 地大網 補充：補充：目標顯示方式屬性目標顯示方式屬性-target 用來指定目標窗口的打開方式。包含用來指定目標窗口的打開方式。包含4個取值：個取值：_blank：在新窗口中打開。在新窗口中打開。_parent：在上一級的瀏覽窗口中打開。在上一級的瀏覽窗口中打開。_self：在當前頁面或框架中打開。在當前頁面或框架中打開。_top：在當前瀏覽窗口頁面中打開。在當前瀏覽窗口頁面中打開。v v v v v 文件xv v 14HTML基本標記基本標記標題標記字體標記IMG 圖像標記字

7、符級標記段落級標記容器標記水平線標記列表標記16目標目標使用基本標記使用基本標記在在 HTML 文檔中插入圖像文檔中插入圖像17題目標記題目標記HTML 簡介 HTML 簡介 HTML 簡介 HTML 簡介 HTML 簡介 HTML 簡介 HTML 簡介 可顯示六種大小的標題，即可顯示六種大小的標題，即 H1到到 H6，為最大，為最大， H6為最小為最小 18字符級標記字符級標記 . . . 粗體文本 . . . 下劃線效果 . . . 刪除線效果 . . . /SUP 上標文本 . . . /SUB 下標文本 . . 強調文本. . .用于顯示編程代碼 . . . 用于引用19字符級標記字符

8、級標記字符級標記示例字符級標記示例 圓的面積=pi*r2 水的化學符號：H2O 這是一種很有趣的體驗 20塊引用標記：塊引用標記： 標記標記學習學習HTMLblockquote元素用于以文本塊的形式元素用于以文本塊的形式設置內容格式。設置內容格式。漢普蒂漢普蒂鄧普蒂坐在墻上鄧普蒂坐在墻上漢普蒂漢普蒂鄧普蒂摔了一大跤鄧普蒂摔了一大跤國王所有的馬國王所有的馬和所有的人和所有的人也無法再把漢普蒂也無法再把漢普蒂鄧普蒂拼鄧普蒂拼起來起來請注意，上述內容顯示為一個文本塊。請注意，上述內容顯示為一個文本塊。 可以使用可以使用BLOCKQUOTEBLOCKQUOTE元素顯示文檔中的引用文本。元素顯示文檔中的

9、引用文本。BLOCKQUOTEBLOCKQUOTE用于較用于較長的引用且顯示為縮進式段落。長的引用且顯示為縮進式段落。 21預排版標記：預排版標記： 標記標記學習學習HTML漢普蒂漢普蒂鄧普蒂坐在墻上鄧普蒂坐在墻上 漢普蒂漢普蒂鄧普蒂摔了一大跤鄧普蒂摔了一大跤國王所有的馬國王所有的馬 和所有的人和所有的人也無法再把漢普蒂也無法再把漢普蒂鄧普蒂拼起來鄧普蒂拼起來如果希望文本以預定義的格式顯示，可以使用如果希望文本以預定義的格式顯示，可以使用PREPRE元素。此元素用于定義元素。此元素用于定義文本的格式。文本在瀏覽器中顯示時遵循在文本的格式。文本在瀏覽器中顯示時遵循在HTMLHTML源文檔中定義的

10、格式。源文檔中定義的格式。 22使用使用FONT標記標記歡迎使用歡迎使用HTML我我的第一個的第一個HTML文檔文檔這這將會將會是一種很有趣的是一種很有趣的體驗體驗 FONT標記用于控制文本在網頁上的顯示。可以指定標記用于控制文本在網頁上的顯示。可以指定sizesize（大小）、大小）、colorcolor（顏色）顏色）faceface（字體）字體）stylestyle（樣式）（樣式）等屬性。等屬性。 23補充：關于顏色補充：關于顏色v 顏色值是一個關鍵字或一個RGB格式的數字。v aqua，black， blue，fuchsia, gray，green， lime，maroon，navy，o

11、live， purple，red，silver，teal，white，yellow24v 在 HTML 中對于顏色的定義可以用6位十六進制數。 v 電腦屏幕的色彩是由rgb（紅、綠、藍）三種色光所合成的，通過調整這三個基色就可以調配出其它的顏色。 每2位數代表一種顏色的濃度，三種顏色的順序為紅、綠、藍，00代表顏色濃度最小，FF代表顏色濃度最大。v #000000代表純黑、#FFFFFF代表純白、25d dv 圖中所示是部分顏色的RGB代碼:例：為頁面設置背景色：例：為頁面設置背景色： 26容器（區域控制）標記容器（區域控制）標記、 可以設定多行或跨段落或某一區域的內容樣式；一般只用在一行中設

12、定幾個字的情況。學習學習HTML第第1部分部分元素用于組織元素元素用于組織元素DIV通常用于塊級元素通常用于塊級元素第第2部分部分這是第二部分這是第二部分您覺得有意思嗎？您覺得有意思嗎？第二部分向右對齊。第二部分向右對齊。公共格式公共格式應用于這一部分中的所有元素應用于這一部分中的所有元素 27列表列表v無序列表v有序列表v定義列表28無序列表無序列表學習 HTML星期一星期一星期二星期二星期三星期三星期四星期四星期五星期五無序列表是一種無序列表是一種“項目符號列表項目符號列表”。其中的項目都帶有項目符號前綴。該。其中的項目都帶有項目符號前綴。該列表包含在無序列表標記列表包含在無序列表標記 .

13、 UL . 內。列表中的每個項目都使用內。列表中的每個項目都使用列表標記列表標記 LI進行標記，其中進行標記，其中LILI表示表示List ItemList Item（列表項）。關閉標記列表項）。關閉標記/LI是可選的。是可選的。 29自定義項目符號自定義項目符號v方形項目符號v實心圓項目符號v空心圓項目符號 30有序列表有序列表學習HTML星期一星期二星期三星期四星期五 有序列表包含在有序列表包含在 . OL . 標記內。有序列表也顯示列表項目。它標記內。有序列表也顯示列表項目。它與無序列表的區別在于有序列表項前面的編號是可設置的有序編號。與無序列表的區別在于有序列表項前面的編號是可設置的有

14、序編號。 31自定義編號自定義編號大寫羅馬數字 小寫羅馬數字 大寫字母 小寫字母從第n個值開始編號 學習學習HTML 星期一星期一簡介簡介HTML 創建列表創建列表 星期二星期二創建表創建表插入圖像插入圖像 星期三星期三 星期四星期四 星期五星期五 32定義列表定義列表學習學習 HTML 星期日星期日 一周的第一天一周的第一天 HTML 超文本標記語言超文本標記語言 互聯網互聯網 網絡的網絡網絡的網絡 定義列表用于生成術語列表（術語和定義）。定義列表包含在定義列表用于生成術語列表（術語和定義）。定義列表包含在 . 標記內。標記內。標記用于指定要定義的術語，而標記用于指定要定義的術語，而標記用于

15、對術語的定義。標記用于對術語的定義。 33水平線水平線 歡 迎 使 用歡 迎 使 用HTML我的第一個我的第一個HTML文檔文檔這將會是一種很有趣的體驗這將會是一種很有趣的體驗 水平線標記用于在頁面上繪制一條水平線。可借助于下列屬性控制水平線。水平線標記用于在頁面上繪制一條水平線。可借助于下列屬性控制水平線。它只有開始標記，沒有結束標記，且不包含任何內容。它只有開始標記，沒有結束標記，且不包含任何內容。 34HTML 文檔中的圖片文檔中的圖片vGIF（Graphics Interchange Format ）圖像 (.GIF) 支持圖形漸近 透明 GIF 圖像 支持動畫 支持無損壓縮vJPEG（Joint Photographic Experts Group）圖像 (.JPG)vPNG（Portable Network Graphics ）35插入圖像插入圖像插入圖像插入圖像 插入圖像插入圖像 底部對齊底部對齊 頂部對齊頂部對齊 居中對齊居中對齊 IMGIMG標記用于將圖像插入到標記用于將圖像插入到HTMLHTML文檔中。可以將文檔中。可以將IMGIMG標記放置在要顯示圖像的標記放置在要顯示圖像的位置。語法為：位置。語法為： IMG SRC=URL其中其中SRCSRC是屬性，而值是指定圖像文件是屬性，而值