Java-Web-應(yīng)用程序設(shè)計全書電子教案完整版課件最全ppt整本書教學(xué)教程最新講義

1、Java Web 應(yīng)用程序設(shè)計主講人： Java Web應(yīng)用概述1目錄2435678網(wǎng)頁前端開發(fā)技術(shù)JSP技術(shù)JavaBean技術(shù)數(shù)據(jù)庫訪問技術(shù)MVC模式下的Servlet技術(shù)jQuery技術(shù)綜合實例充電站管理系統(tǒng)1單擊添加章節(jié)名稱1Java Web應(yīng)用概述學(xué)習(xí)目標(biāo)理解web應(yīng)用程序的工作原理，能夠靜態(tài)網(wǎng)站和動態(tài)網(wǎng)站。了解C/S和B/S結(jié)構(gòu)的區(qū)別、web應(yīng)用發(fā)展歷程及web開發(fā)技術(shù)。了解Java Web應(yīng)用程序的組成及開發(fā)模式。學(xué)會Java Web開發(fā)環(huán)境搭建。掌握創(chuàng)建、部署并運行一個Java Web應(yīng)用程序的方法。1.1 認(rèn)識Web應(yīng)用一個Web應(yīng)用（Web Application）通常是指

2、響應(yīng)用戶請求而生成的一些Web頁面。一個網(wǎng)站由大量的頁面組成，每個頁面通常由一個或多個文件組成，組成一個網(wǎng)站的大量文件之間必須通過特定的方式連接在一起，并且需要一個系統(tǒng)來管理這些文件。 1.1.1 Web應(yīng)用程序的工作原理Web應(yīng)用程序大體可以分為兩種，即靜態(tài)網(wǎng)站和動態(tài)網(wǎng)站。HTTP請求HTTP響應(yīng)瀏覽器靜態(tài)網(wǎng)頁Web服務(wù)器圖1-1 靜態(tài)網(wǎng)站的工作流程1.1.1 Web應(yīng)用程序的工作原理隨著網(wǎng)絡(luò)的發(fā)展，很多線下業(yè)務(wù)開始向網(wǎng)上發(fā)展，基于Internet的Web應(yīng)用也變得越來越復(fù)雜，用戶訪問的資源已不能僅僅局限于服務(wù)器上保存的靜態(tài)網(wǎng)頁，更多的內(nèi)容需要根據(jù)用戶的請求動態(tài)生成頁面信息，即動態(tài)網(wǎng)站。1.

3、1.1 Web應(yīng)用程序的工作原理圖 1-2 動態(tài)網(wǎng)站的工作流程1.1.2 C/S和B/S結(jié)構(gòu)C/S（Client/Server）即客戶端/服務(wù)器結(jié)構(gòu)。在這種結(jié)構(gòu)下，需要分別寫服務(wù)器端程序和客戶端程序，應(yīng)用于服務(wù)器和客戶機(jī)。服務(wù)器端程序負(fù)責(zé)管理和維護(hù)數(shù)據(jù)資源，并接受客戶機(jī)的服務(wù)請求，向客戶機(jī)提供所需的數(shù)據(jù)或服務(wù)?？蛻魴C(jī)安裝客戶端程序后，也能接受用戶請求，具備大量處理功能，因此稱為“胖客戶端”。C/S 開發(fā)模式能夠充分利用兩端硬件環(huán)境的優(yōu)勢，將任務(wù)合理分配到服務(wù)器和客戶端，從而降低了系統(tǒng)的通信開銷。在2000年以前，C/S開發(fā)模式占網(wǎng)絡(luò)程序開發(fā)的主流。1.1.2 C/S和B/S結(jié)構(gòu)B/S(Brow

4、ser/Server) 即瀏覽器/服務(wù)器結(jié)構(gòu)。在這種結(jié)構(gòu)中，客戶端不需要開發(fā)任何應(yīng)用程序，而統(tǒng)一采用如IE和火狐等瀏覽器，通過瀏覽器向Web服務(wù)器發(fā)送請求，所以，這樣的客戶端也稱瘦客戶端。Web服務(wù)器是安裝了Web服務(wù)軟件的計算機(jī)，能夠處理客戶端發(fā)過來的Web請求，并將處理結(jié)果返回給客戶端。1.1.2 C/S和B/S結(jié)構(gòu)B/S結(jié)構(gòu)和C/S結(jié)構(gòu)的比較如表1-1 所示：B / S 結(jié)構(gòu)C / S 結(jié)構(gòu)客戶端不需要專門的客戶端需要專門的客戶端可維護(hù)性方便，只需要更新服務(wù)器端程序需要更新客戶端和服務(wù)器端的程序速度慢，大部分功能在服務(wù)器端完成快，大部分功能在本地執(zhí)行美觀性一般，采用的是通用的客戶端可以自

5、由設(shè)計，比較美觀方便性不需要安裝客戶端程序需要安裝專門的客戶端程序1.1.3 Web的發(fā)展歷程自從1990年，英國計算機(jī)科學(xué)家Tim Berners-Lee發(fā)明了World Wide Web并成功通過Internet實現(xiàn)了HTTP代理與服務(wù)器的第一次通訊以來，Web發(fā)展主要經(jīng)歷了三個階段：Web1.0階段、Web2.0階段及Web3.0階段。1.1.3 Web的發(fā)展歷程1.Web1.0階段網(wǎng)絡(luò)是信息的提供者，通過靜態(tài)網(wǎng)頁把信息單向提供給用戶。用戶通過客戶端的Web瀏覽器可以訪問Internet上各個Web站點，而在每個Web站點上，保存著提前編寫好的HTML格式的Web頁面和Web 之間可以實

6、現(xiàn)跳轉(zhuǎn)的超文本鏈接。這時的Web頁面只能包括單純的文本信息，用戶也只能閱讀，不能交流，實現(xiàn)了信息的分享。1.1.3 Web的發(fā)展歷程2.Web2.0階段網(wǎng)絡(luò)成為了平臺，更注重用戶的交流。用戶既是網(wǎng)站內(nèi)容的瀏覽者，也是網(wǎng)站內(nèi)容的制造者。因此，Web2.0是以用戶為核心的互聯(lián)網(wǎng)，隨著P2P、Blog、Ajax及XML等技術(shù)的快速發(fā)展，促進(jìn)了網(wǎng)絡(luò)用戶的信息交換和協(xié)同合作。1.1.3 Web的發(fā)展歷程3.Web3.0階段在這個階段網(wǎng)絡(luò)已經(jīng)成為用戶需求理解者和提供者，網(wǎng)絡(luò)對于用戶了如指掌，知道用戶的行為習(xí)慣和需求，能夠進(jìn)行資源篩選、智能匹配，進(jìn)而直接給用戶解決方案。Web3.0是互聯(lián)網(wǎng)價值重新分配的必然

