WebIntroductionV2-Ch03A課件

1、Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5普通高等教育普通高等教育“十一五十一五”國(guó)家級(jí)規(guī)劃教材國(guó)家級(jí)規(guī)劃教材計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用Web Web 技技 術(shù)術(shù) 導(dǎo)導(dǎo) 論論（第二版）（第二版）Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5 第第 1 章章 Web基礎(chǔ)基礎(chǔ) 第第 2 章章 Web服務(wù)器的架設(shè)和配置服務(wù)器的架設(shè)和配置 第第 3 章章 HTML

2、與與XML基礎(chǔ)基礎(chǔ) 第第 4 章章 網(wǎng)頁(yè)設(shè)計(jì)與制作網(wǎng)頁(yè)設(shè)計(jì)與制作 第第 5 章章 客戶端開發(fā)客戶端開發(fā) 第第 6 章章 服務(wù)端開發(fā)服務(wù)端開發(fā)目 錄Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5第 3 章 標(biāo)記語(yǔ)言HTML規(guī)范 3.1 標(biāo)記語(yǔ)言及其發(fā)展標(biāo)記語(yǔ)言及其發(fā)展3.2 超文本標(biāo)記語(yǔ)言超文本標(biāo)記語(yǔ)言HTML規(guī)范規(guī)范3.3 擴(kuò)展標(biāo)記語(yǔ)言擴(kuò)展標(biāo)記語(yǔ)言XML 3.4 XML開發(fā)環(huán)境開發(fā)環(huán)境XMLSpy3.5 其他相關(guān)技術(shù)其他相關(guān)技術(shù)Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二

3、版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-53.1 標(biāo)記語(yǔ)言及其發(fā)展n 標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言SGML n 超文本標(biāo)記語(yǔ)言超文本標(biāo)記語(yǔ)言HTMLn 可擴(kuò)展可擴(kuò)展HTML規(guī)范規(guī)范XHTML n 可擴(kuò)展標(biāo)記語(yǔ)言可擴(kuò)展標(biāo)記語(yǔ)言XMLn DHTML和和SHTML技術(shù)技術(shù) Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言SGMLn標(biāo)記語(yǔ)言的概念標(biāo)記語(yǔ)言的概念 l廣義上，標(biāo)記語(yǔ)言可以理解為對(duì)內(nèi)容進(jìn)行描述的規(guī)范或標(biāo)準(zhǔn)。廣義上，標(biāo)記語(yǔ)言

4、可以理解為對(duì)內(nèi)容進(jìn)行描述的規(guī)范或標(biāo)準(zhǔn)。l例如，在出版印刷行業(yè)，編輯人員在進(jìn)行文檔內(nèi)容編輯時(shí)對(duì)內(nèi)容所做例如，在出版印刷行業(yè)，編輯人員在進(jìn)行文檔內(nèi)容編輯時(shí)對(duì)內(nèi)容所做的標(biāo)記的標(biāo)記n標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言SGMLlSGML（Standard Generalized Markup Language，SGML）是一）是一個(gè)用來(lái)定義在電子表格中如何對(duì)文件的結(jié)構(gòu)和內(nèi)容進(jìn)行描述的國(guó)際標(biāo)個(gè)用來(lái)定義在電子表格中如何對(duì)文件的結(jié)構(gòu)和內(nèi)容進(jìn)行描述的國(guó)際標(biāo)準(zhǔn)（準(zhǔn)（ISO-8879） ，1969年，年，IBMlSGML設(shè)計(jì)的非常復(fù)雜，設(shè)計(jì)的非常復(fù)雜，SGML的正式規(guī)范達(dá)的正式規(guī)范達(dá)500多頁(yè)多頁(yè) l意義意義uSGM

5、L定義了標(biāo)記語(yǔ)言的基本概念，奠定了標(biāo)記語(yǔ)言的技術(shù)基礎(chǔ)定義了標(biāo)記語(yǔ)言的基本概念，奠定了標(biāo)記語(yǔ)言的技術(shù)基礎(chǔ) Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5超文本標(biāo)記語(yǔ)言HTMLnHTML 的誕生的誕生l超文本標(biāo)記語(yǔ)言超文本標(biāo)記語(yǔ)言HTML起源于通用標(biāo)準(zhǔn)標(biāo)記語(yǔ)言起源于通用標(biāo)準(zhǔn)標(biāo)記語(yǔ)言SGMLl由世界上最大的粒子物理研究實(shí)驗(yàn)室歐洲核子研究中心由世界上最大的粒子物理研究實(shí)驗(yàn)室歐洲核子研究中心CERN（the European Organization for Nuclear Research）于）于

6、1991年首先提出。年首先提出。nHTML規(guī)范規(guī)范l標(biāo)記標(biāo)記nHTML主要版本和發(fā)布時(shí)間主要版本和發(fā)布時(shí)間 lHTML 2.0， Internet工程任務(wù)組中的工程任務(wù)組中的HTML工作組開發(fā)完成了工作組開發(fā)完成了HTML 2.0，于，于1996年發(fā)布年發(fā)布 lHTML3.2，W3C于于1997年年1月月14日將其列為推薦版本，在日將其列為推薦版本，在HTML2.0標(biāo)準(zhǔn)中添標(biāo)準(zhǔn)中添加了諸如：字體、表格、加了諸如：字體、表格、Java程序、浮動(dòng)、上標(biāo)、下標(biāo)等特征程序、浮動(dòng)、上標(biāo)、下標(biāo)等特征 lHTML 4.0，W3C于于1997年年12月月18日將其列為推薦版本，第二個(gè)稍作修正的日將其列為推薦版

7、本，第二個(gè)稍作修正的HTML 4.0 版本與版本與1998年年12月月24日發(fā)布。日發(fā)布。uHTML4.0中最重要的特征是引入了樣式表中最重要的特征是引入了樣式表CSS技術(shù)。技術(shù)。 lHTML 4.01，W3C于于1999年年12月月24日將其列為推薦版本，是日將其列為推薦版本，是HTML 4.0的升級(jí)的升級(jí)版本，它對(duì)原版本做出了部分修正。版本，它對(duì)原版本做出了部分修正。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5可擴(kuò)展HTML規(guī)范XHTMLnHTML 的缺陷的缺陷lHTML的標(biāo)記固定

