Javaweb應(yīng)用開(kāi)發(fā)02第1章Javaweb應(yīng)用開(kāi)發(fā)概述

第2章HTML與CSS網(wǎng)頁(yè)基礎(chǔ)第3章JSP語(yǔ)法第4章JSP內(nèi)置對(duì)象第5章JavaBean及其應(yīng)用第6章Servlet技術(shù)第7章EL表達(dá)式和JSTL第8章

使用JDBC技術(shù)訪問(wèn)數(shù)據(jù)庫(kù)第9章

綜合案例全套可編輯PPT課件

本課件是可編輯的正常PPT課件第1章Javaweb

應(yīng)用開(kāi)發(fā)概述0201本課件是可編輯的正常PPT課件學(xué)習(xí)目標(biāo)了解JavaEE平臺(tái)的主要特性；了解JavaEE平臺(tái)的相關(guān)技術(shù)、應(yīng)用服務(wù)器；掌握J(rèn)avaEE的體系結(jié)構(gòu)。掌握制作JavaWeb網(wǎng)頁(yè)的最基本的步驟。本課件是可編輯的正常PPT課件課程思政提升框架能力和邏輯思維能力，并提升個(gè)人的修養(yǎng)。樹(shù)立一些重要的IT分析開(kāi)發(fā)和軟件工程技能。

本課件是可編輯的正常PPT課件1.1開(kāi)發(fā)平臺(tái)與應(yīng)用平臺(tái)介紹1.1.1MyEclipse簡(jiǎn)介MyEclipse企業(yè)級(jí)工作平臺(tái)（MyEclipseEnterpriseWorkbench，簡(jiǎn)稱MyEclipse）是對(duì)EclipseIDE的擴(kuò)展，利用它我們可以在數(shù)據(jù)庫(kù)和J2EE的開(kāi)發(fā)、發(fā)布，以及應(yīng)用程序服務(wù)器的整合方面極大的提高工作效率。它是功能豐富的J2EE集成開(kāi)發(fā)環(huán)境，包括了完備的編碼、調(diào)試、測(cè)試和發(fā)布功能，完整支持HTML,Struts,JSF,CSS,Javascript,SQL,Hibernate。本課件是可編輯的正常PPT課件1.1.2Tomcat簡(jiǎn)介T(mén)omcat服務(wù)器是一個(gè)免費(fèi)的開(kāi)放源代碼的Web

應(yīng)用服務(wù)器，屬于輕量級(jí)應(yīng)用服務(wù)器，在中小型系統(tǒng)和并發(fā)訪問(wèn)用戶不是很多的場(chǎng)合下被普遍使用，是開(kāi)發(fā)和調(diào)試JSP程序的首選。實(shí)際上Tomcat是Apache服務(wù)器的擴(kuò)展，但運(yùn)行時(shí)它是獨(dú)立運(yùn)行的，所以當(dāng)你運(yùn)行tomcat時(shí)，它實(shí)際上作為一個(gè)與Apache獨(dú)立的進(jìn)程單獨(dú)運(yùn)行的。1.1開(kāi)發(fā)平臺(tái)與應(yīng)用平臺(tái)介紹本課件是可編輯的正常PPT課件1.1.3JSP簡(jiǎn)介JSP（全稱Java

Server

