1、Web技術導論山東大學計算機科學與技術學院山東大學計算機科學與技術學院郝興偉郝興偉課程目錄課程目錄nWeb基礎基礎nWeb服務器的架設和管理服務器的架設和管理nHTML和和XML標記語言標記語言n網頁設計與制作網頁設計與制作n客戶端編程客戶端編程n服務端編程服務端編程Unit 1 Web基礎基礎第第3章章 HTML與與XML標記語言標記語言目錄目錄n教學目標教學目標n知識點知識點n重點難點重點難點n問題思考問題思考教學目標教學目標n了解標記語言的概念，各種標記語言的關系。了解標記語言的概念，各種標記語言的關系。n深刻理解深刻理解HTML標記語言的文檔結構、標記、標記屬性的概標記語言的文檔結構、

2、標記、標記屬性的概念念n熟悉常用的熟悉常用的HTML標記的功能及屬性標記的功能及屬性n理解理解CSS的概念，掌握樣式表定義、選擇符的概念及其應用的概念，掌握樣式表定義、選擇符的概念及其應用n理解理解、標記的概念及應用標記的概念及應用n理解理解XML的數據表達核心思想的數據表達核心思想n了解了解XML文檔的基本結構文檔的基本結構n了解了解XML和和HTML之間的關系之間的關系知識單元與知識點知識單元與知識點序號序號知識單元知識單元知識點知識點U31標記語言的產生與發展標記語言的產生與發展通用標記語言，通用標記語言，HTML，XMLU32超文本標記語言超文本標記語言HTMLHTML文檔結構，標記及

3、標記屬性文檔結構，標記及標記屬性文字格式標記，圖片標記，超鏈接標記文字格式標記，圖片標記，超鏈接標記表格標記，表單標記，表格標記，表單標記，CSS樣式表，樣式表，CSS選擇符，選擇符，標記，標記，標記標記對象和腳本程序標記，幀，對象和腳本程序標記，幀，iframeU33擴展標記語言擴展標記語言XML基礎基礎xml簡介，簡介，xml文檔結構文檔結構U34XML文檔類型定義文檔類型定義簡單元素，復雜元素，外部簡單元素，復雜元素，外部DTDU35XML架構架構XML Schema內置數據類型，預定義元素內置數據類型，預定義元素簡單數據類型定義，復雜數據類型定義，聲明元素，簡單數據類型定義，復雜數據類

4、型定義，聲明元素，聲明元素類型聲明元素類型U36XML相關技術相關技術XML數據處理，文檔對象模型數據處理，文檔對象模型DOM可擴展樣式語言可擴展樣式語言XSLXML路徑語言路徑語言XPathXML查詢語言查詢語言XQuery，可擴展連接語言，可擴展連接語言XLLU37XML開發環境開發環境XMLSpyDYD文檔的創建，文檔的創建，Schema文檔的創建，實例文檔，文檔的創建，實例文檔，數據有效性驗證數據有效性驗證重點難點重點難點重點重點nHTML和和XML標記語言的本質區別標記語言的本質區別n標記的概念標記的概念n標記及其屬性標記及其屬性n標記及其屬性標記及其屬性n樣式表定義樣式表定義n表格

5、標記表格標記nCSS樣式表，樣式表，CSS選擇符的分類選擇符的分類n和和標記標記nXML的和核心思想的和核心思想nXML相關技術標準的功能及關系相關技術標準的功能及關系nXML和和HTML的關系的關系難點難點nCSS樣式，樣式表樣式，樣式表ndiv和和span標記標記nXML SchemaU31 標記語言的產生與發展標記語言的產生與發展n標準通用標記語言標準通用標記語言SGML n超文本標記語言超文本標記語言HTMLn可擴展標記語言可擴展標記語言XML標記語言的概念標記語言的概念n標記語言的概念標記語言的概念 l 廣義上，標記語言可以理解為對內容進行描述的規范或標準。廣義上，標記語言可以理解為

6、對內容進行描述的規范或標準。l 例如，在例如，在出版印刷出版印刷行業，編輯人員在進行文檔內容編輯時對內容所行業，編輯人員在進行文檔內容編輯時對內容所做的標記做的標記u北大方正電子照排，華光照排，顯示標記北大方正電子照排，華光照排，顯示標記uWord，所見即所得，不顯示格式化標記，所見即所得，不顯示格式化標記n標準通用標記語言標準通用標記語言SGMLl SGML（Standard Generalized Markup Language，SGML）是一）是一個用來定義在電子表格中如何對文件的結構和內容進行描述的國際個用來定義在電子表格中如何對文件的結構和內容進行描述的國際標準（標準（ISO-887

7、9） ，1969年，年，IBMl SGML設計的非常復雜，設計的非常復雜，SGML的正式規范達的正式規范達500多頁多頁 l 意義意義uSGML定義了標記語言的基本概念，奠定了標記語言的技術基礎定義了標記語言的基本概念，奠定了標記語言的技術基礎 超文本標記語言超文本標記語言HTMLnHTML 的誕生的誕生互聯網發展歷史上的第一個里程碑技術互聯網發展歷史上的第一個里程碑技術l 超文本標記語言超文本標記語言HTML起源于通用標準標記語言起源于通用標準標記語言SGMLl 由世界上最大的粒子物理研究實驗室歐洲核子研究中心由世界上最大的粒子物理研究實驗室歐洲核子研究中心CERN（the European