7、趨勢，體現(xiàn)了用戶網(wǎng)絡(luò)互動及個性化體驗的互聯(lián)網(wǎng)技術(shù)的完善。1.1.4 Web應(yīng)用開發(fā)技術(shù)在開發(fā)Web應(yīng)用程序時，通常需要應(yīng)用客戶端和服務(wù)器兩方面的技術(shù)。客戶端應(yīng)用技術(shù)主要用于接收與返回用戶信息內(nèi)容展現(xiàn)，服務(wù)器應(yīng)用技術(shù)主要用于業(yè)務(wù)邏輯的處理、與數(shù)據(jù)庫的交互及內(nèi)部控制等。下面分別介紹比較常用的應(yīng)用技術(shù)。1.1.4 Web應(yīng)用開發(fā)技術(shù)1.客戶端應(yīng)用技術(shù)目前，比較常用的客戶端應(yīng)用技術(shù)包括HTML（Hypertext Markup Language）、CSS（Cascading Style sheet）樣式和JavaScript等。其中，HTML即超文本標(biāo)記語言，用于描述網(wǎng)頁文檔的一種標(biāo)記語言，主要用于顯

8、示網(wǎng)頁信息，不需要編譯，由瀏覽器解釋執(zhí)行。CSS樣式也稱為層疊樣式表技術(shù)，可以有效對網(wǎng)頁進(jìn)行布局并精確控制字體、顏色和背景等效果，不僅可以美化頁面，而且還能優(yōu)化網(wǎng)頁速度。JavaScript是客戶端腳本技術(shù)，通過腳本語言以編程方式對頁面元素進(jìn)行控制，增加頁面的靈活性，并且瀏覽器可以解釋執(zhí)行。1.1.4 Web應(yīng)用開發(fā)技術(shù)2.服務(wù)器端應(yīng)用技術(shù)（1）ASP（2）PHP（3）JSP1.1.4 Web應(yīng)用開發(fā)技術(shù)（1）ASPASP（Active Server Pages）是微軟公司開發(fā)的一種動態(tài)網(wǎng)站開發(fā)技術(shù)，類似HTML、Script(腳本)與CGI(公用網(wǎng)關(guān)接口)的結(jié)合體。ASP允許用戶在網(wǎng)頁代碼中

9、嵌入VBScript或JavaScript腳本語言來生成動態(tài)的內(nèi)容，Web服務(wù)器必須安裝適當(dāng)?shù)慕忉屍骱?，才可以解釋?zhí)行腳本程序，然后將執(zhí)行結(jié)果與靜態(tài)內(nèi)容結(jié)合起來，以HTML格式傳送到客戶端瀏覽器。對于一些復(fù)雜的操作，ASP還可以調(diào)用后臺的ActiveX控件來無限擴(kuò)充其能力。ASP技術(shù)有很多優(yōu)點，簡單易學(xué)，但是它基本上局限于微軟公司的操作系統(tǒng)平臺，很難在跨平臺Web服務(wù)器上工作。1.1.4 Web應(yīng)用開發(fā)技術(shù)（2）PHPPHP最早是Personal Home Page的縮寫，后來理解為超文本預(yù)處理器，是一種通用開源腳本語言。PHP語言風(fēng)格與C語言類似，又混合了Java、Perl以及PHP自創(chuàng)的語

10、法，比較容易學(xué)習(xí)。PHP也是一種HTML內(nèi)嵌式的語言，在服務(wù)器端執(zhí)行，具有非常強大的功能和較高的效率，還提供了標(biāo)準(zhǔn)的數(shù)據(jù)庫接口，數(shù)據(jù)庫連接方便，兼容性好、擴(kuò)展性強。PHP能夠被多個平臺支持，廣泛應(yīng)用于UNIX/Linux平臺，代碼對外開放，被許多網(wǎng)站編程人員運用。1.1.4 Web應(yīng)用開發(fā)技術(shù)（3）JSPJSP（Java Server Pages）是由Sun公司（現(xiàn)已被甲骨文公司收購）推出的服務(wù)器端開發(fā)技術(shù)。JSP技術(shù)是在傳統(tǒng)網(wǎng)頁HTML文件中插入Java代碼，從而形成JSP文件。JSP以Java為基礎(chǔ)，沿用了Java強大的API功能。JSP頁面中的HTML代碼用來顯示靜態(tài)內(nèi)容；嵌入的Java

11、代碼與JSP標(biāo)記用來生成動態(tài)的內(nèi)容。Web服務(wù)器在遇到訪問JSP頁面的請求時，首先執(zhí)行其中的Java程序段，然后將執(zhí)行結(jié)果連同JSP文件中的HTML代碼一起返回給客戶，實現(xiàn)動態(tài)網(wǎng)頁所需要的功能。JSP可以被預(yù)編譯，提高運行速度。并且JSP應(yīng)用程序一次編譯后，便可隨時隨地運行。1.2 Java Web應(yīng)用Java Web應(yīng)用開發(fā)主要涉及表現(xiàn)層（JSP技術(shù)、JQuery技術(shù)）、控制層（Servlet技術(shù)）、業(yè)務(wù)邏輯層（JavaBean技術(shù)）和數(shù)據(jù)訪問層（JDBC技術(shù)），除了學(xué)習(xí)JSP語法和常用對象之外，還要熟練運用Java語言編程實現(xiàn)業(yè)務(wù)邏輯和控制功能等。1.2.1 Java Web與Java的關(guān)

12、系Java平臺分成如下三個版本：（1）Java SE：標(biāo)準(zhǔn)版，主要用于桌面應(yīng)用的開發(fā)，同時也是其它版本的基礎(chǔ)。（2）Java EE：企業(yè)版，主要用于企業(yè)級應(yīng)用的開發(fā)。（3）Java ME：微版本或稱為嵌人式版本，占用內(nèi)存較少，主要用于嵌入式應(yīng)用的開發(fā)。Java EE采用分層思想進(jìn)行應(yīng)用程序架構(gòu)，一般分為3層（表現(xiàn)層、業(yè)務(wù)邏輯層和數(shù)據(jù)訪問層）或4 層（表現(xiàn)層、控制層、業(yè)務(wù)邏輯層和持久層），以提高軟件開發(fā)效率。1.2.2 Java Web應(yīng)用程序Java Web應(yīng)用程序就是采用Java語言編寫的Web應(yīng)用程序，通過互聯(lián)網(wǎng)能夠讓W(xué)eb瀏覽器和服務(wù)器進(jìn)行通信。Java Web應(yīng)用程序由一組JSP頁面、

