山大《網(wǎng)站設(shè)計與建設(shè)》課件第10章 HTML基礎(chǔ)

1、第10章 HTML基礎(chǔ)第三部分 網(wǎng)站設(shè)計技術(shù) 101 HTML簡介Hypertext Mrakup Language（超文本標(biāo)記語言）是為網(wǎng)頁創(chuàng)建和其它可在網(wǎng)頁瀏覽器中看到的信息而設(shè)計的一種標(biāo)記語言。HTML已經(jīng)成為描述和顯示網(wǎng)頁的國際標(biāo)準(zhǔn)，由萬維網(wǎng)聯(lián)盟（W3C）維護。HTML的一個重要特點是超級鏈接hyperlink一個HTML文件的后綴名是.html或者是.htmHTML是一個純文本格式的ASCII文件HTML不是一種編程語言，而是一種描述性的標(biāo)記語言，用于描述超文本中內(nèi)容的顯示方式。這些內(nèi)容的描述都是通過HTML標(biāo)記來完成的標(biāo)記：被用來結(jié)構(gòu)化信息例如標(biāo)題、段落和列表等等，也可用來在一定程

2、度上描述文檔的外觀和語義，比如圖片的顯示尺寸，文字的大小、顏色、字體等。 Title of page This is my first homepage. This text is bold HTML的標(biāo)記不區(qū)分大小寫。2.瀏覽器：HTML解釋器、網(wǎng)頁解釋器網(wǎng)站瀏覽器（Browser）是萬維網(wǎng)(Web)服務(wù)的客戶端瀏覽程序，可向萬維網(wǎng)(Web)服務(wù)器發(fā)送各種請求，并對從服務(wù)器發(fā)來的HTML超文本信息和各種多媒體數(shù)據(jù)格式進行解釋、顯示和播放，簡言之瀏覽器就是訪問網(wǎng)站的客戶端工具軟件。HTML解釋器并不局限于瀏覽器最常用瀏覽器微軟的Internet ExplorerIE 10，包括Metro界面、

3、HTML5、CSS3以及大量安全更新。奇虎360的360安全瀏覽器擁有國內(nèi)領(lǐng)先的惡意網(wǎng)址庫，采用云查殺引擎，可自動攔截掛馬、欺詐、網(wǎng)銀仿冒等惡意網(wǎng)址。獨創(chuàng)的“隔離模式”，讓用戶在訪問木馬網(wǎng)站時也不會感染。無痕瀏覽，能夠更大限度保護用戶的上網(wǎng)隱私。360安全瀏覽器體積小巧、速度快、極少崩潰，并擁有翻譯、截圖、鼠標(biāo)手勢、廣告過濾等幾十種實用功能.Mozilla的Firefox基于Mozilla開源項目發(fā)展而來最新的Firefox 9 新增了類型推斷（Type Inference），大幅提高了JavaScript引擎的渲染速度，使得很多富含圖片、視頻、游戲以及3D圖片的富網(wǎng)站和網(wǎng)絡(luò)應(yīng)用能夠更快的加載

4、和運行Apple的SafariOperaOpera是挪威人開發(fā)的免費瀏覽器，其特點是快速小巧、符合工業(yè)標(biāo)準(zhǔn)、適用于多種操作系統(tǒng)。對于手機和掌上電腦來說，Opera是首選瀏覽器。Google Chrome免費、開源 web 瀏覽器，采用BSD許可證授權(quán)并開放源代碼。2011年11月，市場份額正式超過Firefox，躍居第二支持Windows平臺、Mac OS X和Linux版本。Chrome瀏覽速度在眾多瀏覽器中走在前列GreenBrowser瀏覽器maxthon傲游瀏覽器等3. 瀏覽網(wǎng)頁原理HTML基本原理下載瀏覽器將文檔解釋為網(wǎng)頁并在瀏覽器窗口中顯示出來。標(biāo)準(zhǔn)HTML能在不同瀏覽器上產(chǎn)生同樣