8、 Organization for Nuclear Research）于）于1991年首先提出。年首先提出。nHTML主要版本及發布時間主要版本及發布時間 l HTML 2.0， Internet工程任務組中的工程任務組中的HTML工作組開發完成了工作組開發完成了HTML 2.0，于，于1996年年發布發布 l HTML3.2，W3C于于1997年年1月月14日將其列為推薦版本，在日將其列為推薦版本，在HTML2.0標準中添加了諸標準中添加了諸如：字體、表格、如：字體、表格、Java程序、浮動、上標、下標等特征程序、浮動、上標、下標等特征 l HTML 4.0，W3C于于1997年年12月月1

9、8日將其列為推薦版本，第二個稍作修正的日將其列為推薦版本，第二個稍作修正的HTML 4.0 版本與版本與1998年年12月月24日發布。日發布。uHTML4.0中最重要的特征是引入了樣式表中最重要的特征是引入了樣式表CSS技術。技術。 l HTML 4.01，W3C于于1999年年12月月24日將其列為推薦版本，是日將其列為推薦版本，是HTML 4.0的升級版本，的升級版本，它對原版本做出了部分修正。它對原版本做出了部分修正。l HTML5.0可擴展標記語言可擴展標記語言XMLn可擴展標記語言可擴展標記語言XML互聯網的未來互聯網的未來l XML（eXtensible Markup Langu

10、age） ，1998年年2月月10日，日，XML工作組正工作組正式向式向W3C提交了提交了XML的最終推薦標準，這就是的最終推薦標準，這就是XML 1.0標準。標準。 l 核心思想核心思想u實現數據和顯示的分離實現數據和顯示的分離 nXML的構成的構成l DTD、XML Schema等基本要素等基本要素l 元規范元規范n 相關規范相關規范l 可擴展樣式語言可擴展樣式語言XSLl XML路徑語言路徑語言XPathl XML查詢語言查詢語言Xqueryl 可擴展連接語言可擴展連接語言XLLl 及及XML文檔對象模型文檔對象模型DOMl 簡單應用程序接口簡單應用程序接口SAXl 等等 U32 超文本

11、標記語言超文本標記語言HTMLnHTML文檔結構和標記語法文檔結構和標記語法n文件頭標記及子標記文件頭標記及子標記n文檔體標記文檔體標記n文檔內容常用標記文檔內容常用標記l 文本格式標記文本格式標記l 圖片標記圖片標記l 超鏈接標記超鏈接標記n表格（表格（table）n表單（表單（form）nspan標記和標記和div標記標記n層疊樣式表層疊樣式表CSS技術技術 n對象和腳本程序標記對象和腳本程序標記n幀（幀（frame） HTML標記的概念及認知標記的概念及認知標記的語法標記的語法n什么是什么是HTML標記標記l 標記是對內容的標記標記是對內容的標記l 標記內容在瀏覽器中的現實樣式。例如，要

12、文字標記內容在瀏覽器中的現實樣式。例如，要文字“您好您好”紅色顯示，在紅色顯示，在HTML中可標中可標記為：記為：您好您好nHTML標記語法標記語法l標記由封裝在小于號（標記由封裝在小于號（）構成的一對尖括號之中）構成的一對尖括號之中 l一般形式：一般形式：文檔內容文檔內容 n標記類型標記類型l單標記單標記 ，不標記任何內容，例如，不標記任何內容，例如，l雙標記，首標記，開啟某種形式的顯示，未標記，結束某種形式的顯示雙標記，首標記，開啟某種形式的顯示，未標記，結束某種形式的顯示n標記屬性標記屬性l分類：一般屬性，事件屬性分類：一般屬性，事件屬性l l例如：例如： 以下通過例以下通過例題講解題講

13、解HTML文檔結構文檔結構 文檔頭標記文檔頭標記 （文檔內容標記）（文檔內容標記）文檔頭文檔頭文檔體文檔體文件頭標記及子標記文件頭標記及子標記n文件頭及其功能文件頭及其功能l標記對之間的部分稱為文件頭標記對之間的部分稱為文件頭l功能功能u告訴瀏覽器如何顯示頁面，例如字符集，有效期告訴瀏覽器如何顯示頁面，例如字符集，有效期u為搜索引擎提供支持為搜索引擎提供支持n子標記子標記l標記標記 l標記標記 l 標記標記 l標記標記 l標記標記標記標記n關于關于meta的意義的意義l meta即即“元元”的意思，的意思，meta data元數據，即關于數據的數據元數據，即關于數據的數據l 例如：一篇例如：一

14、篇paper，它的正文是文章本身的數據。但作者、出版社、，它的正文是文章本身的數據。但作者、出版社、出版日期等即可看成是出版日期等即可看成是paper的元數據的元數據n標記標記l 為單標記，沒有尾標記為單標記，沒有尾標記l 兩類元數據描述，一類是關于兩類元數據描述，一類是關于HTTP頭的描述，向瀏覽器傳回信息，頭的描述，向瀏覽器傳回信息，以正確顯示網頁內容；另一類是關于頁面內容的描述，用于搜索引以正確顯示網頁內容；另一類是關于頁面內容的描述，用于搜索引擎。擎。n標記的形式標記的形式l l 標記標記HTTP頭頭nHTTP頭頭l HTTP頭是頭是Web服務器向瀏覽器傳回的信息，以正確顯示網頁內容，

15、即可以在服務器向瀏覽器傳回的信息，以正確顯示網頁內容，即可以在Web服服務器的配置中設置，也可以通過網頁設置。務器的配置中設置，也可以通過網頁設置。l nhttp-equiv屬性，即屬性，即HTTP頭域頭域l content-type，指定頁面內容及所使用的字符集。，指定頁面內容及所使用的字符集。 u l expires，用于設定網頁的到期時間，用于設定網頁的到期時間 u l pragma，禁止瀏覽器從本地計算機的緩存中訪問頁面內容，禁止瀏覽器從本地計算機的緩存中訪問頁面內容 u ，該種設定訪問者將無法使用脫機瀏，該種設定訪問者將無法使用脫機瀏覽功能覽功能 l refresh，自動刷新并指向新

