《Web程序設(shè)計》--第1章緒論主講人：2025/2/61主要內(nèi)容2025/2/6《Web程序設(shè)計》21Web簡介2Web體系結(jié)構(gòu)3Web相關(guān)協(xié)議4瀏覽器與內(nèi)核本章課程目標(biāo)能夠認識到解決問題有多種解決方案，并運用文獻資料檢索研究尋找可替代的方案，具備多方案比較選擇能力；能夠理解并掌握Web程序設(shè)計中的基礎(chǔ)知識與工作原理，將知識與原理應(yīng)用于開發(fā)過程中的問題分析；能夠掌握多種Web程序設(shè)計技術(shù)并認識到其局限性，針對解決方案，運用恰當(dāng)?shù)腤eb程序設(shè)計方法和技術(shù)，實現(xiàn)Web應(yīng)用模塊。2025/2/6《Web程序設(shè)計》31.1web簡介WWW（WorldWideWeb）即全球廣域網(wǎng)，也稱為萬維網(wǎng)，是一種基于超文本和HTTP的、全球性的、動態(tài)交互的、跨平臺的分布式圖形信息系統(tǒng)，是web系統(tǒng)的直接載體。2025/2/6《Web程序設(shè)計》4Web發(fā)展歷史2025/2/6《Web程序設(shè)計》5Web1.01980年TimBerners-Lee大量使用靜態(tài)頁面網(wǎng)頁資源可以任意鏈接Web2.0注重交互性標(biāo)準(zhǔn)的網(wǎng)站設(shè)計自下而上的互聯(lián)網(wǎng)體系Web3.0發(fā)展的必然趨勢基于語義的鏈接個性化、精準(zhǔn)化和智能化靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是指存放在服務(wù)器文件系統(tǒng)中實際存在的HTML文件。當(dāng)用戶在瀏覽器中輸入頁面的URL進行訪問時，瀏覽器就會將對應(yīng)的HTML文件下載、渲染并呈現(xiàn)在窗口中。這些文件一旦制作完成并發(fā)布到服務(wù)器上，內(nèi)容就保持不變，除非由后臺修改再次發(fā)布。2025/2/6《Web程序設(shè)計》6靜態(tài)網(wǎng)頁的特點每個網(wǎng)頁中都有固定的URL，以htm、html等常見形式為后綴，不接受參數(shù)，無法根據(jù)參數(shù)內(nèi)容動態(tài)改變頁面內(nèi)容；

靜態(tài)網(wǎng)頁是實實在在保存在服務(wù)器上的文件；

靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，因此容易被搜索引擎檢索；

靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在制作和維護方面工作量較大；

靜態(tài)網(wǎng)頁的交互性較差，在功能方面有較大的限制；

頁面瀏覽速度快，無需連接數(shù)據(jù)庫，開啟速度快于動態(tài)頁面；

減輕了服務(wù)器的負擔(dān)，工作量減少，也降低了數(shù)據(jù)庫的成本。2025/2/6《Web程序設(shè)計》7動態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁在應(yīng)用過程中，存在著交互性差、動態(tài)性差、維護工作量大等缺點。相對于靜態(tài)網(wǎng)頁，動態(tài)網(wǎng)頁的內(nèi)容是動態(tài)變化的，當(dāng)瀏覽器請求服務(wù)器的某個頁面時，服務(wù)器根據(jù)參數(shù)動態(tài)生成HTML頁面，然后返回給用戶。本質(zhì)上，動態(tài)網(wǎng)頁中的“動態(tài)”是指服務(wù)器端頁面的動態(tài)生成，靜態(tài)頁面“靜態(tài)”則指頁面是已發(fā)布后保持“靜態(tài)”不變。2025/2/6《Web程序設(shè)計》8動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁技術(shù)ASPASP.netJSPCGIPHP2025/2/6《Web程序設(shè)計》9數(shù)據(jù)庫動態(tài)網(wǎng)頁的特點動態(tài)網(wǎng)頁一般以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，即內(nèi)容動態(tài)從數(shù)據(jù)庫中獲取，這樣可以大大降低網(wǎng)站維護的工作量；

采用動態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實現(xiàn)更多的交互功能；

動態(tài)網(wǎng)頁實際上并不是獨立存在于服務(wù)器上的網(wǎng)頁，而是一段動態(tài)代碼，根據(jù)用戶請求經(jīng)過計算返回的網(wǎng)頁；

動態(tài)網(wǎng)頁對搜索引擎檢索支持度不好，這是由于其內(nèi)容是根據(jù)提交的參數(shù)動態(tài)生成。

