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

靜態網頁是實實在在保存在服務器上的文件；

靜態網頁的內容相對穩定，因此容易被搜索引擎檢索；

靜態網頁沒有數據庫的支持，在制作和維護方面工作量較大；

靜態網頁的交互性較差，在功能方面有較大的限制；

頁面瀏覽速度快，無需連接數據庫，開啟速度快于動態頁面；

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

采用動態網頁技術的網站可以實現更多的交互功能；

動態網頁實際上并不是獨立存在于服務器上的網頁，而是一段動態代碼，根據用戶請求經過計算返回的網頁；

動態網頁對搜索引擎檢索支持度不好，這是由于其內容是根據提交的參數動態生成。

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

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

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

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

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

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

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

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

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

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

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

屬性名，要設置的form標簽屬性名稱；

屬性值，要設置的form標簽值；

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

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

表單元素項</fieldset>參數說明：標題文本，定義區域的標題文本；表單元素項，定義該區域內放置的表單元素項。示例2025/2/6《Web程序設計》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>常用標簽--框架框架是HTML中的一種經典布局方法，可以將HTML頁面劃分為多個區域，每個區域顯示不同的內容。采用框架后，每個區域定義不同的頁面，可以實現某個區域的頁面按需跳轉、刷新等。2025/2/6《Web程序設計》84框架集框架集采用<frameset>標簽定義，實際上定義的是一個框架的布局，其中包含的區域使用<frame>標簽定義。2025/2/6《Web程序設計》85<framesetrows=”多行設置”cols=”多列設置”><framesrc=”頁面url”></frame><framesrc=”頁面url”></frame></frameset>參數說明：多行設置，設置該框架包含幾行子框架，指定子框架的行高，高度值可以是像素值、百分比；多列設置，設置該框架包含幾列子框架，指定子框架的列寬，高度值可以是像素值、百分比；頁面url，設置該子框架的頁面url。2025/2/6《Web程序設計》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>標簽還定義了一些屬性，用于設置框架與子框架的樣式2025/2/6《Web程序設計》87屬性描述取值frameborder定義是否顯示框架周圍的邊框0|1，分別表示無邊框或有邊框marginheight定義框架上方和下方的邊距像素值marginwidth定義框架左側和右側的邊距像素值name定義了框架的名稱，允許作為表單提交、超鏈接的target自定義值noresize定義框架不支持大小調整noresizescrolling定義框架中是否顯示滾動條yes：一直顯示滾動條no：一直不顯示滾動條auto：根據內容決定內嵌框架內嵌框架是允許在一個頁面中嵌入一個子框架(或者稱窗口)，該子框架中指定顯示另一個頁面，通過這種形式實現網頁的嵌入。使用<iframe>定義一個內嵌的子框架。2025/2/6《Web程序設計》88<iframesrc=”頁面url”屬性=”屬性值”></iframe>參數說明：頁面url，指定嵌入的頁面url；屬性，定義iframe的控制屬性，例如是否顯示邊框、滾動條等；屬性值，設置該屬性的值。<iframe>示例2025/2/6《Web程序設計》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>常用標簽--多媒體網頁中的多媒體通常是指圖片、音樂、視頻和動畫。目前瀏覽器已能支持多種格式的媒體信息。文件（image)音頻（audio）2025/2/6《Web程序設計》90<imgsrc=“圖片url”alt=“圖片不能顯示時的替代文本”></img><audiocontrols><sourcesrc=”音頻url”type=”音頻類型”></audio>參數說明：src，定義了音頻文件的來源；type，定義了音頻文件的類型，主要有audio/mpeg、audio/ogg、audio/wav。視頻<embed>標簽可以在HTML頁面中嵌入多媒體信息，需要瀏覽器支持flash特性，否則無法顯示。<object>標簽也可以在HTML頁面中嵌入多媒體信息HTML5中引入了一個新的視頻標簽<video>，可以嵌入視頻或影片2025/2/6《Web程序設計》91<videowidth=””height=””controls><sourcesrc=””type=””/>

</video>主要內容2025/2/6《Web程序設計》921HTML簡介2基本語法3常用標簽4HTML5新特性語義化標簽HTML5提供的語義化標簽使標簽本身具有一定的語義含義，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜索引擎都容易理解。少用無語義的div、span標簽等，鼓勵使用HTML5中新增的較多強語義化標簽；

不要使用樣式化標簽，如font、b等，應使用CSS實現樣式；

盡量使用strong標簽加強強調，em標簽設置斜體

表格應使用規范標簽：標題要用caption，表頭部分用thead包圍，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；

表單區域要用fieldset標簽包圍起來，使用legend標簽說明表單的作用；

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

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

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

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

這是一段<strong>非常</strong><strong>非常</strong>重要的標題.</h1><h1>這是一段<em>非常<strong>重要</strong></em>的標題.</h1></body>第二行的h1不會生效，因為第二行的h1與strong元素之間還有一層em元素。相鄰兄弟選擇器相鄰兄弟選擇器允許選擇屬于同一父元素下的兩個相鄰的兄弟元素。2025/2/6《Web程序設計》120<style>h1+p{margin-top:50px;}</style><body><h1>這是標題</h1><p>這是第一個段落</p><p>這是第二個段落</p></body>