16、頁面。，自動刷新并指向新頁面。 u l window-target，顯示窗口的設定，例如：強制頁面在當前窗口以獨立頁面顯示，顯示窗口的設定，例如：強制頁面在當前窗口以獨立頁面顯示 u ，可以用來防止別人在框架里調用，可以用來防止別人在框架里調用自己的頁面自己的頁面 對于文檔類型對于文檔類型content-type，其值其值content可以為可以為text/xml練習一下刷新，練習一下刷新，本頁刷新及刷本頁刷新及刷新指向新頁面。新指向新頁面。要求：可以理解，讀懂！要求：可以理解，讀懂！簡單的能寫出！簡單的能寫出！expire expire | kspav. 期滿期滿, 斷氣斷氣, 呼氣呼氣;

17、呼出呼出pragmatic prgmtkadj. 忙碌的忙碌的, 實際的實際的, 活躍的活躍的Pragmatical adj. 獨斷的獨斷的標記標記-name屬性屬性nname屬性屬性l 主要用于描述網頁，主要用于搜索引擎查找信息和分類信息用的。主要用于描述網頁，主要用于搜索引擎查找信息和分類信息用的。 l nname屬性參數值屬性參數值l keywords，keywords用來告訴搜索引擎該網頁的關鍵字是什么用來告訴搜索引擎該網頁的關鍵字是什么 。 u l description（網站內容描述），（網站內容描述），description用來告訴搜索引擎網站的主要用來告訴搜索引擎網站的主要內容

18、內容 u l author（作者），標注網頁的作者（作者），標注網頁的作者 u l robots（機器人向導），（機器人向導），robots用來告訴搜索機器人需要索引的頁面有哪用來告訴搜索機器人需要索引的頁面有哪些。些。 u n標記標記注：注：教材教材P87勘誤，第五行代碼為勘誤，第五行代碼為相對路徑參見相對路徑參見網頁設計基礎與上機指導網頁設計基礎與上機指導（繆亮等）（繆亮等）3.2.2相對路徑相對路徑相對路徑又分為根目錄相對的路徑與文檔相對的路徑兩種。相對路徑適相對路徑又分為根目錄相對的路徑與文檔相對的路徑兩種。相對路徑適合于創建網站的內部鏈接，一個相對路徑不包括協議和主機信息，因為合于創

19、建網站的內部鏈接，一個相對路徑不包括協議和主機信息，因為它的路徑與當前文檔的訪問協議和主機相同，甚至有相同的目錄路徑，它的路徑與當前文檔的訪問協議和主機相同，甚至有相同的目錄路徑，所以通常只包含文件夾名和文件名，有時甚至只有文件名。所以通常只包含文件夾名和文件名，有時甚至只有文件名。（1）根目錄相對路徑：是從）根目錄相對路徑：是從當前站點的根目錄當前站點的根目錄開始的路徑。站點上所有可開始的路徑。站點上所有可公開的文件都存放在站點的根目錄下。和根目錄相對的路徑使用斜杠以公開的文件都存放在站點的根目錄下。和根目錄相對的路徑使用斜杠以告訴服務器從根目錄開始。告訴服務器從根目錄開始。例如，如果一個站

20、點的根目錄在例如，如果一個站點的根目錄在D:Program FilesApache Software FoundationTomcat 6.0webappsROOT下，下，ROOT目錄下存在文件目錄下存在文件31.html文件和子目錄文件和子目錄part3，在，在part3下存在子目錄下存在子目錄1，子目錄，子目錄1下存在下存在文件文件32.html，文件，文件32.html中有鏈接中有鏈接訪問文件訪問文件31.html，那么單擊該文件的顯示的鏈接就會跳轉到文件，那么單擊該文件的顯示的鏈接就會跳轉到文件31.html。Href，指向，超鏈接時會詳細講。，指向，超鏈接時會詳細講。注意，容易與注意

21、，容易與URL用混，看上面的勘誤！用混，看上面的勘誤！（2）文檔相對路徑：是指和當前文檔所在的文件夾）文檔相對路徑：是指和當前文檔所在的文件夾相對的路徑。這種路徑通常是最簡單的路徑，可以相對的路徑。這種路徑通常是最簡單的路徑，可以用來鏈接和當前文檔處于同一文件夾下的文檔。下用來鏈接和當前文檔處于同一文件夾下的文檔。下面舉例說明。面舉例說明。如果鏈接到同一目錄下的文件如果鏈接到同一目錄下的文件part3.html，只需要，只需要指定鏈接文件的名稱即可指定鏈接文件的名稱即可href=”part3.html”。 如果要鏈接上一級目錄中的文件如果要鏈接上一級目錄中的文件part3.html，則要，則要

22、輸入輸入“./”然后再輸入文件名然后再輸入文件名href=”./part3.html”。如果要鏈接上兩級目錄中的文件如果要鏈接上兩級目錄中的文件part3.html，則要，則要輸入輸入“././”然后再輸入文件名然后再輸入文件名href=”././part3.html”。如果鏈接到當前目錄的下一級子目錄如果鏈接到當前目錄的下一級子目錄web下的文件下的文件part3.html，則要輸入目錄名，則要輸入目錄名“web/”然后再輸入然后再輸入文件名文件名href=”web/part3.html”。參見例題參見例題2-242-27，練習！，練習！文檔體標記文檔體標記及主要屬性及主要屬性n標記標記l