13、Servlet、JavaBean以及其它可以綁定的資源構(gòu)成，可以在實現(xiàn)Servlet規(guī)范的Web 容器中運行。Java Web應(yīng)用的組成如圖1-3所示。1.2.2 Java Web應(yīng)用程序圖1-3 Java Web應(yīng)用的組成1.2.2 Java Web應(yīng)用程序一個Java Web應(yīng)用程序的具體執(zhí)行過程如下：第一，客戶端向Web服務(wù)器發(fā)起HTTP請求。第二，Web服務(wù)器接收客戶端發(fā)來的請求，根據(jù)請求的類型確定處理的對象。如果請求的是靜態(tài)資源，則Web服務(wù)器直接處理；如果請求的是Servlet或JSP，則轉(zhuǎn)交給Web容器，Web容器根據(jù)Servlet的配置文件（web.xml）確定調(diào)用的具體Ser

14、vlet類，并把請求(request)對象傳給該Servlet類。第三，Servlet處理完請求后，把要返回的信息放入響應(yīng)（response）對象通過Web服務(wù)器返回客戶端。這時Web容器把控制權(quán)返回給Web服務(wù)器。1.2.3 Java Web應(yīng)用開發(fā)模式Java實現(xiàn)Web編程的第一代和第二代技術(shù)分別是Servlet和JSP。隨著Web應(yīng)用的復(fù)雜度增大，Sun公司推廣Java Web開發(fā)的時候，提出了兩個不同的開發(fā)架構(gòu)模型，又稱為JSP Model 1和JSP Model 2。而JSP Model 2模型就是簡單的MVC架構(gòu)模式。下面對于Servlet與JSP技術(shù)、幾種開發(fā)架構(gòu)模式進(jìn)行簡要介紹

15、。1.2.3 Java Web應(yīng)用開發(fā)模式1Servlet與JSPServlet是Java技術(shù)中最早的Web解決方案，它與普通Java類的編寫非常類似。使用Servlet技術(shù)，頁面中的所有信息需要通過輸出語句來生成，這是一件煩瑣的事情。如果采用HTML 語言直接生成相同功能的界面將非常簡單。因此，Java推出了JSP技術(shù)，可以有效地解決Servlet生成頁面比較困難的問題。JSP技術(shù)是Servlet更高級的擴(kuò)展，通過JSP可以讓開發(fā)人員把普通的Java代碼嵌入到HTML頁面中，最終JSP文件會通過Web服務(wù)器的Web容器編譯成一個Servlet，用來處理各種請求，實現(xiàn)了快速地開發(fā)動態(tài)的Web頁

16、面。1.2.3 Java Web應(yīng)用開發(fā)模式2JSP Model1模型（JSP+JavaBean）JSP Model 1模型主要使用JSP和JavaBean技術(shù)來開發(fā)Web應(yīng)用。JavaBean是特殊的Java類，封裝數(shù)據(jù)庫的操作和部分業(yè)務(wù)邏輯的代碼，JSP頁面中既包含輸出效果的HTML、CSS代碼，也會包含表示業(yè)務(wù)邏輯的Java代碼。這種架構(gòu)模型非常適合小型Web項目的快速開發(fā)，對Java Web開發(fā)人員的技術(shù)水平要求也不高。缺點是Java代碼和HTML揉合在一起，不利于Java程序員和前臺美工人員分工合作，項目后期維護(hù)也會造成很大的困難。1.2.3 Java Web應(yīng)用開發(fā)模式3JSP M

17、odel2模型（MVC架構(gòu)模式）為了解決JSP Model1的弊端，把JSP頁面中的Java代碼取出來，放到Servlet、JavaBean等Java文件中，專門由Java程序員單獨開發(fā)維護(hù)，JSP頁面就變得很“干凈”，美工人員只負(fù)責(zé)顯示。JSP Model2模型使用了三種技術(shù)：JSP、Servlet和JavaBean。JSP負(fù)責(zé)數(shù)據(jù)的最終顯示，Servlet用來處理各種請求的分派，JavaBean主要負(fù)責(zé)對數(shù)據(jù)庫的操作等業(yè)務(wù)。1.3 Java web運行環(huán)境在進(jìn)行Java Web應(yīng)用開發(fā)前，需要把整個開發(fā)環(huán)境搭建好。通過前面對Web 應(yīng)用運行過程的學(xué)習(xí)，我們已經(jīng)知道Web應(yīng)用的運行需要Web

18、服務(wù)器和Java開發(fā)工具包（JDK）的支持，同時為了高效率地進(jìn)行軟件開發(fā)，還需要安裝Java Web的集成開發(fā)環(huán)境（IDEIntegrated Development Enviroment）。1.3.1 運行環(huán)境簡介Java Web服務(wù)器主要是與Servlet、JSP兼容的Web應(yīng)用的容器，比較常用的有Tomcat、JBoss、Resin、WebSphere和WebLogic等。本書選擇小型輕量級的Tomcat7.0作為Web服務(wù)器，它性能穩(wěn)定、擴(kuò)展性好、源碼開放，是初學(xué)Java Web開發(fā)和中小企業(yè)應(yīng)用的最佳選擇。Java Web應(yīng)用服務(wù)器在管理運行JSP程序時需要編譯Java源文件、加載并

19、執(zhí)行Java文件，需要JDK的支持。所以搭建Java Web開發(fā)環(huán)境必須安裝好JDK，本書選擇JDK7.0版，與Tomcat7.0較好兼容。1.3.1 運行環(huán)境簡介Java Web集成開發(fā)環(huán)境有Eclipse、MyEclipse、NetBeans、IntelliJ IDEA等。Eclipse是一個開放的開發(fā)平臺，需要安裝Eclipse插件，才能進(jìn)行Java Web開發(fā), MyEclipse是在Eclipse基礎(chǔ)上增加自己的插件開發(fā)而成的功能強大的企業(yè)級集成開發(fā)環(huán)境，支持十分廣泛，本書選擇MyEclipse9.0作為開發(fā)環(huán)境，1.3.2 JDK的安裝與配置JDK可以在Oracle公司的官方網(wǎng)站（

20、/java/technologies/javase/javase7-archive-downloads.html）下載，進(jìn)入下載頁面后，選擇合適自己操作系統(tǒng)平臺的安裝文件。下載了Windows 操作系統(tǒng)的JDK安裝文件，文件名為jdk-7u80-windows-x64.exe,就可以雙擊安裝文件進(jìn)行安裝。1.3.2 JDK的安裝與配置2.配置環(huán)境變量在Win10操作系統(tǒng)中配置環(huán)境變量的方法如下：（1）在桌面上右擊“此電腦”圖標(biāo)，在彈出的快捷菜單中選擇“屬性”命令，會打開“系統(tǒng)”窗口，單擊“系統(tǒng)”窗口左側(cè)的“高級系統(tǒng)設(shè)置”命令。（2）在“高級”選項卡中，單擊“環(huán)境變量（N）”按鈕，將彈出“環(huán)境變