Pages）是由SunMicrosystems公司主導(dǎo)創(chuàng)建的一種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)標(biāo)準(zhǔn)。JSP部署于網(wǎng)絡(luò)服務(wù)器上，可以響應(yīng)客戶端發(fā)送的請(qǐng)求，并根據(jù)請(qǐng)求內(nèi)容動(dòng)態(tài)地生成HTML、XML或其他格式文檔的Web網(wǎng)頁(yè)，然后返回給請(qǐng)求者。1.1開(kāi)發(fā)平臺(tái)與應(yīng)用平臺(tái)介紹本課件是可編輯的正常PPT課件JSP特點(diǎn)：能以模板化的方式簡(jiǎn)單、高效地添加動(dòng)態(tài)網(wǎng)頁(yè)內(nèi)容?？衫肑avaBean技術(shù)復(fù)用常用的功能代碼（設(shè)計(jì)好的組件容易實(shí)現(xiàn)重復(fù)利用，減少重復(fù)勞動(dòng)）。有良好的工具支持。繼承了Java語(yǔ)言的相對(duì)易用性。繼承了Java的跨平臺(tái)優(yōu)勢(shì)，實(shí)現(xiàn)“一次編寫(xiě)，處處運(yùn)行”。因?yàn)橹С諮ava及其相關(guān)技術(shù)的開(kāi)發(fā)平臺(tái)多，網(wǎng)站開(kāi)發(fā)人員可以選擇在最適合自己的系統(tǒng)平臺(tái)上進(jìn)行JSP開(kāi)發(fā)；不同環(huán)境下開(kāi)發(fā)的JSP項(xiàng)目，在所有客戶端上都能順利訪問(wèn)。JSP分離了服務(wù)器端的靜態(tài)內(nèi)容和動(dòng)態(tài)內(nèi)容?？膳c其它企業(yè)級(jí)Java技術(shù)相互配合。JSP可以只專(zhuān)門(mén)負(fù)責(zé)頁(yè)面中的數(shù)據(jù)呈現(xiàn)，實(shí)現(xiàn)分層開(kāi)發(fā)。1.1開(kāi)發(fā)平臺(tái)與應(yīng)用平臺(tái)介紹本課件是可編輯的正常PPT課件1.1.4JavaEE開(kāi)發(fā)平臺(tái)介紹Java平臺(tái)根據(jù)API和使用領(lǐng)域，主要分為三種技術(shù)：1）JavaSE：JavaPlatform,StandardEdition，定位在客戶端，主要用于桌面應(yīng)用軟件的編程。2）JavaEE：JavaPlatform,EnterpriseEdition，定義在服務(wù)器端Java的企業(yè)版，主要用于分布式的網(wǎng)絡(luò)程序的開(kāi)發(fā)，如電子商務(wù)網(wǎng)站和ERP系統(tǒng)。3）JavaME：JavaPlatform,MicroEdition，主要應(yīng)用于嵌入式系統(tǒng)開(kāi)發(fā)，如手機(jī)和PDA的編程。1.1開(kāi)發(fā)平臺(tái)與應(yīng)用平臺(tái)介紹本課件是可編輯的正常PPT課件JavaEE架構(gòu)包括以下四個(gè)層次：用戶層（ClientTier）：即客戶端層，用于用戶交互，并把來(lái)自系統(tǒng)的信息顯示給用戶。包括html用戶，applet和javaapplication等。web層：它是由web服務(wù)器和web組件構(gòu)成，JavaEE組件包括JSP和Servlet。該層主要用來(lái)處理客戶請(qǐng)求，調(diào)用相應(yīng)的邏輯模塊，并把結(jié)果以動(dòng)態(tài)網(wǎng)頁(yè)的形式返回到客戶端。業(yè)務(wù)層（BusinessTier）：這一層處理應(yīng)用的核心業(yè)務(wù)邏輯。業(yè)務(wù)組件通常被實(shí)現(xiàn)為運(yùn)行在EJB容器內(nèi)的EJB組件，EJB容器提供組件生命周期、管理持久性、事務(wù)和資源分配等。企業(yè)信息系統(tǒng)層（EISTier）：處理企業(yè)系統(tǒng)軟件，包括企業(yè)基礎(chǔ)系統(tǒng)、數(shù)據(jù)庫(kù)系統(tǒng)和其他遺留系統(tǒng)。EIS層是JavaEE應(yīng)用和非JavaEE應(yīng)用或遺產(chǎn)系統(tǒng)集成的連接點(diǎn)。1.1開(kāi)發(fā)平臺(tái)與應(yīng)用平臺(tái)介紹本課件是可編輯的正常PPT課件JavaEE容器1）Web容器，包括兩種組件JSP和Servlet，它們都是Web服務(wù)器的功能擴(kuò)展，接受Web請(qǐng)求，返回動(dòng)態(tài)的Web頁(yè)面。Web容器中的組件可使用EJB容器中的組件完成復(fù)雜的商務(wù)邏輯。2）EJB容器：EJB組件是JavaEE的核心之一，主要用于服務(wù)器的商業(yè)邏輯功能的實(shí)現(xiàn)。EJB規(guī)范定義了一個(gè)開(kāi)發(fā)和不受分布式商業(yè)邏輯的框架，以簡(jiǎn)化企業(yè)級(jí)應(yīng)用的開(kāi)發(fā)，使其較容易的可伸縮性、可移植性、分布式事務(wù)處理、多用戶和安全性等。3）Applet容器：Applet是嵌在瀏覽器匯中的一種輕量級(jí)客戶端。一般而言，只有當(dāng)使用Web頁(yè)面無(wú)法充分的表現(xiàn)數(shù)據(jù)或應(yīng)用界面時(shí)才會(huì)使用4）ApplicationClient容器：ApplicationClient相對(duì)Applet而言是一種較重量級(jí)的客戶端，它能夠使用J2EE的大多數(shù)Service和API。1.1開(kāi)發(fā)平臺(tái)與應(yīng)用平臺(tái)介紹本課件是可編輯的正常PPT課件1.2.1JDK下載及安裝JDK（JavaDeveloper’sKit）即Java開(kāi)發(fā)工具包，有時(shí)也被稱為J2SDK。該軟件工具包含Java語(yǔ)言的編譯工具、運(yùn)行工具以及軟件運(yùn)行環(huán)境（JRE）。JDK是Sun公司（目前已經(jīng)被Oracle公司收購(gòu)）提供的一款免費(fèi)的Java語(yǔ)言基礎(chǔ)開(kāi)發(fā)工具，在安裝其他開(kāi)發(fā)工具之前，必須首先安裝JDK，本書(shū)采用JDK1.8版本。1.2安裝開(kāi)發(fā)環(huán)境本課件是可編輯的正常PPT課件1.2.2Tomcat服務(wù)器安裝MyEclipse8.5安裝配置自帶的Tomcat服務(wù)器Tomcat下載及安裝1、下載Tomcat是免費(fèi)的開(kāi)源軟件，可以進(jìn)入如下地址，下載即可：H/本書(shū)使用Tomcat6.0版本。在安裝之前要確保JDK成功安裝。1.2安裝開(kāi)發(fā)環(huán)境本課件是可編輯的正常PPT課件1.2.3安裝MySQL數(shù)據(jù)庫(kù)本書(shū)案例采用MySQL5.1數(shù)據(jù)庫(kù)，具體安裝步驟見(jiàn)書(shū)。Tomcat下載及安裝1、下載Tomcat是免費(fèi)的開(kāi)源軟件，可以進(jìn)入如下地址，下載即可：H/本書(shū)使用Tomcat6.0版本。在安裝之前要確保JDK成功安裝。1.2安裝開(kāi)發(fā)環(huán)境本課件是可編輯的正常PPT課件1.3.1創(chuàng)建步驟（1）在MyEclipse中創(chuàng)建一個(gè)Web項(xiàng)目。（2）設(shè)計(jì)Web項(xiàng)目的目錄結(jié)構(gòu)：不同的文件放在不同的目錄下以備更好的管理。在這個(gè)步驟中將介紹每個(gè)目錄的用途。（3）編寫(xiě)Web項(xiàng)目代碼：這一步主要為大家介紹JSP頁(yè)面文件的創(chuàng)建，后臺(tái)Java代碼在后面再詳細(xì)介紹。（4）在MyEclipse中部署web項(xiàng)目：這一步驟主要介紹如何使用將項(xiàng)目部署到tomcat容器中。（5）運(yùn)行項(xiàng)目：?jiǎn)?dòng)Tomcat后在瀏覽器中輸入U(xiǎn)RL地址就可以訪問(wèn)系統(tǒng)了。1.3創(chuàng)建第一個(gè)Web項(xiàng)目本課件是可編輯的正常PPT課件1.3.2創(chuàng)建我的第一個(gè)Web項(xiàng)目1.3創(chuàng)建第一個(gè)Web項(xiàng)目本課件是可編輯的正常PPT課件1.3.3Web項(xiàng)目的目錄結(jié)構(gòu)1.3創(chuàng)建第一個(gè)Web項(xiàng)目（1）src目錄：專(zhuān)門(mén)用來(lái)存放Java源文件的一個(gè)目錄。（2）WebRoot目錄：是Web目錄，所有的Web資源都可以放在這個(gè)目錄下。（3）META-INF目錄：這個(gè)目錄是由系統(tǒng)自動(dòng)生成的，用于存放系統(tǒng)描述信息。（4）WEB-INF目錄：該目錄下所有的資源不能被引用，即該目錄下存放的文件無(wú)法對(duì)外部發(fā)布，用戶也就無(wú)法訪問(wèn)到。Web.xml文件是一個(gè)重要的全局文件，非常重要，里面包含Web應(yīng)用程序的初始化配置信息。（5）index.jsp文件：MyEclipse在創(chuàng)先Web項(xiàng)目的時(shí)候自動(dòng)為用戶創(chuàng)建的一個(gè)JSP文件。本課件是可編輯的正常PPT課件1.3.4編寫(xiě)Web項(xiàng)目的代碼1.3創(chuàng)建第一個(gè)Web項(xiàng)目本課件是可編輯的正常PPT課件1.3.4編寫(xiě)Web項(xiàng)目的代碼1.3創(chuàng)建第一個(gè)Web項(xiàng)目打開(kāi)“First.jsp”頁(yè)面，在其中<body></body>中間輸入“我的第一個(gè)JSP網(wǎng)頁(yè)?！?，點(diǎn)擊保存，JSP頁(yè)面就完成啦。本課件是可編輯的正常PPT課件1.3.5部署第一個(gè)Web項(xiàng)目1.3創(chuàng)建第一個(gè)Web項(xiàng)目本課件是可編輯的正常PPT課件1.3.6運(yùn)行Web項(xiàng)目1.3創(chuàng)建第一個(gè)Web項(xiàng)目此時(shí)，在控制臺(tái)將會(huì)輸出Tomcat的啟動(dòng)信息，當(dāng)出現(xiàn)“Serverstartupin1886ms”字樣時(shí)，代表啟動(dòng)成功。本課件是可編輯的正常PPT課件1.3.7Web程序的調(diào)試與排錯(cuò)1.3創(chuàng)建第一個(gè)Web項(xiàng)目（1）Tomcat服務(wù)沒(méi)有啟動(dòng)服務(wù)，直接開(kāi)啟瀏覽器運(yùn)行程序。解決辦法：檢查T(mén)omcat服務(wù)器是否啟動(dòng)。請(qǐng)按照1.3.5節(jié)部署第一個(gè)web項(xiàng)目中的步驟來(lái)重新啟動(dòng)Tomcat應(yīng)用服務(wù)器，就可以解決這個(gè)問(wèn)題。本課件是可編輯的正常PPT課件1.3.7Web程序的調(diào)試與排錯(cuò)1.3創(chuàng)建第一個(gè)Web項(xiàng)目（2）Tomcat服務(wù)已經(jīng)成功啟動(dòng)，但是沒(méi)有部署Web項(xiàng)目就直接運(yùn)行程序。則會(huì)出現(xiàn)“404錯(cuò)誤”。解決辦法：發(fā)生這種“404”錯(cuò)誤的根本原因是請(qǐng)求的資源在Tomcat容器中不存在導(dǎo)致的。首先查看Web項(xiàng)目是否被部署到Tomcat容器中。將Web項(xiàng)目部署到Tomcat容器中的方法可以參照1.3.5部署第一個(gè)Web項(xiàng)目一節(jié)。本課件是可編輯的正常PPT課件1.3.7Web程序的調(diào)試與排錯(cuò)1.3創(chuàng)建第一個(gè)Web項(xiàng)目（3）URL地址拼寫(xiě)錯(cuò)誤。比如路徑、大小寫(xiě)或者請(qǐng)求的頁(yè)面不存在等，也會(huì)出現(xiàn)“404錯(cuò)誤”。解決辦法：仔細(xì)查看上圖中被長(zhǎng)方形框選中的信息，發(fā)現(xiàn)“NewsSystem”被錯(cuò)誤寫(xiě)成了“news”，導(dǎo)致請(qǐng)求的路徑發(fā)生了錯(cuò)誤。本課件是可編輯的正常PPT課件1.4小結(jié)這章節(jié)主要對(duì)JavaWeb應(yīng)用開(kāi)發(fā)技術(shù)的概述，包括JavaEE平臺(tái)的相關(guān)技術(shù)，即MyEclipse、Tomcat、JDK等的下載與安裝步驟，也介紹了第一個(gè)JavaWeb網(wǎng)頁(yè)的制作過(guò)程，為后面的章節(jié)打下基礎(chǔ)。本課件是可編輯的正常PPT課件1.5上機(jī)實(shí)踐1、在MyEclipse8.5下編寫(xiě)一個(gè)JSP頁(yè)面，輸出：“我要認(rèn)真學(xué)習(xí)JavaWeb應(yīng)用開(kāi)發(fā)。”2、安裝配置開(kāi)發(fā)環(huán)境，包括JDK的安裝、MyEclipse8.5的安裝、MySQL數(shù)據(jù)庫(kù)的安裝。本課件是可編輯的正常PPT課件1.6習(xí)題1、（單選）JavaME主要應(yīng)用于（

）。A.嵌入式系統(tǒng)開(kāi)發(fā)B.分布式網(wǎng)絡(luò)程序的開(kāi)發(fā)C.桌面應(yīng)用軟件的編程D.網(wǎng)頁(yè)編程2、（單選）MyEclipse是一個(gè)基于（

）的可擴(kuò)展開(kāi)發(fā)平臺(tái)。A.Python語(yǔ)言B.PHPC.Java語(yǔ)言D.C語(yǔ)言3、?（多選）JSP開(kāi)發(fā)環(huán)境需要安裝的軟件有（

）A.JDKB.Tomcat服務(wù)器C.MyEclipseD.MySql數(shù)據(jù)庫(kù)本課件是可編輯的正常PPT課件1.5習(xí)題4、判斷題：Tomcat是免費(fèi)的開(kāi)放源代碼的Servlet容器。（

