WebUnit03-HTML標(biāo)記語言課件

1、Web技術(shù)導(dǎo)論山東大學(xué)計算機(jī)科學(xué)與技術(shù)學(xué)院山東大學(xué)計算機(jī)科學(xué)與技術(shù)學(xué)院郝興偉郝興偉課程目錄課程目錄nWeb基礎(chǔ)基礎(chǔ)nWeb服務(wù)器的架設(shè)和管理服務(wù)器的架設(shè)和管理nHTML和和XML標(biāo)記語言標(biāo)記語言n網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作n客戶端編程客戶端編程n服務(wù)端編程服務(wù)端編程Unit 1 Web基礎(chǔ)基礎(chǔ)第第3章章 HTML與與XML標(biāo)記語言標(biāo)記語言目錄目錄n教學(xué)目標(biāo)教學(xué)目標(biāo)n知識點知識點n重點難點重點難點n問題思考問題思考教學(xué)目標(biāo)教學(xué)目標(biāo)n了解標(biāo)記語言的概念，各種標(biāo)記語言的關(guān)系。了解標(biāo)記語言的概念，各種標(biāo)記語言的關(guān)系。n深刻理解深刻理解HTML標(biāo)記語言的文檔結(jié)構(gòu)、標(biāo)記、標(biāo)記屬性的概標(biāo)記語言的文檔結(jié)構(gòu)、

2、標(biāo)記、標(biāo)記屬性的概念念n熟悉常用的熟悉常用的HTML標(biāo)記的功能及屬性標(biāo)記的功能及屬性n理解理解CSS的概念，掌握樣式表定義、選擇符的概念及其應(yīng)用的概念，掌握樣式表定義、選擇符的概念及其應(yīng)用n理解理解、標(biāo)記的概念及應(yīng)用標(biāo)記的概念及應(yīng)用n理解理解XML的數(shù)據(jù)表達(dá)核心思想的數(shù)據(jù)表達(dá)核心思想n了解了解XML文檔的基本結(jié)構(gòu)文檔的基本結(jié)構(gòu)n了解了解XML和和HTML之間的關(guān)系之間的關(guān)系知識單元與知識點知識單元與知識點序號序號知識單元知識單元知識點知識點U31標(biāo)記語言的產(chǎn)生與發(fā)展標(biāo)記語言的產(chǎn)生與發(fā)展通用標(biāo)記語言，通用標(biāo)記語言，HTML，XMLU32超文本標(biāo)記語言超文本標(biāo)記語言HTMLHTML文檔結(jié)構(gòu)，標(biāo)記及

3、標(biāo)記屬性文檔結(jié)構(gòu)，標(biāo)記及標(biāo)記屬性文字格式標(biāo)記，圖片標(biāo)記，超鏈接標(biāo)記文字格式標(biāo)記，圖片標(biāo)記，超鏈接標(biāo)記表格標(biāo)記，表單標(biāo)記，表格標(biāo)記，表單標(biāo)記，CSS樣式表，樣式表，CSS選擇符，選擇符，標(biāo)記，標(biāo)記，標(biāo)記標(biāo)記對象和腳本程序標(biāo)記，幀，對象和腳本程序標(biāo)記，幀，iframeU33擴(kuò)展標(biāo)記語言擴(kuò)展標(biāo)記語言XML基礎(chǔ)基礎(chǔ)xml簡介，簡介，xml文檔結(jié)構(gòu)文檔結(jié)構(gòu)U34XML文檔類型定義文檔類型定義簡單元素，復(fù)雜元素，外部簡單元素，復(fù)雜元素，外部DTDU35XML架構(gòu)架構(gòu)XML Schema內(nèi)置數(shù)據(jù)類型，預(yù)定義元素內(nèi)置數(shù)據(jù)類型，預(yù)定義元素簡單數(shù)據(jù)類型定義，復(fù)雜數(shù)據(jù)類型定義，聲明元素，簡單數(shù)據(jù)類型定義，復(fù)雜數(shù)據(jù)類

