Java Web程序設(shè)計(jì) 課件全套 楊豐玉 第1-11章 緒論、HTML - Web其它常用技術(shù)

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

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

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

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

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

頁(yè)面瀏覽速度快，無(wú)需連接數(shù)據(jù)庫(kù)，開(kāi)啟速度快于動(dòng)態(tài)頁(yè)面；

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

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

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

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

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

在保證可靠性上，采用超時(shí)重傳和捎帶確認(rèn)機(jī)制；

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

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

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

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

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

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

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

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

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

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

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

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

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

表單元素項(xiàng)</fieldset>參數(shù)說(shuō)明：標(biāo)題文本，定義區(qū)域的標(biāo)題文本；表單元素項(xiàng)，定義該區(qū)域內(nèi)放置的表單元素項(xiàng)。示例2025/2/6《Web程序設(shè)計(jì)》83<h3>報(bào)名信息登記</h3><form><fieldset><legend>個(gè)人基本信息</legend>姓名：<inputtype="text"name="username"><br/>性別：<inputtype="radio"name="gender">男<inputtype="radio"name="gender">女<br/>出生年月：<inputtype="text"name="birth"placeholder="yyyy-MM"><br/>身份證號(hào)：<inputtype="text"name="id"><br/></fieldset></form>常用標(biāo)簽--框架框架是HTML中的一種經(jīng)典布局方法，可以將HTML頁(yè)面劃分為多個(gè)區(qū)域，每個(gè)區(qū)域顯示不同的內(nèi)容。采用框架后，每個(gè)區(qū)域定義不同的頁(yè)面，可以實(shí)現(xiàn)某個(gè)區(qū)域的頁(yè)面按需跳轉(zhuǎn)、刷新等。2025/2/6《Web程序設(shè)計(jì)》84框架集框架集采用<frameset>標(biāo)簽定義，實(shí)際上定義的是一個(gè)框架的布局，其中包含的區(qū)域使用<frame>標(biāo)簽定義。2025/2/6《Web程序設(shè)計(jì)》85<framesetrows=”多行設(shè)置”cols=”多列設(shè)置”><framesrc=”頁(yè)面url”></frame><framesrc=”頁(yè)面url”></frame></frameset>參數(shù)說(shuō)明：多行設(shè)置，設(shè)置該框架包含幾行子框架，指定子框架的行高，高度值可以是像素值、百分比；多列設(shè)置，設(shè)置該框架包含幾列子框架，指定子框架的列寬，高度值可以是像素值、百分比；頁(yè)面url，設(shè)置該子框架的頁(yè)面url。2025/2/6《Web程序設(shè)計(jì)》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è)計(jì)》87屬性描述取值frameborder定義是否顯示框架周圍的邊框0|1，分別表示無(wú)邊框或有邊框marginheight定義框架上方和下方的邊距像素值marginwidth定義框架左側(cè)和右側(cè)的邊距像素值name定義了框架的名稱，允許作為表單提交、超鏈接的target自定義值noresize定義框架不支持大小調(diào)整noresizescrolling定義框架中是否顯示滾動(dòng)條yes：一直顯示滾動(dòng)條no：一直不顯示滾動(dòng)條auto：根據(jù)內(nèi)容決定內(nèi)嵌框架內(nèi)嵌框架是允許在一個(gè)頁(yè)面中嵌入一個(gè)子框架(或者稱窗口)，該子框架中指定顯示另一個(gè)頁(yè)面，通過(guò)這種形式實(shí)現(xiàn)網(wǎng)頁(yè)的嵌入。使用<iframe>定義一個(gè)內(nèi)嵌的子框架。2025/2/6《Web程序設(shè)計(jì)》88<iframesrc=”頁(yè)面url”屬性=”屬性值”></iframe>參數(shù)說(shuō)明：頁(yè)面url，指定嵌入的頁(yè)面url；屬性，定義iframe的控制屬性，例如是否顯示邊框、滾動(dòng)條等；屬性值，設(shè)置該屬性的值。<iframe>示例2025/2/6《Web程序設(shè)計(jì)》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)頁(yè)中的多媒體通常是指圖片、音樂(lè)、視頻和動(dòng)畫。目前瀏覽器已能支持多種格式的媒體信息。文件（image)音頻（audio）2025/2/6《Web程序設(shè)計(jì)》90<imgsrc=“圖片url”alt=“圖片不能顯示時(shí)的替代文本”></img><audiocontrols><sourcesrc=”音頻url”type=”音頻類型”></audio>參數(shù)說(shuō)明：src，定義了音頻文件的來(lái)源；type，定義了音頻文件的類型，主要有audio/mpeg、audio/ogg、audio/wav。視頻<embed>標(biāo)簽可以在HTML頁(yè)面中嵌入多媒體信息，需要瀏覽器支持flash特性，否則無(wú)法顯示。<object>標(biāo)簽也可以在HTML頁(yè)面中嵌入多媒體信息HTML5中引入了一個(gè)新的視頻標(biāo)簽<video>，可以嵌入視頻或影片2025/2/6《Web程序設(shè)計(jì)》91<videowidth=””height=””controls><sourcesrc=””type=””/>