23、在在標記對之間的部分稱為標記對之間的部分稱為html文檔的文件體。文件體中文檔的文件體。文件體中描述的是瀏覽器中顯示的內容。描述的是瀏覽器中顯示的內容。 l 在在標記對之間包含文檔內容標記，例如：文本、圖像以標記對之間包含文檔內容標記，例如：文本、圖像以及超鏈接、表格、表單等。及超鏈接、表格、表單等。 n標記主要屬性標記主要屬性l 一般屬性一般屬性u設置頁邊距，設置頁面內容和上下左右四個邊框的距離設置頁邊距，設置頁面內容和上下左右四個邊框的距離u設置背景顏色，背景圖片設置背景顏色，背景圖片u文本顏色文本顏色u超鏈接超鏈接l 事件屬性事件屬性u打開頁面，關閉頁面打開頁面，關閉頁面u窗口移動、改變

24、大小窗口移動、改變大小u鼠標操作鼠標操作property prp(r)t /pr-n. 財產財產, 性質性質, 所有權所有權margin mdnn. v頁邊的空白頁邊的空白; 極限極限; 邊緣邊緣教材教材P88，表，表3-1教材教材P88，表，表3-2事件屬性的值往往是一個事件屬性的值往往是一個JavaScript函數函數例題例題3-2.html文檔體文檔體n文本內容文本內容n圖片圖片n超鏈接超鏈接n表格表格n表單表單n其他標記其他標記文本內容標記文本內容標記n標題、段落標記標題、段落標記n文本格式標記文本格式標記l 字體標記字體標記 l 粗體、斜體和下劃線標記粗體、斜體和下劃線標記圖像標記圖

25、像標記n圖像標記圖像標記 l 單標記，用以插入圖像單標記，用以插入圖像 n一般屬性一般屬性l src：設置插入圖像的設置插入圖像的url地址，即插入圖像的路徑和文件名。地址，即插入圖像的路徑和文件名。l align：設置圖像的對齊方式：設置圖像的對齊方式 ，取值，取值left、right、center、absmiddle等等l id：指定的圖片：指定的圖片id號，用于對圖像的程序訪問號，用于對圖像的程序訪問l name：用于設定圖像的名稱，用于對圖像的程序訪問。用于設定圖像的名稱，用于對圖像的程序訪問。l title：屬性值為一字符串，鼠標指向圖片時，鼠標右下角顯示標題文本。：屬性值為一字符串

26、，鼠標指向圖片時，鼠標右下角顯示標題文本。l alt：圖像的替代文字：圖像的替代文字 l border：設置圖片邊框。：設置圖片邊框。 l height和和width：分別用于設置圖像的高度和寬度：分別用于設置圖像的高度和寬度 l hspace和和vspace：分別用于設置圖像的左右邊框大小和上下邊框大小。：分別用于設置圖像的左右邊框大小和上下邊框大小。 l ismap和和usemap：在應用圖像地圖（：在應用圖像地圖（map）時使用。）時使用。 n事件屬性事件屬性 n重點難點重點難點l src屬性的值，相對路徑和絕對路徑問題屬性的值，相對路徑和絕對路徑問題l title屬性，文本的回車換行屬

27、性，文本的回車換行“
”或或“
”，對應回車（，對應回車（r）換行（）換行（n）的）的ASCII值值13和和10。例如：。例如： title= “圖片名稱：圖片名稱：
 泰山風光泰山風光l height和和width，正確方式是使用，正確方式是使用ps壓縮圖，提高下載速度，例如一些網上商店的圖片壓縮圖，提高下載速度，例如一些網上商店的圖片vertical vrtkl /vt-n. 垂直線垂直線, 豎向豎向, 垂直面垂直面adj. 垂直的垂直的, 頂點的頂點的horizontal horizontal | hrzntl /hrzntln. 水平線水

28、平線, 水平面水平面adj. 地平線的地平線的; 水平的水平的例題例題3-3圖像屬圖像屬性性.htmborder bdn. 邊緣邊緣, 邊沿邊沿; 邊界邊界, 國界國界, 邊境邊境; 飾邊飾邊, 滾邊滾邊; AbsBottom 圖像的下邊緣與同一行中最大元素的下邊緣對齊。圖像的下邊緣與同一行中最大元素的下邊緣對齊。 AbsMiddle 圖像的中間與同一行中最大元素的中間對齊。圖像的中間與同一行中最大元素的中間對齊。 Baseline 圖像的下邊緣與第一行文本的下邊緣對齊。圖像的下邊緣與第一行文本的下邊緣對齊。 Bottom 圖圖像的下邊緣與第一行文本的下邊緣對齊。像的下邊緣與第一行文本的下邊緣

29、對齊。 Left 圖像沿網頁的左圖像沿網頁的左邊緣對齊，文字在圖像右邊換行。邊緣對齊，文字在圖像右邊換行。 Middle 圖像的中間與第一行圖像的中間與第一行文本的下邊緣對齊。文本的下邊緣對齊。 NotSet 未設定對齊方式。未設定對齊方式。 Right 圖像沿網圖像沿網頁的右邊緣對齊，文字在圖像左邊換行。頁的右邊緣對齊，文字在圖像左邊換行。 TextTop 圖像的上邊緣圖像的上邊緣與同一行上最高文本的上邊緣對齊。與同一行上最高文本的上邊緣對齊。 Top 圖像的上邊緣與同一行圖像的上邊緣與同一行上最高元素的上邊緣對齊。上最高元素的上邊緣對齊。圖文混排圖文混排align屬性取值屬性取值練習一下吧

