整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML 是一種描述網(wǎng)頁(yè)語(yǔ)言， 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)。其中，超文本指的是網(wǎng)頁(yè)上可以包含圖片，視頻，連接信息。標(biāo)記也叫做標(biāo)簽，所以標(biāo)簽書寫的是<內(nèi)容>。語(yǔ)言就是一種交流工具，HTML 是用戶與瀏覽器之間交互工具。
簡(jiǎn)單說(shuō)，HTML 是由瀏覽器解析執(zhí)行的，它不會(huì)將 HTML 標(biāo)簽展示出來(lái)，而是會(huì)解析 HTML 標(biāo)簽，以特定效果展示出來(lái)。
<html>
<head>HEAD</head>
<body>BODY</body>
</html>可以使用 JetBrains WebStorm 或者 VS Code 進(jìn)行開(kāi)發(fā)。
<html> 代表當(dāng)前書寫的是一個(gè) HTML 文檔
<head> 存儲(chǔ)的本頁(yè)面的一些重要的信息，它不會(huì)顯示
標(biāo)簽下有一個(gè)子標(biāo)簽 <title> 它是用于定義頁(yè)面的標(biāo)題的
<body> 書寫的內(nèi)容會(huì)顯示出來(lái)，屬性：1. text 用于設(shè)置文字顏色；2. bgcolor 用于設(shè)置頁(yè)面的背景色；3. background 用于設(shè)置頁(yè)面的背景圖片
<!-- 注釋不會(huì)在瀏覽器中顯示 -->
br 標(biāo)簽就是一個(gè)換行功能標(biāo)簽
在 p 標(biāo)簽中的內(nèi)容會(huì)在開(kāi)始與結(jié)束之間產(chǎn)生一個(gè)空白行并且它會(huì)自動(dòng)換行
常用屬性 align 的作用是設(shè)置段落中的內(nèi)容對(duì)齊方式，可取值有 left right center
hr 標(biāo)簽會(huì)在頁(yè)面上產(chǎn)生一個(gè)水平線
常用屬性：
align：可取值有 left right center 代表水平線位置
size：代表水平線高度（厚度）
width：代表水平線寬度
color：水平線的顏色
兩種方式:
Div 是一個(gè)塊標(biāo)簽
Div 與 CSS 結(jié)合，會(huì)更好對(duì)頁(yè)面進(jìn)行排版
Span 標(biāo)簽也是一個(gè)塊標(biāo)簽Div 與 span 區(qū)別：Div 會(huì)自動(dòng)換行，我們也叫這樣的標(biāo)簽為行級(jí)元素Span 標(biāo)簽它不會(huì)自動(dòng)換行，我們也叫它為行內(nèi)元素
Font 標(biāo)簽可以設(shè)置字體，字的大小及顏色
常用屬性：
Face：用于設(shè)置字體，例如 宋體 隸書 楷體
Size：用于設(shè)置字的大小
Color：用于設(shè)置字的顏色
我們所看到的屏幕上所有的顏色都是由紅、綠、藍(lán)這三種基色調(diào)混合而成的。每一種顏色的飽和度和透明度都是可以變化的，用 0～255 的數(shù)值來(lái)表示。如純紅色表示為 (255，0，0)，十六進(jìn)制表示為 #FF0000。按這種表達(dá)方式，理論上我們可以得到 256 * 256 *256=16777216 種顏色。
<h1> 最大 <h6> 最小，它們代表的是標(biāo)題，可以使用 <b> <i> 對(duì)文字設(shè)置加粗或傾斜
注意：在 HTML 中允許標(biāo)簽進(jìn)行嵌套的，但是一般都包裹嵌套，而不可以進(jìn)行交叉嵌套
有序清單：
<!-- 有序列表 I II III-->
<ol type="I" start="3">
<li>張三</li>
<li>李四</li>
<li>王五</li>
</ol>
<!-- 無(wú)序列表 -->
<ul type="square">
<li>Java</li>
<li>Python</li>
<li>C#</li>
</ul><img> 可以讓我們?cè)诰W(wǎng)頁(yè)引入一張圖片
常用屬性
<a> 標(biāo)簽可以實(shí)現(xiàn)跳轉(zhuǎn)到其它頁(yè)面操作。超鏈接內(nèi)容不僅可以是文本，也可以是圖片等信息
常用屬性
<!-- 學(xué)習(xí)表格標(biāo)簽 -->
<table border="2" align="center" width="400px">
<caption>學(xué)生成績(jī)單</caption>
<tr>
<th>姓名</th>
<th>語(yǔ)文成績(jī)</th>
<th>數(shù)學(xué)成績(jī)</th>
<td colspan="2" align="center"><b>操作</b></td>
</tr>
<tr align="center">
<td>張三</td>
<td>99</td>
<td>100</td>
<td>修改</td>
<td>刪除</td>
</tr>
<tr align="center">
<td>李四</td>
<td>90</td>
<td>66</td>
<td>修改</td>
<td>刪除</td>
</tr>
</table>通過(guò)表單可以將要提交的數(shù)據(jù)提交到指定的位置
<!-- 表單：用戶注冊(cè)案例 -->
<form name="form1" action="user/login" method="POST">
<table border="1" width="64%" align="center">
<tr>
<td>用戶名：</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>密碼：</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex" >女
</td>
</tr>
<tr>
<td>地址：</td>
<td>
<select name="province">
<option value="0">--請(qǐng)選擇省--</option>
<option value="10001">廣東</option>
<option value="10002">上海</option>
<option value="10003">山東</option>
</select> 省
<select name="city">
<option>--請(qǐng)選擇市--</option>
<option value="1000301">廣州市</option>
<option>深圳市</option>
<option>東莞市</option>
</select> 市
</td>
</tr>
<tr>
<td>編程語(yǔ)言：</td>
<td>
<input type="checkbox" name="language" checked="checked">Java
<input type="checkbox" name="language">Python
<input type="checkbox" name="language">Go
</td>
</tr>
<tr>
<td>照片：</td>
<td>
<input type="file" name="image">
</td>
</tr>
<tr>
<td>自我介紹：</td>
<td>
<textarea name="remark" rows="5" cols="100"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注冊(cè)">
<input type="reset" value="取消">
</td>
</tr>
</table>
</form>通過(guò)框架標(biāo)簽可以定制 HTML 頁(yè)面布局
在 HTML 頁(yè)面上去描述框架信息時(shí)，不可以將 <frameset> 寫在 <body> 標(biāo)簽中
framesetTest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 框架標(biāo)簽</title>
</head>
<!-- rows 定義了三行：第一行 100 像素，第三行：100 像素；第二行：剩下的像素 -->
<frameset rows="100, * , 100">
<frame name="topModule" src="./top.html"></frame>
<frameset cols="100, * ">
<frame name="menuModule" src="./menu.html"></frame>
<frame name="contentModule" src="./content.html"></frame>
</frameset>
<frame name="footModule" src="./foot.html"></frame>
</frameset>
</html>top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>top</title>
</head>
<body>
<div>頭部信息</div>
</body>
</html>foot.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>footL</title>
</head>
<body>
<div>底部信息</div>
</body>
</html>menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>menu</title>
</head>
<body>
<div>菜單信息</div>
</body>
</html>content.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>content</title>
</head>
<body>
<div>內(nèi)容顯示區(qū)</div>
</body>
</html><meta> 標(biāo)簽必須寫在 <head> 標(biāo)簽之間
使用 link 標(biāo)簽來(lái)導(dǎo)入 CSS
詳情查看菜鳥(niǎo)教程：https://www.runoob.com/charsets/ref-html-ascii.html
DOM, Document Object Model -- 文檔對(duì)象模型，是 HTML 和 XML 文檔的編程接口，以樹(shù)結(jié)構(gòu)表達(dá) HTML 文檔。
DOM 是 W3C（萬(wàn)維網(wǎng)聯(lián)盟）的標(biāo)準(zhǔn)。
DOM 定義了訪問(wèn) HTML 和 XML 文檔的標(biāo)準(zhǔn)。
W3C DOM 標(biāo)準(zhǔn)被分為 3 個(gè)不同的部分：
DOM 是被視為節(jié)點(diǎn)樹(shù)的 HTML。
根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：
HTML DOM 將 HTML 文檔視作樹(shù)結(jié)構(gòu)，這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹(shù)。
節(jié)點(diǎn)樹(shù)中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系。常用父（parent）、子（child）和同胞（sibling）等術(shù)語(yǔ)來(lái)描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級(jí)的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）。
HTML DOM 方法是可以在節(jié)點(diǎn)（HTML 元素）上執(zhí)行的動(dòng)作。
HTML DOM 屬性是可以在節(jié)點(diǎn)（HTML 元素）設(shè)置和修改的值。
可通過(guò) JavaScript （以及其他編程語(yǔ)言）對(duì) HTML DOM 進(jìn)行訪問(wèn)。所有 HTML 元素被定義為對(duì)象，而編程接口則是對(duì)象方法和對(duì)象屬性。方法是能夠執(zhí)行的動(dòng)作（比如添加或修改元素）。屬性是能夠獲取或設(shè)置的值（比如節(jié)點(diǎn)的名稱或內(nèi)容）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
</head>
<body>
<div id="div1">
<p id="p1">Hello</p>
<p id="p2">Hello</p>
</div>
<script>
// 先獲取 P 元素
var element = document.getElementById("p1")
// 直接修改 p 元素的內(nèi)容
element.innerHTML = "此時(shí)已是修改后的內(nèi)容"
// 修改 p2 標(biāo)簽的樣式
var ele = document.getElementById("p2")
ele.style.color="blue"
ele.style.fontFamily="宋體"
ele.style.fontSize="larger"
// 添加元素
// 創(chuàng)建一個(gè)p元素
var elementP = document.createElement("p")
// 創(chuàng)建一個(gè)內(nèi)容
var nodeText = document.createTextNode("新加的 P 元素")
// 把文字內(nèi)容添加到p元素中
elementP.appendChild(nodeText)
// 把新創(chuàng)建的p元素添加div1元素中
var div1 = document.getElementById("div1")
div1.appendChild(elementP)
// 插入添加新的元素
// 創(chuàng)建一個(gè)新的元素
var eleP = document.createElement("p")
// 創(chuàng)建一個(gè)內(nèi)容
var noText = document.createTextNode("在 P1 元素前添加的新元素")
// 把文字內(nèi)容添加到 p 元素中
eleP.appendChild(noText)
// 把新創(chuàng)建的 p 元素添加 div 1 元素中
var parentDiv1 = document.getElementById("div1")
// 獲取指定被添加的元素
var p1 = document.getElementById("p1")
// 在元素前添加；參數(shù)說(shuō)明：1.要添加的元素；2.在那個(gè)元素之前添加（指定一個(gè)元素）
parentDiv1.insertBefore(eleP, p1)
// 刪除元素
// 獲取父元素
var pdiv1 = document.getElementById("div1")
var removep1 = document.getElementById("p1")
// 使用父元素刪除該元素
pdiv1.removeChild(removep1)
</script>
</body>
</html>HTML DOM 允許 JavaScript 對(duì) HTML 事件作出反應(yīng)。當(dāng)事件發(fā)生時(shí)，可以執(zhí)行 JavaScript，比如發(fā)生用戶點(diǎn)擊一個(gè) HTML 元素的事件。
如需在用戶點(diǎn)擊某個(gè)元素時(shí)執(zhí)行代碼，可以把 JavaScript 代碼添加到 HTML 事件屬性中：onclick=JavaScript
HTML 事件的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM 事件</title>
<!-- JavaScript 代碼必須寫在 script 中 -->
<script>
function onLoadFun(){
alert("已載入...");
}
// 文本框失去焦點(diǎn)事件
function onBlurFun(){
alert("此方法是文本框失去焦點(diǎn)事件，用來(lái)校驗(yàn)此文本框輸入數(shù)據(jù)的")
}
// 表單被提交時(shí)執(zhí)行事件
function onSubmitFun(){
alert("此表單已提交，這個(gè)方法也可以來(lái)作為數(shù)據(jù)校驗(yàn)的");
}
// 元素被改變時(shí)觸發(fā)事件
function onChangeFun(){
alert("文本框元素已輸入新的數(shù)據(jù)")
}
// 當(dāng)鼠標(biāo)懸停在某一個(gè)元素上時(shí)執(zhí)行的方法
function onMouseOverFun(element){
element.innerHTML = "鼠標(biāo)已停在H1元素上了"
}
// 當(dāng)鼠標(biāo)離開(kāi)某一個(gè)元素時(shí)執(zhí)行事件
function onMouseOutFun(element){
element.innerHTML = "鼠標(biāo)已離開(kāi)H1元素上了..."
}
</script>
</head>
<!-- 需求：當(dāng)頁(yè)面被載入時(shí)，執(zhí)行一個(gè)代碼，彈框提示已載入 -->
<body onload="onLoadFun()">
<!-- 需求：在一個(gè)表單中有用戶名錄入的文本框，當(dāng)輸入完文本框的時(shí)候進(jìn)行名稱校驗(yàn)，提交的時(shí)候彈框顯示 -->
<form onsubmit="onSubmitFun()">
用戶名：<input id="username" name="username" onchange="onChangeFun()" >
<br/>
<button type="submit">提交</button>
</form>
<!-- 需求：有一個(gè) H1 標(biāo)簽元素，當(dāng)鼠標(biāo)移動(dòng)到 H1 元素上時(shí)，修改文字，當(dāng)鼠標(biāo)移出元素時(shí)執(zhí)行事件 -->
<h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一個(gè)標(biāo)題</h1>
</body>
</html>想了解更多，歡迎關(guān)注我的微信公眾號(hào)：Renda_Zhang
今日內(nèi)容：
1. Servlet
2. HTTP協(xié)議
3. Request
一、Servlet補(bǔ)充內(nèi)容：
1.1 Servlet的體系結(jié)構(gòu)：
Servlet -- 接口
|
GenericServlet -- 抽象類
|
HttpServlet -- 抽象類
1.2 GenericServlet：將Servlet接口中其他的方法做了默認(rèn)空實(shí)現(xiàn)，只將service()方法作為抽象，將來(lái)定義Servlet類時(shí)，可以繼承GenericServlet，實(shí)現(xiàn)service()方法即可
1.3 HttpServlet：對(duì)http協(xié)議的一種封裝，簡(jiǎn)化操作
1. 定義類繼承HttpServlet
2. 復(fù)寫doGet/doPost方法
1.2 Servlet相關(guān)配置
1.2.1 urlpartten:Servlet訪問(wèn)路徑
1. 一個(gè)Servlet可以定義多個(gè)訪問(wèn)路徑 ： @WebServlet({"/d4","/dd4","/ddd4"})
2. 路徑定義規(guī)則：
1. /xxx：路徑匹配
2. /xxx/xxx:多層路徑，目錄結(jié)構(gòu)
3. *.do：擴(kuò)展名匹配
二、HTTP：
2.1 概念：Hyper Text Transfer Protocol 超文本傳輸協(xié)議
* 傳輸協(xié)議：定義了，客戶端和服務(wù)器端通信時(shí)，發(fā)送數(shù)據(jù)的格式
* 特點(diǎn)：
1. 基于TCP/IP的高級(jí)協(xié)議
2. 默認(rèn)端口號(hào):80
3. 基于請(qǐng)求/響應(yīng)模型的:一次請(qǐng)求對(duì)應(yīng)一次響應(yīng)
4. 無(wú)狀態(tài)的：每次請(qǐng)求之間相互獨(dú)立，不能交互數(shù)據(jù)
* 歷史版本：
* 1.0：每一次請(qǐng)求響應(yīng)都會(huì)建立新的連接
* 1.1：復(fù)用連接
2.2 請(qǐng)求消息數(shù)據(jù)格式
2.2.1 請(qǐng)求行：
請(qǐng)求方式 請(qǐng)求url 請(qǐng)求協(xié)議/版本
GET /login.html HTTP/1.1
2.2.2 請(qǐng)求方式：
* HTTP協(xié)議有7中請(qǐng)求方式，常用的有2種
* GET：
1. 請(qǐng)求參數(shù)在請(qǐng)求行中，在url后。
2. 請(qǐng)求的url長(zhǎng)度有限制的
3. 不太安全
* POST：
1. 請(qǐng)求參數(shù)在請(qǐng)求體中
2. 請(qǐng)求的url長(zhǎng)度沒(méi)有限制的
3. 相對(duì)安全
2.2.3 請(qǐng)求頭：客戶端瀏覽器告訴服務(wù)器一些信息
請(qǐng)求頭名稱: 請(qǐng)求頭值
* 常見(jiàn)的請(qǐng)求頭：
1. User-Agent：瀏覽器告訴服務(wù)器，我訪問(wèn)你使用的瀏覽器版本信息
* 可以在服務(wù)器端獲取該頭的信息，解決瀏覽器的兼容性問(wèn)題
2. Referer：http://localhost/login.html
* 告訴服務(wù)器，我(當(dāng)前請(qǐng)求)從哪里來(lái)？
* 作用：
1. 防盜鏈：
2. 統(tǒng)計(jì)工作：
2.2.4 請(qǐng)求空行
空行，就是用于分割POST請(qǐng)求的請(qǐng)求頭，和請(qǐng)求體的。
2.2.5 請(qǐng)求體(正文)：
* 封裝POST請(qǐng)求消息的請(qǐng)求參數(shù)的
2.2.6 請(qǐng)求消息舉例：
POST /login.html HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
Accept-Encoding: gzip, deflate
Referer: http://localhost/login.html
Connection: keep-alive
Upgrade-Insecure-Requests: 1
username=zhangsan
三、Request：
3.1 request對(duì)象和response對(duì)象的原理
1. request和response對(duì)象是由服務(wù)器創(chuàng)建的。我們來(lái)使用它們
2. request對(duì)象是來(lái)獲取請(qǐng)求消息，response對(duì)象是來(lái)設(shè)置響應(yīng)消息
3.2 request對(duì)象繼承體系結(jié)構(gòu)：
ServletRequest -- 接口
| 繼承
HttpServletRequest -- 接口
| 實(shí)現(xiàn)
org.apache.catalina.connector.RequestFacade 類(tomcat)
3.3 request功能：
3.3.1 獲取請(qǐng)求消息數(shù)據(jù)
1. 獲取請(qǐng)求行數(shù)據(jù)
* GET /day14/demo1?name=zhangsan HTTP/1.1
* 方法：
1. 獲取請(qǐng)求方式 ：GET
* String getMethod()
2. (*)獲取虛擬目錄：/day14
* String getContextPath()
3. 獲取Servlet路徑: /demo1
* String getServletPath()
4. 獲取get方式請(qǐng)求參數(shù)：name=zhangsan
* String getQueryString()
5. (*)獲取請(qǐng)求URI：/day14/demo1
* String getRequestURI(): /day14/demo1
* StringBuffer getRequestURL() :http://localhost/day14/demo1
* URL:統(tǒng)一資源定位符 ： http://localhost/day14/demo1
* URI：統(tǒng)一資源標(biāo)識(shí)符 : /day14/demo1
6. 獲取協(xié)議及版本：HTTP/1.1
* String getProtocol()
7. 獲取客戶機(jī)的IP地址：
* String getRemoteAddr()
2. 獲取請(qǐng)求頭數(shù)據(jù)
* 方法：
* (*)String getHeader(String name):通過(guò)請(qǐng)求頭的名稱獲取請(qǐng)求頭的值
* Enumeration<String> getHeaderNames():獲取所有的請(qǐng)求頭名稱
3. 獲取請(qǐng)求體數(shù)據(jù):
* 請(qǐng)求體：只有POST請(qǐng)求方式，才有請(qǐng)求體，
在請(qǐng)求體中封裝了POST請(qǐng)求的請(qǐng)求參數(shù)
* 步驟：
1. 獲取流對(duì)象
* BufferedReader getReader()：獲取字符輸入流，只能操作字符數(shù)據(jù)
* ServletInputStream getInputStream()：獲取字節(jié)輸入流，可以操作所有類型數(shù)據(jù)
2. 再?gòu)牧鲗?duì)象中拿數(shù)據(jù)
3.3.2 其他功能：獲取請(qǐng)求參數(shù)通用方式：不論get還是post請(qǐng)求方式都可以使用下列方法來(lái)獲取請(qǐng)求參數(shù)：
1. String getParameter(String name):根據(jù)參數(shù)名稱獲取值 username=zs
2. String[] getParameterValues(String name):根據(jù)參數(shù)名稱獲取參數(shù)值的數(shù)組 hobby=xx&hobby=game
3. Enumeration<String> getParameterNames():獲取所有請(qǐng)求的參數(shù)名稱
4. Map<String,String[]> getParameterMap():獲取所有參數(shù)的map集合
* 中文亂碼問(wèn)題：
* get方式：tomcat 8 已經(jīng)將get方式亂碼問(wèn)題解決了
* post方式：會(huì)亂碼
* 解決：在獲取參數(shù)前，設(shè)置request的編碼為
request.setCharacterEncoding("utf-8");
3.3.3 請(qǐng)求轉(zhuǎn)發(fā)：一種在服務(wù)器內(nèi)部的資源跳轉(zhuǎn)方式
1. 步驟：
1. 通過(guò)request對(duì)象獲取請(qǐng)求轉(zhuǎn)發(fā)器對(duì)象：
RequestDispatcher getRequestDispatcher(String path)
2. 使用RequestDispatcher對(duì)象來(lái)進(jìn)行轉(zhuǎn)發(fā)：
forward(ServletRequest request, ServletResponse response)
2. 特點(diǎn)：
1. 瀏覽器地址欄路徑不發(fā)生變化
2. 只能轉(zhuǎn)發(fā)到當(dāng)前服務(wù)器內(nèi)部資源中。
3. 轉(zhuǎn)發(fā)是一次請(qǐng)求
3.3.4. 共享數(shù)據(jù)：
* 域?qū)ο螅阂粋€(gè)有作用范圍的對(duì)象，可以在范圍內(nèi)共享數(shù)據(jù)
* request域：代表一次請(qǐng)求的范圍，一般用于請(qǐng)求轉(zhuǎn)發(fā)的多個(gè)資源中共享數(shù)據(jù)
* 方法：
1. void setAttribute(String name,Object obj):存儲(chǔ)數(shù)據(jù)
2. Object getAttitude(String name):通過(guò)鍵獲取值
3. void removeAttribute(String name):通過(guò)鍵移除鍵值對(duì)
3.3.5. 獲取ServletContext：
* ServletContext getServletContext()
四、案例：用戶登錄
* 用戶登錄案例需求：
1.編寫login.html登錄頁(yè)面
username & password 兩個(gè)輸入框
2.使用Druid數(shù)據(jù)庫(kù)連接池技術(shù),操作mysql，day14數(shù)據(jù)庫(kù)中user表
3.使用JdbcTemplate技術(shù)封裝JDBC
4.登錄成功跳轉(zhuǎn)到SuccessServlet展示：登錄成功！用戶名,歡迎您
5.登錄失敗跳轉(zhuǎn)到FailServlet展示：登錄失敗，用戶名或密碼錯(cuò)誤
* 分析
* 開(kāi)發(fā)步驟
1. 創(chuàng)建項(xiàng)目，導(dǎo)入html頁(yè)面，配置文件，jar包
2. 創(chuàng)建數(shù)據(jù)庫(kù)環(huán)境
CREATE DATABASE day14;
USE day14;
CREATE TABLE USER(
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(32) UNIQUE NOT NULL,
PASSWORD VARCHAR(32) NOT NULL
);
3. 創(chuàng)建包c(diǎn)n.itcast.domain,創(chuàng)建類User
package cn.itcast.domain;
/**
* 用戶的實(shí)體類
*/
public class User {
private int id;
private String username;
private String password;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}
4. 創(chuàng)建包c(diǎn)n.itcast.util,編寫工具類JDBCUtils
package cn.itcast.util;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import javax.xml.crypto.Data;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
/**
* JDBC工具類 使用Durid連接池
*/
public class JDBCUtils {
private static DataSource ds ;
static {
try {
//1.加載配置文件
Properties pro = new Properties();
//使用ClassLoader加載配置文件，獲取字節(jié)輸入流
InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
pro.load(is);
//2.初始化連接池對(duì)象
ds = DruidDataSourceFactory.createDataSource(pro);
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 獲取連接池對(duì)象
*/
public static DataSource getDataSource(){
return ds;
}
/**
* 獲取連接Connection對(duì)象
*/
public static Connection getConnection() throws SQLException {
return ds.getConnection();
}
}
5. 創(chuàng)建包c(diǎn)n.itcast.dao,創(chuàng)建類UserDao,提供login方法
package cn.itcast.dao;
import cn.itcast.domain.User;
import cn.itcast.util.JDBCUtils;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
/**
* 操作數(shù)據(jù)庫(kù)中User表的類
*/
public class UserDao {
//聲明JDBCTemplate對(duì)象共用
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
/**
* 登錄方法
* @param loginUser 只有用戶名和密碼
* @return user包含用戶全部數(shù)據(jù),沒(méi)有查詢到，返回null
*/
public User login(User loginUser){
try {
//1.編寫sql
String sql = "select * from user where username = ? and password = ?";
//2.調(diào)用query方法
User user = template.queryForObject(sql,
new BeanPropertyRowMapper<User>(User.class),
loginUser.getUsername(), loginUser.getPassword());
return user;
} catch (DataAccessException e) {
e.printStackTrace();//記錄日志
return null;
}
}
}
6. 編寫cn.itcast.web.servlet.LoginServlet類
package cn.itcast.web.servlet;
import cn.itcast.dao.UserDao;
import cn.itcast.domain.User;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.設(shè)置編碼
req.setCharacterEncoding("utf-8");
//2.獲取請(qǐng)求參數(shù)
String username = req.getParameter("username");
String password = req.getParameter("password");
//3.封裝user對(duì)象
User loginUser = new User();
loginUser.setUsername(username);
loginUser.setPassword(password);
//4.調(diào)用UserDao的login方法
UserDao dao = new UserDao();
User user = dao.login(loginUser);
//5.判斷user
if(user == null){
//登錄失敗
req.getRequestDispatcher("/failServlet").forward(req,resp);
}else{
//登錄成功
//存儲(chǔ)數(shù)據(jù)
req.setAttribute("user",user);
//轉(zhuǎn)發(fā)
req.getRequestDispatcher("/successServlet").forward(req,resp);
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req,resp);
}
}
7. 編寫FailServlet和SuccessServlet類
@WebServlet("/successServlet")
public class SuccessServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//獲取request域中共享的user對(duì)象
User user = (User) request.getAttribute("user");
if(user != null){
//給頁(yè)面寫一句話
//設(shè)置編碼
response.setContentType("text/html;charset=utf-8");
//輸出
response.getWriter().write("登錄成功！"+user.getUsername()+",歡迎您");
}
}
@WebServlet("/failServlet")
public class FailServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//給頁(yè)面寫一句話
//設(shè)置編碼
response.setContentType("text/html;charset=utf-8");
//輸出
response.getWriter().write("登錄失敗，用戶名或密碼錯(cuò)誤");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
8. login.html中form表單的action路徑的寫法
* 虛擬目錄+Servlet的資源路徑
9. BeanUtils工具類，簡(jiǎn)化數(shù)據(jù)封裝
* 用于封裝JavaBean的
1. JavaBean：標(biāo)準(zhǔn)的Java類
1. 要求：
1. 類必須被public修飾
2. 必須提供空參的構(gòu)造器
3. 成員變量必須使用private修飾
4. 提供公共setter和getter方法
2. 功能：封裝數(shù)據(jù)
2. 概念：
成員變量：
屬性：setter和getter方法截取后的產(chǎn)物
例如：getUsername() --> Username--> username
3. 方法：
1. setProperty()
2. getProperty()
3. populate(Object obj , Map map):將map集合的鍵值對(duì)信息，封裝到對(duì)應(yīng)的JavaBean對(duì)象中
這里是云端源想IT，幫你輕松學(xué)IT”
嗨~ 今天的你過(guò)得還好嗎？
睡眠等同于希望
每次醒來(lái)都是一個(gè)新的開(kāi)始
一個(gè)新的希望
- 2024.03.22 -
在Web開(kāi)發(fā)的世界中，CSS（層疊樣式表）是構(gòu)建視覺(jué)吸引力和定義網(wǎng)頁(yè)布局的不可或缺的工具。
掌握如何恰當(dāng)?shù)匾隒SS樣式以及理解它們的優(yōu)先級(jí)規(guī)則，對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)至關(guān)重要。今天，我們就來(lái)深入探討CSS的四種引入方式，以及選擇器的優(yōu)先級(jí)之謎，了解常用的CSS樣式及使用方法！
CSS（層疊樣式表）為網(wǎng)頁(yè)提供了豐富的樣式定義，允許開(kāi)發(fā)者通過(guò)多種方式將樣式應(yīng)用到HTML文檔中。以下是四種主要的CSS引入方式：
1.1 行內(nèi)樣式
這是最直接也最簡(jiǎn)單的方法，通過(guò)在HTML元素的style屬性中直接編寫CSS規(guī)則。
示例：
<p style="color: red; font-size: 20px;">這是一段紅色的文字。</p>這種方式的優(yōu)點(diǎn)是簡(jiǎn)單快捷，但缺點(diǎn)是它使得HTML代碼與樣式混合，不夠純凈，且不利于樣式的復(fù)用和維護(hù)。
1.2 內(nèi)嵌樣式
在一個(gè)HTML文檔中使用<style>標(biāo)簽將CSS規(guī)則嵌入到HTML的head部分。這種方式適用于定義特定于某一頁(yè)面的樣式。
示例：
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>1.3 外部樣式
這是最常用的方法，它通過(guò)<link>標(biāo)簽將外部的CSS文件鏈接到HTML文檔中。這種方法的優(yōu)勢(shì)在于可以在多個(gè)頁(yè)面間共享同一個(gè)樣式文件，有助于保持代碼的整潔和一致性。
示例：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
其中，mystyle.css的內(nèi)容可能如下：
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}1.4 導(dǎo)入樣式
使用@import語(yǔ)句在CSS文件中導(dǎo)入另一個(gè)CSS文件。盡管這種方法可以分離樣式表，但它通常不被推薦使用，因?yàn)槠浼虞d時(shí)序可能會(huì)影響頁(yè)面渲染效率。
示例：
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
font-family: 'Roboto', sans-serif;
}1.5 樣式單優(yōu)先級(jí)
作用域范圍：外部樣式表>內(nèi)部樣式表>行內(nèi)樣式表
優(yōu)先級(jí)：
2.1 字體樣式
normal - 文字正常顯示
italic - 文本以斜體顯示
oblique - 文本為“傾斜”（傾斜與斜體非常相似，但支持較少）
font-weight 屬性指定字體的粗細(xì)
示例：
<!DOCTYPE html>
<html>
<head>
<style>
.sp1{
color: darkorange;
font-size: 20px;
font-weight: bolder; /* bolder 字體是否加粗*/
font-style: italic; /* italic 字體是否傾斜*/
font-family: "宋體"; /* 設(shè)置字體樣式*/
}
.sp2{
/* 簡(jiǎn)寫 */
/* 順序不能能變：style-weigth-size-family */
font:italic bolder 15px 宋體 ;
color:rgb(28, 235, 97);
}
</style>
<body>
<span>
編程學(xué)習(xí)，從云端源想開(kāi)始！
</span><br>
<span>
讓知識(shí)觸手可及
</span>
<p>讓知識(shí)觸手可及</p>
</body>
</html>2.2 文本樣式
color: 字體顏色
text-align: center; - - 文本對(duì)齊方式
text-decoration:none; - - 文本的線
text-shadow: pink 5px 5px 2px; - - 文本的陰影 【陰影顏色-水平方向的偏移量-垂直方向的偏移量-模糊距離】
line-height: - - 行高 （文本在標(biāo)簽內(nèi)所占的高度）
width:
height:
border: 1px #ffffff solid; - - 盒子邊框【邊框粗細(xì)-顏色-邊框線樣式】
示例：
<style>
.p{
color: rgb(0, 255, 21); /* 字體顏色 */
text-align: center; /* 文本對(duì)齊方式 */
text-decoration:none; /* 文本的線 */
text-shadow: pink 5px 5px 2px; /* 文本的陰影 【陰影顏色-水平方向的偏移量-垂直方向的偏移量-模糊距離】*/
line-height: 400px; /* 行高 （文本在標(biāo)簽內(nèi)所占的高度）*/
width: 400px;
height: 300px;
border: 1px rgb(76, 14, 223) solid; /* 盒子邊框【邊框粗細(xì)-顏色-邊框線樣式】 */
}
</style>
</head>
<body>
<p>歡迎來(lái)到云端源想！</p>
<a href="https://www.baidu.com"></a>
</body>2.3 背景樣式
width: 500px;
height: 1200px;
background-color: pink; - - 背景顏色
background-image: url(…/img/background.jpg); - - 背景圖片
background-repeat: no-repeat; - - 背景圖片是否平鋪
background-position: left top; - - 指定背景圖片的位置
background-attachment: fixed; - - 背景圖片是否隨著標(biāo)簽滾動(dòng) 【fixed-固定 scroll-滾動(dòng)】
示例：
<style>
.d{
width: 500px;
height: 1200px;
background-color: pink; /* 背景顏色 */
background-image: url(../img/background.jpg); /* 背景圖片 */
background-repeat: no-repeat; /* 背景圖片是否平鋪 */
background-position: left top; /* 指定背景圖片的位置 */
background-attachment: fixed; /* 背景圖片是否隨著標(biāo)簽滾動(dòng) 【fixed-固定 scroll-滾動(dòng)】 */
}
</style>
</head>
<body>
<div>
</div>2.4 列表樣式
<!DOCTYPE html>
<html>
<head>
<style>
li{
background-color: lemonchiffon;
/*列表樣式：常用取值：none-無(wú)樣式 square-正方形 circle-空心圓 decimal-數(shù)字*/
list-style-type: circle;
/*列表樣式為自定義圖片*/
list-style-image: url(../img/2.jpg);
/*列表樣式的放置位置*/
list-style-position: inside;
/*列表樣式縮寫*/
list-style: square url(../img/2.jpg) inside;
/*常用的列表樣式*/
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ul>
</body>
</html>2.5 邊框樣式
<!DOCTYPE html>
<html>
<head>
<style>
.border{
/*邊框?qū)挾?/
border-width: 2px;
/*邊框顏色*/
border-color: red;
/*邊框樣式：solid 實(shí)線 dotted 點(diǎn)線 dashed 虛線*/
border-style: dashed;
/*邊框樣式縮寫：樣式 顏色 寬度*/
border:solid green 5px;
/*邊框可以為4個(gè)方向分別設(shè)置*/
border-top: dashed black 4px;
border-right: dashed #FF00FF 4px;
border-bottom: dotted darkblue 4px;
border-left: solid fuchsia 5px;
/*沒(méi)有邊框*/
border: none;
/*常用的細(xì)邊框樣式*/
border: solid 1px #ccc;
}
</style>
</head>
<body>
<div class="border">這是一個(gè)帶有邊框的元素</div>
</body>
</html>2.6 盒子模型
所有的html元素可以看做是盒子，在css中，"box model"是用來(lái)設(shè)計(jì)和布局時(shí)使用。
CSS盒子模型本質(zhì)是一個(gè)盒子，封裝周圍的html元素，它包括：邊框、邊距、填充、實(shí)際內(nèi)容。
盒子模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。
想要快速入門前端開(kāi)發(fā)嗎？推薦一個(gè)前端開(kāi)發(fā)基礎(chǔ)課程，這個(gè)老師講的特別好，零基礎(chǔ)學(xué)習(xí)無(wú)壓力，知識(shí)點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！云端源想
示例：
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* border:邊框，分4個(gè)方向，同理margin、padding也分為四個(gè)方向
* margin:元素與元素之間對(duì)的距離
* padding:內(nèi)容與邊框之間的距離
* 設(shè)置的時(shí)候順序：上 右 下 左
*/
.div{
border: solid red 10px;
/*四個(gè)方向上的元素與元素之間的距離都是50px*/
margin: 50px;
/*兩個(gè)值的時(shí)候：第一個(gè)參數(shù)表示上下距離都是50px,第二個(gè)參數(shù)表示左右距離都是100px*/
margin: 50px 100px;
padding: 50px;
/*
一個(gè)元素真正的寬度=width+左右padding值+左右的border值
一個(gè)元素的真正高度=height+上下的padding值+上下的border值
* */
}
</style>
</head>
<body>
<div>111111111112222222222223333333333333333</div>
</body>1）盒子的寬高
元素的實(shí)際寬度和高度：
2）設(shè)置寬度=元素實(shí)際寬度，box-sizing屬性。
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* box-sizing:確認(rèn)元素的大小
content-box: 實(shí)際寬度=width+左右的psdding值+上下的border值
實(shí)際高度=height+上下的padding值+上下的border值
border-box:實(shí)際寬度=width;實(shí)際高度=height
padding和border不會(huì)影響元素的實(shí)際寬高
* */
.box{
width: 100px;
height: 200px;
border: 5px solid;
padding: 5px;
box-sizing: content-box;
}
</style>
</head>
<body>
<div>你好中國(guó)</div>
</body>CSS的世界博大精深，以上只是冰山一角，希望通過(guò)這些基礎(chǔ)的常用樣式可以幫助你快速進(jìn)入CSS世界的大門。
掌握CSS的引入方式和選擇器優(yōu)先級(jí)是構(gòu)建高效、可維護(hù)網(wǎng)站的關(guān)鍵。通過(guò)這些知識(shí)，你可以更好地管理和優(yōu)化你的樣式代碼，創(chuàng)造出既美觀又專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)。現(xiàn)在，準(zhǔn)備好邁入CSS的世界，開(kāi)啟你的創(chuàng)意之旅吧！
我們下期再見(jiàn)！
END
文案編輯|云端學(xué)長(zhǎng)
文案配圖|云端學(xué)長(zhǎng)
內(nèi)容由：云端源想分享
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