）5、判斷題：JavaEE的容器：Web容器包括EJB組件。（

）6、?JavaEE平臺(tái)具有

的特性。7、web應(yīng)用程序體系結(jié)構(gòu)最多可分為三層，不屬于這三層的是（

）A.表示層B.業(yè)務(wù)層C.數(shù)據(jù)訪問(wèn)層D.網(wǎng)絡(luò)鏈接層8、要建構(gòu)JSP的開(kāi)發(fā)環(huán)境，除了需要安裝以上的JSP開(kāi)發(fā)工具外，還必須安裝（

）和（

）。A.JDKB.DreamweaverMXC.FlashMXD.Tomcat本課件是可編輯的正常PPT課件1.5習(xí)題9、在jsp系統(tǒng)環(huán)境中常用（

）作為其虛擬機(jī)。A．tomcatB.j2sdkC.servletD.web服務(wù)器10、JSP隸屬Java家族，下列不屬于JAVA家族的是（

）。A.ServletB.JavaBeanC.JavaD.JavaScript11、下列關(guān)于WEB開(kāi)發(fā)說(shuō)法正確的是（

）。A.Web是圖形化的和易于導(dǎo)航的

B.Web與平臺(tái)無(wú)關(guān)C.Web是分布式的

D.Web是動(dòng)態(tài)的

E.Web是靜態(tài)的本課件是可編輯的正常PPT課件1.5習(xí)題12、下列關(guān)于Tomcat說(shuō)法正確的是（

）。A．Tomcat是一種編程語(yǔ)言

B.Tomcat是一種開(kāi)發(fā)工具

C.Tomcat是一種編程思想D.Tomcat是一種開(kāi)編程規(guī)范

E.Tomcat是一個(gè)免費(fèi)的開(kāi)源的Serlvet容器13、下列關(guān)于Tomcat個(gè)目錄說(shuō)法錯(cuò)誤的是（

）。A．bin目錄--包含啟動(dòng)/關(guān)閉腳本

B．conf目錄—-包含不同的配置文件C．Lib目錄-—包含Tomcat使用的JAR文件D．webapps目錄—-包含web項(xiàng)目示例，發(fā)布web應(yīng)用時(shí)，默認(rèn)情況下web文件夾放于此目錄下E．work目錄--包含web項(xiàng)目示例，當(dāng)發(fā)布web應(yīng)用時(shí)，默認(rèn)情況下把web文件夾放于此目錄下本課件是可編輯的正常PPT課件觀謝謝看本課件是可編輯的正常PPT課件第2章HTML與CSS網(wǎng)頁(yè)基礎(chǔ)0202本課件是可編輯的正常PPT課件知識(shí)目標(biāo)

掌握HTML常用標(biāo)簽

掌握HTML表單標(biāo)簽

掌握HTML超鏈接和圖像標(biāo)簽

掌握CSS實(shí)現(xiàn)頁(yè)面表現(xiàn)形式，學(xué)會(huì)制作主頁(yè)和表單。本課件是可編輯的正常PPT課件思政目標(biāo)鍛煉想象力、創(chuàng)造力和邏輯思維能力，提升個(gè)人的修養(yǎng)。觀察生活，培養(yǎng)審美、提高鑒賞能力，通過(guò)日積月累的學(xué)習(xí)，做出更有設(shè)計(jì)感、創(chuàng)意感的頁(yè)面設(shè)計(jì)。本課件是可編輯的正常PPT課件2.1HTML標(biāo)簽語(yǔ)言HTML是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言，用戶可以使用HTML來(lái)建立自己的Web站點(diǎn)，HTML運(yùn)行在瀏覽器上，由瀏覽器來(lái)解析。HTML不是一種編程語(yǔ)言，而是一種描述性的標(biāo)記語(yǔ)言，用于描述超文本中的內(nèi)容和結(jié)構(gòu)。本課件是可編輯的正常PPT課件2.1.11HTML文檔結(jié)構(gòu)一個(gè)HTML文檔主要由4個(gè)主要標(biāo)簽組成，分別是<html>、<head>、<title>、<body>。這4個(gè)標(biāo)簽構(gòu)成了HTML頁(yè)面最基本的元素。下面分別展開(kāi)介紹。1.文件開(kāi)始標(biāo)簽<html><html>標(biāo)簽的作用是告訴瀏覽器這是一個(gè)HTML文檔。所有的HTML文件都以<html>標(biāo)簽開(kāi)頭，以</html>標(biāo)簽結(jié)束，在它們之間是文檔的頭部和主體內(nèi)容，即HTML頁(yè)面的所有標(biāo)簽都要放置在<html></html>標(biāo)簽對(duì)中。其語(yǔ)法格式：<html>…</html>本課件是可編輯的正常PPT課件2.1.11HTML文檔結(jié)構(gòu)2.文件頭部標(biāo)簽<head><head>標(biāo)簽的作用是定義文檔頭部信息，用來(lái)封裝其他位于文檔頭部的標(biāo)簽，例如標(biāo)題標(biāo)簽<title>、元信息標(biāo)簽<meta>、引入CSS樣式的<link>及<style>標(biāo)簽等，用于描述文檔的標(biāo)題、作者，以及與文檔的關(guān)系等。這些頭部信息不會(huì)直接在網(wǎng)頁(yè)中顯示。HTML的頭部信息以<head>開(kāi)始，以</head>結(jié)束。其語(yǔ)法格式如下:<head>…</head>本課件是可編輯的正常PPT課件2.1.1HTML文檔結(jié)構(gòu)3.文件標(biāo)題標(biāo)簽<title><title>標(biāo)簽用于定義頁(yè)面標(biāo)題，即給網(wǎng)頁(yè)取名字，它顯示在瀏覽器的標(biāo)題欄中。<title>必須位于<head>與</head>標(biāo)簽之內(nèi)。標(biāo)題標(biāo)簽以<title>開(kāi)始，以</title>結(jié)束，語(yǔ)法格式如下:<title>…</title>4.網(wǎng)頁(yè)主體標(biāo)簽<body><body>標(biāo)簽定義HTML文檔的主體部分，網(wǎng)頁(yè)中所有要顯示的內(nèi)容都放在主體標(biāo)簽內(nèi)。主體標(biāo)簽以

<body>開(kāi)始，以</body>標(biāo)簽結(jié)束，它是成對(duì)出現(xiàn)的。值得注意是，一個(gè)HTML文檔只能有一對(duì)<body>,且<body>必須在<html>內(nèi)，并且<head>標(biāo)簽對(duì)在<body>之前。其語(yǔ)法格式如下:<body>…</body>本課件是可編輯的正常PPT課件2.1.2HTML常用標(biāo)簽HTML的很多標(biāo)簽，提供了編輯文字、段落、圖片和超鏈接等功能，這些標(biāo)簽使得頁(yè)面設(shè)計(jì)更加豐富和多樣。1.標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽<hX>常常被用在標(biāo)注網(wǎng)頁(yè)中唯一標(biāo)題、重要欄目、重要標(biāo)題等。X表示標(biāo)題級(jí)數(shù)，取值范圍為1~6，X越小，標(biāo)題字號(hào)越大。HTML的標(biāo)題標(biāo)簽有6個(gè)，分別是<h1><h2><h3><h4><h5>和<h6>，它們可以區(qū)別文字的大小。其中，<h1>代表1級(jí)標(biāo)簽，級(jí)別越高，文字最大，<h6>代表6級(jí)標(biāo)簽，文字最小。align屬性：設(shè)置對(duì)齊方式：left，左對(duì)齊；right右對(duì)齊；center，居中對(duì)齊；默認(rèn)左對(duì)齊。本課件是可編輯的正常PPT課件2.1.2HTML常用標(biāo)簽

<html><head><title>標(biāo)題標(biāo)簽實(shí)例</title> </head><body><hr><h1align=“center”>一級(jí)標(biāo)題的效果</h1><h2>二級(jí)標(biāo)題的效果</h2><h3>三級(jí)標(biāo)題的效果</h3><h4>四級(jí)標(biāo)題的效果</h4><h5>五級(jí)標(biāo)題的效果</h5><h6>六級(jí)標(biāo)題的效果</h6><hr></body><html>【例2-1】用標(biāo)題標(biāo)簽顯示h1~h6的樣式大小，運(yùn)行結(jié)果如圖2-1所示。本課件是可編輯的正常PPT課件2.1.2HTML常用標(biāo)簽注意：水平線可以通過(guò)水平標(biāo)簽<hr/>來(lái)定義，語(yǔ)法格式如下：<hr屬性=“屬性值”/>。<hr/>是單標(biāo)簽，在網(wǎng)頁(yè)中輸入一個(gè)<hr/>，就添加了一條默認(rèn)樣式的水平線。