30、！練習一下吧！參見例題，程參見例題，程序序2-18.html參見課件參見課件P33例題，體會例題，體會absmiddle與與middle異同！異同！舉例舉例n在一個網頁中，插入一副圖片在一個網頁中，插入一副圖片dog.jpg，要去當鼠標移到圖片，要去當鼠標移到圖片上的時候，顯示另一幅圖片上的時候，顯示另一幅圖片cat.jpg，鼠標移走后重新顯示圖，鼠標移走后重新顯示圖片片dog.jpg。 n代碼清單代碼清單 n問題問題改變圖片文件路徑到改變圖片文件路徑到images文件夾文件夾參見參見例題與練習例題與練習例例題題3-3圖像屬性圖像屬性.htm超鏈接標記超鏈接標記n概念及功能概念及功能n分類分類

31、l文本超鏈接一般形式文本超鏈接一般形式u字符串字符串l圖片超鏈接一般形式圖片超鏈接一般形式un定義書簽定義書簽l書簽文本書簽文本例題例題3-4系列；補充系列；補充下載、郵件、錨點下載、郵件、錨點等鏈接。等鏈接。超鏈接標記超鏈接標記的屬性的屬性nhref屬性取值屬性取值l 一個網址，例如一個網址，例如首頁首頁l 一段一段javascript代碼，例如：代碼，例如：下一步下一步 l 關閉關閉nonclick屬性屬性l 接受鼠標單擊，如果返回接受鼠標單擊，如果返回true,則頁面跳轉到則頁面跳轉到href指定的網頁，否則，不執行指定的網頁，否則，不執行href屬性所屬性所定義的網頁。例如：定義的網頁

32、。例如：l l bbb ntarget屬性屬性l _self（相同框架），（相同框架），_blank（新建窗口），（新建窗口），_top（整頁），（整頁），_parent（父窗口），（父窗口），幀名幀名ntitle屬性屬性nDisabledl 使（超鏈接）失能（灰化，不可用）使（超鏈接）失能（灰化，不可用）超鏈接標記超鏈接標記的重點難點的重點難點nhref和和onclick的聯合使用的聯合使用n顯示樣式的定義顯示樣式的定義l超鏈接的顯示超鏈接的顯示l活動超鏈接的顯示活動超鏈接的顯示l已經訪問過的超鏈接的顯示已經訪問過的超鏈接的顯示表格（表格（Table）n表格及其功能表格及其功能l 數據組織數

33、據組織l 頁面布局頁面布局n表格、行、單元格標記表格、行、單元格標記n表格、單元格屬性表格、單元格屬性n重點難點重點難點l 表格的寬度設置，百分比表格的寬度設置，百分比 or 像素值像素值l 定義行高，定義行高，height屬性用于屬性用于，盡量不在，盡量不在l 定義單元格寬度，只在表格第一行的定義單元格寬度，只在表格第一行的中使用中使用width屬性，最后一屬性，最后一個單元格不設置個單元格不設置l 表格、單元格表格線（上、下、左、右）的定義表格、單元格表格線（上、下、左、右）的定義l 單元格間距單元格間距(cellspacing)、襯距、襯距(cellpadding)問題問題l 表格的水平

34、、垂直居中，表格嵌套表格的水平、垂直居中，表格嵌套caption (圖片圖片)說明文說明文字，字，(電影電影)字幕字幕margin n.頁邊空白；差額；頁邊空白；差額；余地，余裕；邊，邊緣余地，余裕；邊，邊緣舉例舉例1-表格的嵌套表格的嵌套n單元格中定義表格單元格中定義表格n舉例舉例表格居中表格居中實戰，體會本題表格嵌實戰，體會本題表格嵌套的目的！套的目的！舉例舉例2單元格中圖片和文字的垂直居中單元格中圖片和文字的垂直居中n在表格的單元格中，如果存在文字和圖片混合內容，默認的在表格的單元格中，如果存在文字和圖片混合內容，默認的顯示是下邊對齊。設置顯示是下邊對齊。設置的的valign=cente

35、r,不起作用不起作用n設置設置的的align=“absmiddle”（非（非middle）即可解決）即可解決教材例題教材例題3-5舉例舉例3表格的表格的tbody與標簽式表格與標簽式表格n標簽式表格標簽式表格n標記標記詳解此題，代碼見詳解此題，代碼見“例題例題3-6交互式標簽表格交互式標簽表格.html”！Cursor krsn. 指針指針; 游標游標此題有相當難度，要求：此題有相當難度，要求：1.全面讀懂，不全面讀懂，不僅僅是字面的解釋，明確程序的執行細節！僅僅是字面的解釋，明確程序的執行細節！2.寫程序實現局部功能！寫程序實現局部功能！作業：模仿此題作業：模仿此題實戰，內容變為實戰，內容變

36、為班級同學介紹！班級同學介紹！思考：這個題可以思考：這個題可以將導航標簽豎著放將導航標簽豎著放嗎？為什么？嗎？為什么？代碼代碼-表格標記表格標記-1tbody.htmcursor krsn. 指針指針; 游標游標表單表單Formn表單的概念及功能表單的概念及功能l 用戶輸入數據用戶輸入數據n標記標記l 用戶交互用戶交互l 表單標記表單標記 n標記主要屬性標記主要屬性l name屬性，給出表單的名稱，用于腳本編程屬性，給出表單的名稱，用于腳本編程 l method屬性，定義服務器表單處理程序從表單中獲得信息的方式屬性，定義服務器表單處理程序從表單中獲得信息的方式u get方法將數據打包放置在環境