5、的效果 HTML并不能精確地定義文檔信息如何顯示和排列，而只是建議瀏覽器應(yīng)該如何顯示和排列這些信息102 HTML標(biāo)準(zhǔn)與發(fā)展歷史萬維網(wǎng)聯(lián)盟World Wide Web Consortium，W3C，HTML、XHTML和CSS，HTML 和 XHTML 用來提供內(nèi)容CSS 用來對內(nèi)容進行修飾 W3C 制定的 web 標(biāo)準(zhǔn)并非強制而只是推薦標(biāo)準(zhǔn)。HTML標(biāo)準(zhǔn)定義了構(gòu)成HTML語言的每一個獨立元素以及這些元素是指示如何在瀏覽器中顯示HTML文檔中的指令和標(biāo)記符。這一標(biāo)準(zhǔn)確保在不同的瀏覽器和計算機平臺上超文本顯示的一致性2HTML的起源SGML（standard generalized markup

6、 language，標(biāo)準(zhǔn)通用標(biāo)記語言）語言，于1986年獲得國際標(biāo)準(zhǔn)化組織的批準(zhǔn)。這種語言是為了在各種網(wǎng)絡(luò)環(huán)境之間、不同文件格式之間進行交流而使用的一種語言格式。它的文件格式標(biāo)準(zhǔn)化，并統(tǒng)一使用標(biāo)記符號（tag）對文件的內(nèi)容進行標(biāo)記。HTML于1991年問世，它是SGML的一個子集。HTML是一種有前后關(guān)系格式化的語言，因此在HTML中除了包含文本內(nèi)容，還包含通常是成對出現(xiàn)的標(biāo)記。標(biāo)記是包括在尖括號中的文本，為HTML的解釋器提供指令。3. HTML版本歷史HTML于1991年問世，它是在SGML基礎(chǔ)上開發(fā)成功的，可以說它是SGML的一個子集。 第一版1993年6月草案（并非標(biāo)準(zhǔn)）HTML2.0

7、：1995年11月發(fā)布 HTML3.2：1996年1月14日，表格、框架 HTML4.0：1997年12月18日，CSS，開訪問性HTML4.01：1999年12月24日，XHTMLHTML 5.0最新草案2008年1月22日發(fā)布，支持HTML和XHTML。HTML 5.02012年12月17日，W3C推薦標(biāo)準(zhǔn)。“HTML5是開放的Web網(wǎng)絡(luò)平臺的奠基石。”HTML 5.1最新草案2013年5月28日發(fā)布，該規(guī)范定義了第五次重大版本，第一次要修訂萬維網(wǎng)的核心語言：超文本標(biāo)記語言（HTML）。HTML 開發(fā)環(huán)境？第16章 網(wǎng)站開發(fā)設(shè)計工具103 HTML標(biāo)記與屬性標(biāo)記（Tag）標(biāo)記由封裝在小于號

8、（）構(gòu)成的一對尖括號之中，標(biāo)記一般分首標(biāo)記和尾標(biāo)記，它們成對出現(xiàn)。 例如：text with underline 開始標(biāo)記，開啟標(biāo)記結(jié)束標(biāo)記 ，關(guān)閉標(biāo)記HTML文件結(jié)構(gòu) 例子1之間包含頭部(head)與實體(body)兩大部分HTML標(biāo)記語法標(biāo)記單標(biāo)記，例如：, 雙標(biāo)記, 例如：注釋標(biāo)記：或注釋內(nèi)容通過屬性擴展HTML元素的描述能力標(biāo)記屬性 例如： 引號不對，出問題5HTML字符實體 標(biāo)記一般形式 各種子標(biāo)記 腳本語言定義的函數(shù)或變量說明功能開啟（）和結(jié)束（ ）文件頭標(biāo)記文件頭部分的內(nèi)容不在網(wǎng)頁中顯示屬性無文件頭及相關(guān)標(biāo)記 標(biāo)記標(biāo)記 標(biāo)記標(biāo)記標(biāo)記 標(biāo)記一般形式網(wǎng)頁標(biāo)題文本例如：歡迎光臨GSL網(wǎng)