編程成本相對高一些，因為要編寫大量的服務(wù)器端代碼，前后間還需要進行關(guān)聯(lián)調(diào)試。2025/2/6《Web程序設(shè)計》10靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁請求過程2025/2/6《Web程序設(shè)計》11主要內(nèi)容2025/2/6《Web程序設(shè)計》121Web簡介2Web體系結(jié)構(gòu)3Web相關(guān)協(xié)議4瀏覽器與內(nèi)核C/S結(jié)構(gòu)C/S（Client/Server）結(jié)構(gòu)，即客戶機和服務(wù)器結(jié)構(gòu)。它是軟件系統(tǒng)體系結(jié)構(gòu)，通過它可以充分利用兩端硬件環(huán)境的優(yōu)勢，將任務(wù)合理分配到Client端和Server端來實現(xiàn)，降低了系統(tǒng)的通訊開銷。2025/2/6《Web程序設(shè)計》13B/S結(jié)構(gòu)B/S（Browser/Server）結(jié)構(gòu)即瀏覽器和服務(wù)器結(jié)構(gòu)。它是隨著Internet技術(shù)的興起，對C/S結(jié)構(gòu)的一種變化或者改進的結(jié)構(gòu)。在這種結(jié)構(gòu)下，用戶工作界面是通過瀏覽器來實現(xiàn)，極少部分事務(wù)邏輯在前端（Browser）實現(xiàn)，主要事務(wù)邏輯在服務(wù)器端（Server）實現(xiàn)，形成所謂三層3-tier結(jié)構(gòu)。2025/2/6《Web程序設(shè)計》14C/S與B/S結(jié)構(gòu)對比C/S結(jié)構(gòu)特點界面和操作豐富較強的事務(wù)處理能力安全性能容易保證響應(yīng)速度快適用面窄專用的客戶端軟件維護升級成本高B/S結(jié)構(gòu)特點無需安裝分布性特點業(yè)務(wù)擴展便捷升級維護便捷共享性強特點響應(yīng)速度不及C/S用戶體驗不是很理想2025/2/6《Web程序設(shè)計》15微信小程序“觸手可及”、“用完即走”，用戶掃一掃或者搜一下即可打開應(yīng)用。應(yīng)用將無處不在，隨時可用。2017年騰訊提出，是一項IT領(lǐng)域內(nèi)的重大創(chuàng)新，全球范圍內(nèi)產(chǎn)生深遠影響。經(jīng)過將近兩年的發(fā)展，已經(jīng)構(gòu)造了新的微信小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。2025/2/6《Web程序設(shè)計》16200萬開發(fā)者500萬小程序應(yīng)用200多個行業(yè)Web請求響應(yīng)過程主要步驟客戶端發(fā)送請求服務(wù)器接收請求服務(wù)器生成HTML服務(wù)端響應(yīng)請求客戶端接收響應(yīng)客戶端解析HTML服務(wù)器發(fā)送資源文件客戶端加載資源文件文件從上到下加載2025/2/6《Web程序設(shè)計》17Web相關(guān)技術(shù)客戶端技術(shù)HTMLCSSJavaScriptJSONAJAX服務(wù)器端技術(shù)ASPASP.NETJSPNode.js2025/2/6《Web程序設(shè)計》18主要內(nèi)容2025/2/6《Web程序設(shè)計》191Web簡介2Web體系結(jié)構(gòu)3Web相關(guān)協(xié)議4瀏覽器與內(nèi)核TCP協(xié)議TCP（TransmissionControlProtocol），傳輸控制協(xié)議，是一種面向連接的、可靠的、基于字節(jié)流的傳輸層通信協(xié)議。主要特性如下：在數(shù)據(jù)正確性與合法性上，TCP用一個校驗和函數(shù)來檢驗數(shù)據(jù)是否有錯誤，在發(fā)送和接收時都要計算校驗和；同時可以使用md5認證對數(shù)據(jù)進行加密；

在保證可靠性上，采用超時重傳和捎帶確認機制；

在流量控制上，采用滑動窗口協(xié)議，協(xié)議中規(guī)定，對于窗口內(nèi)未經(jīng)確認的分組需要重傳。2025/2/6《Web程序設(shè)計》20IP協(xié)議IP（InternetProtocol），網(wǎng)際互連協(xié)議，是TCP/IP體系中的網(wǎng)絡(luò)層協(xié)議。設(shè)計IP的目的是提高網(wǎng)絡(luò)的可擴展性：一是解決互聯(lián)網(wǎng)問題，實現(xiàn)大規(guī)模、異構(gòu)網(wǎng)絡(luò)的互聯(lián)互通；二是分割頂層網(wǎng)絡(luò)應(yīng)用和底層網(wǎng)絡(luò)技術(shù)之間的耦合關(guān)系，以利于兩者的獨立發(fā)展。根據(jù)端到端的設(shè)計原則，IP只為主機提供一種無連接、不可靠的、盡力而為的數(shù)據(jù)包傳輸服務(wù)。2025/2/6《Web程序設(shè)計》21HTTP協(xié)議HTTP（HyperTextTransferProtocol），即超文本傳輸協(xié)議，是用于服務(wù)器與本地瀏覽器之間傳輸超文本信息的傳送協(xié)議。基于請求—響應(yīng)模式。HTTP協(xié)議規(guī)定，請求從客戶端瀏覽器中發(fā)出，最后服務(wù)器端響應(yīng)該請求并返回至客戶端，響應(yīng)結(jié)束。

不保存狀態(tài)。HTTP是一種無狀態(tài)(stateless)協(xié)議，即不保存請求-響應(yīng)過程狀態(tài)。HTTP協(xié)議自身不對請求和響應(yīng)之間的通信狀態(tài)進行保存。