21、量”對話框，單擊系統(tǒng)變量下方的“新建（W）按鈕”，新建系統(tǒng)變量。1.3.2 JDK的安裝與配置（3）在 “新建系統(tǒng)變量”對話框，分別輸入變量名“JAVA_HOME”和變量值（JDK的安裝路徑），讀者需要根據(jù)自己安裝JDK時的安裝路徑進(jìn)行相應(yīng)修改。填寫好后，單擊“確定”按鈕。（4）在 “環(huán)境變量”對話框中，雙擊Path變量修改其值，即在原變量值后面添加“%JAVA_HOME%bin;”變量值。單擊“確定”按鈕完成環(huán)境變量的設(shè)置。（5）在Windows系統(tǒng)中測試JDK環(huán)境配置是否正確。 在控制臺提示符后輸入“javac”命令并按Enter鍵，1.3.3 Tomcat的安裝與配置本書使用Tomcat

22、7.0版本，讀者可以到Tomcat官方網(wǎng)站下載，網(wǎng)址為/download-70.cgi。 雙擊下載后的文件（pache-tomcat-7.0.75.exe）進(jìn)入Apache Tomcat安裝的初始界面，單擊“Next”按鈕，開始安裝。1.3.3 Tomcat的安裝與配置安裝完成后，當(dāng)在任務(wù)欄右側(cè)出現(xiàn)綠色三角形圖標(biāo)，表示Tomcat7服務(wù)器已經(jīng)在后臺啟動運行了。我們也可以在“所有應(yīng)用”中找到“configure Tomcat”選項，打開Tomcat屬性對話框，在該對話框中，單擊停止（stop）、啟動（start）、暫停（Pause）或重啟（Restart）按鈕，管理Tomcat服務(wù)器。 測試服務(wù)

23、器。打開瀏覽器，輸入http:/localhost:8080/，如果能看到Tomcat的首頁，表示服務(wù)器正常運行，否則需要查看日志，尋找錯誤原因。1.3.4 MyEclipse的安裝與配置從MyEclipse官方網(wǎng)站獲得免費試用版軟件。本書選擇MyEclipse9.0版本。雙擊下載的安裝文件myeclipse.9.0，根據(jù)提示接受協(xié)議、選擇安裝路徑、安裝內(nèi)容等進(jìn)行安裝即可，這里不再詳細(xì)描述安裝過程。安裝完成后，通常會啟動MyEclipse，彈出 “選擇工作空間”對話框。Workspace(工作空間)就是指定一個存儲項目的文件夾，通過單擊“Browse”按鈕可以進(jìn)行選擇。1.4 使用MyEcli

24、pse進(jìn)行Java Web 開發(fā)開發(fā)環(huán)境搭建好了，本節(jié)將介紹如何開發(fā)一個簡單的Web 應(yīng)用程序。1.4.1 在MyEclipse中創(chuàng)建Web工程通過雙擊桌面上的MyEclipse應(yīng)用程序圖標(biāo)或者單擊“所有應(yīng)用”中的MyEclipse 9，就可以進(jìn)入MyEclipse工作界面，新建Web 工程，具體步驟如下：第一步：選擇菜單欄中的“File” “New” “Web Project”,打開 “New Web Project”對話框。1.4.1 在MyEclipse中創(chuàng)建Web工程第二步：在“ProjectName”文本框中輸入Web工程的名稱，如：first_project。一般將該工程文件存放在

25、默認(rèn)的工作空間，如果想改變存儲位置，不再勾選“Use default location”選項，然后單擊“Browse”按鈕進(jìn)行設(shè)置。 “Source folder”文本框用來指明存儲項目源文件的文件夾；“Web root folder”文本框用來指明Web工程文件的存放文件夾；“Context root URL”文本框用于指明訪問該Web站點的根路徑。以上三項可以采用默認(rèn)設(shè)置。1.4.1 在MyEclipse中創(chuàng)建Web工程第三步:單擊“Finish”按鈕，完成first_project工程創(chuàng)建。在左側(cè)“Package Explorer”中能夠看到該項目的名稱及結(jié)構(gòu)。Java Web工程文件結(jié)

26、構(gòu)中包含了類文件、類庫、配置文件web.xml以及JSP文件等，這些組件協(xié)同工作。1.4.2 在MyEclipse中新建JSP頁面新創(chuàng)建的first_project工程還是一個空項目，本小節(jié)我們在該項目中添加一個JSP頁面。首先，在first_project工程中找到WebRoot文件夾并右擊，在彈出的快捷菜單上選擇“New” “JSP”,彈出對話框。我們可以在File Name文本框內(nèi)輸入文件名：比如firstJsp.jsp,單擊“Finish”按鈕即可完成JSP頁面創(chuàng)建，同時MyEclipse自動打開firstJsp頁面。接著，我們通過MyEclipse提供的JSP頁面編輯器來編輯firs

27、tJSP頁面。將中的內(nèi)容修改為“Welcome to my first JSP”并保存。1.4.3 在MyEclipse中配置Tomcat服務(wù)器為了能在MyEclipse中直接使用Tomcat7服務(wù)器，需要對其進(jìn)行配置。單擊工具欄上的“Run/stop/Restart MyEclipse Servers”按鈕右側(cè)的下三角，在彈出的菜單中選擇“configure server”選項。 展開左側(cè)的“Servers”，找到“Tomcat”，選擇其中的Tomcat7.x進(jìn)行配置。在“Tomcat home directory”文本框中輸入Tomcat的安裝目錄，指定正確的安裝目錄后，下面兩個文本框會自

28、動輸入，無需再設(shè)置；1.4.3 在MyEclipse中配置Tomcat服務(wù)器然后，單擊左側(cè)Tomcat7.x，展開下拉框，單擊“JDK”選項，右側(cè)框顯示 “JDK”相關(guān)內(nèi)容，在“Tomcat JDK name”下的文本框右側(cè)輸入剛安裝的JDK的名稱，也可以單擊右側(cè)“Add ”按鈕直接找到JDK安裝路徑，自動會填入JDK名稱；最后，單擊“OK”按鈕，Tomcat7服務(wù)器就整合至MyEclipse集成開發(fā)環(huán)境中了。1.4.4 在MyEclipse中部署Java Web項目將新建的first_project項目部署到Web服務(wù)器并運行的步驟如下：第一步：在MyEclipse主界面中單擊部署Web項目

29、的工具按鈕“Deploy MyEclipse J2ee project to server”，彈出對話框，在“Project”下拉列表框中選擇要部署的Web應(yīng)用。單擊右側(cè)的“Add”按鈕將打開選擇Web服務(wù)器窗口。1.4.4 在MyEclipse中部署Java Web項目第二步：在 “Server”下拉列表框中選擇“Tomcat 7.x”，其它選項默認(rèn)設(shè)置，單擊“Finish”按鈕完成服務(wù)器的選擇。頁面回到項目部署界面，此時會發(fā)現(xiàn)“Deployments”下面多了一行first_project項目部署到Tomcat 7.x服務(wù)器的信息，并且最下面“Deployments Status”（部署狀