圖2-1【例2-1】運(yùn)行結(jié)果本課件是可編輯的正常PPT課件2.1.2HTML常用標(biāo)簽【例2-2】唐詩(shī)欣賞實(shí)例古詩(shī)《楓橋夜泊》。運(yùn)行結(jié)果如圖例2-2所示。通過(guò)例2-2實(shí)例，綜合展示HTML一些常用標(biāo)簽：標(biāo)題標(biāo)簽等應(yīng)用。<html><head><title>唐詩(shī)欣賞實(shí)例</title></head>

<body> <h1>歡迎來(lái)到本網(wǎng)站</h1> <br> <hr/> <fontface="楷體_GB2312"size="2"color="blue">歡迎你的訪問(wèn)，請(qǐng)欣賞唐詩(shī)頁(yè)面</font> <p>楓橋夜泊</p> <pre>唐·張繼</pre>

月落烏啼霜滿天，<br>

江楓漁火對(duì)愁眠。<br>

姑蘇城外寒山寺，<br>

夜半鐘聲到客船。<br> <hr/> <!--張繼,唐代詩(shī)人（生卒年不詳）字懿孫，漢族，湖北襄州（今湖北襄陽(yáng)）人。--></body></html>本課件是可編輯的正常PPT課件2.1.2HTML常用標(biāo)簽圖2-2【例2-2】運(yùn)行結(jié)果本課件是可編輯的正常PPT課件2.1.2HTML常用標(biāo)簽2.段落換行標(biāo)簽<br>標(biāo)簽是一個(gè)單標(biāo)簽，它沒(méi)有結(jié)束標(biāo)簽。瀏覽器遇到<br>標(biāo)簽會(huì)對(duì)當(dāng)前的文本內(nèi)容進(jìn)行強(qiáng)制換行，直接從下一行開(kāi)始輸出文本。一個(gè)<br/>標(biāo)簽代表一個(gè)換行，連續(xù)多個(gè)<br/>標(biāo)簽可以實(shí)現(xiàn)多次換行。3.文字樣式標(biāo)簽文本樣式標(biāo)簽可以設(shè)置一些文字效果（例如字體、顏色、大?。?，讓網(wǎng)頁(yè)中的文字效果更加豐富，其語(yǔ)法格式：<font屬性=“屬性值”>文本內(nèi)容</font>本課件是可編輯的正常PPT課件2.1.2HTML常用標(biāo)簽屬性名含義face設(shè)置文字的字體，例如微軟雅黑、黑體、宋體等。size設(shè)置文字的大小，通常取1~7之間的整數(shù)值。color設(shè)置文字的顏色<font>標(biāo)簽常用的屬性有3個(gè)，如表2-1所示。表2-1<font>標(biāo)簽的常用屬性本課件是可編輯的正常PPT課件2.1.2HTML常用標(biāo)簽4.段落標(biāo)簽段落標(biāo)簽<p>用來(lái)創(chuàng)建一個(gè)新的段落，在此<p></p>標(biāo)簽對(duì)之間加入的文本將按照段落的格式顯示在瀏覽器上。其語(yǔ)法格式如下：<p>段落文字</p>注意：在<p>開(kāi)始標(biāo)簽和</p>結(jié)束標(biāo)簽之間的內(nèi)容形成一個(gè)段落，段落中的文本會(huì)自動(dòng)換行。如果省略段落標(biāo)記的結(jié)束標(biāo)記，從<p>開(kāi)始，直到遇到下一個(gè)段落標(biāo)記之前的文本，都在一個(gè)段落內(nèi)。5.預(yù)定格式標(biāo)簽<pre>標(biāo)簽可定義預(yù)格式化的文本。被包圍在<pre></pre>標(biāo)簽對(duì)中的文本通常會(huì)保留空格和換行符。而文本也會(huì)呈現(xiàn)為等寬字體。網(wǎng)頁(yè)瀏覽時(shí)仍能保留在編輯工具中已經(jīng)排好的形式進(jìn)行內(nèi)容顯示，默認(rèn)字體是10磅。本課件是可編輯的正常PPT課件2.1.2HTML常用標(biāo)簽6注釋標(biāo)簽<!—和-->標(biāo)簽對(duì)：注釋標(biāo)簽，HTML注釋會(huì)被瀏覽器忽略，里面的注釋內(nèi)容不會(huì)在瀏覽器中顯示。本課件是可編輯的正常PPT課件2.1.3HTML表格標(biāo)簽表格是網(wǎng)頁(yè)中十分重要的組成元素。表格用來(lái)存儲(chǔ)數(shù)據(jù)，表格包含標(biāo)題、表頭、行和單示格。制作網(wǎng)頁(yè)時(shí)，使用表格可以讓網(wǎng)頁(yè)中的元素有條理地顯示，也可以對(duì)網(wǎng)頁(yè)進(jìn)行規(guī)劃。在HTML中，表格標(biāo)簽使用符號(hào)<table>來(lái)表示。定義表格僅使用<table>是不夠的，還需定義表格中的行、列、標(biāo)題等內(nèi)容。本課件是可編輯的正常PPT課件2.1.3HTML表格標(biāo)簽使用標(biāo)簽創(chuàng)建表格的基本語(yǔ)法格式如下：<table> <tr> <td>單元格內(nèi)的文字</td>… </tr> …</table>每個(gè)表格均有若干行（由<tr>標(biāo)簽定義），每行被分割為若干單元格（由<td>標(biāo)簽定義）。字母td指表格數(shù)據(jù)（tabledata），即數(shù)據(jù)單元格的內(nèi)容。本課件是可編輯的正常PPT課件2.1.4表單標(biāo)簽1.表單標(biāo)簽表單標(biāo)簽<form></form>在網(wǎng)頁(yè)中用來(lái)供用戶填寫(xiě)信息，以實(shí)現(xiàn)服務(wù)器獲得用戶信息，使網(wǎng)頁(yè)具有交互功能。語(yǔ)法格式：

<formaction="url"method="get|post"name="value"onsubmit="function"onreset="function"target="window"></form>本課件是可編輯的正常PPT課件2.1.4表單標(biāo)簽主要參數(shù)介紹如下：action：設(shè)置服務(wù)器上用來(lái)處理表單數(shù)據(jù)的處理程序地址，屬性值可以是URL地址也可以是電子郵件地址。method：設(shè)置處理程序從表單中獲得信息的方式，取值可為get或post。get方法在瀏覽器的地址欄中以明文形式顯示表單中各個(gè)表單域的值，對(duì)數(shù)據(jù)的長(zhǎng)度有限制。post方法將表單中用戶輸入的數(shù)據(jù)進(jìn)行包裝，按照HTTP傳輸協(xié)議中的post方式傳送到服務(wù)器，且對(duì)數(shù)據(jù)的長(zhǎng)度基本沒(méi)有限制，目前大都采用此方式。name：設(shè)置表單的名字。onsubmit、onreset：設(shè)置在單擊了“submit”或“reset”按鈕后要執(zhí)行的腳本函數(shù)名。target：設(shè)置顯示表單內(nèi)容的窗口名。本課件是可編輯的正常PPT課件2.1.4表單標(biāo)簽2.表單輸入標(biāo)簽（1）單行輸入域<input>標(biāo)簽用來(lái)定義單行輸入域，用戶可在其中輸入單行信息。<input>標(biāo)簽的屬性值如表2-2所示。屬性名說(shuō)明type用于指定添加的是哪種類(lèi)型的輸入字段，共有10個(gè)可選值，如表2-2所示。align設(shè)置輸入域位置，可取值left、right、middle、top、bottomdisable用于指定輸入字段不可用，即字段變成灰色，其屬性值可以為空值，也可以指定為disable。

checked用于指定輸入字段是否處于被選中狀態(tài)，用在type屬性值為radio和checkbox的情況下，

其屬性值可以為空值，也可以指定為checked。width用于指定輸入字段的寬度，

用在type

屬性值為image的情況下。height用于指定輸入字段的高度，用在type屬性值為image的情況下。maxlength用于指定輸入字段可輸入文字的個(gè)數(shù)，用在type屬性值為text和password的情況下，默認(rèn)沒(méi)有字?jǐn)?shù)限制。表2-2<input>標(biāo)記的屬性值本課件是可編輯的正常PPT課件2.1.4表單標(biāo)簽2.表單輸入標(biāo)簽（1）單行輸入域<input>標(biāo)簽用來(lái)定義單行輸入域，用戶可在其中輸入單行信息。<input>標(biāo)簽的屬性值如表2-2所示。屬性名說(shuō)明size用于指定輸入字段的寬度，當(dāng)type

屬性為text和password

時(shí)，以文字個(gè)數(shù)為單位:

當(dāng)type

屬性為其他值時(shí)，以像素為單位。src用于指定圖片的來(lái)源，只有當(dāng)type屬性為image時(shí)有效。alt用于指定當(dāng)圖片無(wú)法顯示時(shí)顯示的文字，只有當(dāng)type屬性為image時(shí)有效name設(shè)置輸入域的名字。