</video>主要內(nèi)容2025/2/6《Web程序設(shè)計(jì)》921HTML簡(jiǎn)介2基本語(yǔ)法3常用標(biāo)簽4HTML5新特性語(yǔ)義化標(biāo)簽HTML5提供的語(yǔ)義化標(biāo)簽使標(biāo)簽本身具有一定的語(yǔ)義含義，使頁(yè)面有良好的結(jié)構(gòu)，頁(yè)面元素有含義，能夠讓人和搜索引擎都容易理解。少用無(wú)語(yǔ)義的div、span標(biāo)簽等，鼓勵(lì)使用HTML5中新增的較多強(qiáng)語(yǔ)義化標(biāo)簽；

不要使用樣式化標(biāo)簽，如font、b等，應(yīng)使用CSS實(shí)現(xiàn)樣式；

盡量使用strong標(biāo)簽加強(qiáng)強(qiáng)調(diào)，em標(biāo)簽設(shè)置斜體

表格應(yīng)使用規(guī)范標(biāo)簽：標(biāo)題要用caption，表頭部分用thead包圍，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開(kāi)，表頭用th，單元格用td；

表單區(qū)域要用fieldset標(biāo)簽包圍起來(lái)，使用legend標(biāo)簽說(shuō)明表單的作用；

每個(gè)input標(biāo)簽前面對(duì)應(yīng)的說(shuō)明文本都需要使用label標(biāo)簽，并通過(guò)標(biāo)簽的id屬性和input關(guān)聯(lián)起來(lái)。2025/2/6《Web程序設(shè)計(jì)》93語(yǔ)義化標(biāo)簽HTML5自身定義了一系列的語(yǔ)義化標(biāo)簽，每個(gè)標(biāo)簽都賦予了一定的語(yǔ)義，即標(biāo)簽名稱提示了該標(biāo)簽的主要作用。用于布局的標(biāo)簽主要有：<header>、<nav>、<section>、<aside>、<article>、<footer>等2025/2/6《Web程序設(shè)計(jì)》94增強(qiáng)型表單表單輸入元素描述使用效果inputtype=”color”顏色選擇框