9、站 功能用于標(biāo)識網(wǎng)頁主題，其中的內(nèi)容將在瀏覽器的標(biāo)題欄中顯示，不出現(xiàn)在頁面內(nèi)。 屬性無 標(biāo)記（舉例） HTML文檔代碼歡迎光臨GSL網(wǎng)站 標(biāo)記功能標(biāo)記定義文檔的基礎(chǔ)URL地址，在文檔中所有的相對地址形式的URL都是相對于這里定義的URL而言的。 屬性href 屬性，href屬性指定了文檔的基礎(chǔ)URL地址，該屬性在標(biāo)記中是必須存在的。例如：target屬性，target屬性同框架一起使用，它定義了當(dāng)文檔中的鏈接被點擊后，在哪一個框架中展開頁面。如果文檔中超級鏈接沒有明確指定展開頁面的目標(biāo)框架集，則就使用這里定義的地址代替。 _blank，表明在新窗口中打開鏈接指向的頁面。_top，在鏈接所在的完

10、整窗口中展開頁面。_self，在當(dāng)前文檔的框架中打開頁面。 _parent，在當(dāng)前文檔的父窗口中打開頁面。 例如： 表明頁面上所有的鏈接都在新窗口打開。標(biāo)記功能標(biāo)記定義文檔之間的包含。在HTML的頭部可以包含任意數(shù)量的標(biāo)記。 屬性href ，href屬性值指向鏈接資源所在的URL，其中url是鏈接的地址。type，type屬性用于指定被包含的媒體類型 title ，title屬性值為一個字符串，用于描述該鏈接關(guān)系。 rel ，rel屬性定義了文檔和所鏈接資源的鏈接關(guān)系，可能的值包括：stylesheet， alternate stylesheet ，start，next，prev，conten

11、ts，index，glossary，copyright，chapter，section，subsection，appendix，help，和bookmark等。如果希望指定不止一個鏈接關(guān)系，可以在這些值之間用空格隔開。 rev ，rev屬性定義了文檔和所鏈接資源之間的反向關(guān)系。其中l(wèi)inktype表明鏈接類型，其可能的取值同rel屬性相同。例如： 文件體標(biāo)記及其屬性文件體標(biāo)記 各內(nèi)容標(biāo)記 屬性一般屬性事件屬性文件體標(biāo)記一般屬性文件體標(biāo)記事件屬性支持20多個事件屬性文件體標(biāo)記的子標(biāo)記標(biāo)題、段落標(biāo)記文本格式標(biāo)記圖像標(biāo)記超鏈接標(biāo)記影像地圖標(biāo)記 層次塊標(biāo)記多媒體標(biāo)記 標(biāo)記和標(biāo)記注釋標(biāo)記其它標(biāo)記 104

12、 HTML文本標(biāo)記標(biāo)記align屬性事件屬性單標(biāo)記推薦使用標(biāo)題標(biāo)記標(biāo)記 加入一條水平線，它具有size、color、width和noshade屬性。 字體標(biāo)記 粗體標(biāo)記斜體標(biāo)記下劃線標(biāo)記刪除線標(biāo)記、標(biāo)記 用來輸出打字機風(fēng)格字體的文本；用來輸出引用方式的字體，通常是斜體；用來輸出需要強調(diào)的文本(通常是斜體加黑體)；strong則用來輸出加重文本(通常也是斜體加黑體)。例如：字體標(biāo)記一17.HTML文本標(biāo)記：字體實例 文本標(biāo)志的綜合示例 最大的標(biāo)題 使用h3的標(biāo)題 最小的標(biāo)題 黑體字文本 斜體字文本 下加一劃線文本 打字機風(fēng)格的文本 引用方式的文本 強調(diào)的文本 加重的文本 size取值-1、col