無連接特性。HTTP使用的連接都是一次性的，即無連接的，本質(zhì)上是限制每次連接只處理一個請求。完成后即斷開連接。2025/2/6《Web程序設(shè)計》22HTTPs協(xié)議HTTPs（HyperTextTransferProtocoloverSecureSocketLayer），是以安全為目標(biāo)的HTTP通道，在HTTP的基礎(chǔ)上通過傳輸加密和身份認證保證了傳輸過程的安全性。HTTPs是在HTTP的基礎(chǔ)下加入SSL（SecureSocketLayer），增加了一個加密/身份驗證層（在HTTP與TCP之間）。這個系統(tǒng)提供了身份驗證與加密通訊方法。它被廣泛用于萬維網(wǎng)上安全敏感的通訊，例如交易支付等方面。2025/2/6《Web程序設(shè)計》23URLURL（UniformResourceLocator），統(tǒng)一資源定位符，也稱為網(wǎng)頁地址，是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址。URL是用于完整地描述Internet上網(wǎng)頁和其他資源地址的一種標(biāo)識方法。對于Internet上的每一個資源（包括網(wǎng)頁、圖像、視頻、多媒體等），都具有一個唯一的URL地址2025/2/6《Web程序設(shè)計》24URL采用了統(tǒng)一的語法規(guī)范，通常由三部分組成：協(xié)議類型，主機名和路徑及文件名。格式如下：2025/2/6《Web程序設(shè)計》25protocol://hostname[:port]/path[?query][#fragment]protocol，協(xié)議名稱hostname,主機名稱port，端口號path，請求的文件路徑query，查詢的字符串fragment，信息片斷，指定網(wǎng)絡(luò)資源中的片斷/xxgk/xxjjURL中的主要協(xié)議主要協(xié)議：2025/2/6《Web程序設(shè)計》26協(xié)議名稱描述使用示例file指向的資源是本地計算機上的文件file:///ftp通過FTP協(xié)議訪問資源ftp://gopher通過Gopher協(xié)議訪問該資源gopher://http通過HTTP訪問該資源http://https通過安全的HTTPS訪問該資源https://mailto指向的資源為電子郵件地址，通過SMTP協(xié)議訪問mailto://hostnamehostname，主機名，是指存放資源的服務(wù)器所在域名系統(tǒng)(DNS)主機名或IP地址。使用域名系統(tǒng)（DNS），通常主機名稱的規(guī)則定義如下：2025/2/6《Web程序設(shè)計》27主機名[.三級域名].二級域名.頂級域名support.huawei.com頂級域名一級域名二級域名頂級域名含義com商業(yè)機構(gòu)edu教育及研究機構(gòu)gov政府機構(gòu)info信息服務(wù)mil軍事設(shè)施及機構(gòu)net網(wǎng)絡(luò)服務(wù)機構(gòu)org專業(yè)團體國家縮寫某個國家下屬機構(gòu)port表示端口號，即提供的網(wǎng)站服務(wù)所在的端口號，取值為整數(shù)。該參數(shù)可以省略，省略時使用方案的默認端口，各種傳輸協(xié)議都有默認的端口號，如http的默認端口為80、ftp的默認端口為21、tomcat默認端口為8080等。2025/2/6《Web程序設(shè)計》28path表示資源所在的路徑，由零或多個“/”符號隔開的字符串，一般用來表示主機上的一個目錄的完整路徑或文件地址。這個路徑是從主機上提供服務(wù)的根目錄開始計算的。例如，tomcat提供服務(wù)的根目錄是d:\tomcat8\webapps\oa，如果path為“/img/demo.gif”，則其實際地址為二者的組合，即資源的物理位置為：

“d:\tomcat8\webapps\oa\img\demo.gif”2025/2/6《Web程序設(shè)計》29query表示查詢的字符串，該項為可選，用于給動態(tài)網(wǎng)頁(如使用JSP或ASP.NET等技術(shù)制作的網(wǎng)頁)傳遞參數(shù)，可有多個參數(shù)，參數(shù)之間用“&”符號隔開，每個參數(shù)的名和值用“=”符號隔開。例如：有個URL為:“/search?type=order&startpage=3”表示要訪問資源/search，附帶了兩個參數(shù)，一個是type參數(shù)，其值為order，另一個是startpage參數(shù)，其值為3。2025/2/6《Web程序設(shè)計》30fragmentfragment，信息片斷，使用#連接一個關(guān)鍵字，該關(guān)鍵字用于指定網(wǎng)絡(luò)資源中的片斷（內(nèi)部錨點）。例如一個網(wǎng)頁中有多個名詞解釋，可使用fragment直接定位到某一名詞解釋。具體而言，有個URL為：

“detail_page.html#title1”，訪問的是detail_page.html頁面中的title1片段，該片段一般是通過<a>標(biāo)簽的id屬性設(shè)置的（詳見第2章）2025/2/6《Web程序設(shè)計》31主要內(nèi)容2025/2/6《Web程序設(shè)計》321Web簡介2Web體系結(jié)構(gòu)3Web相關(guān)協(xié)議4瀏覽器與內(nèi)核瀏覽器簡介2025/2/6《Web程序設(shè)計》33內(nèi)核覽器最重要的部分是瀏覽器的內(nèi)核。瀏覽器內(nèi)核是瀏覽器的核心，也稱“渲染引擎”，用來解釋網(wǎng)頁語法并渲染到瀏覽器上。目前主流的內(nèi)核主要有四種：Trident、Webkit、Blink、Gecko。2025/2/6《Web程序設(shè)計》34Trident內(nèi)核