37、變量方法將數據打包放置在環境變量QUERY_STRING中作為中作為URL整體的一部分傳遞給服務器。整體的一部分傳遞給服務器。 u post方法，使用方法，使用HTTP實體頭域發送數據到實體頭域發送數據到Web服務器，沒有數量限制服務器，沒有數量限制l action屬性，設置表單處理程序的網絡路徑和程序名，當用戶提交表單時，服務器將屬性，設置表單處理程序的網絡路徑和程序名，當用戶提交表單時，服務器將執行執行action屬性所設置的程序。屬性所設置的程序。l target屬性，設置屬性，設置action頁面輸出的窗口頁面輸出的窗口n重點難點重點難點l 使用表格進行表單布局使用表格進行表單布局l

38、Form標記標記target屬性屬性教材勘誤：教材勘誤：p101例題例題3-7代碼中，代碼中，radio之之name不一致！不一致！表單輸入域表單輸入域n單行文本框輸入單行文本框輸入n密碼文本框輸入密碼文本框輸入 n多行文本框輸入多行文本框輸入 nbutton按鈕輸入按鈕輸入 nradio單選鈕輸入單選鈕輸入 n復選框輸入復選框輸入n復選列表框輸入復選列表框輸入nhidden隱藏元素隱藏元素 n文件上傳文件上傳 n表單提交按鈕標記表單提交按鈕標記submit/reset 表單舉例表單舉例1上傳文件上傳文件n表單輸入頁面表單輸入頁面news-add.jspn服務端處理程序頁面服務端處理程序頁面n

39、ews-add表單頁面表單頁面news-add.jsp表單處理程序表單處理程序news-add層疊樣式表層疊樣式表CSS技術技術nCSS樣式屬性樣式屬性CSS對網頁的控制是通過對網頁的控制是通過CSS屬性實現的，這些屬性可以分為以下幾類屬性實現的，這些屬性可以分為以下幾類l字體屬性字體屬性l顏色和背景屬性顏色和背景屬性l文本間距與文本對齊屬性文本間距與文本對齊屬性l容器屬性容器屬性l列表屬性列表屬性l鼠標狀態屬性鼠標狀態屬性l定位屬性定位屬性l濾鏡屬性濾鏡屬性nCSS樣式表定義樣式表定義lHTML選擇符選擇符l類選擇符類選擇符lID選擇符選擇符l關聯選擇符關聯選擇符l組合選擇符組合選擇符l偽元

40、素選擇符偽元素選擇符n修改標記的默認顯示樣式修改標記的默認顯示樣式l在在內定義內定義樣式，嵌入式樣式表樣式，嵌入式樣式表l使用標記內連樣式使用標記內連樣式style屬性，缺點是內容和樣式混合，難于維護。屬性，缺點是內容和樣式混合，難于維護。l使用標記的使用標記的class屬性屬性lId屬性屬性CSS屬性屬性-1字體屬性字體屬性CSS屬性屬性-2顏色和背景屬性顏色和背景屬性 CSS屬性屬性-3文本間距與文本對齊屬性文本間距與文本對齊屬性CSS屬性屬性-4容器屬性容器屬性n容器是指其中可以包含內部元素、對象或數據的元素，如表格、單元格容器是指其中可以包含內部元素、對象或數據的元素，如表格、單元格等

41、，頁面也是容器對象。等，頁面也是容器對象。CSS中對這樣的對象都統一用容器屬性來控制。中對這樣的對象都統一用容器屬性來控制。它包括以下子類：邊距屬性、它包括以下子類：邊距屬性、 襯距襯距屬性、邊框屬性和圖文混排屬性。屬性、邊框屬性和圖文混排屬性。 CSS屬性屬性-4容器屬性容器屬性(Cont.)CSS屬性屬性-5列表屬性列表屬性CSS屬性屬性-6鼠標狀態屬性鼠標狀態屬性CSS屬性屬性-7定位屬性定位屬性CSS屬性屬性-8濾鏡屬性濾鏡屬性n在網頁顯示時，常常在網頁顯示時，常常希望所顯示的圖像或希望所顯示的圖像或文字有一些特殊的效文字有一些特殊的效果，果，CSS中的濾鏡屬中的濾鏡屬性就可以實現這一

42、要性就可以實現這一要求。濾鏡的書寫格式求。濾鏡的書寫格式如下：如下：filter:filtername(parameters)n其中其中filtername為濾為濾鏡名，鏡名，parameters為為參數表，不同的濾鏡，參數表，不同的濾鏡，所允許使用的參數也所允許使用的參數也不同。不同。 CSS樣式表定義樣式表定義nCSS表定義的一般形式表定義的一般形式nCSS選擇符選擇符lHTML選擇符選擇符l類選擇符類選擇符lID選擇符選擇符l關聯選擇符關聯選擇符l組合選擇符組合選擇符l偽元素選擇符偽元素選擇符CSS樣式表定義的一般形式樣式表定義的一般形式n樣式表定義的一般形式是：樣式表定義的一般形式是：

43、nn 選擇符選擇符屬性名屬性名:屬性值屬性值; 屬性名屬性名: 屬性值屬性值; nHTML選擇符選擇符n選擇符為標記名，此時樣式定義將替換標記的默認選擇符為標記名，此時樣式定義將替換標記的默認顯示，任何顯示，任何HTML標記都可以作為標記都可以作為CSS選擇符。選擇符。n舉例舉例 body margin-top:20px; overflow-x:hidden; pmargin:2px 4px 類選擇符類選擇符n一般形式一般形式HTML標記標記. 屬性屬性: 屬性值屬性值;屬性屬性: 屬性內值屬性內值. n例子例子l .word1 color: lime; background: #ff80c0