13、or取值red時的文本 size取值缺省、color取值red時的文本 size取值+1、color取值red時的文本 HTML文本標(biāo)記：定義列表標(biāo)記創(chuàng)建列表其中每一項以定義每個項目以定義服務(wù)器 巨型機服務(wù)器 大型機服務(wù)器 小型機服務(wù)器 微機服務(wù)器桌面機 微機 筆記本 平板電腦HTML文本標(biāo)記：定義有序、無序列表有序列表定義，其中每一項以定義無序列表創(chuàng)建，其中每一項以定義 有序列表實例 中國城市 北京 上海 美國城市 華盛頓 紐約 圖像標(biāo)記圖像標(biāo)記 圖像標(biāo)記為單標(biāo)記，用以插入圖像及設(shè)定圖像屬性標(biāo)記屬性align：是指定圖像的位置 id，指定的id號class：指定圖像所屬的類型name：用于設(shè)

14、定圖像的名稱。src：規(guī)定插入的圖像的url地址，也就是含路徑的圖像文件名title：設(shè)定圖像的標(biāo)題alt：表示圖像的替代文字border：設(shè)定圖片的邊框height和width：分別用于指定圖像的高度和寬度hspace和vspace：分別用于設(shè)定圖像的左右邊框大小和上下邊框大小 ismp和usemap：在應(yīng)用圖像地圖（map）時使用 圖像標(biāo)記（Cont.）標(biāo)記屬性dynsrc：指定要下載的影像片斷的url地址controls：設(shè)定影像播放的控制接鈕 start：設(shè)定何時開始播放影像片斷FileopenMouseover loop：指定影像片斷的播放次數(shù)事件屬性有20多個鼠標(biāo)和鍵盤事件屬性，分

15、別是：onload， onclick，ondbclick，onmouseover，onkeydown，onkeypress等 105 HTML超鏈接一般形式標(biāo)記 超鏈接類型文本超鏈接圖像超鏈接影像地圖定義書簽書簽文本 標(biāo)記屬性target屬性，定義超鏈接打開的目標(biāo)窗口 title屬性，屬性值為一字符串，鼠標(biāo)指向超鏈接時，鼠標(biāo)右下角顯示標(biāo)題文本美麗的山東美麗的泉城 美麗的海濱城市-青島 主要旅游網(wǎng)影像地圖標(biāo)記 影像地圖標(biāo)記熱點標(biāo)記，為單標(biāo)記舉例 走馬燈標(biāo)記 功能標(biāo)記一行或多行滾動的文本，各主流瀏覽器，如IE，Maxthon,Firefox等均支持標(biāo)記 屬性align屬性，設(shè)定活動字幕的位置bgc

16、olor屬性，設(shè)定活動字幕的背景顏色direction屬性，設(shè)定活動字幕的滾動方向，取值可以是left、right、up或down。behavior屬性，設(shè)定滾動的方式，主要由三種方式：behavior=“scroll”表示由一端滾動到另一端；behavior=“slide”表示由一端快速滑動到另一端，且不再重復(fù)； behavior=“alternate”表示在兩端之間來回滾動。 scrolldelay屬性，用于設(shè)定滾動兩次之間的延遲時間 loop屬性，用于設(shè)定滾動的次數(shù)，當(dāng)loop=-1表示一直滾動下去，直到頁面更新。 走馬燈標(biāo)記（舉例 動態(tài)新聞效果活動字幕內(nèi)容第一行活動字幕內(nèi)容第一行活動字

17、幕內(nèi)容第一行10.6 HTML表格表在頁面結(jié)構(gòu)中的作用網(wǎng)頁結(jié)構(gòu)的布局手段：表、框架表格是網(wǎng)頁的基石，可創(chuàng)建復(fù)雜有效頁面結(jié)構(gòu)表格能夠完全控制頁面及其元素表與框架的比較表和框架都可以構(gòu)造網(wǎng)頁的布局結(jié)構(gòu)表可以很容易地為頁面加書簽或添加到收藏夾，框架組合頁面則不可以。表布局結(jié)構(gòu)在垂直或水平滾動時，頁面所有內(nèi)容滾動；框架布局允許創(chuàng)建彼此獨立的頁面區(qū)域。 HTML表格的基本結(jié)構(gòu)學(xué)號姓名成績001 李明 85002 王剛 91003 張玲78、是表格中最常用的四個標(biāo)記表格大小 屬性值的x1和x2可以是絕對值也可以是相對值 標(biāo)記來為表格增加標(biāo)題。通常情況下，標(biāo)記位于 標(biāo)記的后面。、可以對行與單元格的相關(guān)屬性進