4、型定義，聲明元素，聲明元素類型聲明元素類型U36XML相關(guān)技術(shù)相關(guān)技術(shù)XML數(shù)據(jù)處理，文檔對象模型數(shù)據(jù)處理，文檔對象模型DOM可擴(kuò)展樣式語言可擴(kuò)展樣式語言XSLXML路徑語言路徑語言XPathXML查詢語言查詢語言XQuery，可擴(kuò)展連接語言，可擴(kuò)展連接語言XLLU37XML開發(fā)環(huán)境開發(fā)環(huán)境XMLSpyDYD文檔的創(chuàng)建，文檔的創(chuàng)建，Schema文檔的創(chuàng)建，實例文檔，文檔的創(chuàng)建，實例文檔，數(shù)據(jù)有效性驗證數(shù)據(jù)有效性驗證重點難點重點難點重點重點nHTML和和XML標(biāo)記語言的本質(zhì)區(qū)別標(biāo)記語言的本質(zhì)區(qū)別n標(biāo)記的概念標(biāo)記的概念n標(biāo)記及其屬性標(biāo)記及其屬性n標(biāo)記及其屬性標(biāo)記及其屬性n樣式表定義樣式表定義n表格

5、標(biāo)記表格標(biāo)記nCSS樣式表，樣式表，CSS選擇符的分類選擇符的分類n和和標(biāo)記標(biāo)記nXML的和核心思想的和核心思想nXML相關(guān)技術(shù)標(biāo)準(zhǔn)的功能及關(guān)系相關(guān)技術(shù)標(biāo)準(zhǔn)的功能及關(guān)系nXML和和HTML的關(guān)系的關(guān)系難點難點nCSS樣式，樣式表樣式，樣式表ndiv和和span標(biāo)記標(biāo)記nXML SchemaU31 標(biāo)記語言的產(chǎn)生與發(fā)展標(biāo)記語言的產(chǎn)生與發(fā)展n標(biāo)準(zhǔn)通用標(biāo)記語言標(biāo)準(zhǔn)通用標(biāo)記語言SGML n超文本標(biāo)記語言超文本標(biāo)記語言HTMLn可擴(kuò)展標(biāo)記語言可擴(kuò)展標(biāo)記語言XML標(biāo)記語言的概念標(biāo)記語言的概念n標(biāo)記語言的概念標(biāo)記語言的概念 l 廣義上，標(biāo)記語言可以理解為對內(nèi)容進(jìn)行描述的規(guī)范或標(biāo)準(zhǔn)。廣義上，標(biāo)記語言可以理解為

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

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

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

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

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

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

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

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

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

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

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

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

18、內(nèi)容 u l author（作者），標(biāo)注網(wǎng)頁的作者（作者），標(biāo)注網(wǎng)頁的作者 u l robots（機(jī)器人向?qū)ВC(jī)器人向?qū)В?，robots用來告訴搜索機(jī)器人需要索引的頁面有哪用來告訴搜索機(jī)器人需要索引的頁面有哪些。些。 u n標(biāo)記標(biāo)記注：注：教材教材P87勘誤，第五行代碼為勘誤，第五行代碼為相對路徑參見相對路徑參見網(wǎng)頁設(shè)計基礎(chǔ)與上機(jī)指導(dǎo)網(wǎng)頁設(shè)計基礎(chǔ)與上機(jī)指導(dǎo)（繆亮等）（繆亮等）3.2.2相對路徑相對路徑相對路徑又分為根目錄相對的路徑與文檔相對的路徑兩種。相對路徑適相對路徑又分為根目錄相對的路徑與文檔相對的路徑兩種。相對路徑適合于創(chuàng)建網(wǎng)站的內(nèi)部鏈接，一個相對路徑不包括協(xié)議和主機(jī)信息，因為合于創(chuàng)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

35、r,不起作用不起作用n設(shè)置設(shè)置的的align=“absmiddle”（非（非middle）即可解決）即可解決教材例題教材例題3-5舉例舉例3表格的表格的tbody與標(biāo)簽式表格與標(biāo)簽式表格n標(biāo)簽式表格標(biāo)簽式表格n標(biāo)記標(biāo)記詳解此題，代碼見詳解此題，代碼見“例題例題3-6交互式標(biāo)簽表格交互式標(biāo)簽表格.html”！Cursor krsn. 指針指針; 游標(biāo)游標(biāo)此題有相當(dāng)難度，要求：此題有相當(dāng)難度，要求：1.全面讀懂，不全面讀懂，不僅僅是字面的解釋，明確程序的執(zhí)行細(xì)節(jié)！僅僅是字面的解釋，明確程序的執(zhí)行細(xì)節(jié)！2.寫程序?qū)崿F(xiàn)局部功能！寫程序?qū)崿F(xiàn)局部功能！作業(yè)：模仿此題作業(yè)：模仿此題實戰(zhàn)，內(nèi)容變?yōu)閷崙?zhàn)，內(nèi)容變

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

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

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

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

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

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

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

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