30、態(tài)）下面顯示“Successfully deployed”(部署成功)。1.4.4 在MyEclipse中部署Java Web項目第三步：單擊工具欄“Run/stop/Restart MyEclipse Servers”按鈕右側(cè)的下三角，彈出下拉菜單，選擇“Tomcat7.x”選項中的“Start”,啟動服務(wù)器；第四步：運行first_project項目。打開MyEclipse中的瀏覽器或外部瀏覽器，在地址欄中輸入http:/loacalhost:8080/first_project/firstJsp.jsp，按回車后運行。小 結(jié)本章主要介紹了web應(yīng)用程序的工作原理、開發(fā)模式、發(fā)展歷程及we

31、b應(yīng)用開發(fā)技術(shù)、Java Web應(yīng)用的程序組成及開發(fā)模式等。通過圖示的方式，詳細(xì)介紹了Java Web開發(fā)環(huán)境的安裝與配置并創(chuàng)建、部署、運行了第一個Java Web項目，為后續(xù)章節(jié)學(xué)習(xí)奠定了基礎(chǔ)。習(xí) 題一、填空題( 請在括號內(nèi)填入正確答案)1.Tomcat服務(wù)器的默認(rèn)端口是（ 8080 ）。2.在Tomcat成功安裝和啟動后，可以在瀏覽器中輸入（ http:/localhost:8080 ）來測試安裝配置是否正常。3.網(wǎng)絡(luò)應(yīng)用程序開發(fā)的兩種結(jié)構(gòu)是（ C/S ）和（ B/S ）4.Java Web應(yīng)用開發(fā)的MVC架構(gòu)模式的M表示（ Model ），V表示 （ View ），C表示（ Contro

32、l ）。習(xí) 題二、上機(jī)實訓(xùn)題 1.安裝并配置Java Web開發(fā)環(huán)境。(略)2. 使用MyEclipse創(chuàng)建一個Java Web工程，存儲在工作空間D盤javaweb文件夾里，新建一個簡單的.jsp文件，能夠在瀏覽器中輸出“Hello World”。（略）2網(wǎng)頁前端開發(fā)技術(shù)學(xué)習(xí)目標(biāo)理解HTML語言中的文本控制、表格、圖像、列表、表單標(biāo)記的作用。深入理解表格、表單、CSS樣式表的作用和意義。能熟練掌握網(wǎng)頁設(shè)計中字符格式的設(shè)置方法，段落分段與換行的方法。能熟練掌握HTML語言中各種標(biāo)記的使用方法。能熟練運用表單技術(shù)建立交互式頁面。能熟練運用CSS技術(shù)規(guī)范設(shè)計網(wǎng)頁并美化網(wǎng)頁內(nèi)容。2.1 HTML2.

33、1.1 創(chuàng)建HTML文件2.1.2 HTML文本控制標(biāo)記2.1.3 表格標(biāo)記2.1.4 圖像標(biāo)記2.1.5 超鏈接2.1.6 列表標(biāo)記2.1.7 HTML表單標(biāo)記2.1.1 創(chuàng)建HTML文件1. 什么是 HTMLHTML，超文本標(biāo)記語言 (Hyper Text Markup Language)， 是用來描述網(wǎng)頁的一種語言。人們可以使用HTML建立自己的Web站點。瀏覽器讀取 HTML 文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來解釋頁面的內(nèi)容。例題2-1，我的第一個網(wǎng)頁2.1例題2-1，我的第一個網(wǎng)頁, jw2-1-1.html源代碼如下：hello,歡迎來到

34、我的第一個網(wǎng)頁我的第一個小程序HTML的基本結(jié)構(gòu)圖2-1 第一個小程序運行結(jié)果2.1.1 創(chuàng)建HTML文件2.HTML 文檔結(jié)構(gòu)HTML網(wǎng)頁文件主要由文件頭和文件體兩部分組成。文件頭對文件進(jìn)行一些必要的定義，文件體是HTML網(wǎng)頁的主要部分，包含3個主要標(biāo)記：、。2.1.1 創(chuàng)建HTML文件基本構(gòu)說明HTML文件開始 文件頭開始 文件頭 文件頭結(jié)束 文件體開始 文件體 文件體結(jié)束 HTML文件結(jié)束HTML網(wǎng)頁的基本結(jié)構(gòu):2.1.1 創(chuàng)建HTML文件基本構(gòu)說明HTML文件開始 文件頭開始文件頭 文件頭結(jié)束 文件體開始 文件體文件體結(jié)束 HTML文件結(jié)束HTML網(wǎng)頁的基本結(jié)構(gòu): 文件頭2.1.1 創(chuàng)

35、建HTML文件標(biāo)記語法格式如下所示：如標(biāo)題標(biāo)記hr: HTML語法規(guī)則如下：標(biāo)記不區(qū)分大小寫。標(biāo)記可以嵌套，不能交叉。一行可以寫多個標(biāo)記，一個標(biāo)記也可以分多行書寫，不用任何續(xù)行符。在HTML源文件中的換行、回車符和多個連續(xù)空格在顯示效果中是無效的。2.1.2 HTML文本控制標(biāo)記1.標(biāo)題標(biāo)記-在HTML標(biāo)記中，設(shè)定了6個標(biāo)題標(biāo)記，分別為至，代表1級標(biāo)題至6級標(biāo)題，數(shù)字越大，字體越小，用黑體字顯示標(biāo)題內(nèi)容。2.字體標(biāo)記-字體標(biāo)記能夠設(shè)置文字字體、字號和顏色等。其基本語法如下所示:2.1.2 HTML文本控制標(biāo)記3.文字布局類標(biāo)記-、段落標(biāo)記以 開頭，以結(jié)束，使得該段的段前和段后各添加一個空行。換

36、行標(biāo)記是一個單獨標(biāo)記。如果想讓頁面中的內(nèi)容居中顯示，使用居中標(biāo)記，以結(jié)束。2.1.2 HTML文本控制標(biāo)記4HTML文本控制標(biāo)記舉例使用文本控制標(biāo)記在HTML頁面進(jìn)行文字排版設(shè)計。如果想要達(dá)到如圖2-2所示效果，參見例題2-2，HTML文本控制標(biāo)記綜合運用。圖2-2 HTML文本控制標(biāo)記綜合運用效果圖2.1.2 HTML文本控制標(biāo)記例題2-2，jw2-1-2.html部分代碼如下：我國脫貧攻堅取得決定性成就黨的十八大以來，我們堅持以人民為中心的發(fā)展思想，明確了到2020年我國現(xiàn)行標(biāo)準(zhǔn)下農(nóng)村貧困人口實現(xiàn)脫貧、貧困縣全部摘帽、解決區(qū)域性整體貧困的目標(biāo)任務(wù)。目前看，脫貧進(jìn)度符合預(yù)期，成就舉世矚目。第