8、，的標(biāo)記固定，HTML只是一種表現(xiàn)技術(shù)，不能表達(dá)語(yǔ)義只是一種表現(xiàn)技術(shù)，不能表達(dá)語(yǔ)義l不能適應(yīng)現(xiàn)在越來(lái)越多的網(wǎng)絡(luò)設(shè)備和應(yīng)用的需要，比如手機(jī)、不能適應(yīng)現(xiàn)在越來(lái)越多的網(wǎng)絡(luò)設(shè)備和應(yīng)用的需要，比如手機(jī)、PDA、信息家電都不能直接顯示、信息家電都不能直接顯示HTML 。l由于由于HTML代碼不規(guī)范、臃腫，瀏覽器需要足夠智能和龐大才代碼不規(guī)范、臃腫，瀏覽器需要足夠智能和龐大才能夠正確顯示能夠正確顯示HTML l數(shù)據(jù)與表現(xiàn)混雜，頁(yè)面要改變顯示，就必須重新制作數(shù)據(jù)與表現(xiàn)混雜，頁(yè)面要改變顯示，就必須重新制作HTML nW3C 不再繼續(xù)開發(fā)不再繼續(xù)開發(fā)HTML n可擴(kuò)展可擴(kuò)展HTML lW3C制定制定 ，2000年

9、年1月月20 日發(fā)布日發(fā)布XHTML 1.0 。 lHTML向向XML過度的一個(gè)橋梁過度的一個(gè)橋梁l2002年年8月月5日，發(fā)布日，發(fā)布XHTML 2.0的第一個(gè)工作草案。的第一個(gè)工作草案。Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5可擴(kuò)展標(biāo)記語(yǔ)言XMLn可擴(kuò)展標(biāo)記語(yǔ)言可擴(kuò)展標(biāo)記語(yǔ)言XMLlXML（eXtensible Markup Language） ，1998年年2月月10日，日，XML工作組正工作組正式向式向W3C提交了提交了XML的最終推薦標(biāo)準(zhǔn)，這就是的最終推薦標(biāo)準(zhǔn)，這就是XML

10、 1.0標(biāo)準(zhǔn)。標(biāo)準(zhǔn)。 l核心思想核心思想u實(shí)現(xiàn)數(shù)據(jù)和顯示的分離實(shí)現(xiàn)數(shù)據(jù)和顯示的分離 nXML地構(gòu)成地構(gòu)成lDTD、XML架構(gòu)等基本要素架構(gòu)等基本要素l元規(guī)范元規(guī)范n 相應(yīng)規(guī)范相應(yīng)規(guī)范l可擴(kuò)展樣式語(yǔ)言可擴(kuò)展樣式語(yǔ)言XSLlXML路徑語(yǔ)言路徑語(yǔ)言XPathlXML查詢語(yǔ)言查詢語(yǔ)言Xqueryl可擴(kuò)展連接語(yǔ)言可擴(kuò)展連接語(yǔ)言XLLl及及XML文檔對(duì)象模型文檔對(duì)象模型DOMl簡(jiǎn)單應(yīng)用程序接口簡(jiǎn)單應(yīng)用程序接口SAXl等等 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5DHTML和SHTML技術(shù)nDHT

11、ML技術(shù)技術(shù)l與與Web開發(fā)相關(guān)的技術(shù)或者說(shuō)開發(fā)模式開發(fā)相關(guān)的技術(shù)或者說(shuō)開發(fā)模式 ，不是規(guī)范，不是規(guī)范l涉及的內(nèi)容涉及的內(nèi)容uHTML 4.0 規(guī)范規(guī)范 u客戶端腳本語(yǔ)言客戶端腳本語(yǔ)言CSSL（Clent-Side Scripting Language） u文檔對(duì)象模型文檔對(duì)象模型DOM（Document Object Model） ，它將網(wǎng)頁(yè)中的內(nèi)容抽象，它將網(wǎng)頁(yè)中的內(nèi)容抽象成對(duì)象，每個(gè)對(duì)象擁有各自的屬性成對(duì)象，每個(gè)對(duì)象擁有各自的屬性(Properties)、方法、方法(Method)和事件和事件(Events)，可以通過上面的客戶端腳本語(yǔ)言編程控制，可以通過上面的客戶端腳本語(yǔ)言編程控制 u

12、層疊樣式表單層疊樣式表單CSS 技術(shù)技術(shù) nSHTML技術(shù)技術(shù)lSHTML不是一種不是一種HTML規(guī)范，而是一種網(wǎng)站設(shè)計(jì)、開發(fā)與維護(hù)技術(shù)規(guī)范，而是一種網(wǎng)站設(shè)計(jì)、開發(fā)與維護(hù)技術(shù) l是一種是一種Web服務(wù)器服務(wù)器 API，其指令可以在，其指令可以在Web服務(wù)端運(yùn)行，以產(chǎn)生動(dòng)態(tài)的服務(wù)端運(yùn)行，以產(chǎn)生動(dòng)態(tài)的html，是一種類似于，是一種類似于ASP的基于服務(wù)器的網(wǎng)頁(yè)制作技術(shù)的基于服務(wù)器的網(wǎng)頁(yè)制作技術(shù)Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-53.2 超文本標(biāo)記語(yǔ)言HTMLnHTML標(biāo)記語(yǔ)法和文檔結(jié)

13、構(gòu)標(biāo)記語(yǔ)法和文檔結(jié)構(gòu)n文件頭標(biāo)記及子標(biāo)記文件頭標(biāo)記及子標(biāo)記n文件體標(biāo)記及其屬性文件體標(biāo)記及其屬性 n文檔內(nèi)容常用標(biāo)記文檔內(nèi)容常用標(biāo)記n表格（表格（table）n表單（表單（form）n層次塊標(biāo)記層次塊標(biāo)記n對(duì)象和腳本程序標(biāo)記對(duì)象和腳本程序標(biāo)記 n層疊樣式表層疊樣式表CSS技術(shù)技術(shù) n 幀（幀（frame） Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5HTML標(biāo)記語(yǔ)法nHTML標(biāo)記語(yǔ)法標(biāo)記語(yǔ)法l標(biāo)記（標(biāo)記（Tag）u標(biāo)記由封裝在小于號(hào)（標(biāo)記由封裝在小于號(hào)（）構(gòu)成的一對(duì)尖括號(hào)之中）構(gòu)成的一對(duì)

