概述: Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目。 作用: 開發響應式的頁面 響應式:就是一個網站能夠兼容多個終端 節約開發成本,提高開發效率 入門: 下載BootStrap www.bootcss.com 官網地址 模版 1.導入BootStrap的css 2.導入jquery的js(1.8+) 3.導入BootStrap的js 4.設置視口(支持移動設備) <meta name="viewport" content="width=device-width, initial-scale=1"> 5.添加一個布局容器 通過div設置一個 class 方式1:class="container" 方式2:class="container-fluid" 核心: 全局CSS 設置全局 CSS 樣式；基本的 HTML 元素均可以通過 class 設置樣式並得到增強效果；還有先進的柵格系統。 媒體查詢(了解) 默認有一些分辨率臨界點的閥值 分辨率 屏幕大小 分辨率>=1200px 超大屏幕 992<=分辨率<1200 中等屏幕 768<=分辨率<992 小屏幕 分辨率<768 超小屏幕 柵格系統★ 在不同分辨率的屏幕下展示不同的效果,根據不同的上網設備,柵格系統將屏幕分成一系列的行(row)和列(column),由行和列來創建頁面布局,注意柵格系統必須放在布局容器內使用 行: 通過class = "row"來設置一行 列(最多將視口分為12列) 通過class屬性來設置在不同屏幕是所占的列 n表示每格占的份數 col-lg-n 大屏 分辨率>=1200 col-md-n 中屏 992<=分辨率<1200 col-sm-n 小屏 768<=分辨率<992px col-xs-n 超小屏 分辨率<768px 案例: <div class="container"> <div class=" col-md-2 col-sm-3 hidden-xs" style="border: solid 1px red;height: 20px;">1</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">2</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">3</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">4</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">5</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">6</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">7</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">8</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">9</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">10</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">11</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">12</div> </div> 響應式工具: 顯示: .visible-xs 超小屏可見 .visible-sm 小屏可見 .visible-md 中等屏幕可見 .visible-lg 大屏可見 隱藏: .hidden-xs 超小屏時隱藏 .hidden-sm 小屏幕時隱藏 .hidden-md 中等屏幕時隱藏 .hidden-lg 大屏幕時隱藏 標題: .h1 -- .h6 對齊方式:(文本) .text-left 左對齊 .text-center居中 .text-right 右對齊 列表: .list-unstyled 移除默認的列表樣式 .list-inline 將所有列表項放置同一行 表格:bootstrap給表格添加了默認樣式 .table 普通表格 .table-striped 條紋表格(IE8不支持) .table-bordered 邊框表格 .table-hover 帶有鼠標懸停的表格 .table-condensed 緊縮表格 表單: 垂直表單: 內聯表單:(將所有內容放在同一行) 水平表單: 按鈕:★ .btn 為按鈕添加基本樣式 .btn-default 默認/標准按鈕 .btn-primary 原始按鈕樣式（未被操作） .btn-success 表示成功的動作 .btn-info 該樣式可用於要彈出信息的按鈕 圖片: .img-rounded 為圖片添加圓角 (IE8 不支持) .img-circle 將圖片變為圓形 (IE8 不支持) .img-responsive 圖片響應式 組件 無數可復用的組件，包括字體圖標、下拉菜單、導航、警告框、彈出框等更多功能。 下拉選: 導航條: javaScript插件 jQuery 插件為 Bootstrap 的組件賦予了“生命”。可以簡單地一次性引入所有插件，或者逐個引入到你的頁面中。 圖片輪播 綜合案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script> $(function() { $('.carousel').carousel({ interval: 1000 }) }); </script> </head> <body> <div class="container"> <!--1.topbar--> <div class="row text-center"> <!--img1:中等屏幕時占4份,在小屏時占6份,在超小屏時占12份 img2:中等屏幕時占4份,在小屏時隱藏,在超小屏時占12份 超鏈接:中等屏幕時占4份,在小屏時占6份,在超小屏時占12份--> <div class="col-md-4 col-sm-6"> <img src="img/logo2.png" /> </div> <div class="col-md-4 hidden-sm"> <img src="img/header.jpg" /> </div> <div class="col-md-4 col-sm-6 text-center" style="padding-top: 20px;"> <a href="#" class="btn btn-default">登錄</a> <a href="#" class="btn btn-default">登錄</a> <a href="#" class="btn btn-default">登錄</a> </div> </div> <!--2.導航條--> <div class="row"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">首頁</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">手機數碼 <span class="sr-only">(current)</span></a> </li> <li> <a href="#">電腦辦公</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li> <a href="#">Separated link</a> </li> <li role="separator" class="divider"></li> <li> <a href="#">One more separated link</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> </div> <!--3.輪播圖--> <div class="row"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="./img/1.jpg" alt="..."> <div class="carousel-caption"> 歡迎你... </div> </div> <div class="item"> <img src="./img/2.jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="./img/3.jpg" alt="..."> <div class="carousel-caption"> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <!--4.熱門商品--> <div class="row"> <div> <span class="h2">熱門商品</span><img src="img/title2.jpg" /> </div> <!--下div: 左div:中等屏幕時占2份,小屏和超小屏隱藏 圖片 右div:中等屏幕時占10份,小屏和超小屏占12份 middle div:中等屏幕時占6份,小屏和超小屏隱藏 圖片 商品div:中等屏幕時占2份,小屏占4份,超小屏時占6份 圖片 2個p標簽--> <div class="row"> <!--左div:中等屏幕時占2份,小屏和超小屏隱藏 圖片--> <div class="col-md-2 hidden-sm hidden-xs"> <img src="img/big01.jpg" width="100%" height="100%" /> </div> <!--右div:中等屏幕時占10份,小屏和超小屏占12份 --> <div class="col-md-10"> <!--middle div:中等屏幕時占6份,小屏和超小屏隱藏 圖片--> <div class="col-md-6 hidden-sm hidden-xs"> <img src="img/middle01.jpg" width="100%" height="180px" /> </div> <!--商品div:中等屏幕時占2份,小屏占4份,超小屏時占6份 圖片 2個p標簽--> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> </div> </div> </div> <!--5.圖片--> <div class="row"> <img src="img/ad.jpg" width="100%" /> </div> <!--6.熱門商品--> <div class="row"> <div> <span class="h2">熱門商品</span><img src="img/title2.jpg" /> </div> <!--下div: 左div:中等屏幕時占2份,小屏和超小屏隱藏 圖片 右div:中等屏幕時占10份,小屏和超小屏占12份 middle div:中等屏幕時占6份,小屏和超小屏隱藏 圖片 商品div:中等屏幕時占2份,小屏占4份,超小屏時占6份 圖片 2個p標簽--> <div class="row"> <!--左div:中等屏幕時占2份,小屏和超小屏隱藏 圖片--> <div class="col-md-2 hidden-sm hidden-xs"> <img src="img/big01.jpg" width="100%" height="100%" /> </div> <!--右div:中等屏幕時占10份,小屏和超小屏占12份 --> <div class="col-md-10"> <!--middle div:中等屏幕時占6份,小屏和超小屏隱藏 圖片--> <div class="col-md-6 hidden-sm hidden-xs"> <img src="img/middle01.jpg" width="100%" height="180px" /> </div> <!--商品div:中等屏幕時占2份,小屏占4份,超小屏時占6份 圖片 2個p標簽--> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> </div> </div> </div> <!--7.圖片--> <div class="row"> <img src="img/footer.jpg" width="100%" /> </div> <!--8--> <div class="row text-center"> <p> <ol class="list-unstyled list-inline"> <li><a href="#">聯系我們</a></li> <li><a href="#">聯系我們</a></li> <li><a href="#">聯系我們</a></li> <li><a href="#">聯系我們</a></li> <li><a href="#">聯系我們</a></li> <li><a href="#">聯系我們</a></li> </ol> </p> <p>Copyright © 2005-2016 版權所有</p> </div> </div> </body> </html> 案例-將我們的項目發布出去 需求分析: 將我們編寫好的(web項目)項目放到服務器上,這樣以來用戶就可以通過網絡訪問到我們的(web項目)項目了 技術分析: web服務器 web項目 Http協議 ////////////////////////// http://localhost/webDemo/html/hello.html get /////////////////// day33HTTP&Tomcat - Web服務器 - 概念: - web資源: "英文直譯"網"的意思 資源:一切數據文件 web資源:通過網絡可以訪問到的資源,通常指的是一切放在服務器上的文件" - web資源的分類: - 靜態的web資源: " 內容是一成不變的" - 動態的web資源: " 內容有可能在不同的時間或者不同的人訪問的時候會發生改變的" - web技術分類 - 靜態的web技術 " 例如: html css js ....." - 動態的web技術 " 例如:servlet jsp" - 軟件的架構 - c/s架構(Client/Server 客戶端/服務器) " 例如:qq 迅雷 lol" - b/s架構(Browser/Server 瀏覽器/服務器) " 例如:京東 淘寶 " - 區別 - c/s:需要客戶下載客戶端,頁面比較炫,和服務器交互少,可以在客戶端處理部分業務邏輯,可降低服務器的壓力.需要維護客戶端和服務器端 - b/s:只需要客戶有一個瀏覽器,一切頁面從服務器加載,和服務器交互頻繁,由服務器處理業務邏輯,服務器壓力較大.只需要維護服務器端. - 通訊機制 - 基於http協議 - 瀏覽器發送給服務器的內容:請求(request) - 服務器返回給瀏覽器的內容:響應(response) - 注意:先有請求,后有響應,一次請求對應一次響應 - web服務器 - 作用:將我們編寫好的網頁發布出去,別人就可以通過網絡訪問 - 常見的web服務器 "名稱 廠商 特點 Weblogic oracle 大型的收費的支持javaEE所有規范的web服務器(servlet和jsp) websphere ibm 大型的收費的支持javaEE所有規范的web服務器(servlet和jsp) tomcat apache 小型的免費的支持servlet和jsp規范的"web服務器"" - Tomcat服務器★ Tomcat如何優化? 1: 優化連接配置.修改連接數,關閉客戶端的dns查詢(DNS查詢需要占用網絡，再獲取對方ip的時候會消耗一定的時間) 2: 優化jdk,擴大tomcat使用的內存,默認為128M - 下載 - http://tomcat.apache.org/download-70.cgi - core: - zip:可以在window上運行的(我們今天使用) - tar.gz:運行在linux上的 - 安裝 - 解壓縮即可 - 目錄結構 - bin:存放可執行的文件 - ★conf:存放配置文件 - lib:存放的是tomcat運行時和項目運行時必須的jar包 - logs:存放的是日志文件(catalina.out) - temp:存放臨時文件(不用管) - ★★webapps:存放要發布的web項目 - ★work:存放項目運行時產生的java文件和class文件 - 啟動 " 雙擊 tomcat目錄下/bin/startup.bat" - 關閉 " 方式1:點 x 方式2:ctrl + c (記住)方式3:雙擊 tomcat目錄下/bin/shutdown.bat" - 配置 - 常見問題 - 一閃而過 "查看JAVA_HOME是否配置正確" - 端口占用: 可以修改Tomcat的端口號 "修改 tomcat目錄下/conf/server.xml 大約70行 <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" /> 需要將 8080 修改成其他的端口號 端口號:0~65535 0~1024:系統預留的端口號 一般不要使用 但是可以使用80端口 80端口是http協議的默認端口號,訪問的時候可以不寫端口號" - 訪問格式 - tomcat的訪問路徑(8080是tomcat的默認的端口號) " http://localhost:8080" - 格式:http://ip地址:端口號/項目名/資源?參數名稱=值&參數名稱=值 - web項目 - 目錄結構:★ "myweb(目錄名:項目名) | |---資源文件 html img css js |---WEB-INF(目錄:特點,通過瀏覽器直接訪問不到) | | | |---lib(目錄:項目運行的jar包) | |---classes(目錄:存放的class文件) | |---web.xml(核心配置文件,在servlet2.5版本中必須有,serlvet3.0版本不是必須的)" - 項目訪問路徑: "http://localhost:80/myweb/1.html 協議://ip地址:端口/項目名稱/資源" - Tomcat和Eclipse整合 - Http協議: - 協議:規定內容的傳輸的格式 - http協議: "用來制定互聯網上數據的傳輸格式" - 包含: - 瀏覽器發送給服務器的內容 請求 "規定請求數據的格式" - 服務器返回給瀏覽器的內容 響應 "規定響應數據的格式" - 請求的格式: "請求行 請求頭 請求體" - 請求行:請求的第一行 - 格式:請求方式 請求資源 協議/版本 "例如: GET /day33/1.html HTTP/1.1" - 請求方式: "常見的兩種 get和post get請求:請求參數會在地址欄上顯示,參數大小有限制,不安全 http://ip地址:端口號/項目名/資源?參數名稱=值&參數名稱=值 post請求:請求參數不在地址欄上顯示,參數大小不受限制.較為安全 格式: 參數名稱=值&參數名稱=值" - 請求頭 - 格式: key/value的格式 (value可以為多個值的) - 常見的請求頭 - Accept: text/html,image/* --支持數據類型 - Accept-Charset: ISO-8859-1 --字符集 - Accept-Encoding: gzip --支持壓縮 - Accept-Language:zh-cn --語言環境 - Host: www.baidu.cn:80 --訪問主機 - If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT --緩存文件的最后修改時間 - Referer: http://www.baidu.com/index.jsp --來自哪個頁面、防盜鏈 - User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) "擴展知識: Trident內核代表產品Internet Explorer，又稱其為IE內核 Gecko內核代表作品Mozilla FirefoxGecko,火狐 Chrome內核代表作品Chrome,谷歌" - Cookie - Connection: close/Keep-Alive --鏈接狀態 - 重要的頭: - Referer User-Agent Cookie If-Modified-Since - 請求體 "和請求頭之間有一個空行 post請求的參數:只有表單提交的時候明確了method="post"這時候是post請求,其他的都是get請求 參數名稱=值&參數名稱=值 username=jack&password=1234" - 響應的格式: "響應行 響應頭 響應體" - 響應行:響應信息的第一行 - 格式: - 協議/版本 響應的狀態碼 狀態碼說明 - 例如: - HTTP/1.1 200 OK - 狀態碼: - 1xx :請求已發送 - 2xx :響應已完成 - 200:響應成功(請求成功) - 3xx :需要瀏覽器進一步操作才可以完成 - 302:重定向(配合location頭使用) - 304:讀緩存(Not Modified表示沒有改變) - 4xx :用戶訪問錯誤(Not Found 表示:路徑寫錯了,你訪問的路徑不存在) - 404:用戶訪問的資源不存在 - 5xx :服務器內部錯誤(其實就是代碼有問題,改代碼) - 500:服務器內部異常 - 響應頭 - 格式: key/value的格式 (value可以為多個值的) - 常見的響應頭 - Location: http://www.it315.org/index.jsp --跳轉方向 - Server:apache tomcat --服務器型號 - Content-Encoding: gzip --數據壓縮 - Content-Length: 80 --數據長度 - Content-Language: zh-cn --語言環境 - Content-Type: text/html; charset=GB2312 --數據類型(MIME類型) 大類型/小類型 text/css text/javascript image/jpeg image/bmp - Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT --最后修改時間 - Refresh: 1;url=http://www.it315.org --定時刷新 - Content-Disposition: attachment; filename=aaa.zip --下載 - Set-Cookie:SS=Q0=5Lb_nQ; path=/search - Expires: -1 --緩存 - Cache-Control: no-cache --緩存 - Pragma: no-cache --緩存 - Connection:Keep-Alive --連接 - 重點的頭: - Set-Cookie Location Content-Type Refresh Content-Disposition Last-Modified - 響應體 "和響應頭之間有一個空行, 瀏覽器解析的內容" - servlet入門: "本質上就是一個運行在服務器上的類" - 作用:1.接受請求 2.調用Service 處理業務邏輯 3.生成響應結果 - 入門步驟: - 1.編寫一個類 - 必須實現Servlet接口 - 重寫里面的方法 - 2.編寫配置文件(項目下 web-inf/web.xml) "注冊servlet 綁定路徑 <!-- 注冊servlet servlet-name:給servlet起個名稱 名稱自定義,保證唯一 servlet-class:serlvet的全限定名(包名+類名) --> <servlet> <servlet-name>helloservlet</servlet-name> <servlet-class>cn.baidu.demo.HelloServlet</servlet-class> </servlet> <!-- 綁定路徑 servlet-name:在servlet標簽中給servlet起好的名稱 url-pattern:路徑 暫時都以"/"開頭 --> <servlet-mapping> <servlet-name>helloservlet</servlet-name> <url-pattern>/hello</url-pattern> </servlet-mapping>" - 3.測試 " localhost/項目名/綁定的路徑 localhost/day33/hello" 在服務器中,為什么需要項目部署? 為了讓網絡通過服務器訪問到項目 回顧: tomcat服務器和Http協議: web服務器: 概念: web資源: web資源分類: 靜態的web資源:內容一層不變 動態的web資源:根據不同的人和不同的時間,可能會發生變化 web技術: 靜態的web技術:html css js... 動態的web技術:Servlet jsp 結構: B/S(瀏覽器/服務器): C/S(客戶端/服務器): 通訊機制: 基於HTTP協議 一次請求一次響應,先有請求后有響應 web服務器: Tomcat: 下載: 安裝: 目錄結構: bin: conf: webapps: work: 啟動: bin/startup.bat 關閉: X ctrl + c ★ bin/shutdown.bat 訪問: 協議://地址:端口/資源 web項目: 項目名稱: |-------html |-------css |-------js |-------img |-------WEB-INF |-----------lib |-----------classes |-----------web.xml http: 請求:瀏覽器發送給服務器的內容(request) 請求行 請求信息的第一行 請求方式 請求的資源 協議/版本 http/1.0 http/1.1 請求頭 格式: key/value (value可以為多個值) 請求體 當請求是post的時候,存放post請求所攜帶的參數 響應:服務器返回給瀏覽器的內容(response) 響應行 響應信息的第一行 協議/版本 狀態碼 說明 響應頭 格式: key/value (value可以為多個值) 響應體 瀏覽器解析的內容 //////////////////////////////////////////// servlet: 案例-使用servlet完成用戶登錄功能 需求分析: 用戶在表單中填寫完用戶名和密碼后,點擊登錄的時候,向服務器發送登錄的請求, 在服務器上處理請求,處理完畢后將處理信息響應到頁面 處理結果: 登錄成功:歡迎...登錄... 登錄失敗:用戶名或密碼錯誤 異常:當前功能正在維護.... 技術分析: html:表單 form action:提交路徑 method:提交方式 get post servlet: request response //////////////// 項目: com.baidu.web com.baidu.service com.baidu.dao com.baidu.domain com.baidu.utils 導入jar包 導入工具類