18、行設(shè)置 不規(guī)則表格Cell 1Cell 2Cell 3Cell 1Cell 2Cell 3Cell 4Cell 5Cell 6Cell 7Cell 8112 HTML表格與頁面布局 Cell 1 Cell 2 Cell 3cellpadding，是補白，是指單元格內(nèi)文字與邊框的距離 cellspacing，兩個單元格之間的距離 單元格1單元格2單元格3單元格4單元格5單元格6需要注意的問題無邊界網(wǎng)頁結(jié)構(gòu)表格的border屬性值設(shè)置為0，從而使得表格的邊界消失，但設(shè)計時表格邊框會顯示成淺灰色邊框。尺寸的定義方式一般來說作為布局手段的表格，通常采用相對比例的方式確定表格大小。圖片的插入如果某個圖片

19、本身比較大，最好將其進行切分，在圖片顯示位置上放置多個單元格，然后將整個圖片拼接在這些單元格中。這是因為，多表格頁面布局在使用表格進行網(wǎng)頁布局時，最好不要把整個頁面的內(nèi)容都放在一個表格中，應(yīng)該用多個表格來分段顯示整個網(wǎng)頁的內(nèi)容。這也是因為瀏覽器要顯示表格內(nèi)容的時候，要把表格中的所有內(nèi)容都下載后再統(tǒng)一顯示。10.7 HTML框架網(wǎng)頁結(jié)構(gòu)的布局手段：表、框架增加網(wǎng)頁的可讀性、可用性在框架中，可以創(chuàng)建彼此獨立移動的頁面區(qū)域，表格實現(xiàn)不了該功能。框架可以組合靜態(tài)信息和動態(tài)信息，它是一個單標(biāo)記。標(biāo)記定義在每一個鏈接內(nèi)顯示的內(nèi)容，它必須存在于標(biāo)記中。一個標(biāo)記中可以包含多個標(biāo)記 標(biāo)記必須緊跟標(biāo)記之后，也就是

20、說一個HTML文件中如果包含框架組合的話，其說明的位置必須在HTML文件的頭部說明之后，而且必須在標(biāo)記之前。標(biāo)記中必須指定rows屬性或cols屬性，但這兩個屬性不能同時指定。NOFRAME: 必須使用BODY標(biāo)記符。在HTML中創(chuàng)建“行”框架組合 本網(wǎng)頁使用框架，但你的瀏覽器不支持，特告知。 在HTML中創(chuàng)建“列”框架組合 本網(wǎng)頁使用框架，但你的瀏覽器不支持，特告知。 創(chuàng)建一個“列”框架組合中的scrolling屬性有三種取值：yes、no和auto 在對src屬性進行設(shè)置時需要注意兩點：如果是引用的某個確定的URL，那么這個URL必須完整，必須要指定傳輸協(xié)議。src=中，http:/是不能

21、省略的。如果引用的是本地的某個文件，那么這個文件的存儲路徑和文件名必須正確?？蚣軐傩訤RAMEBORDER：設(shè)置邊框?qū)挾认袼財?shù)(HTML4,MS),0無框BORDER: 設(shè)置邊框?qū)挾认袼財?shù)(Netscape)，0無框NORESIZE: 禁止訪問者調(diào)整框架的大小FRAMESPACING: 控制框架間的總間距(IE)SCROLLING: 滾動條設(shè)置，YES、NO、AUTOMARGINHEIGHT: 設(shè)置框架的上下邊界像素數(shù)MARGINWIDTH: 設(shè)置框架的左右邊界像素數(shù)BORDERCOLOR: 設(shè)置邊框的顏色網(wǎng)頁文件 13.html 本網(wǎng)頁使用框架技術(shù)，但你的瀏覽器不支持。 框架窗口的互操作 n