14、尖括號(hào)之中 u一般形式：一般形式：文檔內(nèi)容文檔內(nèi)容 例如：例如：link textl標(biāo)記類型與標(biāo)記屬性標(biāo)記類型與標(biāo)記屬性u(píng)單標(biāo)記單標(biāo)記 u雙標(biāo)記雙標(biāo)記 l標(biāo)記屬性標(biāo)記屬性u(píng) u例如：例如： Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5HTML文檔結(jié)構(gòu) 頭部信息頭部信息 文檔主體文檔主體 （語(yǔ)句部分）（語(yǔ)句部分）Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5文件頭標(biāo)記及子標(biāo)記n 文件頭

15、文件頭l標(biāo)記對(duì)之間的部分稱為文件頭標(biāo)記對(duì)之間的部分稱為文件頭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)記 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5標(biāo)記n標(biāo)記標(biāo)記 l用于標(biāo)識(shí)網(wǎng)頁(yè)主題，其中的內(nèi)容將在瀏覽器的標(biāo)題欄中顯示，不出現(xiàn)在頁(yè)面內(nèi)用于標(biāo)識(shí)網(wǎng)頁(yè)主題，其中的內(nèi)容將在瀏覽器的標(biāo)題欄中顯示，不出現(xiàn)在頁(yè)面內(nèi) n舉例舉例l計(jì)算機(jī)基礎(chǔ)網(wǎng)絡(luò)教學(xué)平臺(tái)計(jì)算機(jī)基礎(chǔ)網(wǎng)絡(luò)教學(xué)平臺(tái)GSL3.0Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北

16、京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5標(biāo)記n 標(biāo)記為單標(biāo)記，沒有尾標(biāo)記。標(biāo)記為單標(biāo)記，沒有尾標(biāo)記。 l 為單標(biāo)記，沒有尾標(biāo)記。為單標(biāo)記，沒有尾標(biāo)記。n 標(biāo)記屬性標(biāo)記屬性l http-equiv屬性屬性l name屬性屬性 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5標(biāo)記-http-equiv屬性nhttp-equiv屬性屬性lhttp-equiv相當(dāng)于相當(dāng)于HTTP的文件頭，向?yàn)g覽器傳回信息，以正確顯示網(wǎng)頁(yè)內(nèi)容的文件頭，向?yàn)g覽器傳回信息，以正確

17、顯示網(wǎng)頁(yè)內(nèi)容l nhttp-equiv屬性參數(shù)值屬性參數(shù)值lcontent-type（顯示字符集的設(shè)定），設(shè)定頁(yè)面使用的字符集。（顯示字符集的設(shè)定），設(shè)定頁(yè)面使用的字符集。 u lexpires（期限），用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間（期限），用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間 u lpragma（Cache模式），禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁(yè)面內(nèi)容模式），禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁(yè)面內(nèi)容 u ，該種設(shè)定訪問者將無(wú)法使，該種設(shè)定訪問者將無(wú)法使用脫機(jī)瀏覽功能用脫機(jī)瀏覽功能 lrefresh（刷新），自動(dòng)刷新并指向新頁(yè)面。（刷新），自動(dòng)刷新并指向新頁(yè)面。 u l window-target（顯示窗口

18、的設(shè)定），強(qiáng)制頁(yè)面在當(dāng)前窗口以獨(dú)立頁(yè)面顯示（顯示窗口的設(shè)定），強(qiáng)制頁(yè)面在當(dāng)前窗口以獨(dú)立頁(yè)面顯示 u，可以用來(lái)防止別人在框，可以用來(lái)防止別人在框架里調(diào)用自己的頁(yè)面架里調(diào)用自己的頁(yè)面 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5標(biāo)記-name屬性nname屬性屬性l主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便中的內(nèi)容主要是便于搜索引擎查找信息和分類信息用的。于搜索引擎查找信息和分類信息用的。 l nname屬性參數(shù)值屬

19、性參數(shù)值lkeywords（關(guān)鍵字），（關(guān)鍵字），keywords用來(lái)告訴搜索引擎該網(wǎng)頁(yè)的關(guān)鍵字是什么用來(lái)告訴搜索引擎該網(wǎng)頁(yè)的關(guān)鍵字是什么 。 u ldescription（網(wǎng)站內(nèi)容描述），（網(wǎng)站內(nèi)容描述），description用來(lái)告訴搜索引擎網(wǎng)站的主要內(nèi)容用來(lái)告訴搜索引擎網(wǎng)站的主要內(nèi)容 u lauthor（作者），標(biāo)注網(wǎng)頁(yè)的作者（作者），標(biāo)注網(wǎng)頁(yè)的作者 u lrobots（機(jī)器人向?qū)В?，（機(jī)器人向?qū)В?，robots用來(lái)告訴搜索機(jī)器人需要索引的頁(yè)面有哪些。用來(lái)告訴搜索機(jī)器人需要索引的頁(yè)面有哪些。 u Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2

20、009.04，ISBN: 978-7-302-19371-5標(biāo)記n 標(biāo)記標(biāo)記l標(biāo)記定義了文檔的基礎(chǔ)標(biāo)記定義了文檔的基礎(chǔ)URL地址，在文檔中所有的相對(duì)地址形地址，在文檔中所有的相對(duì)地址形式的式的URL都是相對(duì)于這里定義的都是相對(duì)于這里定義的URL而言的而言的 。 l文檔中的文檔中的標(biāo)記不能多于一個(gè)，必須放于頭部，并且應(yīng)該在任何標(biāo)記不能多于一個(gè)，必須放于頭部，并且應(yīng)該在任何包含包含URL地址的語(yǔ)句之前地址的語(yǔ)句之前 n標(biāo)記屬性標(biāo)記屬性lhref屬性屬性 ，指定了文檔的基礎(chǔ)，指定了文檔的基礎(chǔ)URL地址，該屬性在地址，該屬性在標(biāo)記中是必標(biāo)記中是必須存在的須存在的 。 ultarget屬性屬性 targ