37、一，脫貧攻堅目標(biāo)任務(wù)接近完成。第二，貧困群眾收入水平大幅度提高。第三，貧困地區(qū)基本生產(chǎn)生活條件明顯改善。第四，貧困地區(qū)經(jīng)濟(jì)社會發(fā)展明顯加快。第五，貧困治理能力明顯提升。第六，中國減貧方案和減貧成就得到國際社會普遍認(rèn)可?？偟目?，我們在脫貧攻堅領(lǐng)域取得了前所未有的成就，彰顯了中國共產(chǎn)黨領(lǐng)導(dǎo)和我國社會主義制度的政治優(yōu)勢。這些成績的取得，凝聚了全黨全國各族人民智慧和心血，是廣大干部群眾扎扎實實干出來的。2.1.3 表格標(biāo)記表格由 標(biāo)簽來定義。每個表格均有若干行（由 標(biāo)簽定義），每行被分割為若干單元格（由 標(biāo)簽定義）。1.表格的常用標(biāo)記說明表格是由行和列組成的，行和列又是由單元格組成，單元格是組成表格的

38、最基本單位。單元格之間的間隔稱為單元格間距；單元格內(nèi)容與單元格邊框之間的間隔稱為單元格邊距（或填充)。2.1.3 表格標(biāo)記圖-3表格常用標(biāo)記解釋圖2.1.3 表格標(biāo)記表2-2表格常用標(biāo)記及說明2.1.3 表格標(biāo)記2.頁面中定義一個表格例題 2-3，在頁面中定義3行2列學(xué)生信息表。JW2-1-3.html部分代碼如下：姓名性別張小華女圖2-4 插入一個3行2列的表格李文軍男2.1.4 圖像標(biāo)記在 HTML頁面中，添加圖片是通過標(biāo)記來實現(xiàn)的。標(biāo)記語法格式如下： url指存儲圖像的位置，可以是相對路徑，也可以是絕對路徑。在瀏覽器無法載入圖像時，瀏覽器將顯示alt指定的替代文本。例題2-4，在頁面中顯

39、示一幅圖像，當(dāng)無法加載圖像時，顯示“習(xí)近平深入武漢社區(qū)看望居民群眾和防控一線工作人員”。jw2-1-4.html部分代碼如下：2.1.5 超鏈接超鏈接是指從一個網(wǎng)頁指向一個目標(biāo)的連接關(guān)系，這個目標(biāo)可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應(yīng)用程序。網(wǎng)頁中超鏈接一般分為以下3種類型: 內(nèi)部鏈接,錨點鏈接和外部鏈接。2.1.5 超鏈接建立超鏈接語法格式如下：鏈接內(nèi)容例題2-5，在網(wǎng)頁上插入超鏈接，鏈接至“w3school網(wǎng)站”。Jw2-1-5. html部分代碼如下：w3school 2.1.6 列表標(biāo)記列表標(biāo)記可以將文字以列表的形式依

40、次排列，更加方便網(wǎng)頁訪問者閱讀。HTML列表標(biāo)記主要有無序列表（ul）和有序列表（ol）兩種。2.1.6 列表標(biāo)記1.無序列表利用成對標(biāo)記可以插入無序列表，標(biāo)記之間使用成對標(biāo)記添加列表項值。例題2-6，使用無序列表對文字排序。jw2-1-6.html部分代碼如下：鮮花速遞、玫瑰、百合花 蛋糕、品牌生日蛋糕禮籃、商務(wù)禮籃2.1.6 列表標(biāo)記2.有序列表有序列表可以將列表項進(jìn)行排號，它的標(biāo)記為，每一個排序列表項前面使用標(biāo)記。例題2-7，使用有序列表對文字排序。jw2-1-7.html部分源代碼如下：鮮花/夢幻之戀 永恒的愛戀，無盡的愛 鮮花/一生的期盼 喜歡你是淡淡的愛 鮮花/一直愛你 有一種感覺

41、叫做愛2.1.6 列表標(biāo)記表2-3 有序列表type屬性取值及說明屬性值有序列表符號1數(shù)字1、2 a小寫字母a、b A大寫字母A、B i小寫羅馬數(shù)字i、ii、iii、ivI大寫羅馬數(shù)字、2.1.7 HTML表單標(biāo)記在上網(wǎng)過程中，經(jīng)常會遇到賬號注冊、登錄、用戶調(diào)查等頁面，這些頁面中的文本框、密碼框、單選按鈕、復(fù)選按鈕等都屬于HTML表單中的元素。表單是用戶與網(wǎng)頁交互信息的重要手段。2.1.7 HTML表單標(biāo)記1插入表單網(wǎng)頁中插入表單以標(biāo)記開頭，以標(biāo)記結(jié)束。標(biāo)記的基本語法如下：2.1.7 HTML表單標(biāo)記表2-4 form標(biāo)記屬性說明屬性名稱說明name指定表單名稱，該屬性值由程序員自定義。act

42、ion指定處理表單數(shù)據(jù)程序的URL地址，其值可以是某個JSP文件名等。Method指定數(shù)據(jù)傳送到服務(wù)器的方式。該屬性值可取get和post兩種。get屬性值表示將表單中輸入的數(shù)據(jù)追加在action指定的地址后面，并傳送到服務(wù)器；post屬性值不把表單中的數(shù)據(jù)追加到地址后面，按照HTTP協(xié)議中的post傳輸方式傳送到服務(wù)器。onSubmit用于指定當(dāng)用戶單擊提交按鈕時觸發(fā)的事件。2.1.7 HTML表單標(biāo)記表單中使用最頻繁的標(biāo)記就是表單輸入標(biāo)記，通過這個標(biāo)記可以向表單中添加單行文本框、多行文本框、按鈕等元素。標(biāo)記的基本語法格式如下：2.1.7 HTML表單標(biāo)記表2-5 標(biāo)記的屬性描述屬性描述Ty

43、pe指定添加的是哪種類型的輸入字段，共有10個可選值，見表2-6。disabled指定輸入字段不可用，即字段變成灰色。屬性值可為空，也可以為disabled。checked指定輸入字段是否處于被選中狀態(tài)，用于radio和checkbox控件，值可為空，也可以為checked。width指定輸入字段的寬度，用于image控件。height指定輸入字段的高度，用于image控件。maxlength指定輸入字段可輸入文字的個數(shù)，用于text和password控件，默認(rèn)無字?jǐn)?shù)限制。readonly指定輸入字段是否為只讀，屬性值可為空，也可以為readonly。size指定輸入字段的寬度 ，text和p