該內(nèi)核程序在1997年的IE4中首次被采用，是微軟在Mosaic代碼的基礎(chǔ)之上修改而來的，并沿用到IE11，也被普遍稱作“IE內(nèi)核”。國內(nèi)很多的雙核瀏覽器的其中一核便是Trident，也稱為“兼容模式”。2025/2/6《Web程序設(shè)計》35Webkit內(nèi)核Webkit是一個開放源代碼的瀏覽器引擎，最初的代碼來自KDE的KHTML和KJS(均開放源代碼)。蘋果公司在Webkit的基礎(chǔ)上做了大量優(yōu)化改進工作，開發(fā)了Safari瀏覽器。Webkit的優(yōu)勢在于高效穩(wěn)定，兼容性好，且源碼結(jié)構(gòu)清晰，易于維護。2025/2/6《Web程序設(shè)計》36Blink內(nèi)核2008年，谷歌發(fā)布了Chrome瀏覽器，瀏覽器使用的內(nèi)核被命名為Chromium。Chromium來自開源引擎Webkit，并把Webkit的代碼梳理得可讀性更好。但由于蘋果公司推出的Webkit2與Chromium的沙箱設(shè)計存在沖突，所以Chromium一直停留在Webkit，并使用移植的方式來實現(xiàn)和主線Webkit2的對接。Google決定從Webkit衍生出自己的Blink引擎，在Webkit代碼的基礎(chǔ)上研發(fā)更加快速和簡約的渲染引擎，并逐步脫離Webkit的影響，創(chuàng)造一個完全獨立的Blink引擎。2025/2/6《Web程序設(shè)計》37Gecko內(nèi)核Gecko引擎的與IE也關(guān)系緊密，由于當(dāng)時IE沒有使用W3C的標(biāo)準(zhǔn)，這導(dǎo)致了微軟內(nèi)部一些開發(fā)人員的不滿；他們與當(dāng)時已經(jīng)停止更新了的Netscape的一些員工一起創(chuàng)辦了Mozilla，以Mosaic內(nèi)核為基礎(chǔ)，開發(fā)出了Gecko。Gecko內(nèi)核的瀏覽器以Firefox(火狐)用戶最多，所以有時也會被稱為Firefox內(nèi)核。Gecko的特點是開源，因此，其可開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。2025/2/6《Web程序設(shè)計》38兼容性問題瀏覽器兼容性問題，是指對同一段代碼有不同的解析，不同的瀏覽器頁面顯示效果可能不一致，出現(xiàn)展現(xiàn)效果不同或功能實現(xiàn)不一致。主要的兼容性問題：頁面對齊問題瀏覽器中的Bug瀏覽器的不同實現(xiàn)對最新標(biāo)準(zhǔn)的支持2025/2/6《Web程序設(shè)計》392025/2/6《Web程序設(shè)計》40IE11Chrome思考前后端技術(shù)未來是否可能合二為一？B/S與C/S結(jié)構(gòu)是否可以同時在一個系統(tǒng)中使用？2025/2/6《Web程序設(shè)計》412025/2/6《Web程序設(shè)計》42本章結(jié)束第2章HTML主講人：2025/2/643主要內(nèi)容2025/2/6《Web程序設(shè)計》441HTML簡介2基本語法3常用標(biāo)簽4HTML5新特性本章課程目標(biāo)知識目標(biāo)掌握HTML語言的基本語法、常用標(biāo)記以及使用方法；能力要求：能夠認識到解決問題有多種解決方案，并運用文獻資料檢索研究尋找可替代的方案，具備多方案比較選擇能力；能夠理解并掌握Web程序設(shè)計中的基礎(chǔ)知識與工作原理，將知識與原理應(yīng)用于開發(fā)過程中的問題分析；2025/2/6《Web程序設(shè)計》452.1HTML簡介HTML是超文本標(biāo)記語言(HyperTextMarkupLanguage)，是一種描述性的標(biāo)記語言，定義了一組用于描述頁面結(jié)構(gòu)和風(fēng)格的標(biāo)簽。HTML文件是標(biāo)準(zhǔn)的ASCII文件，是一種純文本格式的文件，能獨立于各種操作系統(tǒng)平臺。超文本是將各種不同空間的信息組織在一起的網(wǎng)狀文本，包含文本、圖片、音頻、視頻、鏈接等形式。2025/2/6《Web程序設(shè)計》46HTML示例2025/2/6《Web程序設(shè)計》47源代碼HTML發(fā)展HTML發(fā)展歷史上經(jīng)歷了以下幾個重要階段：①HTML1.0：在1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布。②HTML2.0：1995年11月作為RFC1866發(fā)布，于2000年6月發(fā)布之后被宣布已經(jīng)過時。③HTML3.2：1997年1月14日，W3C推薦標(biāo)準(zhǔn)。④HTML4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)。⑤HTML4.01(微小改進)：1999年12月24日，W3C推薦標(biāo)準(zhǔn)。⑥HTML5：HTML5是公認的下一代Web語言，極大地提升了Web在富媒體、富內(nèi)容和富應(yīng)用等方面的能力。2025/2/6《Web程序設(shè)計》48主要內(nèi)容2025/2/6《Web程序設(shè)計》491HTML簡介2基本語法3常用標(biāo)簽4HTML5新特性HTML頁面組成(1)頁面頭部<head>通常用于頁面的一些基本語言的描述，如網(wǎng)頁的標(biāo)題和關(guān)鍵字。常見的元素有title、base、link、meta等<title>--定義網(wǎng)頁的標(biāo)題<base>--定義網(wǎng)頁的基準(zhǔn)路徑<link>--用于創(chuàng)建連接到CSS樣式表<meta>--提供相關(guān)頁面的元信息(2)頁面主體內(nèi)容<body><body>標(biāo)簽元素定義了網(wǎng)頁的主體內(nèi)容區(qū)域，這個區(qū)域內(nèi)的元素都將會被顯示在瀏覽器頁面中。2025/2/6《Web程序設(shè)計》50HTML標(biāo)簽HTML語言中使用的元素，通常被稱為HTML標(biāo)簽(HTMLtag)。HTML標(biāo)簽是由尖括號包圍的關(guān)鍵詞，比如<html>、<body>等。這些HTML標(biāo)簽通常是成對出現(xiàn)的，比如<b>和</b>。2025/2/6《Web程序設(shè)計》51<body><p>這是一段文本</p><div>這是一行<b>字符串</b>內(nèi)容</div></body>HTML標(biāo)簽另外，HTML語言中也有一些標(biāo)簽，開始標(biāo)簽和結(jié)束標(biāo)簽中不允許放置內(nèi)容，因此可以簡寫成一個自結(jié)束標(biāo)簽，即<tagname/>的形式，tagname表示某個標(biāo)簽。例如，<br>表示換行，使用時一般不會使用<br></br>，而是寫成<br/>。2025/2/6《Web程序設(shè)計》52<body><p>這是一段文本</p><br/><div>這是一行<b>字符串</b>內(nèi)容</div></body>HTML注意事項HTML標(biāo)簽對大小寫不敏感：<P>等同于<p>，但W3C建議使用小寫標(biāo)簽；HTML標(biāo)簽成對出現(xiàn)時，如果標(biāo)簽中有大段內(nèi)容時，建議將起始和標(biāo)簽對齊；