21、et屬性同框架一起使用，它定義了當(dāng)文檔中的鏈接被點(diǎn)屬性同框架一起使用，它定義了當(dāng)文檔中的鏈接被點(diǎn)擊后，在哪一個(gè)框架中展開頁(yè)面。擊后，在哪一個(gè)框架中展開頁(yè)面。l常用的常用的target的屬性值有：的屬性值有：_blank ，_self ，_parent ，_top u 表明頁(yè)面上所有的鏈接都在新窗口打開表明頁(yè)面上所有的鏈接都在新窗口打開Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5標(biāo)記n 標(biāo)記標(biāo)記l標(biāo)記定義了文檔之間的包含標(biāo)記定義了文檔之間的包含 。 l在在HTML的頭部可以包含任意數(shù)量的的

22、頭部可以包含任意數(shù)量的標(biāo)記標(biāo)記 n 標(biāo)記屬性標(biāo)記屬性ltype，用于指定被包含的文件類型。例如，用于指定被包含的文件類型。例如，text/css是指包含一是指包含一個(gè)層疊樣式表文件。個(gè)層疊樣式表文件。 lhref，指向被包含資源的，指向被包含資源的url地址地址 。 ltitle，一個(gè)字符串，用于描述該鏈接關(guān)系。，一個(gè)字符串，用于描述該鏈接關(guān)系。 lrel，定義，定義HTML文檔和所要包含資源之間的鏈接關(guān)系文檔和所要包含資源之間的鏈接關(guān)系 例如：例如：Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-193

23、71-5文件體標(biāo)記n 標(biāo)記標(biāo)記l在在標(biāo)記對(duì)之間的部分稱為標(biāo)記對(duì)之間的部分稱為html文文檔的文件體。文件體中描述的是瀏覽器中顯示的內(nèi)容。檔的文件體。文件體中描述的是瀏覽器中顯示的內(nèi)容。 l在在標(biāo)記對(duì)之間可包含標(biāo)記對(duì)之間可包含、等標(biāo)記，它們所定義的文本、圖等標(biāo)記，它們所定義的文本、圖像以及超鏈接等將會(huì)在瀏覽器中顯示。像以及超鏈接等將會(huì)在瀏覽器中顯示。 n 標(biāo)記屬性標(biāo)記屬性l一般屬性一般屬性l事件屬性事件屬性Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5標(biāo)記屬性-1標(biāo)記一般屬性標(biāo)記一般屬性We

24、b技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5標(biāo)記屬性-2標(biāo)記事件屬性標(biāo)記事件屬性Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5一個(gè)簡(jiǎn)單HTML文檔示例文本編輯器文本編輯器 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5一個(gè)簡(jiǎn)單HTML文檔示例（Cont1）使用使用FrontPage編

25、輯編輯 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5一個(gè)簡(jiǎn)單HTML文檔示例（Cont2）在瀏覽器中打開在瀏覽器中打開 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5文檔內(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)記n 圖像標(biāo)記圖像標(biāo)記 n 超鏈接標(biāo)記超鏈接標(biāo)記 n 影像地圖標(biāo)記影像地圖標(biāo)記

26、 n 走馬燈標(biāo)記走馬燈標(biāo)記 n 注釋標(biāo)記注釋標(biāo)記Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5標(biāo)題標(biāo)記n標(biāo)題標(biāo)記標(biāo)題標(biāo)記l n標(biāo)記屬性標(biāo)記屬性lAlign使用IntelliSense技術(shù)查看標(biāo)記屬性Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5段落標(biāo)記、換行標(biāo)記n段落標(biāo)記段落標(biāo)記l，標(biāo)記一個(gè)段落，輸出位置轉(zhuǎn)到下一行開始，并增加一個(gè)空，標(biāo)記一個(gè)段落，輸出位置轉(zhuǎn)到下一行開始，并增加一個(gè)空行

27、。行。n標(biāo)記屬性標(biāo)記屬性Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5水平線標(biāo)記n段落標(biāo)記段落標(biāo)記l水平線標(biāo)記水平線標(biāo)記 ，插入一條水平線。，插入一條水平線。 單標(biāo)記。單標(biāo)記。n標(biāo)記屬性標(biāo)記屬性lwidth代碼：Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5文本格式標(biāo)記n字體標(biāo)記字體標(biāo)記 l常用的屬性有常用的屬性有face、size和和color，分別設(shè)置字體、文字大小和顏色。，分別設(shè)

28、置字體、文字大小和顏色。 n粗體、斜體和下劃線標(biāo)記粗體、斜體和下劃線標(biāo)記 l、 n字體放大、縮小、上標(biāo)和下標(biāo)顯示標(biāo)記字體放大、縮小、上標(biāo)和下標(biāo)顯示標(biāo)記 l、 n、 l標(biāo)記和標(biāo)記和標(biāo)記類似，都是字體加粗標(biāo)記。標(biāo)記類似，都是字體加粗標(biāo)記。 l標(biāo)記和標(biāo)記和標(biāo)記類似，是斜體強(qiáng)調(diào)標(biāo)記。標(biāo)記類似，是斜體強(qiáng)調(diào)標(biāo)記。 l為打字字體為打字字體 Courier字體，字母等寬標(biāo)記。字體，字母等寬標(biāo)記。l為傳記引述斜體效果標(biāo)記。為傳記引述斜體效果標(biāo)記。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5文本格式標(biāo)記（

29、舉例）n標(biāo)記的聯(lián)合使用舉例標(biāo)記的聯(lián)合使用舉例Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5圖像標(biāo)記n圖像標(biāo)記圖像標(biāo)記 l 單標(biāo)記，用以插入圖像單標(biāo)記，用以插入圖像 n標(biāo)記屬性標(biāo)記屬性l align：設(shè)置圖像的對(duì)齊方式：設(shè)置圖像的對(duì)齊方式 l id：指定的圖片：指定的圖片id號(hào)，用于對(duì)圖像的程序訪問號(hào)，用于對(duì)圖像的程序訪問l class：指定圖像所屬的類型（樣式類）：指定圖像所屬的類型（樣式類） l name：用于設(shè)定圖像的名稱，用于對(duì)圖像的程序訪問。：用于設(shè)定圖像的名稱，用于對(duì)圖像的程序訪