44、assword控件以文字個數(shù)為單位，當(dāng)type屬性為其它值時，以像素為單位。src指定圖片的來源，只用于image控件。alt指定圖片無法顯示時替代的文字，只用于image控件。name指定輸入字段的名稱。value指定輸入字段默認(rèn)數(shù)據(jù)值，當(dāng)type屬性值為radio和checkbox時，此屬性不可省略且其值是數(shù)據(jù)項選定時的值，其它控件可以省略該屬性；當(dāng)type屬性值為button、reset、和submit時，該值是按扭上顯示的文字。2.1.7 HTML表單標(biāo)記表2-6 type屬性的屬性值Type屬性值類 型用 途text單行文本框用于接收單行文本輸入。password密碼輸入框接收輸單行

45、文本輸入，該區(qū)域字符被掩碼。radio單選按鈕相同name屬性的單選按鈕只能選一個,默認(rèn)選中項使用 checked=checked。checkbox復(fù)選框復(fù)選框允許用戶在有限數(shù)量的選項中選擇零個或多個選項。submit提交按鈕單擊后會將表單數(shù)據(jù)發(fā)送到服務(wù)器。reset重置按鈕單擊后會清除表單中的所有數(shù)據(jù)。button按鈕定義按鈕,大部分情況下執(zhí)行的是JavaScript腳本。file文件控件用于文件上傳。number數(shù)字文本框用于包含數(shù)字的輸入域，HTML5新增。date日期文本框用于包含日期的輸入字段，HTML5新增。email電子郵件文本框用于包含電子郵件地址的輸入字段，HTML5新增。2

46、.1.7 HTML表單標(biāo)記例題2-8，制作旅游網(wǎng)會員注冊表。效果如圖2-5所示。要求使用表格進(jìn)行整體布局，表單中包括用戶名文本框、密碼框、性別使用單選按鈕，Email、電話、年齡和出生日期均使用HTML新增功能設(shè)置，愛好為復(fù)選按鈕，所在地為下拉列表框，備注是多行文本域，最下面是“submit”和“reset”按鈕。圖2-5 旅游網(wǎng)會員注冊表2.1.7 HTML表單標(biāo)記旅游網(wǎng)會員注冊用戶名:html5 autofocus密碼:Email:html5 新增電話:html5 新增年齡:html5 新增旅游網(wǎng)會員注冊網(wǎng)頁jw2-1-8.html主要代碼如下：2.1.7 HTML表單標(biāo)記出生日期:htm

47、l5 新增愛好: 音樂 足球 藍(lán)球2.1.7 HTML表單標(biāo)記所在地:北京天津上海山東備注:2.2 CSS樣式表2.2.1 什么是CSS 2.2.2 CSS規(guī)則的定義2.2.3 CSS框模型2.2.4 CSS屬性2.2.5 CSS實例設(shè)計制作“學(xué)校校園風(fēng)景頁面”2.2.1 什么是CSSCSS（Casecating Style Sheet）是層疊樣式表，用于網(wǎng)頁中樣式的定義，是一組格式設(shè)置規(guī)則，能夠控制網(wǎng)頁的外觀。CSS標(biāo)準(zhǔn)使得開發(fā)人員能夠分離頁面內(nèi)容和表現(xiàn)形式，將頁面內(nèi)容放在HTML文檔中，而用于定義表現(xiàn)形式的CSS規(guī)則存放在另一個文件中或HTML文檔頭部。這樣不僅使維護(hù)站點的外觀更加容易，還

48、可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。2.2.2 CSS規(guī)則的定義CSS樣式表的核心是規(guī)則的制定，也就是樣式的定義。在CSS樣式表中包括3部分內(nèi)容：選擇符、屬性和屬性值。1CSS樣式的語法CSS樣式語法格式為： selectorproperty:value語法說明如下：selector選擇器，又稱選擇符，是CSS中非常重要的概念，所有HTML語言中的標(biāo)記都是通過不同的CSS選擇器進(jìn)行控制的。property屬性：主要包括字體屬性、文本屬性、背景屬性、布局屬性、邊界屬性、列表項目屬性、表格屬性等內(nèi)容。其中一些屬性只有部分瀏覽器支持，因此使CSS屬性的使用變得更加復(fù)雜。2.2.2

49、CSS規(guī)則的定義value屬性值：為某屬性的有效值。屬性與屬性值之間用“:”分隔。多個屬性之間，使用“;”分隔。如：選擇器h1 color:red; font-size:14px;（代碼結(jié)構(gòu)如圖2-6所示），表示將 h1 元素內(nèi)的文字顏色定義為紅色，同時將字體大小設(shè)置為 14 像素。這里一個屬性值對也稱為一條聲明。圖2-6 h1代碼結(jié)構(gòu)2.2.2 CSS規(guī)則的定義2.CSS 的選擇器CSS選擇器常用的是標(biāo)記選擇器、類別選擇器、ID選擇器等。下面主要介紹這三種基本類型。（1）標(biāo)記選擇器大家知道HTML頁面是由很多標(biāo)記組成的，例如超鏈接標(biāo)記、表格標(biāo)記、圖片標(biāo)記等。標(biāo)記選擇器就是聲明頁面中哪些標(biāo)記采

50、用哪些CSS樣式。例如h1選擇器，就是聲明頁面中所有標(biāo)記的樣式風(fēng)格。例題2-9，定義h1標(biāo)記選擇器，在該標(biāo)記中定義一級標(biāo)題字體顏色為藍(lán)色。h1 color:blue;2.2.2 CSS規(guī)則的定義（2）類別選擇器使用標(biāo)記選擇器非?？旖荩菚幸欢ǖ木窒扌?。比如頁面如果聲明標(biāo)記選擇器，那么頁面中所有該標(biāo)記內(nèi)容都會是相同的樣式。假設(shè)頁面中有3個標(biāo)記，要想使每個 標(biāo)記顯示效果都不一樣，這時就需要引入類別選擇器了。類別選擇器的名稱是由用戶自定義的，以“.”開頭，定義的屬性與屬性值同樣遵循CSS規(guī)則。應(yīng)用類別選擇器的HTML標(biāo)記，需使用class屬性來聲明。2.2.2 CSS規(guī)則的定義例題2-10，使用

51、類別選擇器控制頁面中字體的樣式。jw2-2-1.html主要代碼如下：.important color: red; This heading is very important. This paragraph is very important. 2.2.2 CSS規(guī)則的定義（3）ID選擇器ID 選擇器類是通過HTML頁面中的ID屬性增添樣式，類似于類別選擇器。但需要注意的是，由于HTML頁面中不能包含有兩個相同的ID標(biāo)記，因此定義的ID選擇器只能被使用一次。定義ID選擇器以“#”開始。2.2.2 CSS規(guī)則的定義例題 2-11，使用ID選擇器控制頁面中字體的樣式。jw2-2-2.html主要