標(biāo)簽嵌套時，嵌套的標(biāo)簽內(nèi)容應(yīng)縮進4個字符；HTML結(jié)束標(biāo)簽建議與開始標(biāo)簽成對出現(xiàn)，雖然有時省略瀏覽器會自動解析，但有些場景下會顯示錯誤，內(nèi)容為空的標(biāo)簽建議使用自結(jié)束標(biāo)簽。2025/2/6《Web程序設(shè)計》53代碼規(guī)范項目根本統(tǒng)一規(guī)范對齊縮進成對出現(xiàn)增加注釋阿里前端開發(fā)規(guī)范/suwanbin/p/13200530.html京東凹凸實驗室前端代碼規(guī)范https://guide.aotu.io/docs/標(biāo)簽屬性每個HTML標(biāo)簽可以具有一個或多個屬性，這些屬性可以對標(biāo)簽進行進一步的設(shè)置或定義，為標(biāo)簽元素提供更豐富的功能和顯示效果。屬性總是以名稱/值對的形式出現(xiàn)，例如：name="value"。屬性名稱定義了該標(biāo)簽可擁有的屬性，屬性值是該屬性的具體取值。2025/2/6《Web程序設(shè)計》54<div><ahref=“”title=”南昌航空大學(xué)”>主頁</a></div>HTML標(biāo)簽屬性注意事項屬性與值大小寫不敏感：HTML標(biāo)簽的屬性和屬性值對大小寫不敏感，但是W3C在標(biāo)準(zhǔn)中推薦小寫的屬性/屬性值；

屬性值應(yīng)使用雙引號：HTML標(biāo)簽的屬性值應(yīng)該始終被包括在引號內(nèi)，可以使用雙引號或單引號，建議使用雙引號，如果屬性值中已使用雙引號，則可以使用單引號。HTML元素的公共屬性：HTML標(biāo)簽的屬性一般與標(biāo)簽相關(guān)，大多數(shù)屬性是標(biāo)簽元素特有的，也有一些公共屬性2025/2/6《Web程序設(shè)計》55屬性描述id用于定義標(biāo)簽元素的IDclass用于定義元素的樣式類名稱style用于定義元素的行內(nèi)樣式屬性title定義元素的標(biāo)題提示信息常用標(biāo)簽文本及格式化超鏈接列表表格表單框架多媒體2025/2/6《Web程序設(shè)計》56常用標(biāo)簽--文本及格式化文本格式化類的標(biāo)簽元素主要是用于HTML文本的格式化，包括文本格式、字體、顏色等樣式的設(shè)置。2025/2/6《Web程序設(shè)計》57標(biāo)簽描述<p>定義一個文本段落，每個段落從新的一行開始<b>定義粗體文本<em>定義著重文字<i>定義斜體字<small>定義小號字<strong>定義加重語氣<sub>定義下標(biāo)字<sup>定義上標(biāo)字<pre>定義預(yù)格式文本示例2025/2/6《Web程序設(shè)計》58<body><div><p>這是一個普通的文本-<b>這是一個加粗文本</b>。</p><p>這是一段<em>強調(diào)</em>文本。</p><p>這段文本包含<i>斜體</i>字體。</p><p><small>這是一段小字體</small></p><p>這是一段<strong>加粗文本</strong>。</p><p>這個文本包含^{上標(biāo)}、_{下標(biāo)}文本。</p><p>這段文本包含<ins>插入</ins>、<del>刪除</del>標(biāo)記。</p></div></body>超鏈接超鏈接(Link)，也稱為超文本鏈接(HypertextLink)，是HTML頁面的重要特征之一，用戶只要單擊網(wǎng)頁中的超鏈接就可以自動跳轉(zhuǎn)到超鏈接的目標(biāo)對象，可以實現(xiàn)網(wǎng)頁資源間的便捷快速訪問。超鏈接的載體可以是文本，也可以是圖片。2025/2/6《Web程序設(shè)計》59<ahref="url">鏈接文本</a><ahref=“”>百度頁面</a><ahref=“/login.jsp”><imagesrc=‘…’></a>鏈接常用屬性href：指明單擊超鏈接后所訪問的資源target屬性：用來定義超鏈接打開時所在的窗口_blank：新開啟一個網(wǎng)頁窗口打開鏈接；_self：在當(dāng)前頁面窗口打開鏈接；_top：在網(wǎng)頁框架的最頂層架構(gòu)中打開鏈接；_parent：在當(dāng)前窗口的父框架中打開鏈接；