30、問。l src：設(shè)置插入圖像的：設(shè)置插入圖像的url地址，即插入圖像的路徑和文件名。地址，即插入圖像的路徑和文件名。 l title：屬性值為一字符串，鼠標(biāo)指向圖片時(shí)，鼠標(biāo)右下角顯示標(biāo)題文本。：屬性值為一字符串，鼠標(biāo)指向圖片時(shí)，鼠標(biāo)右下角顯示標(biāo)題文本。 l alt：設(shè)置圖像替代文字，主要用于在瀏覽器還沒有裝入圖像（或關(guān)閉圖像顯示）的時(shí)候，此：設(shè)置圖像替代文字，主要用于在瀏覽器還沒有裝入圖像（或關(guān)閉圖像顯示）的時(shí)候，此圖像的顯示信息。圖像的顯示信息。l border：設(shè)置圖片邊框。：設(shè)置圖片邊框。 l height和和width：分別用于設(shè)置圖像的高度和寬度：分別用于設(shè)置圖像的高度和寬度 l h

31、space和和vspace：分別用于設(shè)置圖像的左右邊框大小和上下邊框大小。：分別用于設(shè)置圖像的左右邊框大小和上下邊框大小。 l ismp和和usemap：在應(yīng)用圖像地圖（：在應(yīng)用圖像地圖（map）時(shí)使用。）時(shí)使用。 n事件屬性事件屬性 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5圖像標(biāo)記（Exa）Title屬性屬性n如果在提示信息如果在提示信息中，需要換行，中，需要換行，可以使用可以使用“”或或“”來(lái)完成來(lái)完成換行輸出換行輸出n例如：例如：title= 提示：提示： 泰山日出泰山日出We

32、b技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5例2-2圖像標(biāo)記的應(yīng)用示例Taishan IntroductionWeb技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5例2-2圖像標(biāo)記的應(yīng)用示例（顯示結(jié)果）在瀏覽器中的顯示在瀏覽器中的顯示W(wǎng)eb技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5超鏈接標(biāo)記

33、n超鏈接的分類超鏈接的分類 l文本超鏈接文本超鏈接 u字符串字符串 l圖片超鏈接圖片超鏈接u n定義書簽定義書簽l書簽文本書簽文本n標(biāo)記其它常用屬性標(biāo)記其它常用屬性ltarget屬性，定義超鏈接打開的目標(biāo)窗口。屬性，定義超鏈接打開的目標(biāo)窗口。 u_self（相同框架），（相同框架），_blank（新建窗口），（新建窗口），_top（整頁(yè)），（整頁(yè)），_parent（父窗口）。（父窗口）。 ltitle屬性，屬性值為一字符串，鼠標(biāo)指向超鏈接時(shí)，鼠標(biāo)右下角顯示標(biāo)題文本。屬性，屬性值為一字符串，鼠標(biāo)指向超鏈接時(shí)，鼠標(biāo)右下角顯示標(biāo)題文本。 lonclick事件屬性事件屬性Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版

34、），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5例2-3超鏈接標(biāo)記使用示例Shandong Travel美麗的山東美麗的山東濟(jì)南濟(jì)南 青島青島 曲阜曲阜 泰山泰山 煙臺(tái)煙臺(tái) 威海威海 日日照照濟(jì)南濟(jì)南青島青島主要旅游網(wǎng)主要旅游網(wǎng)返回返回關(guān)閉窗口關(guān)閉窗口Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5例2-3 顯示網(wǎng)頁(yè)在瀏覽器中的顯示在瀏覽器中的顯示 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北

35、京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5影像地圖標(biāo)記 n什么是影像地圖什么是影像地圖l所謂影像地圖，就是在一個(gè)圖片上定義一系列區(qū)域，每個(gè)區(qū)域?qū)?yīng)一個(gè)超鏈接。所謂影像地圖，就是在一個(gè)圖片上定義一系列區(qū)域，每個(gè)區(qū)域?qū)?yīng)一個(gè)超鏈接。 n標(biāo)記形式標(biāo)記形式 n熱點(diǎn)標(biāo)記（熱點(diǎn)標(biāo)記（）屬性）屬性lhref屬性，用于設(shè)定該熱點(diǎn)所鏈接的屬性，用于設(shè)定該熱點(diǎn)所鏈接的url地址。地址。lshape和和coods屬性，屬性，shape和和coords是兩個(gè)主要的參數(shù)，用于設(shè)定熱點(diǎn)的形狀和是兩個(gè)主要的參數(shù)，用于設(shè)定熱點(diǎn)的形狀和大小。大小。ushape=“rect” ，shape

36、=“circle” ，shape=poligon Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5在Frontpage 2003中設(shè)置影像地圖標(biāo)記n首先插入一幅圖片，然后在圖片上右單擊，執(zhí)行首先插入一幅圖片，然后在圖片上右單擊，執(zhí)行“顯示圖片工具欄顯示圖片工具欄”命令，命令，即可定義熱點(diǎn)區(qū)域。即可定義熱點(diǎn)區(qū)域。Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5走馬燈標(biāo)記n“走馬燈走馬燈”標(biāo)記

37、標(biāo)記用于標(biāo)記一行或多行滾動(dòng)的文本，也可用于標(biāo)記一行或多行滾動(dòng)的文本，也可以將文本帶有超鏈接，以增加網(wǎng)頁(yè)的動(dòng)態(tài)效果。以將文本帶有超鏈接，以增加網(wǎng)頁(yè)的動(dòng)態(tài)效果。 n標(biāo)記常用屬性標(biāo)記常用屬性lalign屬性，設(shè)定活動(dòng)字幕的位置，取值可以是屬性，設(shè)定活動(dòng)字幕的位置，取值可以是left、center、right、top或或bottom。 l bgcolor屬性，設(shè)定活動(dòng)字幕的背景顏色，一般是十六進(jìn)制數(shù)。屬性，設(shè)定活動(dòng)字幕的背景顏色，一般是十六進(jìn)制數(shù)。 ldirection屬性，設(shè)定活動(dòng)字幕的滾動(dòng)方向，取值可以是屬性，設(shè)定活動(dòng)字幕的滾動(dòng)方向，取值可以是left、right、up或或down。 lbehav