value設(shè)置輸入域的默認(rèn)值。當(dāng)type屬性為radio和checkbox時(shí)，不可省略此屬性;當(dāng)type屬性為其他值時(shí)，可以省略。當(dāng)type屬性為button、reset和submit時(shí)，指定的是按鈕上顯示的文字;當(dāng)type屬性為radio和checkbox時(shí)，指定的是數(shù)據(jù)項(xiàng)選定時(shí)的值。本課件是可編輯的正常PPT課件2.1.4表單標(biāo)簽可選值描述text定義單行的輸入字段，用戶可在其中輸入文本，默認(rèn)寬度為20個(gè)字符。submit提交按鈕，提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。password密碼域，該字段中的字符被掩碼。reset重置按鈕，重置按鈕會(huì)清除表單中的所有數(shù)據(jù)。file文件域，定義輸入字段和“瀏覽”按鈕，供文件上傳button普通按鈕radio單選按鈕hidden隱藏域，定義隱藏的輸入字段。checkbox定義復(fù)選框image圖像域，定義圖像形式的提交按鈕type屬性用于決定<input>標(biāo)簽輸入數(shù)據(jù)的類(lèi)型。該屬性值的可選項(xiàng)如表2-3所示。表2-3type屬性值本課件是可編輯的正常PPT課件2.1.4表單標(biāo)簽3.多行輸入域<textarea></textarea>標(biāo)簽對(duì)用來(lái)定義多行輸入域。其語(yǔ)法格式如下：<textareaname=”…”cols=”…”rows=”…”wrap=”…”></textarea>主要參數(shù)介紹如下：name：設(shè)置輸入域的名字，定義多行文本框的名稱，必須定義一個(gè)獨(dú)一無(wú)二的名稱。rows:設(shè)置輸入域的行數(shù)，定義多行文本框的寬度，單位是單個(gè)字符寬度。cols：設(shè)置輸入域的列數(shù)，定義多行文本框的高度，單位是單個(gè)字符高度。wrap：設(shè)置是否自動(dòng)換行，屬性值可取off（不自動(dòng)換行）、hard（自動(dòng)硬回車(chē)換行，換行標(biāo)記一同被傳送到服務(wù)器）、soft（自動(dòng)軟回車(chē)換行，換行標(biāo)記不會(huì)被傳送到服務(wù)器）。定義輸入內(nèi)容超過(guò)文本域時(shí)的顯示方式。本課件是可編輯的正常PPT課件2.1.4表單標(biāo)簽3.多行輸入域

<html>-<head><title>留言板</title></head><body><form><h1>留言板</h1><h2>用戶寄語(yǔ)</h2><textarearows="6"cols="80">歡迎來(lái)到我的空間</textarea><h2>發(fā)表您的留言與評(píng)論</h2><textarearows="6"cols="80"></textarea><br><inputtype="button"value="發(fā)表"><label><inputtype="checkbox">點(diǎn)贊</label><label><inputtype="checkbox">收藏</label></form></body></html>【例2-3】

使用文本框?qū)崿F(xiàn)留言板功能。如圖2-3所示，具體代碼如下：本課件是可編輯的正常PPT課件2.1.4表單標(biāo)簽3.多行輸入域圖2-3【例2-3】多行文本輸入標(biāo)簽本課件是可編輯的正常PPT課件2.1.4表單標(biāo)簽4.列表框標(biāo)簽列表框標(biāo)簽主要用于在有限的空間里設(shè)置多個(gè)選項(xiàng)。列表框既可以用作單選，也可以用作復(fù)選。其語(yǔ)法格式如下：<selectname=”…”size=”…”multiple><optionvalue=”…”selected>…</option>…</select>本課件是可編輯的正常PPT課件2.1.4表單標(biāo)簽其中，<select></select>標(biāo)簽對(duì)用來(lái)建立一個(gè)下拉列表。主要參數(shù)介紹如下：name:設(shè)置下拉列表的名字。size:設(shè)置下拉列表中選項(xiàng)個(gè)數(shù)，默認(rèn)值為1。multiple:表示下拉列表支持多選。其中，<option>標(biāo)簽用來(lái)定義下拉列表中的一個(gè)選項(xiàng)，用戶可以從列表中選擇一項(xiàng)或多項(xiàng)。主要參數(shù)介紹如下：selected：表示當(dāng)前選項(xiàng)被默認(rèn)選中multiple:設(shè)置當(dāng)前選項(xiàng)的值，在該項(xiàng)被選中之后，該項(xiàng)的值將被送到服務(wù)器。本課件是可編輯的正常PPT課件2.1.5超鏈接與圖像標(biāo)簽1.超鏈接標(biāo)簽<a>標(biāo)簽用于給網(wǎng)頁(yè)創(chuàng)建超鏈接。文本超鏈接是一種常見(jiàn)的鏈接，它通過(guò)網(wǎng)頁(yè)中的文本和其他文件進(jìn)行鏈接。其語(yǔ)法格式如下：<ahref=”鏈接地址”target=”打開(kāi)新窗口的方式”>鏈接文字</a>方式含義_blank新建一個(gè)窗口打開(kāi)_self在同一個(gè)窗口中打開(kāi)，默認(rèn)值_parent在上一級(jí)窗口中打開(kāi)_top在瀏覽器的整個(gè)窗口打開(kāi)target有4個(gè)屬性，分別對(duì)應(yīng)4種打開(kāi)新窗口的方式，如表2-4所示。表2-4target屬性值本課件是可編輯的正常PPT課件2.1.5超鏈接與圖像標(biāo)簽2.圖像標(biāo)簽使用<img>標(biāo)簽可以在網(wǎng)頁(yè)中顯示圖像。<img>標(biāo)簽是單標(biāo)簽，其語(yǔ)法格式如下:<imgsrc="圖像路徑"alt="圖像不能顯示時(shí)的替換文本"title="鼠標(biāo)指針懸停時(shí)顯示的內(nèi)容">其中，圖像替換文本屬性alt用于有時(shí)頁(yè)面中的圖像可能無(wú)法正常顯示，如圖片加載失敗，瀏覽器版本低，可以用alt為頁(yè)面上的圖像添加替換文本。其中，src屬性用于指定圖像的路徑，圖像的路徑可以是絕對(duì)路徑，也可以是相對(duì)路徑，它是<img>標(biāo)簽必不可少的屬性。絕對(duì)路徑就是網(wǎng)頁(yè)上的文件或硬盤(pán)上的真正路徑，例如“D：\JavaWeb\ch02\images\1.jpg”，或完整的網(wǎng)絡(luò)地址如：“/d/file/2017/0522/1495420575299.jpg”。本課件是可編輯的正常PPT課件2.2CSS設(shè)計(jì)網(wǎng)頁(yè)時(shí)為了追求更多字體的選擇、更方便的樣式效果、更絢麗的圖形動(dòng)畫(huà)，使用CSS設(shè)計(jì)樣式可以不改變?cè)蠬TML的結(jié)構(gòu)，添加豐富的樣式，實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。使用CSS修飾網(wǎng)頁(yè)，就需要在HTML文檔中引入CSS樣式，以達(dá)到分離網(wǎng)頁(yè)內(nèi)容和樣式代碼的目的。CSS樣式有行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式。本課件是可編輯的正常PPT課件2CSS1.行內(nèi)樣式行內(nèi)樣式的方法是使用HTML標(biāo)簽的style屬性，該屬性的內(nèi)容就是CSS屬性和值。例如：<標(biāo)簽名style=”屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;”>內(nèi)容</標(biāo)簽名>上述語(yǔ)法中，style是標(biāo)簽的屬性，行內(nèi)式只對(duì)其所在的標(biāo)簽及嵌套在其中的子標(biāo)簽起作用。本課件是可編輯的正常PPT課件2CSS行內(nèi)式寫(xiě)在<html>根標(biāo)簽中,圖2-4示例展示了CSS行內(nèi)式的寫(xiě)法。style屬性設(shè)置行內(nèi)式CSS樣式，它修飾了二級(jí)標(biāo)題的大小和顏色，運(yùn)行效果如圖2-4所示。<h2style="font-size:30px;color:pink;">使用CSS行內(nèi)式修飾一級(jí)標(biāo)題的字體大小和顏色</h2>圖2-4行內(nèi)式效果圖1.行內(nèi)樣式本課件是可編輯的正常PPT課件2CSS2.內(nèi)嵌式使用內(nèi)嵌樣式就是將CSS樣式代碼添加到<head>與<head>之間，并且用<style>和</style>標(biāo)簽進(jìn)行聲明，其基本語(yǔ)法格式如下：<head><styletype=”text/css”>

選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}</style></head>本課件是可編輯的正常PPT課件2CSS2.內(nèi)嵌式在上述語(yǔ)法中，<style>標(biāo)簽集中寫(xiě)在<head>標(biāo)簽內(nèi)，一般位于title標(biāo)簽之后，也可以把它放在HTML文檔的任何地方。鑒于瀏覽器是從上到下解析代碼的，把CSS代碼放在頭部，有利于提前下載和解析，從而避免網(wǎng)頁(yè)內(nèi)容下載之后沒(méi)有樣式修飾的不足。此外，type的屬性值需要設(shè)置為“text/css”，告知瀏覽器需要設(shè)置type屬性值為“text”，從而瀏覽器可知<style>標(biāo)簽包含了CSS代碼。遇到寬松的語(yǔ)法格式，type屬性可以省略。本課件是可編輯的正常PPT課件