自定義名稱：如果該名稱的窗口不存在，則新建一個窗口打開鏈接，id屬性：用于創(chuàng)建網(wǎng)頁的內(nèi)部錨點，類似于網(wǎng)頁的書簽2025/2/6《Web程序設(shè)計》60內(nèi)部錨點通過該錨點，可在網(wǎng)頁內(nèi)部進行跳轉(zhuǎn)。這種特性通常用于網(wǎng)頁自身的小標(biāo)題導(dǎo)航。由兩部分組成：（1）定義內(nèi)部錨點（2）定義訪問方式，通過“#”加上錨點ID訪問2025/2/6《Web程序設(shè)計》61<aid=”錨點ID”>錨點名稱</a><ahref=”index.html#top1”>主頁的錨點1</a><body><h2>超鏈接HTML內(nèi)部錨點示例</h2><ahref="new_file.html#para1">第一段</a><ahref="new_file.html#para2">第二段</a><ahref="new_file.html#para3">第三段</a><br/><p><aid="para1">第一段文本：</a>這是第一段示例文本。這是第一段示例文本。這是第一段示例文本。這是第一段示例文本。這是第一段示例文本。這是第一段示例文本。</p><p><aid="para2">第二段文本：</a>這是第二段示例文本。這是第二段示例文本。這是第二段示例文本。這是第二段示例文本。這是第二段示例文本。這是第二段示例文本。</p><p><aid="para3">第三段文本：</a>這是第三段示例文本。這是第三段示例文本。這是第三段示例文本。這是第三段示例文本。這是第三段示例文本。這是第三段示例文本。</p></body>當(dāng)前文件為new_file.html常用標(biāo)簽--列表列表(List)，通常用于網(wǎng)頁中展現(xiàn)同級別或有子類別的多個內(nèi)容項。HTML中列表可分為：無序列表有序列表自定義列表2025/2/6《Web程序設(shè)計》62無序列表無序列表是一個內(nèi)容項的列表，每個內(nèi)容項前使用粗體圓點(默認為小黑圓圈)進行標(biāo)記。無序列表使用<ul>標(biāo)簽進行定義，其中的內(nèi)容項使用<li>定義。2025/2/6《Web程序設(shè)計》63<p><h4>課程清單：</h4><ul><li>程序設(shè)計基礎(chǔ)</li><li>面向?qū)ο蟪绦蛟O(shè)計</li><li>數(shù)據(jù)結(jié)構(gòu)</li></ul></p>有序列表有序列表與無序列表類似，不同之處在于有序列表的內(nèi)容項是有序號的，一般采用數(shù)字序號標(biāo)記。有序列表使用<ol>標(biāo)簽定義，內(nèi)容項也是使用<li>定義。2025/2/6《Web程序設(shè)計》64<p><h4>課程清單：</h4><ol><li>程序設(shè)計基礎(chǔ)</li><li>面向?qū)ο蟪绦蛟O(shè)計</li><li>數(shù)據(jù)結(jié)構(gòu)</li></ol></p>自定義列表自定義列表不僅僅是多個列表項，可以定義每個項目的標(biāo)題及其描述的組合。自定義列表項使用<dl>標(biāo)簽定義，其中的標(biāo)題使用<dt>標(biāo)簽定義，內(nèi)容項使用<dd>標(biāo)簽定義。2025/2/6《Web程序設(shè)計》65<p><h4>課程清單：</h4><dl><dt>學(xué)科基礎(chǔ)課</dt><dd>包括高等數(shù)學(xué)、程序設(shè)計基礎(chǔ)、計算機系統(tǒng)基礎(chǔ)等</dd><dt>學(xué)科平臺課</dt><dd>包括面向?qū)ο蟪绦蛟O(shè)計、軟件工程、數(shù)據(jù)庫原理等</dd><dt>專業(yè)核心課</dt><dd>包括軟件建模、軟件構(gòu)造、軟件測試等</dd></dl></p>綜合運用幾種列表可綜合運用2025/2/6《Web程序設(shè)計》66<p><h4>課程清單：</h4><dl><dt>學(xué)科基礎(chǔ)課</dt><dd><ul><li>高等數(shù)學(xué)</li><li>程序設(shè)計基礎(chǔ)</li><li>計算機系統(tǒng)基礎(chǔ)</li></ul></dd><dt>學(xué)科平臺課</dt><dd><ol><li>面向?qū)ο蟪绦蛟O(shè)計</li><li>軟件工程</li><li>數(shù)據(jù)庫原理</li></ol></dd><dt>專業(yè)核心課</dt><dd>包括軟件建模、軟件構(gòu)造、軟件測試等</dd></dl></p>常用標(biāo)簽--表格表格是HTML頁面用于展示數(shù)據(jù)或內(nèi)容的一種直觀方式，表格由<table>標(biāo)簽來定義。每個表格均有若干行，表格行使用<tr>標(biāo)簽定義。每行可被分割為若干單元格，使用<td>標(biāo)簽來定義，其中為數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。2025/2/6《Web程序設(shè)計》67表格標(biāo)簽標(biāo)簽描述<table>定義表格<caption>定義表格標(biāo)題。<th>定義表格中的表頭單元格。<tr>定義表格中的行。<td>定義表格中的單元。<thead>定義表格中的表頭內(nèi)容。<tbody>定義表格中的主體內(nèi)容。<tfoot>定義表格中的表注內(nèi)容(腳注)。<col>定義表格中一個或多個列的屬性值。<colgroup>定義表格中供格式化的列組。2025/2/6《Web程序設(shè)計》68示例2025/2/6《Web程序設(shè)計》69<tableborder="1"><caption>公司年度銷售明細</caption><tr><th>季度</th><th>銷售額(萬元)</th><th>去年同期增長</th><th>備注</th></tr><tr><td>一季度</td><td>1215.36</td><td>11.8%</td><td></td></tr><tr><td>二季度</td><td>1011.88</td><td>3.2%</td><td>門店規(guī)模擴張</td></tr><tr><td>三季度</td><td>1531.29</td><td>16.7%</td><td></td></tr></table>表格屬性表格標(biāo)簽還定義了一系列屬性，用于控制表格的樣式及顯示效果。2025/2/6《Web程序設(shè)計》70屬性描述取值說明border表格的邊框數(shù)值型，0表示沒有邊框cellpadding單元格的邊距，單元格與其內(nèi)容之間的間隔數(shù)值型，單位是像素，0表示沒有邊距cellspacing單元格的間距，單元格與單元格之間的間距數(shù)值型，單位是像素，0表示沒有間距bgcolor表格的背景顏色顏色值width寬度長度數(shù)值height高度長度數(shù)值表格屬性示例2025/2/6《Web程序設(shè)計》71<tableborder="1"cellpadding="3"cellspacing="0"><caption><h4>公司年度銷售明細<h4></caption><tr><th>季度</th><th>銷售額(萬元)</th><th>去年同期增長</th><th>備注</th></tr><trbgcolor="#eeeeee"><td>一季度</td><td>1215.36</td><td>11.8%</td><td></td></tr><tr><td>二季度</td><td>1011.88</td><td>3.2%</td><td>門店規(guī)模擴張</td></tr><trbgcolor="#eeeeee"><td>三季度</td><td>1531.29</td><td>16.7%</td><td></td></tr></table>表格單元格合并橫向合并使用colspan屬性，即一個單元格跨多列；縱向合并使用rowspan屬性，即一個單元格跨多行。2025/2/6《Web程序設(shè)計》72<tableborder="1"cellpadding="3"cellspacing="0"><caption><h4>公司年度銷售明細<h4></caption><tr><thwidth=“100”>季度</th><thwidth=“100”>地區(qū)</th><th>銷售額(萬元)</th><th>去年同期增長</th><th>備注</th></tr><trbgcolor="#eeeeee"><tdrowspan="4">一季度</td><td>1215.36</td><td>11.8%</td><td></td></tr><tr><td>二季度</td><td>1011.88</td><td>3.2%</td><td>門店規(guī)模擴張</td></tr><trbgcolor="#eeeeee"><td>三季度</td><td>1531.29</td><td>16.7%</td><td></td></tr><tr><tdcolspan="4"align="right">合計：</td><td>810.8萬元</td></tr></table>表單表單是HTML中用于與用戶交互，向服務(wù)器端提交數(shù)據(jù)的主要方式。表單標(biāo)簽定義了一個區(qū)域，這個區(qū)域中可以包含多個表單輸入項，這些輸入項分別用相應(yīng)的輸入標(biāo)簽定義，共同組成了表單區(qū)域。2025/2/6《Web程序設(shè)計》73表單標(biāo)簽元素表單標(biāo)簽元素<form>，用于定義一個表單區(qū)域，包含多個表單輸入項。2025/2/6《Web程序設(shè)計》74<form屬性名=”屬性值”...>...表單輸入項列表...</form>參數(shù)說明：