38、ior屬性，設(shè)定滾動(dòng)的方式，主要有三種方式：屬性，設(shè)定滾動(dòng)的方式，主要有三種方式：behavior=“scroll”表示由一端表示由一端滾動(dòng)到另一端；滾動(dòng)到另一端；behavior=“slide”表示由一端快速滑動(dòng)到另一端，且不再重復(fù)；表示由一端快速滑動(dòng)到另一端，且不再重復(fù)； behavior=“alternate”表示在兩端之間來(lái)回滾動(dòng)。表示在兩端之間來(lái)回滾動(dòng)。 lheight和和width屬性，設(shè)定滾動(dòng)字幕的高度和寬度。屬性，設(shè)定滾動(dòng)字幕的高度和寬度。 lhspace和和vspace屬性，設(shè)定滾動(dòng)字幕的左右邊框和上下邊框的寬度。屬性，設(shè)定滾動(dòng)字幕的左右邊框和上下邊框的寬度。 lscroll

39、amount屬性，設(shè)定活動(dòng)字幕的滾動(dòng)距離。屬性，設(shè)定活動(dòng)字幕的滾動(dòng)距離。 lscrolldelay屬性，用于設(shè)定滾動(dòng)兩次之間的延遲時(shí)間。屬性，用于設(shè)定滾動(dòng)兩次之間的延遲時(shí)間。 lloop屬性，用于設(shè)定滾動(dòng)的次數(shù)，當(dāng)屬性，用于設(shè)定滾動(dòng)的次數(shù)，當(dāng)loop=-1表示一直滾動(dòng)下去，直到頁(yè)面更新。表示一直滾動(dòng)下去，直到頁(yè)面更新。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5走馬燈標(biāo)記舉例n例例1活動(dòng)字幕內(nèi)容第一行活動(dòng)字幕內(nèi)容第一行活動(dòng)字幕內(nèi)容第二行活動(dòng)字幕內(nèi)容第二行活動(dòng)字幕內(nèi)容第三行活動(dòng)字幕內(nèi)容第

40、三行n例例2歡迎光臨歡迎光臨n例例3滾動(dòng)的內(nèi)容帶有超鏈接，可以將內(nèi)容用滾動(dòng)的內(nèi)容帶有超鏈接，可以將內(nèi)容用標(biāo)記，即：標(biāo)記，即：活動(dòng)字幕內(nèi)容活動(dòng)字幕內(nèi)容 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5走馬燈標(biāo)記顯示效果n 顯示顯示W(wǎng)eb技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5走馬燈標(biāo)記舉例（代碼）活動(dòng)字幕內(nèi)容第一行活動(dòng)字幕內(nèi)容第一行活動(dòng)字幕內(nèi)容第二行活動(dòng)字幕內(nèi)容第二行活動(dòng)字幕內(nèi)容第三行活動(dòng)

41、字幕內(nèi)容第三行站點(diǎn)更新站點(diǎn)更新.泰山歡迎您泰山歡迎您Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5表格（Table）n什么是表格？什么是表格？l表格是由行、列構(gòu)成的。每一行可以分成若干列，每一列成為一表格是由行、列構(gòu)成的。每一行可以分成若干列，每一列成為一個(gè)單元格，相鄰的單元格可以合并。個(gè)單元格，相鄰的單元格可以合并。l應(yīng)用應(yīng)用u頁(yè)面布局頁(yè)面布局n相關(guān)標(biāo)記相關(guān)標(biāo)記l表格標(biāo)記表格標(biāo)記u l行標(biāo)記行標(biāo)記u l列標(biāo)記列標(biāo)記u Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北

42、京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5表格相關(guān)標(biāo)記屬性n標(biāo)記屬性標(biāo)記屬性l一般屬性一般屬性l事件屬性事件屬性Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5例例2-42-4使用表格示例n HTML表格表格Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5例例2-42-4使用表格示例（代碼） 學(xué)生成績(jī)等記表學(xué)生成績(jī)等記表 學(xué)學(xué)  號(hào)號(hào) 姓姓

43、  名名 高等數(shù)學(xué)高等數(shù)學(xué) 英英  語(yǔ)語(yǔ) 2008000001 張三張三 95 90 說(shuō)說(shuō) 明明 成績(jī)成績(jī)=平時(shí)平時(shí)*20%+期末期末*80% 2006年年1月月 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5表格的復(fù)雜設(shè)計(jì)n 表格嵌套表格嵌套l 單元格內(nèi)定義表格單元格內(nèi)定義表格n 立體表格設(shè)計(jì)立體表格設(shè)計(jì)l 設(shè)置表格單元格屬性設(shè)置表格單元格屬性n 表格居中表格居中Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，

44、ISBN: 978-7-302-19371-5表單（form）n用戶交互用戶交互l表單表單l表單標(biāo)記表單標(biāo)記 n表單元素表單元素l單行文本框輸入單行文本框輸入l密碼文本框輸入密碼文本框輸入 l多行文本框輸入多行文本框輸入 lbutton按鈕輸入按鈕輸入 lradio單選鈕輸入單選鈕輸入 l復(fù)選框輸入復(fù)選框輸入l復(fù)選列表框輸入復(fù)選列表框輸入lhidden隱藏元素隱藏元素 l文件上傳文件上傳 l表單提交按鈕標(biāo)記表單提交按鈕標(biāo)記submit/reset Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371

45、-5表單標(biāo)記n一般形式一般形式 表單元素表單元素 n標(biāo)記屬性標(biāo)記屬性lname屬性，給出表單的名稱，用于腳本編程屬性，給出表單的名稱，用于腳本編程 lmethod屬性，屬性，method屬性用來(lái)定義服務(wù)器表單處理程序從表單中獲得信息的屬性用來(lái)定義服務(wù)器表單處理程序從表單中獲得信息的方式方式uget方法將數(shù)據(jù)打包放置在環(huán)境變量方法將數(shù)據(jù)打包放置在環(huán)境變量QUERY_STRING中作為中作為URL整體的一部分傳遞整體的一部分傳遞給服務(wù)器。給服務(wù)器。 upost方法分離地傳遞數(shù)據(jù)給服務(wù)器表單處理程序，不需要設(shè)置方法分離地傳遞數(shù)據(jù)給服務(wù)器表單處理程序，不需要設(shè)置QUERY_STRING環(huán)環(huán)境變量，因此