22、av.html 文件:sample-1305-nav.htm計算機軟件研究所 計算機應(yīng)用研究所 計算機系統(tǒng)結(jié)構(gòu)研究所 ruanjian.htm 文件:aaaaaaaaaaaaaaaaaaaaaaaaaaa 本網(wǎng)頁使用框架，但你的瀏覽器不支持。 創(chuàng)建定位的超級鏈接nav.html 文件:計算機軟件研究所 計算機應(yīng)用研究所 計算機系統(tǒng)結(jié)構(gòu)研究所 Return計算機軟件研究所 計算機應(yīng)用研究所 計算機系統(tǒng)結(jié)構(gòu)研究所 用標(biāo)記符的Targeting鏈接計算機軟件研究所 計算機應(yīng)用研究所 計算機系統(tǒng)結(jié)構(gòu)研究所 山東大學(xué) 本網(wǎng)頁使用框架，但你的瀏覽器不支持。 框架嵌套10.8 表單（form ) 功能人機交

23、互主要標(biāo)記表單標(biāo)記text單行文本框控件Password ButtonRadioCheckbox 和 image HiddenFilesubmit/reset表單標(biāo)記 功能用來標(biāo)記一個表單，即定義表單的開始和結(jié)束位置 屬性name屬性，給出表單的名稱，常常用于腳本編程 action屬性，action的值是表單處理程序的網(wǎng)絡(luò)路徑和程序名method屬性，method屬性用來定義服務(wù)器表單處理程序從表單中獲得信息的方式get方法，將數(shù)據(jù)打包放置在環(huán)境變量QUERY_STRING中作為URL整體的一部分傳遞給服務(wù)器 POST方法，分離地傳遞數(shù)據(jù)給服務(wù)器表單處理程序，不需要設(shè)置QUERY_STRING

24、環(huán)境變量，有更好的安全性，表單中數(shù)據(jù)的多少是任意的target屬性，target屬性用來指定目標(biāo)窗口或目標(biāo)幀 輸入控件類型標(biāo)記 功能用來定義用戶輸入?yún)^(qū)，無尾標(biāo)注。一般形式是： 屬性 type屬性，給出控件的類型，常用的類型有：text，TEXTAREA， Radio,Checkbox, Button。 ，Image, Hidden, Password, File Submit/R屬性，name屬性給出輸入控件的名字value屬性，保存用戶的輸入和選擇，服務(wù)器就是通過調(diào)用輸入?yún)^(qū)域的value屬性值來獲得該區(qū)域的數(shù)據(jù)單行文本框輸入標(biāo)記 功能輸入單行文本一般形式是： 屬性 name

25、屬性，name為文本框的名稱，便于程序獲取用戶輸入value屬性，value屬性存儲文本框的初始值size屬性，Size屬性表示文本框的顯示長度maxlength屬性，maxlength是文本框中輸入的有效數(shù)據(jù)長度 舉例：密碼文本框輸入標(biāo)記 功能輸入密碼，不顯示輸入內(nèi)容一般形式是： 屬性舉例：密碼： 多行文本框輸入標(biāo)記 功能輸入多行文本，雙標(biāo)記一般形式是： 屬性name屬性，name為多行文本框的名稱，便于程序獲取用戶輸入。 rows屬性和cols屬性，分別用來設(shè)置文本框的列數(shù)和行數(shù)，列與行以字符數(shù)為單位。 舉例button按鈕輸入標(biāo)記 功能一般形式是： 屬性name屬性，name為按鈕名稱，

26、便于程序?qū)Π粹o的操作。 value屬性，value為按鈕的顯示名稱。 其他鼠標(biāo)和鍵盤事件屬性舉例radio單選鈕輸入標(biāo)記 功能單選鈕，往往是若干個radio為一組。每一個 radio 必須且僅有一個 value，通常有兩個或以上radio具有相同的name，但不同的value，從而選擇其中之一。一般形式是： 屬性name屬性，單選扭的名稱，一般是若干個radio一組，取相同的name。checked屬性，用來設(shè)置該單選框缺省時是否被選中，相同name的多個Radio中只能有一個選擇，或都不使用該參數(shù)。 value屬性，存儲單旋鈕的取值，多個具有相同name的單旋鈕應(yīng)該具有不同的value。舉例