屬性名，要設(shè)置的form標(biāo)簽屬性名稱；

屬性值，要設(shè)置的form標(biāo)簽值；

表單輸入項列表，定義表單中具體的輸入項。表單標(biāo)簽的主要屬性form標(biāo)簽屬性說明取值說明action定義表單向何處發(fā)送表單數(shù)據(jù)。URLautocomplete定義是否啟用表單的自動完成功能。on/offenctype定義向服務(wù)器發(fā)送表單數(shù)據(jù)的編碼方式。(適用于method="post"的情況)application/x-www-form-urlencodedmultipart/form-datatext/plainmethod定義發(fā)送表單數(shù)據(jù)的方法。getpostname定義了表單名稱。文本target定義了在何處打開actionURL，與超鏈接的target類似。_blank：新窗口_self：當(dāng)前窗口_parent：當(dāng)前框架中的父窗口_top：當(dāng)前框架中的頂層窗口自定義名稱：在已有名稱的窗口中打開，如果沒有則新建一個窗口2025/2/6《Web程序設(shè)計》75表單支持的輸入項元素標(biāo)簽描述<form>定義供用戶輸入的表單<input>定義輸入項<textarea>定義多行文本域，可以輸入多行文本<label>定義了<input>元素的標(biāo)簽，一般為輸入標(biāo)題<fieldset>定義了一組相關(guān)的表單元素，并使用外框包含起來<legend>定義了<fieldset>元素的標(biāo)題<select>定義了下拉選項列表<optgroup>定義選項組<option>定義下拉列表中的選項<button>定義一個點擊按鈕2025/2/6《Web程序設(shè)計》76(1)輸入項inputinput標(biāo)簽定義了用戶可以在其中輸入數(shù)據(jù)的輸入字段，input可定義多種方式輸入，取決于其type屬性。2025/2/6《Web程序設(shè)計》77屬性名稱含義使用說明text普通文本框用于輸入單行文本password密碼框用于輸入密碼radio單選框用于定義一個單選輸入項，一組單選框應(yīng)保證他們的name屬性值相同。checkbox復(fù)選框用于定義一個復(fù)選輸入項，一組復(fù)選框應(yīng)保證他們的name屬性值相同。hidden隱藏域不顯示在頁面上，通常用于處理參數(shù)傳輸。file文件域用于定義一個文件上傳組件button按鈕用于定義一個按鈕submit提交按鈕用于定義一個提交按鈕，該按鈕點擊后會自動提交表單reset重置按鈕用于定義一個重置按鈕，該按鈕點擊后會重置表單區(qū)域中所有表單輸入項的值輸入項示例2025/2/6《Web程序設(shè)計》78<formaction="/save_product"><h3>產(chǎn)品信息登記</h3>產(chǎn)品編號:<inputtype="text"name="product_id"><br>產(chǎn)品名稱:<inputtype="text"name="product_name"><br>產(chǎn)品型號:<inputtype="radio"name="size">大<inputtype="radio"name="size">中<inputtype="radio"name="size">小<br>產(chǎn)品分類：<inputtype="checkbox"name="product_type">電子儀器類<inputtype="checkbox"name="product_type">加工設(shè)備類<inputtype="checkbox"name="product_type">模具類<inputtype="checkbox"name="product_type">計算機類<inputtype="checkbox"name="product_type">其它類<br><inputtype="submit"value="保存產(chǎn)品數(shù)據(jù)"><inputtype="reset"value="重置數(shù)據(jù)"> </body>下拉選擇框下拉選擇框可以定義一些輸入的選項，讓用戶直接從選項中選擇所需的值。2025/2/6《Web程序設(shè)計》79<selectname=”名稱”><optionvalue=”選項1的值”>選項1的文本</option><optionvalue=”選項2的值”>選項2的文本</option>