46、境變量，因此POST有更好的安全性，表單中數(shù)據(jù)的多少是任意的，因?yàn)檫@些數(shù)據(jù)有更好的安全性，表單中數(shù)據(jù)的多少是任意的，因?yàn)檫@些數(shù)據(jù)從來(lái)也不分配到一個(gè)變量里。從來(lái)也不分配到一個(gè)變量里。 laction屬性，設(shè)置表單處理程序的網(wǎng)絡(luò)路徑和程序名，當(dāng)用戶提交表單時(shí)，服務(wù)屬性，設(shè)置表單處理程序的網(wǎng)絡(luò)路徑和程序名，當(dāng)用戶提交表單時(shí)，服務(wù)器將執(zhí)行器將執(zhí)行action屬性所設(shè)置的程序。屬性所設(shè)置的程序。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5輸入類型標(biāo)記n 一般形式一般形式輸入類型標(biāo)記輸入類型標(biāo)記

47、n 標(biāo)記屬性標(biāo)記屬性ltype屬性，給出輸入控件的類型，常用的控件類型有：屬性，給出輸入控件的類型，常用的控件類型有：text，textarea，radio，checkbox，button，image，hidden，password，file，submit/reset lname屬性，設(shè)置輸入控件的名字，程序需要通過控件名稱處理屬性，設(shè)置輸入控件的名字，程序需要通過控件名稱處理用戶輸入數(shù)據(jù)，同時(shí)，設(shè)置控件名稱可以增加用戶輸入數(shù)據(jù)，同時(shí)，設(shè)置控件名稱可以增加HTML代碼的可讀代碼的可讀性。性。 lvalue屬性，保存用戶的輸入和選擇，服務(wù)器通過調(diào)用輸入?yún)^(qū)域?qū)傩?，保存用戶的輸入和選擇，服務(wù)器通過調(diào)

48、用輸入?yún)^(qū)域的的value屬性值來(lái)獲得輸入控件的數(shù)據(jù)。另外，用戶可以通過屬性值來(lái)獲得輸入控件的數(shù)據(jù)。另外，用戶可以通過value屬性來(lái)指定輸入?yún)^(qū)域的缺省值屬性來(lái)指定輸入?yún)^(qū)域的缺省值 。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5單行文本框輸入標(biāo)記n單行文本框輸入單行文本框輸入n主要屬性主要屬性lname屬性，文本框名稱，便于程序獲取用戶輸入。屬性，文本框名稱，便于程序獲取用戶輸入。 lvalue屬性，存儲(chǔ)文本框的取值，可以設(shè)一個(gè)初始值。屬性，存儲(chǔ)文本框的取值，可以設(shè)一個(gè)初始值。 lsiz

49、e屬性，設(shè)置表示文本框的顯示長(zhǎng)度。屬性，設(shè)置表示文本框的顯示長(zhǎng)度。 lmaxlength屬性，屬性，maxlength是文本框中輸入的有效數(shù)據(jù)長(zhǎng)度。是文本框中輸入的有效數(shù)據(jù)長(zhǎng)度。 n例如：例如：用戶賬戶：用戶賬戶： Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5密碼文本框輸入標(biāo)記n密碼文本框輸入密碼文本框輸入使用輸入密碼文本框控件，當(dāng)用戶輸入密碼時(shí)，區(qū)域內(nèi)將會(huì)顯示使用輸入密碼文本框控件，當(dāng)用戶輸入密碼時(shí)，區(qū)域內(nèi)將會(huì)顯示*號(hào)號(hào) n主要屬性主要屬性lname屬性，文本框名稱，便于程序獲取用戶輸

50、入。屬性，文本框名稱，便于程序獲取用戶輸入。 lvalue屬性，存儲(chǔ)文本框的取值，可以設(shè)一個(gè)初始值。屬性，存儲(chǔ)文本框的取值，可以設(shè)一個(gè)初始值。 lsize屬性，設(shè)置表示文本框的顯示長(zhǎng)度。屬性，設(shè)置表示文本框的顯示長(zhǎng)度。 lmaxlength屬性，屬性，maxlength是文本框中輸入的有效數(shù)據(jù)長(zhǎng)度。是文本框中輸入的有效數(shù)據(jù)長(zhǎng)度。 n例如：例如：密碼：密碼： Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5多行文本框輸入標(biāo)記n多行文本框輸入多行文本框輸入l多行文本框，又稱滾動(dòng)文本框。和其它的輸

51、入類型不同，它不是通過多行文本框，又稱滾動(dòng)文本框。和其它的輸入類型不同，它不是通過來(lái)指定的，它是一個(gè)雙標(biāo)記來(lái)指定的，它是一個(gè)雙標(biāo)記 input text n主要屬性主要屬性lname屬性，多行文本框的名稱，便于程序獲取用戶輸入。屬性，多行文本框的名稱，便于程序獲取用戶輸入。 lrows屬性和屬性和cols屬性，分別用來(lái)設(shè)置文本框的列數(shù)和行數(shù)，列與行以字符數(shù)為單位。屬性，分別用來(lái)設(shè)置文本框的列數(shù)和行數(shù)，列與行以字符數(shù)為單位。l標(biāo)記對(duì)之間的文本標(biāo)記對(duì)之間的文本input text為顯示的初始文本內(nèi)容。為顯示的初始文本內(nèi)容。 n例如：例如： 請(qǐng)輸入簡(jiǎn)要說(shuō)明請(qǐng)輸入簡(jiǎn)要說(shuō)明Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版

52、），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5 button按鈕輸入n 按鈕輸入按鈕輸入input type=button n主要屬性主要屬性l name屬性，屬性，name為按鈕名稱，便于程序?qū)Π粹o的操作。為按鈕名稱，便于程序?qū)Π粹o的操作。 l value屬性，屬性，value為按鈕的顯示名稱。為按鈕的顯示名稱。 button按鈕除了具有若干的一般屬性外，同時(shí)還可以接受各種鼠標(biāo)事件，具有不同的鼠標(biāo)和鍵盤事按鈕除了具有若干的一般屬性外，同時(shí)還可以接受各種鼠標(biāo)事件，具有不同的鼠標(biāo)和鍵盤事件屬性。件屬性。 n 例如：例如：