27、radio單選鈕輸入標(biāo)記（舉例）結(jié)果復(fù)選框輸入標(biāo)記 功能復(fù)選框是對某種輸入做出“是”或“否”的選擇 一般形式是： 屬性name屬性，name為復(fù)選框的名稱，便于程序獲取用戶輸入。 value屬性，每一個 Checkbox 必須有一個 value，當(dāng)復(fù)選框選中value值便會傳到表單的action屬性指定的程序中。 checked屬性，用來設(shè)置該復(fù)選框缺省時是否被選中。 舉例復(fù)選框輸入標(biāo)記（舉例）舉例顯示復(fù)選列表框輸入標(biāo)記 功能一般形式是： 標(biāo)記屬性name屬性，name為下拉式列表控件名稱 size屬性，下拉式列表的高度，缺省時值為1，若沒有設(shè)置（加入）multiple屬性，顯示的將是一個彈出

28、式的列表框。若使用此參數(shù)則不會有PopUp效果。如果小于可選的項目數(shù)量，則出現(xiàn)垂直滾動條。 multiple屬性，指定是否可以多選。multiple屬性不用賦值，直接加入標(biāo)記中即可使用，加入了此屬性后列表框就成了可多選的了復(fù)選列表框輸入標(biāo)記（Cont.） 標(biāo)記指定列表框中的一個選項，它放在標(biāo)記對之間 標(biāo)記屬性value屬性，用來給指定的那一個選項賦值 selected屬性，selected用來指定默認(rèn)的選項，一個下拉是復(fù)選框可以有一項或零可內(nèi)定被選。 復(fù)選列表框輸入標(biāo)記（舉例） 舉例84HTML表單示例蘋果桔子芒果 蘋果 桔子 芒果image按鈕標(biāo)記 功能取代submit/reset兩個默認(rèn)的

29、按鈕一般形式 屬性name屬性，所要代表的按鍵，可以是submit、reset或其它。 src屬性，設(shè)置按鈕圖片，如果按鍵圖片文件不與該 html文件在同一目錄下，需要加上正確的相對或絕對途徑舉例 隱藏元素標(biāo)記hidden 功能hidden為定義隱藏表單的元素，它在網(wǎng)頁上并不顯示，不需要用戶輸入，只是隨表單一起傳給表單的action屬性指定的程序，用于為網(wǎng)頁處理程序傳送數(shù)據(jù)。一般形式 屬性name屬性為控件名稱，便于程序獲取用戶輸入 。 value屬性存儲輸入元素的默認(rèn)值。 舉例當(dāng)表單提交后，服務(wù)器程序可以獲得myID的值是730118，從而實現(xiàn)傳送數(shù)據(jù)的目的。文件上傳標(biāo)記 功能通過HTTP協(xié)

30、議上傳文件。一般形式 屬性 舉例 顯示結(jié)果表單提交/重填按鈕標(biāo)記 功能將表單數(shù)據(jù)傳送到服務(wù)器端，由表單標(biāo)記中的action屬性指定的服務(wù)器上的程序處理用戶輸入數(shù)據(jù)。 一般形式表單提交 ，重填按鈕， 屬性name屬性，這和其它控件的屬性不同，在提交表單中，name可以指定一個函數(shù)，需要和form標(biāo)記中action屬性的程序配合。一般情況下，不需要name屬性。 value屬性，提交按鈕的顯示名字，一般為“確定”、“提交”等易于理解的名字。 舉例 表單提交/重填按鈕標(biāo)記 功能將表單數(shù)據(jù)傳送到服務(wù)器端，由表單標(biāo)記中的action屬性指定的服務(wù)器上的程序處理用戶輸入數(shù)據(jù)。 一般形式表單提交 ，重填按鈕