inputtype=”date”日期選擇框inputtype=”time”時(shí)間選擇框inputtype=”week”周歷選擇框inputtype=”month”月歷選擇框inputtype=”number”數(shù)值選擇框inputtype=”range”數(shù)值范圍選擇框2025/2/6《Web程序設(shè)計(jì)》95新增的表單元素屬性input標(biāo)簽元素是指文本輸入框，新增了以下一些屬性：autofocus：設(shè)置當(dāng)前頁(yè)面加載后該標(biāo)簽是否自動(dòng)獲得焦點(diǎn)；max、min、step：分別對(duì)應(yīng)input標(biāo)簽的最大、最小和調(diào)整單步值；placeholder：設(shè)置標(biāo)簽的提示信息屬性，在未填寫內(nèi)容時(shí)提示。multiple：用于文件上傳控件，設(shè)置此屬性后，允許單個(gè)文件控件上傳多個(gè)文件；required：設(shè)置input標(biāo)簽的必填屬性。設(shè)置required屬性后意味著當(dāng)前輸入框在表單提交前必須有數(shù)據(jù)輸入；pattern：設(shè)置input標(biāo)簽的正則表達(dá)式校驗(yàn)規(guī)則；form：設(shè)置input標(biāo)簽所屬的form表單名稱，不必再像原來(lái)那樣包含在form標(biāo)簽中，可以放在網(wǎng)頁(yè)的其它地方。2025/2/6《Web程序設(shè)計(jì)》96form表單標(biāo)簽新增的屬性form標(biāo)簽新增了兩個(gè)屬性，novalidate與autocomplete，主要作用如下：novalidate，定義了表單在提交時(shí)是否需要進(jìn)行校驗(yàn)，即所設(shè)置的校驗(yàn)規(guī)則是否生效，取值為“true”或者”false”；autocomplete，定義form的input域是否具有自動(dòng)完成功能，即記錄之前填寫的信息，下次輸入時(shí)可從歷史信息中選擇，取值為“on”表示打開(kāi)自動(dòng)完成，設(shè)置為“off”表示關(guān)閉自動(dòng)完成。適用于這些<input>類型：text,search,url,telephone,email,password,datepickers,range以及color。2025/2/6《Web程序設(shè)計(jì)》97<formaction="register_form.jsp"method="get"autocomplete="on">姓名:<inputtype="text"name="username"/><br/>昵稱:<inputtype="text"name="nickname"/><br/>E-mail:<inputtype="email"name="email"autocomplete="off"/><br/><inputtype="submit"/></form>對(duì)于E-mail輸入項(xiàng)，取消了自動(dòng)完成。2025/2/6《Web程序設(shè)計(jì)》98本章結(jié)束第3章CSS主講人：2025/2/699主要內(nèi)容2025/2/6《Web程序設(shè)計(jì)》1001CSS簡(jiǎn)介2基本語(yǔ)法3常用樣式4DIV+CSS布局本章課程目標(biāo)知識(shí)目標(biāo)掌握CSS樣式的基本語(yǔ)法、常用樣式以及使用方法；能力要求：能夠認(rèn)識(shí)到解決問(wèn)題有多種解決方案，并運(yùn)用文獻(xiàn)資料檢索研究尋找可替代的方案，具備多方案比較選擇能力；能夠理解并掌握Web程序設(shè)計(jì)中的基礎(chǔ)知識(shí)與工作原理，將知識(shí)與原理應(yīng)用于開(kāi)發(fā)過(guò)程中的問(wèn)題分析；2025/2/6《Web程序設(shè)計(jì)》1012.1HTML簡(jiǎn)介CSS（CascadingStyleSheets層疊樣式表）是W3C協(xié)會(huì)為了彌補(bǔ)HTML在樣式排版功能上的不足而制定的一套擴(kuò)展樣式標(biāo)準(zhǔn)，也由于CSS可以豐富網(wǎng)站的視覺(jué)效果，使網(wǎng)頁(yè)設(shè)計(jì)者能夠以更有效的方式設(shè)計(jì)出更具表現(xiàn)力的網(wǎng)頁(yè)效果。2025/2/6《Web程序設(shè)計(jì)》102CSS特點(diǎn)豐富的樣式定義：CSS提供了豐富的文檔樣式外觀內(nèi)容和樣式分離：使網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)潔明了，分工明確易于使用和修改：CSS可以將樣式定義在專門的CSS文件中多頁(yè)面應(yīng)用：可以在多個(gè)頁(yè)面中使用同一個(gè)CSS樣式表層疊：就是對(duì)一個(gè)元素多次設(shè)置同一個(gè)樣式，將使用優(yōu)先級(jí)最高方式設(shè)置的屬性值。頁(yè)面壓縮：樣式的聲明單獨(dú)放到CSS樣式表中，可以大大的減小頁(yè)面的體積，這樣在加載頁(yè)面時(shí)使用的時(shí)間也會(huì)大大的減少2025/2/6《Web程序設(shè)計(jì)》103CSS一鍵設(shè)置黑白頁(yè)面2025/2/6《Web程序設(shè)計(jì)》104主要內(nèi)容2025/2/6《Web程序設(shè)計(jì)》1051CSS簡(jiǎn)介2基本語(yǔ)法3常用樣式4DIV+CSS布局CSS基本語(yǔ)法CSS的每個(gè)規(guī)則都包括三部分：選擇器、樣式屬性和屬性值。使用語(yǔ)法規(guī)范如下所示：2025/2/6《Web程序設(shè)計(jì)》106selector{property:value;property:value;...property:value}參數(shù)說(shuō)明：selector，選擇器，選擇樣式要作用的HTML元素，可以是多個(gè)，以逗號(hào)分隔；property，樣式的屬性，即樣式的名稱；value，樣式的值，與property為一對(duì)。樣式說(shuō)明2025/2/6《Web程序設(shè)計(jì)》107簡(jiǎn)單示例2025/2/6《Web程序設(shè)計(jì)》108<html><head><title>CSS簡(jiǎn)單示例</title><style>h1{color:red;font-size:14px}</style></head><body><div><h1>網(wǎng)頁(yè)標(biāo)題1</h1></div></body></html>選擇器選擇器是控制CSS樣式作用的對(duì)象，通?？梢赃x擇一個(gè)或多個(gè)HTML元素。CSS選擇器包括了：元素選擇器類選擇器ID選擇器屬性選擇器派生選擇器。2025/2/6《Web程序設(shè)計(jì)》109元素選擇器元素選擇器是CSS選擇器中最基本的一種選擇器，通過(guò)直接指定HTML元素標(biāo)簽，設(shè)置CSS樣式要作用的元素。2025/2/6《Web程序設(shè)計(jì)》110<style>html{background-color:black;}p{font-size:30px;backgroud-color:gray;}h2{background-color:red;}</style>實(shí)現(xiàn)的效果分別是：對(duì)整個(gè)文檔添加黑色背景；將所有p元素字體大小設(shè)置為30像素同時(shí)添加灰色背景；對(duì)文檔中所有h2元素添加紅色背景。元素選擇器也可以對(duì)多個(gè)元素使用同一組樣式允許使用“*”通配符，讓網(wǎng)頁(yè)中所有元素的字體都設(shè)置為“黑體”如果font-size屬性對(duì)于某些元素是無(wú)效的話，那么該效果將被忽略。2025/2/6《Web程序設(shè)計(jì)》111h1,h2,h3,h4,h5,h6,p{font-family:黑體;}*{font-family:黑體;font-size:12px}類(class)選擇器類選擇器用于描述一組元素的樣式，這組元素指定了相同的樣式名稱，這樣就允許了樣式定義可以應(yīng)用于多個(gè)元素中。class選擇器在HTML中以class屬性表示,在CSS定義中，類選擇器以一個(gè)點(diǎn)"."號(hào)顯示。2025/2/6《Web程序設(shè)計(jì)》112<style>.center{text-align:center}</style><body>