</select>參數(shù)說明：名稱：定義下拉框的名稱，服務(wù)器端通過該名稱可以獲取選擇的選項值；選項的值：定義該選項的值，將會在表單提交時發(fā)送到服務(wù)器端；選項的文本：定義該選項的顯示文本，會顯示在頁面上。下拉選擇框的選項值還可以設(shè)置分組，通過<optgroup>標(biāo)簽可以定義選項的組別，用戶選擇時有組別的提示。2025/2/6《Web程序設(shè)計》80請選擇課程：<select><option>==請選擇==</option><optgrouplabel="專業(yè)平臺課"><option>程序設(shè)計基礎(chǔ)</option><option>離散數(shù)學(xué)</option></optgroup><optgrouplabel="專業(yè)核心課"><option>數(shù)據(jù)結(jié)構(gòu)</option><option>操作系統(tǒng)</option><option>計算機網(wǎng)絡(luò)</option></optgroup></select>多行文本域多行文本域允許用戶輸入多行大量文本，顯示時也允許查看多行。多行文本域通過標(biāo)簽<textarea>定義。2025/2/6《Web程序設(shè)計》81<textarea屬性1=”屬性值1”>初始文本內(nèi)容</textarea>參數(shù)說明：屬性，<textarea>標(biāo)簽的屬性，常用的有cols(列數(shù))、rows(行數(shù))，分別定義了該多行文本域的寬度和高度，取值為字符數(shù)；屬性值，屬性對應(yīng)的取值；初始文本內(nèi)容，<textarea>標(biāo)簽的初始文本內(nèi)容，默認可以為空，如果有初始值，則頁面顯示時會顯示該值。面板容器面板容器可以定義一個區(qū)域，該區(qū)域中可放置相關(guān)的表單元素，形成一個內(nèi)容相關(guān)區(qū)域，方便用戶理解輸入。使用<fieldset>標(biāo)簽定義面板容器，可以使用<legend>標(biāo)簽指定該區(qū)域的標(biāo)題。2025/2/6《Web程序設(shè)計》82<fieldset><legend>標(biāo)題文本</legend>

表單元素項</fieldset>參數(shù)說明：標(biāo)題文本，定義區(qū)域的標(biāo)題文本；表單元素項，定義該區(qū)域內(nèi)放置的表單元素項。示例2025/2/6《Web程序設(shè)計》83<h3>報名信息登記</h3><form><fieldset><legend>個人基本信息</legend>姓名：<inputtype="text"name="username"><br/>性別：<inputtype="radio"name="gender">男<inputtype="radio"name="gender">女<br/>出生年月：<inputtype="text"name="birth"placeholder="yyyy-MM"><br/>身份證號：<inputtype="text"name="id"><br/></fieldset></form>常用標(biāo)簽--框架框架是HTML中的一種經(jīng)典布局方法，可以將HTML頁面劃分為多個區(qū)域，每個區(qū)域顯示不同的內(nèi)容。采用框架后，每個區(qū)域定義不同的頁面，可以實現(xiàn)某個區(qū)域的頁面按需跳轉(zhuǎn)、刷新等。2025/2/6《Web程序設(shè)計》84框架集框架集采用<frameset>標(biāo)簽定義，實際上定義的是一個框架的布局，其中包含的區(qū)域使用<frame>標(biāo)簽定義。2025/2/6《Web程序設(shè)計》85<framesetrows=”多行設(shè)置”cols=”多列設(shè)置”><framesrc=”頁面url”></frame><framesrc=”頁面url”></frame></frameset>參數(shù)說明：多行設(shè)置，設(shè)置該框架包含幾行子框架，指定子框架的行高，高度值可以是像素值、百分比；多列設(shè)置，設(shè)置該框架包含幾列子框架，指定子框架的列寬，高度值可以是像素值、百分比；頁面url，設(shè)置該子框架的頁面url。2025/2/6《Web程序設(shè)計》86<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>框架示例</title></head><framesetrows="200,*"><framesrc="top.html"></frame><framesetcols="20%,*"><framesrc="left.html"></frame><framesrc="main.html"></frame></frameset></frameset></html><frame>標(biāo)簽還定義了一些屬性，用于設(shè)置框架與子框架的樣式2025/2/6《Web程序設(shè)計》87屬性描述取值frameborder定義是否顯示框架周圍的邊框0|1，分別表示無邊框或有邊框marginheight定義框架上方和下方的邊距像素值marginwidth定義框架左側(cè)和右側(cè)的邊距像素值name定義了框架的名稱，允許作為表單提交、超鏈接的target自定義值noresize定義框架不支持大小調(diào)整noresizescrolling定義框架中是否顯示滾動條yes：一直顯示滾動條no：一直不顯示滾動條auto：根據(jù)內(nèi)容決定內(nèi)嵌框架內(nèi)嵌框架是允許在一個頁面中嵌入一個子框架(或者稱窗口)，該子框架中指定顯示另一個頁面，通過這種形式實現(xiàn)網(wǎng)頁的嵌入。使用<iframe>定義一個內(nèi)嵌的子框架。2025/2/6《Web程序設(shè)計》88<iframesrc=”頁面url”屬性=”屬性值”></iframe>參數(shù)說明：頁面url，指定嵌入的頁面url；屬性，定義iframe的控制屬性，例如是否顯示邊框、滾動條等；屬性值，設(shè)置該屬性的值。<iframe>示例2025/2/6《Web程序設(shè)計》89<h3>iframe示例</h3><p><ahref="article1.html"target="win">文章1</a><ahref="article2.html"target="win">文章2</a><ahref="article3.html"target="win">文章3</a><ahref="article4.html"target="win">文章4</a><ahref="article5.html"target="win">文章5</a></p><p><iframename="win"src=""width="600"height="300"></iframe></p>常用標(biāo)簽--多媒體網(wǎng)頁中的多媒體通常是指圖片、音樂、視頻和動畫。目前瀏覽器已能支持多種格式的媒體信息。文件（image)音頻（audio）2025/2/6《Web程序設(shè)計》90<imgsrc=“圖片url”alt=“圖片不能顯示時的替代文本”></img><audiocontrols><sourcesrc=”音頻url”type=”音頻類型