52、代碼如下：#intro font-weight: bold;這是引用的ID樣式，字體加粗顯示2.2.2 CSS規(guī)則的定義3.在網(wǎng)頁中加入CSS樣式表CSS樣式表加入到網(wǎng)頁的方法主要有3種：鏈接外部樣式表、定義內(nèi)部樣式表和內(nèi)聯(lián)樣式。（1）鏈接外部樣式表先建立外部樣式表文件( .css),然后在標(biāo)記中使用link對象進(jìn)行鏈接。其形式如下：說明： 標(biāo)簽在文檔中聲明使用外接資源時使用，href屬性中指明要鏈接的樣式表文件的路徑，rel=stylesheet表示鏈接類型為樣式表。2.2.2 CSS規(guī)則的定義（2）內(nèi)部樣式表在HTML文檔頭部，插入標(biāo)記定義內(nèi)部樣式表，形式如下: hr color: sie

53、nna; p margin-left: 20px; body background-image: url(images/back40.gif);2.2.2 CSS規(guī)則的定義（3）內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式是在HTML標(biāo)記內(nèi)使用style屬性。形式如下：This is a paragraph2.2.3 CSS框模型1CSS 框模型概述CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框和外邊距的方式。圖2-7 CSS框模型2.2.3 CSS框模型假設(shè)框的每個邊上有 10 個像素的外邊距和 5 個像素的內(nèi)邊距，邊框粗細(xì)為0。如果希望這個元素框達(dá)到 100 個像素，就需要將內(nèi)容的寬度

54、設(shè)置為 70 像素，如圖2-8所示。圖2-8 框模型尺寸大小計算示例2.2.3 CSS框模型ID選擇器box代碼如下：#box width: 70px; margin: 10px; padding: 5px;2.2.3 CSS框模型2.CSS 內(nèi)邊距元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。CSS padding 屬性定義元素的內(nèi)邊距。padding 屬性接受長度值或百分比值。2.2.3 CSS框模型表2-7 CSS padding 屬性屬性描述padding-bottom設(shè)置元素的下內(nèi)邊距。padding-left設(shè)置元素的左內(nèi)邊距。padding-right設(shè)置元素的右內(nèi)邊距。padding-top

55、設(shè)置元素的上內(nèi)邊距。padding簡寫屬性。在一個聲明中設(shè)置元素的所有內(nèi)邊距屬性。2.2.3 CSS框模型3.CSS 邊框元素的邊框（border）是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。CSS border屬性允許規(guī)定元素邊框的樣式、寬度和顏色。2.2.2 CSS規(guī)則的定義表2-8邊框常用屬性屬性描述border簡寫屬性，用于把針對四個邊的屬性設(shè)置在一個聲明。border-style用于設(shè)置元素所有邊框的樣式，或者單獨地為各邊設(shè)置邊框樣式。border-width簡寫屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨地為各邊邊框設(shè)置寬度。border-color簡寫屬性，設(shè)置元素的所有邊框中可見部分

56、的顏色，或為 4 個邊分別設(shè)置顏色。border-bottom簡寫屬性，用于把下邊框的所有屬性設(shè)置到一個聲明中。border-left簡寫屬性，用于把左邊框的所有屬性設(shè)置到一個聲明中。border-right簡寫屬性，用于把右邊框的所有屬性設(shè)置到一個聲明中。border-top簡寫屬性，用于把上邊框的所有屬性設(shè)置到一個聲明中。2.1.7 HTML表單標(biāo)記4.CSS 外邊距外邊距位于邊框外側(cè)，即圍繞在元素邊框的空白區(qū)域。設(shè)置外邊距會在元素外創(chuàng)建額外的“空白”。 設(shè)置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位（像素、英寸、毫米或 em）、百分?jǐn)?shù)值甚至負(fù)值。2.1.7

57、 HTML表單標(biāo)記表2-9 CSS外邊距屬性屬性描述margin簡寫屬性。在一個聲明中設(shè)置所有外邊距屬性。margin-bottom設(shè)置元素的下外邊距。margin-left設(shè)置元素的左外邊距。margin-right設(shè)置元素的右外邊距。margin-top設(shè)置元素的上外邊距。2.1.7 HTML表單標(biāo)記margin具體用法和內(nèi)邊距相同，但margin可以設(shè)置為 auto。例如，設(shè)置頁面的上下外邊距為0，左右邊距為自動分配。body margin : 0 auto;注意：當(dāng)屬性值為0時，可以省略單位。例如：為 h1 元素的四個邊分別定義了不同的外邊距，所使用的長度單位是像素 (px)：h1 m

58、argin : 10px 0px 15px 5px;2.2.4 CSS屬性CSS屬性分為不同的類型，有字體屬性、背景屬性、文本屬性、邊框?qū)傩?、布局屬性、打印屬性、定位屬性等?背景屬性CSS 背景屬性既可以設(shè)置背景顏色，也可以設(shè)置背景圖片。2.2.4 CSS屬性表2-10 CSS背景常用屬性屬性屬性值描述background-attachmentscroll/fixed定義背景圖片是否跟隨滾動條一起移動，fixed表示背景圖片不動。background-color單詞/十六進(jìn)制數(shù)/rgb三種表示方法設(shè)置元素的背景顏色, 其默認(rèn)值是 transparent。background-image圖像的

59、URL把圖片設(shè)置為背景。background-position長度/百分比定義背景圖片的水平和垂直位置。background-repeatrepeat:水平垂直重復(fù)repeat-x：水平重復(fù)repeat-y：垂直重復(fù)no-repeat不重復(fù)定義背景圖片是否重復(fù)及如何重復(fù)。默認(rèn)平鋪滿。background以上5個屬性值簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中。2.2.4 CSS屬性（1）背景色可以使用 background-color 屬性為元素設(shè)置背景色。這個屬性接受任何合法的顏色值。條規(guī)則把元素的背景設(shè)置為灰色：p background-color: gray;（2）背景圖片把圖片當(dāng)作背景

60、，需要使用 background-image 屬性。background-image 屬性的默認(rèn)值是 none，表示背景上沒有放置任何圖片。設(shè)置一個背景圖片，必須為這個屬性指定一個 URL 值。例如，將img文件夾下的bg.jpg圖像作為網(wǎng)頁的背景圖像，圖像在水平和垂直方向重復(fù)。bodybackground-image:url(img/bg.jpg);background-repeat:repeat; 2.2.4 CSS屬性2.字體屬性CSS字體屬性定義文本的字體系列、大小、加粗、風(fēng)格（如斜體）和變形（如小型大寫字母），如果不設(shè)置字體屬性，字體屬性繼承父元素。2.2.4 CSS屬性表2-11