<html><head><title>內(nèi)嵌式</title><styletype="text/css">h3{ color:green;/*設(shè)置字體顏色為綠色*/ font-size:20px;/*設(shè)置字體的大小*/ text-decoration:underline;/*給文本字體添加下劃線*/ text-align:center;/*設(shè)置段落居中顯示*/}p{ color:black;/*設(shè)置字體顏色為黑色*/ font-size:20px;/*設(shè)置字體的大小*/ text-align:center;/*設(shè)置段落居中顯示*/}</style></head><body><h3>《送人游吳》杜荀鶴</h3><p>君到姑蘇見(jiàn)，人家盡枕河。古宮閑地少，水港小橋多。</p><p>夜市賣(mài)菱藕，春船載綺羅。遙知未眠月，鄉(xiāng)思在漁歌。</p></body></html>【例2-5】本是實(shí)例通過(guò)內(nèi)嵌式定義古詩(shī)的標(biāo)題和內(nèi)容。運(yùn)行結(jié)果如圖2-5所示。具體代碼如下：2.內(nèi)嵌式2CSS本課件是可編輯的正常PPT課件2.內(nèi)嵌式2CSS圖2-5【例2-5】行內(nèi)式的顯示本課件是可編輯的正常PPT課件2CSS外鏈?zhǔn)绞菍⑺械臉邮椒旁谝粋€(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件，通過(guò)鏈接標(biāo)簽<link>鏈接到HTML頁(yè)面中，其基本語(yǔ)法格式如下：<head><linkhref=”CSS文件的路徑”type="text/css"rel="stylesheet"/></head>(1)href定義CSS樣式表所在的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑。此處表示當(dāng)前路徑下名稱為style.css的文件。(2)type定義鏈接文檔的類(lèi)型，需要指定為text/css“，表示樣式表類(lèi)型為CSS樣式表。(3)rel指定鏈接到樣式表，其值為stylesheet。3.外鏈?zhǔn)奖菊n件是可編輯的正常PPT課件2CSS本課件是可編輯的正常PPT課件2CSS圖2-6【例2-6】外鏈?zhǔn)阶拥娘@示效果本課件是可編輯的正常PPT課件2.3實(shí)戰(zhàn)案例實(shí)戰(zhàn)1制作學(xué)員信息發(fā)布的表單。運(yùn)行效果如圖2-7所示。圖2-7學(xué)員信息發(fā)布的表單（具體代碼參考書(shū)本內(nèi)容）本課件是可編輯的正常PPT課件2.3實(shí)戰(zhàn)案例（具體代碼參考書(shū)本內(nèi)容）

實(shí)戰(zhàn)2制作學(xué)員信息和新聞發(fā)布的主頁(yè)，運(yùn)行效果如圖2-8所示。圖2-8學(xué)員信息和新聞發(fā)的主頁(yè)本課件是可編輯的正常PPT課件2.4小結(jié)本章介紹了HTML和CSS網(wǎng)頁(yè)開(kāi)發(fā)基礎(chǔ)。一個(gè)HTML文檔主要由4個(gè)主要標(biāo)簽組成，分別是<html>、<head>、<title>、<body>。這4個(gè)標(biāo)簽構(gòu)成了HTML頁(yè)面最基本的元素。HTML常用標(biāo)簽有標(biāo)題標(biāo)簽、段落換行標(biāo)簽<br>文字樣式標(biāo)簽<font>段落標(biāo)簽<p>預(yù)定格式標(biāo)簽<pre>注釋標(biāo)簽<!--和-->等。表格標(biāo)簽使用符號(hào)<table>，每行由<tr>標(biāo)簽定義，字母td定義數(shù)據(jù)單元格的內(nèi)容。表單標(biāo)簽<form></form>表示。<a>標(biāo)簽用于給網(wǎng)頁(yè)創(chuàng)建超鏈接。使用<img>標(biāo)簽可以在網(wǎng)頁(yè)中顯示圖像。CSS樣式有行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式。外鏈接式使用頻率最高。本課件是可編輯的正常PPT課件2.5習(xí)題1、下面關(guān)于css樣式和html樣式的不同之處說(shuō)法正確的是()A、html樣式只影響應(yīng)用它的文本和使用所選html樣式創(chuàng)建的文本B、CSS樣式只可以設(shè)置文字字體樣式C、html樣

式可以設(shè)置背景樣式D、html樣式和CSS樣式相同，沒(méi)有區(qū)別

2、在HTML中，標(biāo)記<

font>的Size屬性最大取值可以是()

。A.5B.6C.7D.

8

3、下面哪一個(gè)屬性不是文本的標(biāo)簽屬性?

(

)A.nbsp;B.alignC.colorD.Face

4.要在表單中創(chuàng)建一個(gè)多行文本輸入框，初始值為：這是一個(gè)多行文本框。下面語(yǔ)句正確的是()。A.

<textarea

name=

"text1"

value="這是一個(gè)多行文本框">

</

textarea

>B.

<input

type=

"text"

value="這是一個(gè)多行文本框"

name="text1">C.

<input

type=

"textarea"

name="text1"

value="這是一個(gè)多行文本">D.

<

textarea

name="text1"

cols=20

rows=5>這是一個(gè)多行文本框</

textarea

>本課件是可編輯的正常PPT課件2.5習(xí)題5.

用HTML標(biāo)記語(yǔ)言編寫(xiě)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，網(wǎng)頁(yè)最基本的結(jié)構(gòu)是(

)

A

<html>

<head>

…

</head>

<frame>

…</frame>

</html>

B

<html>

<title>

…</title>

<body>

…

</body>

</html>

C

<html>

<title>

…

</title>

<frame>

...

</frame>

</html>D

<html>

<head>

</head>

<body>

</body>

</html>

6.若要

在頁(yè)面中創(chuàng)建一個(gè)圖形超鏈接，

要顯示的圖形為以下用法中，正確的是()A

<a

href="

"

>myhome.jpg</a>B

<a

href="

srC="

myhome.jpg

"

></a>C<img

src="

myhome.jpg"

><a

href="

"

></a>D

<a

href

=><img

src="

myhome.jpg"

>

</a>

7.

若要產(chǎn)生一個(gè)4行30列的多行文本域，以下方法中，正確的(

)A.

<Input

type=

"

text"

Rows="

4

Cols=

"

30"

Name="

txtintrol

"

>

В.

<TextArea

Rows=

"

4"

Cols="

30"Name=

"

txtintro

"

>

C.

<TextArea

Rows=

"

4"

Cols="

30"

Name=

"

txtintro

></TextArea>D.

<TextArea

Rows=

"

30"

Cols="

4"Name="

txtintro"

></TextArea>

8.

若要在網(wǎng)頁(yè)中插入樣式表

main.css,以下用法中，正確的是(

)。

A.

<Link

href=

"main

.CSS

"type=text/css

rel=stylesheet>B.

<Link

src=

"main.css

"

type=text/css

rel=stylesheet>C.

vLink

href=

"main.css

"

type

=text/css>D.

<Include

href=

"main.css

type=text/css

rel=stylesheet>本課件是可編輯的正常PPT課件2.5習(xí)題9.關(guān)于文本對(duì)齊，

源代碼設(shè)置不正確的一項(xiàng)是:

(

)A.居中對(duì)齊:

<div

align="middle">

..</div>

B.居右對(duì)齊:

<div

align="right"〉..</div>

C.居左對(duì)

齊:

<div

align-=left">

..</iv>

D

.兩端對(duì)齊:

<div

align="ustify*>

..</div>10.下列哪-

項(xiàng)是在新窗口中打開(kāi)網(wǎng)頁(yè)文檔。(

)A._

selfB._blankC._topD._

parent

11、換行標(biāo)記為：（

）。A.<td>B.<tr>C.<br>D.

<p>12、?表單元素用（

）表示。A.<table></table>B.<td></td>C.<tr></tr>D.<form></form>本課件是可編輯的正常PPT課件2.6上機(jī)實(shí)踐1.制作一個(gè)新聞發(fā)布的表單，效果預(yù)覽圖如圖2-9所示。

圖2-9新聞發(fā)布表單（具體代碼參考書(shū)本內(nèi)容）本課件是可編輯的正常PPT課件2.6上機(jī)實(shí)踐2.制作一個(gè)用戶登錄的頁(yè)面，運(yùn)行效果如圖2-10所示。圖2-10用戶登錄頁(yè)面（具體代碼參考書(shū)本內(nèi)容）本課件是可編輯的正常PPT課件觀謝謝看本課件是可編輯的正常PPT課件模塊3JSP語(yǔ)法0203本課件是可編輯的正常PPT課件知識(shí)目標(biāo)

了解JSP頁(yè)面的基本構(gòu)成元素

掌握J(rèn)SP的基本語(yǔ)法

熟悉JSP指令元素的使用

掌握J(rèn)SP腳本元素的使用

熟悉JSP程序中的注釋方法本課件是可編輯的正常PPT課件思政目標(biāo)