<divclass=”center”>...</div><pclass=”center”>...</p></body>類(class)選擇器CSS還允許使用多類選擇器，即對(duì)于一個(gè)元素的class聲明中使用了多個(gè)class，必須要同時(shí)滿足這個(gè)多個(gè)class。2025/2/6《Web程序設(shè)計(jì)》113<style>.bold{font-weight:bold;}.italic{font-style:italic;}.bold.italic{background:#eeeeee;}</style><pclass="bolditalic">這段文本將會(huì)受多個(gè)CSS樣式作用</p>將僅作用于class聲明為“.bold.italic”的元素。ID選擇器ID選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式。HTML元素可以設(shè)置ID屬性來(lái)定義某個(gè)元素的ID，CSS樣式定義中ID選擇器以"#"來(lái)定義。2025/2/6《Web程序設(shè)計(jì)》114<style>#ref{text-align:center;color:red;}</style><body><p>第一個(gè)段落</p><pid=”ref”>第二個(gè)段落</p></body>ID選擇器“#ref”將只會(huì)作用于第二個(gè)P元素上。屬性選擇器屬性選擇器允許使用某個(gè)屬性名稱作為選擇器，選擇具有該屬性的所有HTML元素，而無(wú)論其屬于哪種元素。2025/2/6《Web程序設(shè)計(jì)》115<style>*[title]{color:red}</style><style>a[href][title]{color:red;}</style><body><ahref=”#”title=”鏈接1”>測(cè)試鏈接1</a><ahref=”#”>測(cè)試鏈接2</a>

</body>該選擇器只會(huì)對(duì)測(cè)試鏈接1生效，而對(duì)測(cè)試鏈接2無(wú)效。屬性選擇器的模式匹配屬性選擇器還支持模式匹配的方式2025/2/6《Web程序設(shè)計(jì)》116模式匹配類型描述[attr^="str"]選擇attr屬性值以"str"開(kāi)頭的所有元素[attr$="str"]選擇attr屬性值以"str"結(jié)尾的所有元素[attr*="str"]選擇attr屬性值中包含子串"str"的所有元素[attr|="str"]選擇attr屬性值中等于”str”或以"str"開(kāi)頭的所有元素派生選擇器派生選擇器是在以上幾種基本選擇器之外的衍生選擇器，充分利用元素之間的層級(jí)關(guān)系、順序關(guān)系、組合關(guān)系等，支持更靈活的選擇器。包括：后代選擇器（Descendantselectors）子元素選擇器（Childselectors）相鄰兄弟選擇器（Adjacentsiblingselector）2025/2/6《Web程序設(shè)計(jì)》117后代選擇器后代選擇器可以選擇某元素后代的元素，可以根據(jù)上下文關(guān)系或?qū)蛹?jí)關(guān)系來(lái)選擇。2025/2/6《Web程序設(shè)計(jì)》118<style>h1em{color:red;}</style><body><h1>這是一段非常<em>重要</em>的標(biāo)題.</h1><p>這是一段非常<em>重要</em>的文本.</p></body>該樣式僅對(duì)h1標(biāo)題行生效，對(duì)第二行p文本行不生效。后代選擇器允許兩個(gè)元素之間的層次間隔可以是無(wú)限的，而不必局限于上下級(jí)。子元素選擇器與后代選擇器類似但又不同，子元素選擇器允許選擇某個(gè)元素的子元素，即相鄰層次上的上下層子元素，而不是任意的后代元素。子元素選擇器通過(guò)“>”符號(hào)指定上下層間關(guān)系。2025/2/6《Web程序設(shè)計(jì)》119<style>h1>strong{color:red;}</style><body><h1>

這是一段<strong>非常</strong><strong>非常</strong>重要的標(biāo)題.</h1><h1>這是一段<em>非常<strong>重要</strong></em>的標(biāo)題.</h1></body>第二行的h1不會(huì)生效，因?yàn)榈诙械膆1與strong元素之間還有一層em元素。相鄰兄弟選擇器相鄰兄弟選擇器允許選擇屬于同一父元素下的兩個(gè)相鄰的兄弟元素。2025/2/6《Web程序設(shè)計(jì)》120<style>h1+p{margin-top:50px;}</style><body><h1>這是標(biāo)題</h1><p>這是第一個(gè)段落</p><p>這是第二個(gè)段落</p></body>