44、 l p.warning font-weight: bold; color: red; background: white n應用應用l 警告：警告：l Please turn off the power firstID選擇符選擇符 n一般形式一般形式HTML標記標記# 屬性屬性: 屬性值屬性值;屬性屬性: 屬性內值屬性內值. n例子例子l #help-tablel border:1px solid #0163A2;l cellspacing:5px;l cellpadding:px;l font-family:宋體宋體;l font-size: 12px;l color:#FF0000;l

45、line-height:150%; l n應用應用在在HTML頁面中頁面中ID參數指定了某個單一元素，參數指定了某個單一元素，ID選擇符是用來對這個選擇符是用來對這個單一元素定義單獨的樣式。單一元素定義單獨的樣式。ID選擇符的應用和類選擇符類似，只要把選擇符的應用和類選擇符類似，只要把CLASS換成換成ID即可。將上即可。將上例中的類用例中的類用ID代替：代替：這個段落左對齊這個段落左對齊定義定義ID選擇符要在選擇符要在ID名稱前面加上一個名稱前面加上一個“#”號。和類選擇符相同，號。和類選擇符相同，定義定義ID選擇符的屬性也有兩種方法。下面這個例子，選擇符的屬性也有兩種方法。下面這個例子，I

46、D屬性將匹配所屬性將匹配所有有id=“left”的元素：的元素：#leftfont-size : 100% ;font-weight : bold ;color:Purple ;background-color:transparent下面這個例子，下面這個例子，ID屬性只匹配屬性只匹配id=“left”的段落元素：的段落元素：p#leftfont-size : 100% ;font-weight : bold ;color:Purple ;background-color:transparent關聯關聯（包含）（包含）選擇符選擇符n概念概念關聯選擇符是有兩個或更多的單個選擇符組成的串，由于關聯

47、選擇符是有兩個或更多的單個選擇符組成的串，由于層疊順序的關系，關聯選擇符的優先權更大。關聯選擇層疊順序的關系，關聯選擇符的優先權更大。關聯選擇符只對選擇符的最內層元素起作用，對單獨的外層元素符只對選擇符的最內層元素起作用，對單獨的外層元素無定義。定義關聯選擇符時，單獨的選擇符之間用空格無定義。定義關聯選擇符時，單獨的選擇符之間用空格分開。分開。n例子例子table acolor:red他定義了他定義了內的超鏈接標記內的超鏈接標記的樣式，對于的樣式，對于標記本身，以及標記本身，以及標記外的標記外的沒有影響。沒有影響。 組合選擇符組合選擇符n概念概念將多個選擇符共用一個樣式表定義，避免樣式表定義的

48、重將多個選擇符共用一個樣式表定義，避免樣式表定義的重復，這就是組合選擇符。定義組合選擇符，單個選擇符復，這就是組合選擇符。定義組合選擇符，單個選擇符之間用西文的之間用西文的“,”分割。分割。n例子例子lh1,h2color:redl則則和和標記定義為紅色字。標記定義為紅色字。偽偽（類）（類）元素選擇符元素選擇符n概念概念主要定義超鏈接標記主要定義超鏈接標記，目的是定義不同狀態下同一個，目的是定義不同狀態下同一個HTML元素的形態。例如，點擊前、點擊后、光標移動到超鏈元素的形態。例如，點擊前、點擊后、光標移動到超鏈接文本上時，這些不同的狀態超鏈接顯示不同。接文本上時，這些不同的狀態超鏈接顯示不同

49、。n個性化超連接的顯示，可以定義下面的樣式。個性化超連接的顯示，可以定義下面的樣式。 a color:#0000FF;font-size:12px;text-decoration:nonea:link color:#00FF00; text-decoration:nonea:visited color:#00FF00; text-decoration:nonea:hover color:#FF0000; font-weight:bold; text-decoration:nonea:active color:#0000FF; text-decoration:none 特別說明：特別說明：在在C

50、SS 定義中，定義中，a:hover 必須位于必須位于 a:link 和和 a:visited 之后，才能生效；之后，才能生效；a:active 必須位于必須位于a:hover 之后，才能生效。之后，才能生效。hover hv(r)v. 盤旋盤旋, 徘徊徘徊, 翱翔翱翔修改標記的默認顯示樣式修改標記的默認顯示樣式n在文檔頭部定義在文檔頭部定義標記，定義標記的顯示標記，定義標記的顯示樣式（嵌入式）樣式（嵌入式）n在標記中使用在標記中使用style屬性（內聯樣式）屬性（內聯樣式）n在標記中使用在標記中使用class屬性（自定義樣式類）屬性（自定義樣式類）nclass屬性和屬性和id屬性的不同屬性的

51、不同此部分參見此部分參見“CSS樣式講樣式講稿稿.doc”方法方法1修改默認顯示修改默認顯示n在文檔頭部定義在文檔頭部定義標記，定義標記的顯示樣式標記，定義標記的顯示樣式 標記標記 屬性名屬性名: 屬性值屬性值; 屬性名屬性名: 屬性值屬性值; . n例如：例如：body margin-top:30px;color: black; background: white; a color:#0000FF;text-decoration:none; font-size:14pxa:link color:#00FF00; text-decoration:nonea:visited color:#00F

52、F00; text-decoration:nonea:hover color:#FF0000; text-decoration:none; font-weight:bolda:active color:#0000FF; text-decoration:none特別說明：特別說明：a:hover 必須位于必須位于 a:link 和和 a:visited 之后，才能生效；之后，才能生效；a:active 必須位于必須位于a:hover 之后，才能生效。之后，才能生效。 方法方法2使用內聯樣式使用內聯樣式n使用內聯樣式使用內聯樣式style屬性屬性l 我們看下面的文字格式化要求：我們看下面的文字格式