44、 l p.warning font-weight: bold; color: red; background: white n應(yīng)用應(yīng)用l 警告：警告：l Please turn off the power firstID選擇符選擇符 n一般形式一般形式HTML標(biāo)記標(biāo)記# 屬性屬性: 屬性值屬性值;屬性屬性: 屬性內(nèi)值屬性內(nèi)值. 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應(yīng)用應(yīng)用在在HTML頁面中頁面中ID參數(shù)指定了某個單一元素，參數(shù)指定了某個單一元素，ID選擇符是用來對這個選擇符是用來對這個單一元素定義單獨的樣式。單一元素定義單獨的樣式。ID選擇符的應(yīng)用和類選擇符類似，只要把選擇符的應(yīng)用和類選擇符類似，只要把CLASS換成換成ID即可。將上即可。將上例中的類用例中的類用ID代替：代替：這個段落左對齊這個段落左對齊定義定義ID選擇符要在選擇符要在ID名稱前面加上一個名稱前面加上一個“#”號。和類選擇符相同，號。和類選擇符相同，定義定義ID選擇符的屬性也有兩種方法。下面這個例子，選擇符的屬性也有兩種方法。下面這個例子，I

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

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

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

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. 盤旋盤旋, 徘徊徘徊, 翱翔翱翔修改標(biāo)記的默認(rèn)顯示樣式修改標(biāo)記的默認(rèn)顯示樣式n在文檔頭部定義在文檔頭部定義標(biāo)記，定義標(biāo)記的顯示標(biāo)記，定義標(biāo)記的顯示樣式（嵌入式）樣式（嵌入式）n在標(biāo)記中使用在標(biāo)記中使用style屬性（內(nèi)聯(lián)樣式）屬性（內(nèi)聯(lián)樣式）n在標(biāo)記中使用在標(biāo)記中使用class屬性（自定義樣式類）屬性（自定義樣式類）nclass屬性和屬性和id屬性的不同屬性的

51、不同此部分參見此部分參見“CSS樣式講樣式講稿稿.doc”方法方法1修改默認(rèn)顯示修改默認(rèn)顯示n在文檔頭部定義在文檔頭部定義標(biāo)記，定義標(biāo)記的顯示樣式標(biāo)記，定義標(biāo)記的顯示樣式 標(biāo)記標(biāo)記 屬性名屬性名: 屬性值屬性值; 屬性名屬性名: 屬性值屬性值; . 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èi)聯(lián)樣式使用內(nèi)聯(lián)樣式n使用內(nèi)聯(lián)樣式使用內(nèi)聯(lián)樣式style屬性屬性l 我們看下面的文字格式化要求：我們看下面的文字格式

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

54、標(biāo)準(zhǔn)的標(biāo)記，也可以用于任何標(biāo)記。也可以用于任何標(biāo)記。 l 用戶樣式類的定義（用戶樣式類的定義（類選擇符類選擇符）.屬性名屬性名:屬性值屬性值;屬性名屬性名:屬性值屬性值不指定標(biāo)記的樣式類為全局樣式類，可以為所有標(biāo)記的不指定標(biāo)記的樣式類為全局樣式類，可以為所有標(biāo)記的class屬性使用。指定標(biāo)記屬性使用。指定標(biāo)記的樣式類只適用于該標(biāo)記。的樣式類只適用于該標(biāo)記。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值可值可以關(guān)聯(lián)一個標(biāo)準(zhǔn)的標(biāo)記，也可以用于任何標(biāo)記。以關(guān)聯(lián)一個標(biāo)準(zhǔn)的標(biāo)記，也可以用于任何標(biāo)記。 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設(shè)定用于每一個頁面中的當(dāng)設(shè)定用于每一個頁面中的當(dāng)前位置、幫助信息以及版權(quán)頁角前位置、幫助信息以及版權(quán)頁角的設(shè)定。在每一個頁面中，這是的設(shè)定。在每一個頁面中，這是一樣的一樣的頁面設(shè)計效果頁面設(shè)計效果使用使用id選擇符和選擇符和class選擇符的不同選擇符的不同nclass屬性值為一個用戶自定義的樣式類，一個用戶自定義的樣式類可以屬性值為一個用戶自定義的樣式類，一個用戶自定義的樣式類可以在多個標(biāo)記中使用在多個標(biāo)記中使用nid屬性，用于標(biāo)識一個標(biāo)記，在一個屬性，用于標(biāo)識一個標(biāo)記，在一個HTML文檔中，不能有相同的

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

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

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