形成自覺(jué)遵守規(guī)則，誠(chéng)實(shí)守信的良好習(xí)慣

學(xué)法教學(xué)中導(dǎo)引，學(xué)習(xí)品質(zhì)隨堂滲透

課堂教學(xué)中舉一反三，守正發(fā)展創(chuàng)新理念本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成JSP（全稱JavaServerPages）是由SunMicrosystems公司主導(dǎo)創(chuàng)建的一種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)標(biāo)準(zhǔn)。JSP部署于網(wǎng)絡(luò)服務(wù)器上，可以響應(yīng)客戶端發(fā)送的請(qǐng)求，并根據(jù)請(qǐng)求內(nèi)容動(dòng)態(tài)地生成HTML、XML或其他格式文檔的Web網(wǎng)頁(yè)，然后返回給請(qǐng)求者。如圖3-1所示。本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成圖3-1JSP原理圖本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成JSP技術(shù)是以Java語(yǔ)言為腳本的，在靜態(tài)頁(yè)面中嵌入Java代碼和特定內(nèi)容，動(dòng)態(tài)生成其中部分內(nèi)容。JSP技術(shù)繼承了Java語(yǔ)言的相對(duì)易用性；能以模板化的方式簡(jiǎn)單、快速地添加動(dòng)態(tài)網(wǎng)頁(yè)內(nèi)容；可以重復(fù)利用JavaBean和標(biāo)簽庫(kù)技術(shù)的功能組件，且支持可擴(kuò)展功能的自定義標(biāo)簽；有良好的工具支持；擁有Java語(yǔ)言跨平臺(tái)的特性，網(wǎng)站開(kāi)發(fā)人員可以選擇在最適合自己的系統(tǒng)平臺(tái)上進(jìn)行JSP開(kāi)發(fā)，不同環(huán)境下開(kāi)本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成發(fā)的JSP項(xiàng)目，在所有客戶端上都能順利訪問(wèn)；頁(yè)面中的動(dòng)（控制變動(dòng)內(nèi)容的部分）/靜（內(nèi)容不需變動(dòng)的部分）區(qū)域以分散但又有序的形式組合在一起，能使人更直觀地看出頁(yè)面代碼的整體結(jié)構(gòu)，也使得設(shè)計(jì)頁(yè)面效果和程序邏輯這2部分工作容易分離（外觀視圖與邏輯分離）。從而方便分配人員并發(fā)揮各自長(zhǎng)處，實(shí)現(xiàn)高效地分工合作。本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成當(dāng)客戶端瀏覽器向服務(wù)器發(fā)出一個(gè)JSP頁(yè)面的訪問(wèn)請(qǐng)求時(shí)，Web服務(wù)器會(huì)根據(jù)請(qǐng)求加載對(duì)應(yīng)的JSP頁(yè)面，并對(duì)此頁(yè)面進(jìn)行編譯，然后執(zhí)行。如圖3-2所示。圖3-2JSP執(zhí)行過(guò)程圖本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成JSP的執(zhí)行過(guò)程主要分為以下三個(gè)階段：（1）翻譯階段（translation）：Web容器接收J(rèn)SP請(qǐng)求時(shí)，首先會(huì)對(duì)JSP頁(yè)面進(jìn)行翻譯，通過(guò)JSP容器轉(zhuǎn)換成可識(shí)別的Java源代碼。（2）編譯階段（compilation）：將Java源文件編譯成可執(zhí)行的字節(jié)碼文件，也就是擴(kuò)展名為.class的文件。（3）執(zhí)行階段（execute）：把生成的結(jié)果頁(yè)面返回給客戶端瀏覽器顯示。本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成注意：如果對(duì)JSP文件進(jìn)行了修改，再次訪問(wèn)JSP頁(yè)面時(shí)，Web容器會(huì)重新進(jìn)行翻譯和編譯。本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成JSP頁(yè)面就是帶有JSP元素的常規(guī)Web頁(yè)面，是擴(kuò)展名為“.jsp”的文件。它由靜態(tài)內(nèi)容和動(dòng)態(tài)內(nèi)容構(gòu)成。其中，靜態(tài)內(nèi)容是指HTML元素，動(dòng)態(tài)內(nèi)容（JSP元素）包括指令元素、腳本元素、動(dòng)作元素、注釋等內(nèi)容。一個(gè)簡(jiǎn)單的JSP頁(yè)面由靜態(tài)內(nèi)容、指令、表達(dá)式、小腳本、聲明、標(biāo)準(zhǔn)動(dòng)作、注釋7種元素組成，如表3-1所示。本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成元素組成說(shuō)明靜態(tài)內(nèi)容HTML靜態(tài)文本指令以“＜％＠”開(kāi)始，以“％＞”結(jié)束表達(dá)式＜％＝Java表達(dá)式％＞小腳本＜％Java代碼％＞聲明＜％！方法％＞標(biāo)準(zhǔn)動(dòng)作以“<jsp:動(dòng)作名>”開(kāi)始，以“<／jsp:動(dòng)作名>”結(jié)束注釋HTML注釋?zhuān)?lt;！--注釋內(nèi)容-->JSP注釋?zhuān)?lt;％--注釋內(nèi)容--％>本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成【例3-1】試編寫(xiě)一個(gè)JSP頁(yè)面輸出系統(tǒng)的當(dāng)前時(shí)間。<%@pagelanguage="java"contentType="text/html;charset=GBK"%><%@pageimport="java.text.*,java.util.*"%><html><body><% SimpleDateFormatformater=newSimpleDateFormat("yyyy年MM月dd日HH時(shí)mm分ss秒"); StringstrCurrentTime=formater.format(newDate());本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成【例3-1】試編寫(xiě)一個(gè)JSP頁(yè)面輸出系統(tǒng)的當(dāng)前時(shí)間。%><center>你好，蘇州托普信息職業(yè)技術(shù)學(xué)院！現(xiàn)在是：<%=strCurrentTime%></center></body></html>本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成通過(guò)編寫(xiě)JSP頁(yè)面顯示系統(tǒng)當(dāng)前時(shí)間，發(fā)現(xiàn)JSP頁(yè)面是由靜態(tài)文本（HTML標(biāo)簽）和動(dòng)態(tài)內(nèi)容（JSP標(biāo)記等）穿插在一起構(gòu)成。下面結(jié)合【例3-1】分別對(duì)指令元素、腳本元素、動(dòng)作元素、注釋進(jìn)行詳細(xì)講解，深化各類(lèi)代碼理解，實(shí)現(xiàn)具體案例的動(dòng)態(tài)頁(yè)面?！纠?-1】的文件名為3-1.jsp，運(yùn)行結(jié)果如圖3-3所示。本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成圖3-3【例3-1】的運(yùn)行結(jié)果本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成知識(shí)拓展：SimpleDateFormat類(lèi)是DateFormat類(lèi)(抽象類(lèi))的子類(lèi)。其作用是對(duì)日期時(shí)間進(jìn)行格式化(如：可以將日期轉(zhuǎn)換為指定格式的文本，也可以將文本轉(zhuǎn)換為日期)。常用的構(gòu)造方法：publicSimpleDateFormat()是用默認(rèn)的模式和日期格式符號(hào)、publicSimpleDateFormat(Stringpattern)是用給定的模式和默認(rèn)日期格式符號(hào)構(gòu)造。顯示不同格式的時(shí)間，需要遵循時(shí)間構(gòu)造方法類(lèi)的格式化語(yǔ)法規(guī)則，如下圖3-4所示。本課件是可編輯的正常PPT課件3.1JSP頁(yè)面構(gòu)成圖3-4SimpleDateFormat類(lèi)格式化語(yǔ)法規(guī)則本課件是可編輯的正常PPT課件3.2JSP指令元素JSP指令（directive）用來(lái)告訴Web服務(wù)器如何處理JSP頁(yè)面的請(qǐng)求和響應(yīng)。服務(wù)器會(huì)根據(jù)JSP指令來(lái)編譯JSP，生成Java文件。JSP指令不產(chǎn)生任何可見(jiàn)輸出，在生成的Java文件中，不存在JSP指令。JSP指令以<%@開(kāi)始，以%>結(jié)束，其語(yǔ)法如下：<%@指令名稱屬性1="值1"屬性2="值2"...%>本課件是可編輯的正常PPT課件3.2JSP指令元素注意：（1）屬性值總是用單引號(hào)或者雙引號(hào)括起來(lái)。

（2）若一個(gè)指令有多個(gè)屬性，可以寫(xiě)在一個(gè)指令中，各屬性之間用空格分開(kāi)，不需要任何標(biāo)點(diǎn)；也可以分開(kāi)寫(xiě)。指令分為以下3種類(lèi)型指

令說(shuō)

明<%@page...%>定義與頁(yè)面相關(guān)的屬性，例如腳本語(yǔ)言、錯(cuò)誤頁(yè)面和緩沖要求<%@include...%>引入其它JSP文件<%@taglib...%>聲明并導(dǎo)入標(biāo)簽庫(kù)本課件是可編輯的正常PPT課件3.2.1page指令page指令用來(lái)定義當(dāng)前頁(yè)面的相關(guān)屬性，其作用域是整個(gè)JSP頁(yè)面。page指令可以在JSP頁(yè)面的任意位置編寫(xiě)，為了遵循良好的編程習(xí)慣，通常放在JSP頁(yè)面的頂部。如【例3-1】代碼段所示。