53、化要求：u 仿宋體，仿宋體，6號字，藍色號字，藍色泰山泰山u 加粗加粗泰山泰山u 斜體斜體泰山泰山l 上述格式化使用了三種標記上述格式化使用了三種標記n標記內聯樣式標記內聯樣式-style屬性屬性l 設置內聯樣式設置內聯樣式 l style=屬性名屬性名: 屬性值屬性值; 屬性名屬性名: 屬性值屬性值; . n例如：例如： 泰山泰山n缺點缺點l 內容和顯示混雜內容和顯示混雜方法方法3使用自定義樣式類使用自定義樣式類n使用用戶自定義樣式類使用用戶自定義樣式類class屬性屬性l CLASS屬性用于指定標記使用的樣式類。樣式類可以關聯一個標準的標記，屬性用于指定標記使用的樣式類。樣式類可以關聯一個

54、標準的標記，也可以用于任何標記。也可以用于任何標記。 l 用戶樣式類的定義（用戶樣式類的定義（類選擇符類選擇符）.屬性名屬性名:屬性值屬性值;屬性名屬性名:屬性值屬性值不指定標記的樣式類為全局樣式類，可以為所有標記的不指定標記的樣式類為全局樣式類，可以為所有標記的class屬性使用。指定標記屬性使用。指定標記的樣式類只適用于該標記。的樣式類只適用于該標記。l 例如例如 .word1 color: lime; background: #ff80c0 p.warning font-weight: bolder; color: red; background: white n舉例舉例l Please

55、 turn off the power firstl 警告：警告：方法方法4-使用使用ID選擇符選擇符nid屬性屬性lID屬性用于定義一個元素的獨特的樣式。屬性用于定義一個元素的獨特的樣式。ID值可值可以關聯一個標準的標記，也可以用于任何標記。以關聯一個標準的標記，也可以用于任何標記。 l一般形式一般形式#屬性名屬性名:屬性值屬性值;屬性名屬性名:屬性值屬性值l例如例如#location-table border:0px; cellspacing:0px; cellpadding:0px;#help-table border-left:1px solid #0163A2; border-bot

56、tom:1px solid #0163A2; border-top:1px solid #0163A2; border-right:1px solid #0163A2; cellspacing:5px; cellpadding:px; font-family:宋體宋體; font-size: 12px; color:#FF0000; line-height:150%; #foot-tablemargin-top:15px; height:65px; font-family:宋體宋體;font-size:12px;color:#FFFFFF;text-align:center;line-heig

57、ht:150%;background-color:#d0d0cf;n舉例舉例上述上述id設定用于每一個頁面中的當設定用于每一個頁面中的當前位置、幫助信息以及版權頁角前位置、幫助信息以及版權頁角的設定。在每一個頁面中，這是的設定。在每一個頁面中，這是一樣的一樣的頁面設計效果頁面設計效果使用使用id選擇符和選擇符和class選擇符的不同選擇符的不同nclass屬性值為一個用戶自定義的樣式類，一個用戶自定義的樣式類可以屬性值為一個用戶自定義的樣式類，一個用戶自定義的樣式類可以在多個標記中使用在多個標記中使用nid屬性，用于標識一個標記，在一個屬性，用于標識一個標記，在一個HTML文檔中，不能有相同的

58、文檔中，不能有相同的id號。號。這就如標記的這就如標記的name屬性，不能重名，這可以從屬性，不能重名，這可以從DOM模型來很容易理解，模型來很容易理解，通過通過getElementById 方法可以訪問方法可以訪問id所識別的對象。所識別的對象。n在布局思路上，一般堅持這樣的原則：在布局思路上，一般堅持這樣的原則：id是先確定頁面的結構和內容，是先確定頁面的結構和內容，然后再為它定義樣式：而然后再為它定義樣式：而class相反，它先定義好一類樣式，然后再頁面相反，它先定義好一類樣式，然后再頁面中根據需要把類樣式應用到不同的元素和內容上面。中根據需要把類樣式應用到不同的元素和內容上面。n在實際

59、應用時，在實際應用時，class更多的被應用到文字版塊以及頁面修飾等方面，而更多的被應用到文字版塊以及頁面修飾等方面，而id更多地被用來實現宏偉布局和設計包含塊，或包含框的樣式。更多地被用來實現宏偉布局和設計包含塊，或包含框的樣式。樣式（樣式（.css）文件）文件n樣式（樣式（.css）文件）文件l 如果要將這些樣式應用到其他如果要將這些樣式應用到其他HTML文檔中，應該使用樣式文件。即，文檔中，應該使用樣式文件。即，將這些樣式定義存儲在一個擴展名為將這些樣式定義存儲在一個擴展名為.css的樣式文件中，的樣式文件中，css文件可文件可以是一個標準的以是一個標準的HTML文件，只不過文件，只不過

60、為空。為空。 n使用使用css文件文件n重點難點重點難點l 文件命名要規范，例如：通用的樣式文件文件命名要規范，例如：通用的樣式文件mycommon.css,關于表格關于表格的樣式定義文件的樣式定義文件mytable.cssl 樣式名要規范，便于閱讀樣式名要規范，便于閱讀要在文檔中引用外部樣式，要在文檔中引用外部樣式，這個（在頭部）必須有！這個（在頭部）必須有！將某文件連接包含進來，屬性將某文件連接包含進來，屬性”rel”是是“關聯關聯”的類型的類型舉例舉例1定義通用樣式文件定義通用樣式文件mycommon.cssn文件名文件名mycommon.cssl 包含頁面中常用的標記樣式類定義，包括：包含頁面中常用的標記樣