31、， 屬性name屬性，這和其它控件的屬性不同，在提交表單中，name可以指定一個函數(shù)，需要和form標(biāo)記中action屬性的程序配合。一般情況下，不需要name屬性。 value屬性，提交按鈕的顯示名字，一般為“確定”、“提交”等易于理解的名字。層次塊標(biāo)記 對HTML規(guī)范的擴展 屬性id屬性，用于標(biāo)記一個塊，以便引用該塊。style屬性，定義圖層塊的位置、顯示屬性等。舉例 Div moving 對象標(biāo)記 功能在HTML中插入一個對象，包括Falsh動畫，ActiveX組件或其它對象。 一般形式 . . . 其中，標(biāo)記用于設(shè)置該對象屬性的初始值。舉例 腳本程序標(biāo)記 功能在HTML文件中插入腳本程

32、序 。 一般形式 腳本程序代碼腳本語言javascript層疊樣式表CSS技術(shù) 標(biāo)記的style屬性與內(nèi)聯(lián)樣式紅色NewCentury Schoolbook字，如果字體可用的話。修改標(biāo)記默認(rèn)樣式在文檔中 標(biāo)記 屬性名: 屬性值; 屬性名: 屬性值; 舉例 body color: black; background: white; 109 HTML的擴展缺陷： 文本格式的局限 沒有顯式的布局和定位控制 CSS。 缺乏對布局控制的能力 借助表格來實現(xiàn)近似的效果，但對開發(fā)者的要求比較高，而且過程非常繁瑣。 CSS 無法動態(tài)改變頁面內(nèi)容 DHTML。 交互困難 雖然配合腳本語言和CSS，HTML可以提

33、供一定的交互能力，但這種交互能力的功能有限。 適應(yīng)性差 不能適應(yīng)越來越多的網(wǎng)絡(luò)設(shè)備和應(yīng)用的需要，比如手機、PDA、智能家電都不能直接顯示HTML。wap網(wǎng)頁使用WML，無線標(biāo)記語言，1動態(tài)HTML DHTMLHTML融入了CSS，腳本語言等技術(shù)它由三部分組成，DOM（文本對象模型）DOM為網(wǎng)頁定義了各種元素對象，使這些元素成為可以控制的對象，這是實現(xiàn)動態(tài)HTML的物質(zhì)基礎(chǔ)；CSS（層疊樣式表）CSS是對DOM中所定義的對象效果的描述，即對各種對象不同狀態(tài)的描述，這是實現(xiàn)動態(tài)HTML目標(biāo)的描述；Script（腳本語言，比如VBScript和JavaScript）。Script把各種對象動態(tài)地賦予

34、各種屬性工具，是實現(xiàn)動態(tài)HTML的手段。2XML“Extensible Markup Language”的縮寫，即可擴展標(biāo)記語言。XML也是基于SGML的。它是一種元標(biāo)記語言，也就是說，在XML中，開發(fā)者可以根據(jù)自己的需要定義自己的標(biāo)記，只要這種標(biāo)記是滿足XML命名規(guī)則的。換句話說，XML是一種能創(chuàng)造其他語言的語言。XML的更重要的作用在于它可以表示結(jié)構(gòu)化的數(shù)據(jù)，從而有利于數(shù)據(jù)交換。3XHTML“eXtensible HyperText Markup Language”，即可擴展超文本標(biāo)記語言。是一種使用XML語法對HTML重新闡述的語言。XHTML 1.0 兼容 HTML 4.0。優(yōu)勢 XHTML能夠在多種網(wǎng)絡(luò)設(shè)備和智能終端上運行，實現(xiàn)了數(shù)據(jù)與展示的分離。 XHTML非常嚴(yán)謹(jǐn)。由于早期的HTML允許各種私有標(biāo)記，所以在使用HTML開發(fā)完網(wǎng)頁后，必須在多種瀏覽器環(huán)境下進行測試。而XHTML的語法是嚴(yán)格定義的，因此避免這種狀況的