<%@pagelanguage=“java”contentType="text/html;charset=GBK"%><%@pageimport="java.text.*,java.util.*"%>本課件是可編輯的正常PPT課件3.2.1page指令page指令的語(yǔ)法如下：<%@page屬性1="值1"屬性2="值2"%>屬

性取

值說(shuō)

明buffernone、緩沖區(qū)大?。J(rèn)值為8kb）指定輸出流是否有緩沖區(qū)autoFlushtrue（默認(rèn)值）、false指定緩沖區(qū)是否自動(dòng)清除contentTypetext/html;charset=ISO-8859-1、text/xml；charset=UTF-8等指定MIME類(lèi)型和字符編碼本課件是可編輯的正常PPT課件3.2.1page指令errorpage頁(yè)面路徑指定當(dāng)前JSP頁(yè)面發(fā)生異常時(shí)，需要重定向的錯(cuò)誤頁(yè)面isErrorpagetrue、false（默認(rèn)值）指定當(dāng)前頁(yè)面為錯(cuò)誤頁(yè)面extends包名、類(lèi)名指定當(dāng)前頁(yè)面繼承的父類(lèi)，一般很少使用import類(lèi)名、接口名、包名導(dǎo)入類(lèi)、接口、包，類(lèi)似于Java的import關(guān)鍵字info頁(yè)面的描述信息定義JSP頁(yè)面的描述信息，可以使用getServletInfo()方法獲取isThreadSafetrue（默認(rèn)值）、false是否允許多線程使用language腳本語(yǔ)言指定頁(yè)面中使用的腳本語(yǔ)言sessiontrue（默認(rèn)值）、false指定頁(yè)面是否使用sessionisELIgnoredtrue（默認(rèn)值）、false指定頁(yè)面是否忽略JSP中的EL屬

性取

值說(shuō)

明本課件是可編輯的正常PPT課件3.2.1page指令Page指令中常見(jiàn)的屬性有l(wèi)anguage（腳本語(yǔ)言）用來(lái)指定JSP頁(yè)面使用的腳本語(yǔ)言的種類(lèi)，在JSP頁(yè)面中，這個(gè)屬性可以省略，系統(tǒng)默認(rèn)使用的腳本語(yǔ)言為Java；import（導(dǎo)入JavaAPI）用來(lái)導(dǎo)入Java包的列表，和Java源碼中的import意義一樣，導(dǎo)入多個(gè)包需要用逗號(hào)隔開(kāi)；contentType用來(lái)定義JSP頁(yè)面字符編碼和頁(yè)面響應(yīng)的MIME類(lèi)型；pageEncoding可以指定JSP頁(yè)面的字符編碼；isErrorPage用來(lái)指定當(dāng)前頁(yè)面是否為出錯(cuò)頁(yè)面，如果被設(shè)置為true，就能在此頁(yè)面中使用exception對(duì)象，默認(rèn)值為false；errorPage用來(lái)指明當(dāng)前頁(yè)面發(fā)生錯(cuò)誤后的跳轉(zhuǎn)頁(yè)面地址。以上屬性除了import可以聲明多個(gè)外，其它屬性都只能出現(xiàn)一次。本課件是可編輯的正常PPT課件知識(shí)拓展：Import常用導(dǎo)入包：（1）.lang包：包含了Java語(yǔ)言的核心類(lèi)，如String、Math、Sytem和Thread類(lèi)等，使用這個(gè)包無(wú)需使用import語(yǔ)句導(dǎo)入，系統(tǒng)會(huì)自動(dòng)導(dǎo)入這個(gè)包中的所有類(lèi)。（2）.util包：包含java的大量工具類(lèi)/接口和集合框架類(lèi)/接口。如Arrays和List、Set等。（3）.net包：包含Java網(wǎng)絡(luò)編程相關(guān)的類(lèi)/接口。（4）.io包：包含Java輸入/輸出編程相關(guān)的類(lèi)/接口。3.2.1page指令本課件是可編輯的正常PPT課件知識(shí)拓展：（5）.text包：包含Java格式化相關(guān)的類(lèi)。（6）.sql包：包含java進(jìn)行JDBC數(shù)據(jù)庫(kù)編程的相關(guān)類(lèi)/接口。（7）.awt包：包含抽象窗口工具集(AbstractWindowToolkits)的相關(guān)類(lèi)/接口，主要用于構(gòu)建圖形用戶界面(GUI)程序。（8）.swing包：包含Swing圖形用戶界面編程的相關(guān)類(lèi)/接口，用于構(gòu)建平臺(tái)無(wú)關(guān)的GUI程序。3.2.1page指令本課件是可編輯的正常PPT課件3.2.2include指令include指令用于在JSP頁(yè)面引入其它內(nèi)容，可以是JSP文件、html文件和文本文件等，相當(dāng)于把文件的內(nèi)容復(fù)制到JSP頁(yè)面，引入的文件和JSP頁(yè)面同時(shí)編譯運(yùn)行。include指令的語(yǔ)法如下：<%@includefile="URL"%>本課件是可編輯的正常PPT課件3.2.2include指令注意：其中，file指定需要引入文件的相對(duì)路徑。相對(duì)路徑是指以當(dāng)前的文件作為起點(diǎn)，相較于當(dāng)前目錄的位置而被指向并且加以引用的文件資源，無(wú)盤(pán)符。例如：在HTML語(yǔ)言中，常常以“．／01.png”的形式出現(xiàn)。而絕對(duì)路徑是指在當(dāng)前文件的電腦硬盤(pán)上真正存在的路徑，也就是可以在文件目錄里進(jìn)行直接復(fù)制的路徑，例如：在HTML語(yǔ)言中，常常以“Ｄ：／文件夾名／01.png”的形式出現(xiàn)。本課件是可編輯的正常PPT課件3.2.2include指令使用include指令的優(yōu)點(diǎn)是可以使JSP頁(yè)面的代碼結(jié)構(gòu)清晰易懂、增加代碼的可重用性、維護(hù)簡(jiǎn)單。例如，通常網(wǎng)站頁(yè)面的頂部顯示同樣的LOGO圖片，我們可以把圖片內(nèi)容單獨(dú)寫(xiě)在一個(gè)的文件里，再使用include指令嵌入原JSP文件，盡量避免代碼重復(fù)冗余問(wèn)題。在【例3-1】頁(yè)面的基礎(chǔ)上頂部增加LOGO圖片，有兩種方法。【例3-2】使用HTML標(biāo)簽，如下3-2.jsp代碼段所示。本課件是可編輯的正常PPT課件3.2.2include指令<%@pagelanguage="java"contentType="text/html;charset=GBK"%><%@pageimport="java.text.*,java.util.*"%><html><body><tablewidth="1300"border="0"align="center"><tr><tdwidth="1300"align="center"><imgsrc="images/head.png"/></td></tr></table>本課件是可編輯的正常PPT課件3.2.2include指令<% SimpleDateFormatformater=newSimpleDateFormat("yyyy年MM月dd日HH時(shí)mm分ss秒"); StringstrCurrentTime=formater.format(newDate());%><center>你好，蘇州托普信息職業(yè)技術(shù)學(xué)院！現(xiàn)在是：<%=strCurrentTime%></center></body></html>本課件是可編輯的正常PPT課件3.2.2include指令<html><body><tablewidth="1300"border="0"align="center"><tr><tdwidth="1300"align="center"><imgsrc="images/head.png"/></td></tr></table></body></html>【例3-3】使用include指令嵌入頭文件。1.先編寫(xiě)一個(gè)html文件包含head.png，head.html代碼如下。本課件是可編輯的正常PPT課件3.2.2include指令<body><%@includefile="head.html"%><% SimpleDateFormatformater=newSimpleDateFormat("yyyy年MM月dd日HH時(shí)mm分ss秒"); StringstrCurrentTime=formater.format(newDate());%><center>你好，蘇州托普信息職業(yè)技術(shù)學(xué)院！現(xiàn)在是：<%=strCurrentTime%></center></body>【例3-3】使用include指令嵌入頭文件。2.再編寫(xiě)3-3.jsp的文件，使用include指令嵌入head.html。3-3.jsp代碼如下。本課件是可編輯的正常PPT課件3.2.2include指令3-2.jsp與3-3.jsp頁(yè)面運(yùn)行效果如圖3-5所示。圖3-5頁(yè)面頂部嵌套LOGO的運(yùn)行結(jié)果本課件是可編輯的正常PPT課件3.2.3taglib指令在JSP中，我們可以使用taglib指令聲明并引入標(biāo)簽庫(kù)。JavaAPI允許在頁(yè)面中自定義標(biāo)簽，標(biāo)簽庫(kù)就是自定義標(biāo)簽的集合。taglib指令的語(yǔ)法格式如下：<%@tagliburl="tagliburl"prefix="tagPre"%>本課件是可編輯