53、 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5radio單選鈕輸入標(biāo)記 n radio單選鈕輸入單選鈕輸入單選鈕主要用于從多個(gè)可選項(xiàng)中，選擇其中之一。往往是若干個(gè)單選鈕主要用于從多個(gè)可選項(xiàng)中，選擇其中之一。往往是若干個(gè)radio為為一組，他們具有相同的一組，他們具有相同的name，但不同的，但不同的value，從而選擇其中之一。，從而選擇其中之一。n主要屬性主要屬性l name屬性，單選扭的名稱，一般是若干個(gè)屬性，單選扭的名稱，一般是若干個(gè)radio一組，取相同的一組，取相同的name。

54、 l checked屬性，用來(lái)設(shè)置該單選框缺省時(shí)是否被選中，相同屬性，用來(lái)設(shè)置該單選框缺省時(shí)是否被選中，相同name的的多個(gè)多個(gè)radio中只能有一個(gè)選擇，或都不使用該參數(shù)。中只能有一個(gè)選擇，或都不使用該參數(shù)。 l value屬性，存儲(chǔ)單旋鈕的取值，多個(gè)具有相同屬性，存儲(chǔ)單旋鈕的取值，多個(gè)具有相同name的單旋鈕應(yīng)該具的單旋鈕應(yīng)該具有不同的有不同的value。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5radio單選鈕舉例 n 例如：例如： 性別：性別： 女性女性 男性男性 學(xué)歷：學(xué)歷

55、： 學(xué)士學(xué)士 碩士碩士 博士博士 n 顯示顯示W(wǎng)eb技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5復(fù)選框輸入標(biāo)記n 復(fù)選框輸入復(fù)選框輸入l 復(fù)選框是對(duì)某種輸入做出復(fù)選框是對(duì)某種輸入做出“是是”或或“否否”的選擇的選擇l n 常用屬性常用屬性l name屬性，屬性，name為復(fù)選框的名稱，便于程序獲取用戶輸入為復(fù)選框的名稱，便于程序獲取用戶輸入l value屬性，每一個(gè)屬性，每一個(gè)checkbox 必須有一個(gè)必須有一個(gè)value，當(dāng)復(fù)選框選中時(shí)，當(dāng)復(fù)選框選中時(shí)，value值便會(huì)傳到表單的值便會(huì)傳到

56、表單的action屬性指定的程序中。屬性指定的程序中。 l checked屬性，用來(lái)設(shè)置該復(fù)選框缺省時(shí)是否被選中。屬性，用來(lái)設(shè)置該復(fù)選框缺省時(shí)是否被選中。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5復(fù)選框輸入標(biāo)記（舉例）n 例如例如興趣愛好：興趣愛好： 體育體育 音樂音樂 文學(xué)文學(xué) 其它其它 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5復(fù)選列表框輸入標(biāo)記n 復(fù)選列表框復(fù)選列表框創(chuàng)

57、建一個(gè)下拉列表框或可以復(fù)選的列表框，定義復(fù)選列表框不需要在創(chuàng)建一個(gè)下拉列表框或可以復(fù)選的列表框，定義復(fù)選列表框不需要在中中指定輸入類型指定輸入類型 n 標(biāo)記標(biāo)記 屬性屬性l name屬性，屬性，name為下拉式列表控件名稱，便于程序獲取用戶輸入。為下拉式列表控件名稱，便于程序獲取用戶輸入。 l size屬性，下拉式列表的高度，缺省時(shí)值為屬性，下拉式列表的高度，缺省時(shí)值為1，若沒有設(shè)置（加入），若沒有設(shè)置（加入）multiple屬性，顯屬性，顯示的將是一個(gè)彈出式的列表框。若使用此參數(shù)則不會(huì)有示的將是一個(gè)彈出式的列表框。若使用此參數(shù)則不會(huì)有PopUp效果。如果小于可選的效果。如果小于可選的項(xiàng)目數(shù)量

58、，則出現(xiàn)垂直滾動(dòng)條。項(xiàng)目數(shù)量，則出現(xiàn)垂直滾動(dòng)條。 l multiple屬性，指定是否可以多選。屬性，指定是否可以多選。multiple屬性不用賦值，直接加入屬性不用賦值，直接加入標(biāo)記中標(biāo)記中即可使用，加入了此屬性后列表框就成了可多選的了。即可使用，加入了此屬性后列表框就成了可多選的了。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5復(fù)選列表框輸入標(biāo)記（舉例）n 舉例舉例城市：城市： 北京北京 濟(jì)南濟(jì)南 青島青島Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大

59、學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5hidden隱藏元素標(biāo)記n hidden隱藏元素隱藏元素l 在一個(gè)表單中，可以定義隱藏表單元素，它在網(wǎng)頁(yè)上并不顯示，不需要用戶在一個(gè)表單中，可以定義隱藏表單元素，它在網(wǎng)頁(yè)上并不顯示，不需要用戶輸入，主要目的是隨表單一起傳給表單處理程序一個(gè)特定的值，用于為網(wǎng)頁(yè)輸入，主要目的是隨表單一起傳給表單處理程序一個(gè)特定的值，用于為網(wǎng)頁(yè)處理程序傳送數(shù)據(jù)。處理程序傳送數(shù)據(jù)。l n 例如例如Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5文件上傳標(biāo)記n 文件上傳標(biāo)記文件上傳標(biāo)記 n 一般屬性一般屬性l name屬性為控件名稱，屬性為控件名稱，l size屬性顯示文本框長(zhǎng)度。屬性顯示文本框長(zhǎng)度。l Accept屬性設(shè)置上載文件過濾，即點(diǎn)擊屬性設(shè)置上載文件過濾，即點(diǎn)擊“瀏覽瀏覽”按鈕時(shí)，只顯示指定文件類按鈕時(shí)，只顯示指定文件類型的文件列表。型的文件列表。 n 例如例如提交論文：提交論文：Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5表單提交與重填按鈕n表單提交表單提交l當(dāng)表單填寫完畢后，需要選擇的當(dāng)表