<meta charset="utf-8">
JavaWeb：
使用Java語言開發(fā)基于互聯(lián)網(wǎng)的項目
軟件架構：
1. C/S: Client/Server 客戶端/服務器端
在用戶本地有一個客戶端程序俏竞，在遠程有一個服務器端程序
如：QQ，迅雷...
優(yōu)點：
1. 用戶體驗好
缺點：
[圖片上傳中...(image.png-409ca4-1570967855977-0)]
1. 開發(fā)熔萧、安裝必峰，部署洪唐，維護 麻煩
2. B/S: Browser/Server 瀏覽器/服務器端
只需要一個瀏覽器，用戶通過不同的網(wǎng)址(URL)自点，客戶訪問不同的服務器端程序
優(yōu)點：
1. 開發(fā)桐罕、安裝，部署桂敛，維護 簡單
缺點：
1. 如果應用過大功炮，用戶的體驗可能會受到影響
2. 對硬件要求過高
B/S架構詳解
資源分類：
1. 靜態(tài)資源：
使用靜態(tài)網(wǎng)頁開發(fā)技術發(fā)布的資源。
特點：
所有用戶訪問术唬，得到的結果是一樣的薪伏。
如：文本，圖片粗仓，音頻嫁怀、視頻, HTML,CSS,JavaScript
如果用戶請求的是靜態(tài)資源，那么服務器會直接將靜態(tài)資源發(fā)送給瀏覽器借浊。瀏覽器中內(nèi)置了靜態(tài) 資源 的解析引擎塘淑，可以展示靜態(tài)資源
2. 動態(tài)資源：
使用動態(tài)網(wǎng)頁及時發(fā)布的資源。
特點：
所有用戶訪問蚂斤，得到的結果可能不一樣存捺。
如：jsp/servlet,php,asp...
如果用戶請求的是動態(tài)資源，那么服務器會執(zhí)行動態(tài)資源曙蒸，轉(zhuǎn)換為靜態(tài)資源捌治，再發(fā)送給瀏覽器
HTML
代碼格式：
<html>
<head>
<title>title</title>
內(nèi)容....
</head>
<body>
內(nèi)容...
</body>
</html>
HTML基礎標簽：
1. 文件標簽：構成html最基本的標簽
html:html文檔的根標簽
head：頭標簽。用于指定html文檔的一些屬性纽窟。引入外部的資源
title：標題標簽肖油。
body：體標簽
<!DOCTYPE html>：html5中定義該文檔是html文檔
2. 文本標簽：和文本有關的標簽
<h1> to <h6>：標題標簽
h1~h6:字體大小逐漸遞減
<p>：段落標簽
：換行標簽
：展示一條水平線
屬性：
color：顏色
width：寬度
size：高度
align：對齊方式
center：居中
left：左對齊
right：右對齊
<b>：字體加粗
<i>：字體斜體
<font>:字體標簽
屬性：
color：顏色
size：大小
face：字體
<center>:文本居中
屬性定義：
color：
1. 英文單詞：red,green,blue
2. rgb(值1，值2臂港，值3)：值的范圍：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范圍：00~FF之間森枪。如： #FF00FF
width：
1. 數(shù)值：width='20' ,數(shù)值的單位视搏，默認是 px(像素)
2. 數(shù)值%：占比相對于父元素的比例
3. 圖片標簽：
img：展示圖片
屬性：
src：指定圖片的位置
代碼：
<img src="image/jingxuan_2.jpg" align="right" alt="古鎮(zhèn)" width="500" height="500"/>
相對路徑
以.開頭的路徑
./：代表當前目錄 ./image/1.jpg
../:代表上一級目錄
當前目錄
<img src="./image/jiangwai_1.jpg">
上一級目錄
<img src="../image/jiangwai_1.jpg">
4. 列表標簽：
有序列表：
ol:
li:
格式
<0l type = ".." start = "..">
<li> ... </li>
<0l>
無序列表：(disc ，square疲恢，circle)
ul:
li:
格式
<ul type = ".." >
<li> ... </li>
<ul>
5. 鏈接標簽：<a>
:定義一個超鏈接
屬性：
href：指定訪問資源的URL(統(tǒng)一資源定位符)
target：指定打開資源的方式
_self:默認值凶朗，在當前頁面打開
_blank：在空白頁面打開
格式：
<a target="_self 或者 _blank">點我</a>
鏈接地址可以為發(fā)送郵箱
<a href="mailto:itcast@itcast.cn">聯(lián)系我們</a>
可以為本地中的html文件
<a href="./5_列表標簽.html">列表標簽</a>
圖片鏈接:
<a ><img src="image/jiangwai_1.jpg"></a>
6. div和span：
div:每一個div占滿一整行。塊級標簽
span：文本信息在一行展示显拳，行內(nèi)標簽 內(nèi)聯(lián)標簽
7. 語義化標簽：html5中為了提高程序的可讀性棚愤，提供了一些標簽。
1. <header>：頁眉
2. <footer>：頁腳
8. 表格標簽：
table：定義表格
屬性
width：寬度
border：邊框
cellpadding：定義內(nèi)容和單元格的距離
cellspacing：定義單元格之間的距離杂数。如果指定為0宛畦，則單元格的線會合為一條、
bgcolor：背景色
align：對齊方式
子標簽
tr：定義行
屬性
bgcolor：背景色
align：對齊方式
td：定義單元格
屬性
colspan：合并列
rowspan：合并行
th：定義表頭單元格
<caption>：表格標題
<thead>：表示表格的頭部分
<tbody>：表示表格的體部分
<tfoot>：表示表格的腳部分
注：頭體腳 將表分為三個部分揍移，互不影響次和，比如無法合并兩個不同部位的表單元格
HTML表單標簽：
概念：用于采集用戶輸入的數(shù)據(jù)的。用于和服務器進行交互那伐。
form：用于定義表單的踏施。可以定義一個范圍罕邀，范圍代表采集用戶數(shù)據(jù)的范圍
屬性：
action：指定提交數(shù)據(jù)的URL
method:指定提交方式
分類：一共7種畅形，2種比較常用
get：
1. 請求參數(shù)會在地址欄中顯示。會封裝到請求行中(HTTP協(xié)議后講解)诉探。
2. 請求參數(shù)大小是有限制的日熬。
3. 不太安全。
post：
2. 請求參數(shù)不會再地址欄中顯示肾胯。會封裝在請求體中(HTTP協(xié)議后講解)
2. 請求參數(shù)的大小沒有限制竖席。
3. 較為安全。
格式:
<form action="#" method="post/get">
用戶名：<input type="text" name="username">
密碼：<input name="password">
<input type="submit" value="登錄" >
</form>
注: name屬性必須聲明敬肚，否則無法提交
表單項中的數(shù)據(jù)要想被提交：必須指定其name屬性
表單項標簽：
input：可以通過type屬性值毕荐，改變元素展示的樣式
type屬性：
{
text：文本輸入框，默認值
placeholder：顯示 提示輸入信息
password：密碼輸入框
radio:單選框
注意：
要想讓多個單選框?qū)崿F(xiàn)單選的效果艳馒，則多個單選框的name屬性值必須一樣东跪。
一般會給每一個單選框提供value屬性，指定其被選中后提交的值
checked屬性鹰溜，可以指定默認值
checkbox：復選框
注意：
一般會給每一個單選框提供value屬性，指定其被選中后提交的值
checked屬性丁恭，可以指定默認值
file：文件選擇框
hidden：隱藏域曹动，用于提交一些信息。
按鈕：
submit：提交按鈕牲览∧钩拢可以提交表單
button：普通按鈕
image：圖片提交按鈕
屬性src：屬性指定圖片的路徑
}
label標簽：指定輸入項的文字描述信息
屬性
for
注意：
label的for屬性一般會和 input 的 id屬性值 對應。如果對應了，則點擊label區(qū)域贡必，會讓input輸入框獲取焦點兔港。
select標簽: 下拉列表
子標簽option：指定列表項
textarea標簽：文本域
屬性
cols：指定列數(shù)，每一行有多少個字符
rows：默認多少行仔拟。
CSS
1. 內(nèi)聯(lián)樣式
在標簽內(nèi)使用style屬性指定css代碼
如：<div style="color:red;">hello css</div>
2. 內(nèi)部樣式
在head標簽內(nèi)衫樊，定義style標簽，style標簽的標簽體內(nèi)容就是css代碼
如：
<style>
div{
color:blue;
}
</style>
<div>hello css</div>
3. 外部樣式
①. 定義css資源文件利花。
②. 在head標簽內(nèi)科侈，定義link標簽，引入外部的資源文件
a.css文件：
div{
color:green;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
- 注意：
1,2,3種方式 css作用范圍越來越大
*1方式不常用炒事，后期常用2,3
第3種格式可以寫為：
<style>
@import "css/a.css";
</style>
4. css語法：
格式：
選擇器 {
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
選擇器:篩選具有相似特征的元素
注意：
每一對屬性需要使用臀栈；隔開，最后一對屬性可以不加挠乳；
5. 選擇器：篩選具有相似特征的元素
1. 基礎選擇器
①. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一
語法：#id屬性值{}
②. 元素選擇器：選擇具有相同標簽名稱的元素
語法： 標簽名稱{}
注意：id選擇器優(yōu)先級高于元素選擇器
③. 類選擇器：選擇具有相同的class屬性值的元素权薯。
語法：.class屬性值{}
注意：類選擇器選擇器優(yōu)先級高于元素選擇器
2. 擴展選擇器：
①. 選擇所有元素：
語法： *{}
②. 并集選擇器：
選擇器1,選擇器2{}
③. 子選擇器：篩選選擇器1元素下的選擇器2元素
語法： 選擇器1 選擇器2{}
④. 父選擇器：篩選選擇器2的父元素選擇器1
語法： 選擇器1 > 選擇器2{}
⑤. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
語法： 元素名稱[屬性名="屬性值"]{}
⑥. 偽類選擇器：選擇一些元素具有的狀態(tài)
語法： 元素:狀態(tài){}
如： <a>
狀態(tài)：
link：初始化的狀態(tài)
hover：鼠標懸浮狀態(tài)
active：正在訪問狀態(tài)
visited：被訪問過的狀態(tài)
css屬性
1. 字體睡扬、文本
font-size：字體大小
color：文本顏色
text-align：對其方式 right left 左右對齊
line-height：行高
vertical-align: middle;垂直居中
2. 背景
background：顏色 / url("圖片圖片位置") no-repeat(去重) center(擺放位置)
3. 邊框
border：設置邊框大小(1px) 符合屬性solid 顏色
border-radius: 3px; 設置邊角圓
4. 尺寸
width：寬度
height：高度
5. 盒子模型：控制布局
margin：外邊距 auto(居中) (僅僅適用于div盟蚣，d對于已經(jīng)使用了float的div也不管用)
padding：內(nèi)邊距
margin/padding-left :左邊距
margin/padding-right :右邊距
margin/paddingt-rop:上邊距
注：默認情況下內(nèi)邊距會影響整個盒子的大小
box-sizing: border-box ： 設置盒子的屬性，讓width和height就是最終盒子的大小
float：浮動（left威蕉，right）
JavaScript
概念：一門客戶端腳本語言
運行在客戶端瀏覽器中的刁俭。每一個瀏覽器都有JavaScript的解析引擎
腳本語言：不需要編譯，直接就可以被瀏覽器解析執(zhí)行了
JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)
ECMAScript：客戶端腳本語言的標準
1.基本語法: 與html結合方式
1. 內(nèi)部JS：
定義<script>標簽韧涨，標簽體內(nèi)容就是js代碼
2. 外部JS：
定義<script src="xxxx.js">牍戚，通過src屬性引入外部的js文件
2. 注釋
1. 單行注釋：//注釋內(nèi)容
2. 多行注釋：/注釋內(nèi)容/
3. 數(shù)據(jù)類型：
原始數(shù)據(jù)類型(基本數(shù)據(jù)類型)：
1. number：數(shù)字。 整數(shù)/小數(shù)/NaN(not a number 一個不是數(shù)字的數(shù)字類型)
2. string：字符串虑粥。 字符串 "abc" "a" 'abc'
3. boolean: true和false
4. null：一個對象為空的占位符
5. undefined：未定義如孝。如果一個變量沒有給初始化值，則會被默認賦值為undefined
引用數(shù)據(jù)類型：對象
4. 變量
變量：一小塊存儲數(shù)據(jù)的內(nèi)存空間
java語言是強類型語言娩贷，而JavaScript是弱類型語言第晰。
強類型：在開辟變量存儲空間時，定義了空間將來存儲的數(shù)據(jù)的數(shù)據(jù)類型彬祖。只能存儲固定類型的數(shù)據(jù).
弱類型：在開辟變量存儲空間時茁瘦，不定義空間將來的存儲數(shù)據(jù)類型，可以存放任意類型的數(shù)據(jù)储笑。
語法：
var 變量名 = 初始化值;
typeof()運算符：獲取變量的類型甜熔。
注：null值運算后得到的值是object類型，默認為undefined(類型為undefined值也為undefined)
5. 運算符
一元運算符：只有一個運算數(shù)的運算符
++(--) 在前突倍，先自增(自減)腔稀，再運算
++(--) 在后盆昙，先運算，再自增(自減)
+(-)：正負號
注：使用醫(yī)院運算符焊虏，會使其他類型的變量轉(zhuǎn)化為number型
其他類型轉(zhuǎn)number：
string轉(zhuǎn)number：按照字面值轉(zhuǎn)換淡喜。如果字面值不是數(shù)字，則轉(zhuǎn)為NaN(不是數(shù)字的數(shù)字）,null轉(zhuǎn)為0诵闭，undefined為NaN
boolean轉(zhuǎn)number：true轉(zhuǎn)為1馏鹤，false轉(zhuǎn)為0
算數(shù)運算符
- / % ...
除String為連接（加一元運算符時也為相加）虏冻，其他類型運算以number類型為橋梁計算結果。
賦值運算符
= += -+....
比較運算符
< >= <= == ===(全等于)
*比較方式
1. 類型相同：直接比較
字符串：按照字典順序比較。按位逐一比較磅轻，直到得出大小為止赏壹。
2. 類型不同：先進行類型轉(zhuǎn)換以number型為橋梁璧眠，再比較渠鸽。NAN和任何比較都為false.null只和null相比才返回true
===：全等于。在比較之前踩衩，先判斷類型嚼鹉，如果類型不一樣，則直接返回false
邏輯運算符
&& || !
其他類型轉(zhuǎn)boolean：
1. number：0或NaN為假驱富，其他為真
2. string：除了空字符串("")锚赤，其他都是true
3. null&undefined:都是false
4. 對象：所有對象都為true
三元運算符
語法：
表達式? 值1:值2;
判斷表達式的值，如果是true則取值1褐鸥，如果是false則取值2线脚；
6. 流程控制語句：
1. if...else...
2. switch:
在java中，switch語句可以接受的數(shù)據(jù)類型： byte int shor char,枚舉(1.5) ,String(1.7)
- switch(變量):
case 值:
在JS中,switch語句可以接受任意的原始數(shù)據(jù)類型
3. while
4. do...while
5. for
7. JS特殊語法：
1. 語句以;結尾叫榕，如果一行只有一條語句則 ;可以省略 (不建議)
2. 變量的定義使用var關鍵字浑侥，也可以不使用
用var： 定義的變量是局部變量
不用var：定義的變量是全局變量(不建議)
8. 對象
基本對象：
1. Function：函數(shù)(方法)對象
創(chuàng)建：
方式一
var fun = new Function(形式參數(shù)列表,方法體);
方式二
function 方法名稱(形式參數(shù)列表){
方法體
}
方式三
var 方法名 = function(形式參數(shù)列表){
方法體
}
屬性：
length:代表形參的個數(shù)
特點：
1. 方法是一個對象，如果定義名稱相同的方法晰绎，會覆蓋
2. 參數(shù)可以放任意個數(shù),未賦值的賦值為默認值寓落，多賦的值也會放入arguments數(shù)組中.
3. 在方法聲明中有一個隱藏的數(shù)組，arguments,封裝所有的實際參數(shù)
調(diào)用：
方法名稱(參數(shù)1,參數(shù)2....);
2. Array:數(shù)組對象
創(chuàng)建：
1. var arr = new Array(元素列表);
2. var arr = new Array(默認長度);
3. var arr = [元素列表];
方法
join(參數(shù)):將數(shù)組中的元素按照指定的分隔符拼接為字符串默認為逗號
push() 向數(shù)組的末尾添加一個或更多元素荞下，并返回新的長度伶选。
屬性
length:數(shù)組的長度
特點：
1. JS中，數(shù)組元素的類型可變的尖昏。
2. JS中仰税，數(shù)組長度可變的。
3. Boolean
4. Date：日期對象
創(chuàng)建：
var date = new Date();
方法：
toLocaleString()：返回當前date對象對應的時間本地字符串格式
getTime():獲取毫秒值抽诉。返回當前如期對象描述的時間到1970年1月1日零點的毫秒值差
5. Math(工具對象不需要創(chuàng)建對象)：數(shù)學對象
方法：
random():返回 0 ~ 1 之間的隨機數(shù)肖卧。 含0不含1
ceil(x)：對數(shù)進行上舍入。
floor(x)：對數(shù)進行下舍入掸鹅。
round(x)：把數(shù)四舍五入為最接近的整數(shù)塞帐。
屬性：
PI
6. Number
7. String
8. RegExp：正則表達式對象
正則表達式：定義字符串的組成規(guī)則。
1. 單個字符:[]
如： [a] [ab] [a-zA-Z0-9_]
- 特殊符號代表特殊含義的單個字符:
\d:代表單個數(shù)字字符 [0-9]
\w:代表單個單詞字符[a-zA-Z0-9_]
2. 量詞符號：
?：表示字符個數(shù)0個或1個
*：表示字符個數(shù)0個或多個
+：字符1個數(shù)個或多個
{m,n}:表示 m<= 字符數(shù)量 <= n
{,n}:最多n個
{m,} 最少m個
3. 開始結束符號
^:開始
$:結束
[a-z]：字符只能是a-z中的字符
[a-z]{X,Y}：字符串中只能出現(xiàn)a-z中的字符巍沙，且總個數(shù)不能超出X-Y的范圍
2. 正則對象：
1. 創(chuàng)建
1. var reg = new RegExp("^\表達式$");
2. var reg = /^\正則表達式$/;
2. 方法
test(參數(shù)):驗證指定的字符串是否符合正則定義的規(guī)范
9. Global
特點：全局對象葵姥，這個Global中封裝的方法不需要對象就可以直接調(diào)用。 方法名();
方法：
encodeURI():url編碼
decodeURI():url解碼
encodeURIComponent():url編碼,編碼的字符更多
decodeURIComponent():url解碼
parseInt():將字符串轉(zhuǎn)為數(shù)字
isNaN():判斷一個值是否是NaN
eval():將 字符串解析句携，并把它作為腳本代碼來執(zhí)行榔幸。
9.BOM對象
概念：Browser Object Model 瀏覽器對象模型
- 將瀏覽器的各個組成部分封裝成對象。
2. 組成：
Window：窗口對象
Navigator：瀏覽器對象
Screen：顯示器屏幕對象
History：歷史記錄對象
Location：地址欄對象
3. Window：窗口對象
方法
1. 與彈出框有關的方法：
alert() 顯示帶有一段消息和一個確認按鈕的警告框矮嫉。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框削咆。
如果用戶點擊確定按鈕，則方法返回true
如果用戶點擊取消按鈕蠢笋，則方法返回false
prompt("顯示的文字") 顯示可提示用戶輸入的對話框拨齐。
- 返回值：獲取用戶輸入的值
2. 與打開關閉有關的方法：
close() 關閉瀏覽器窗口。
open() 打開一個新的瀏覽器窗口
返回新的Window對象
3. 與定時器有關的方式
var i = setTimeout( 方法名 /"完整的執(zhí)行語句;" , 毫秒)：按照指定的時間調(diào)用一次函數(shù)貨方法
- 返回值：唯一標識昨寞，用于取消定時器
clearTimeout(i) 取消由 setTimeout() 方法設置的 timeout瞻惋。
setInterval() 按照指定的周期（以毫秒計）來循環(huán)調(diào)用函數(shù)或計算表達式。
兩種參數(shù)寫法 ("完整的執(zhí)行語句 fun(a);" , 毫秒數(shù))
(方法名援岩，毫秒數(shù))
clearInterval() 取消由 setInterval() 設置的 timeout歼狼。
屬性
1. 獲取其他BOM對象：(通過window窗口 . 屬性調(diào)用，本窗口可以省略window)
history
location
Navigator
Screen:
2. 獲取DOM對象
document
Location：地址欄對象
方法：
reload() 重新加載當前文檔享怀。刷新
屬性
href = "htttp://www.xxx.com" 本窗口跳轉(zhuǎn)或返回完整的 URL地址羽峰。
History：本窗口歷史記錄對象
1. 創(chuàng)建(獲取)：
1. window.history
2. history
2. 方法：
back() 加載 history 列表中的前一個 URL。
forward() 加載 history 列表中的下一個 URL添瓷。
go(參數(shù)) 根據(jù)參數(shù)正負值前進或后退
參數(shù)：
正數(shù)：前進幾個歷史記錄
負數(shù)：后退幾個歷史記錄
3. 屬性：
length 返回當前窗口歷史列表中的 URL 數(shù)量梅屉。
10.DOM對象
document.getElementById("id值"):通過元素的id獲取元素對象。
Document：文檔對象
1. 創(chuàng)建(獲取)：在html dom模型中可以使用window對象來獲取
1. window.document
2. document
2. 方法：
獲取元素對象：
1. getElementById() ： 根據(jù)id屬性值獲取元素對象仰坦。id屬性值一般唯一
2. getElementsByTagName()：根據(jù)元素名稱獲取元素對象們履植。返回值是數(shù)組
3. getElementsByClassName():根據(jù)Class屬性值獲取元素對象們。返回值是數(shù)組
4. getElementsByName(): 根據(jù)name屬性值獲取元素對象們悄晃。返回值是數(shù)組
創(chuàng)建并獲取元素對象：
createAttribute(name) （節(jié)點元素）
createComment() (注釋元素)
createElement("內(nèi)容") （標簽元素）
createTextNode("標簽類型") (標簽內(nèi)容元素)
3. 屬性
Element：元素對象
1. 獲取/創(chuàng)建：
通過document來獲取和創(chuàng)建
2. 方法：
removeAttribute()：刪除屬性
setAttribute()：設置屬性
Node：節(jié)點對象玫霎，其他5個的父對象
特點：所有dom對象都可以被認為是一個節(jié)點
方法：
appendChild()：向節(jié)點的子節(jié)點列表的結尾添加新的子節(jié)點。
removeChild() ：刪除（并返回）當前節(jié)點的指定子節(jié)點妈橄。
replaceChild()：用新節(jié)點替換一個子節(jié)點庶近。
屬性：
parentNode ：返回節(jié)點的父元素對象。
innerHTML：設置標簽體內(nèi)容和返回標簽體內(nèi)容
元素對象的標簽屬性 style className id ......
HTML DOM
1. 標簽體的設置和獲染祢尽：innerHTML
3. 控制元素樣式
方式一：使用元素的style屬性來設置
div1.style.border = "1px solid red";
div1.style.width = "200px";
div1.style.fontSize = "20px";
方式二：提前定義好類選擇器的樣式鼻种，通過元素的className屬性來設置其class屬性值。
div1.className = "樣式類名"
11.事務
概念：
某些組件被執(zhí)行了某些操作后沙热，觸發(fā)某些代碼的執(zhí)行叉钥。
事件：某些操作罢缸。如： 單擊，雙擊投队，鍵盤按下了枫疆，鼠標移動了
事件源：組件。如： 按鈕 文本輸入框...
監(jiān)聽器：代碼敷鸦。
監(jiān)聽：將事件息楔，事件源，監(jiān)聽器結合在一起扒披。 當事件源上發(fā)生了某個事件值依，則觸發(fā)執(zhí)行某個監(jiān)聽器代碼。
onclick--- 單擊事件:（通過點擊元素觸發(fā) 事件(方法))
var fun = Function(){
.......
}
使用方法一：
<img src = "XXX" id= ""img onclick = "完整的執(zhí)行語句 fun(參數(shù));">
使用方法二：
var i = document.getElementById("img");
i.onclick = fun（方法名）; (通過元素對象修改屬性使用)
注：方法二常用碟案，并且常規(guī)寫法為
i.onclick = function(){
.....
}
常見的事件：
1. 點擊事件：
1. onclick：單擊事件
2. ondblclick：雙擊事件
2. 焦點事件
1. onblur：失去焦點
2. onfocus:元素獲得焦點愿险。
3. 加載事件：
1. onload：一張頁面或一幅圖像完成加載。
4. 鼠標事件：
1. onmousedown 鼠標按鈕被按下蟆淀。
2. onmouseup 鼠標按鍵被松開拯啦。
3. onmousemove 鼠標被移動。
4. onmouseover 鼠標移到某元素之上熔任。
5. onmouseout 鼠標從某元素移開褒链。
[圖片上傳失敗...(image-beff2e-1570967628030)]
5. 鍵盤事件：
1. onkeydown 某個鍵盤按鍵被按下。
2. onkeyup 某個鍵盤按鍵被松開疑苔。
3. onkeypress 某個鍵盤按鍵被按下并松開甫匹。
[圖片上傳失敗...(image-f24077-1570967628030)]
6. 選擇和改變
1. onchange 域的內(nèi)容被改變。
2. onselect 文本被選中惦费。
7. 表單事件：
1. onsubmit 確認按鈕被點擊兵迅。
2. onreset 重置按鈕被點擊。
若需要觸發(fā)事件的元素對象較多薪贫，可配合for循環(huán)使用
for (var i =0;i<alltr.length;i++){
alltr[i].onmouseover = function () { //當鼠標位于元素時恍箭，所有tr元素class改為red
this.className = "red";
}
alltr[i].onmouseout = function () { //當鼠標移開元素時 所有tr元素class改為 nored
this.className = "nored";
}
}
————————————————————————————————————————————
BootStrap
概念： 一個前端開發(fā)的框架，Bootstrap瞧省，來自 Twitter扯夭。Bootstrap 是基于 HTML、CSS鞍匾、JavaScript 的交洗，它簡潔靈活，使得 Web 開發(fā)更加快捷橡淑。
功能：
使同一套頁面可以兼容不同分辨率的設備构拳。
快速入門
1. 下載Bootstrap
2. 將Bootstrap中三個文件夾復制項目中
3. 創(chuàng)建html頁面，引入必要的資源文件
基礎格式
①定義容器 將class值設為 container 兩邊留白 / container-fluid 每行格數(shù)占滿整行
②定義行 在設置一個容器將class值設為 row
③定義元素所占格數(shù)
定義標簽元素并設class值為 col - 適用像素 - 該元素所占格數(shù) class名
使用像素種類:
lg：大屏幕
md：中屏幕
sm：小屏幕
xs：手機屏幕
注：每行格數(shù)上限為12，占滿后自動換行
適用像素向大兼容置森，如col - xs - 1 將屏幕放大 此元素所占仍為一格
無法向小兼容斗埂，無論所占格數(shù)為多少，將屏幕縮小至適用像素以下后每個元素 都占一行
步驟：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
.gos{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container/container-fluid"> 定義容器
<div class="row"> 定義行(一行為12格)
<div class="col-sm-1 gos">1</div> 設置元素并設置其所占格數(shù)
<div class="col-lg-1 gos">1</div>
</div>
</div>
</body>
</html>
圖片整行樣式
<img class = img-responsive"">
邊框樣式
<div class="thumbnail">
具體各種Bootstrap樣式模板進入索引觀看
————————————————————————————————————————————
XML
概念：標簽都是自定義的暇藏。 <user> <student>
功能 存儲數(shù)據(jù)
配置文件
在網(wǎng)絡中傳輸
xml與html的區(qū)別
1. xml標簽都是自定義的蜜笤，html標簽是預定義。
2. xml的語法嚴格盐碱，html語法松散
3. xml是存儲數(shù)據(jù)的，html是展示數(shù)據(jù)
語法：
基本語法：
xml文檔的后綴名 .xml
xml第一行必須定義為文檔聲明
xml文檔中有且僅有一個根標簽
屬性值必須使用引號(單雙都可)引起來
標簽必須正確關閉
xml標簽名稱區(qū)分大小寫
快速入門：
<?xml version='1.0' ?>
<users>
<user id='1'>
<name>zhangsan</name>
<age>23</age>
<gender>male</gender>
</user>
<user id='2'>
<name>lisi</name>
<age>24</age>
<gender>female</gender>
</user>
</users>
組成部分：
1. 文檔聲明
1. 格式：<?xml 屬性列表 ?>
2. 屬性列表：
version：版本號沪伙，必須的屬性
encoding：編碼方式瓮顽。默認值：ISO-8859-1
standalone：是否獨立 yes/no
yes：不依賴其他文件
no：依賴其他文件
2. 指令(了解)：結合css的
<?xml-stylesheet type="text/css" href="a.css" ?>
3. 標簽：標簽名稱自定義的
規(guī)則：
名稱可以包含字母、數(shù)字以及其他的字符
名稱不能以數(shù)字或者標點符號開始
名稱不能以字母 xml（或者 XML围橡、Xml 等等）開始
名稱不能包含空格
5. 文本：
CDATA區(qū)：在該區(qū)域中的數(shù)據(jù)會被原樣展示
若要使用邏輯語句.則需要放入CDATA 區(qū)中
格式： <![CDATA[ 邏輯語句]]>
約束：規(guī)定xml文檔的書寫規(guī)則
分類：
DTD：一種簡單的約束技術
Schema：一種復雜的約束技術
DTD：（dtd文件）
引入dtd文檔到xml文檔中
內(nèi)部dtd：將約束規(guī)則定義在xml文檔中
<!DOCTYPE 根標簽名 SYSTEM [ DTD約束語句 ]>
外部dtd：將約束的規(guī)則定義在外部的dtd文件中
本地：<!DOCTYPE 根標簽名 SYSTEM "dtd文件的位置">
網(wǎng)絡：<!DOCTYPE 根標簽名 PUBLIC "dtd文件名字" "dtd文件的位置URL">
Schema: (xsd文件)
引入：
1.填寫xml文檔的根元素
2.引入xsi前綴. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3.引入xsd文件命名空間. xsi:schemaLocation="http://www.itcast.cn/xml student.xsd"
4.為每一個xsd約束聲明一個前綴,作為標識 xmlns="http://www.itcast.cn/xml"
<students xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns(此處可加便簽)="http://www.itcast.cn/xml"
xsi:schemaLocation="http://www.itcast.cn/xml student.xsd">
注明調(diào)用該標簽的元素被改標簽的schema約束
解析：操作xml文檔暖混，將文檔中的數(shù)據(jù)讀取到內(nèi)存中
解析xml的方式：
1. DOM：將標記語言文檔一次性加載進內(nèi)存，在內(nèi)存中形成一顆dom樹
優(yōu)點：操作方便翁授，可以對文檔進行CRUD的所有操作
缺點：占內(nèi)存
2. SAX：逐行讀取拣播，基于事件驅(qū)動的。
優(yōu)點：不占內(nèi)存收擦。
缺點：只能讀取贮配，不能增刪改
xml常見的解析器：
JAXP：sun公司提供的解析器，支持dom和sax兩種思想
DOM4J：一款非常優(yōu)秀的解析器
PULL：Android操作系統(tǒng)內(nèi)置的解析器塞赂，sax方式的泪勒。
Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某個URL地址宴猾、HTML文本內(nèi)容圆存。它提供了一套非常省力的API，可通過DOM仇哆，CSS以及類似于jQuery的操作方法來取出和操作數(shù)據(jù)沦辙。
Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某個URL地址讹剔、HTML文本內(nèi)容油讯。它提供了一套非常省力的API，可通過DOM辟拷，CSS以及類似于jQuery的操作方法來取出和操作數(shù)據(jù)撞羽。
快速入門：
步驟：
1. 導入jar包
2. 獲取Document對象
3. 獲取對應的標簽Element對象
4. 獲取數(shù)據(jù)
代碼：
獲取xml文件路徑
String path = JsoupDemo1.class.getClassLoader().getResource("student.xml").getPath();
解析xml文檔，加載文檔進內(nèi)存衫冻，獲取dom樹--->Document
Document document = Jsoup.parse(new File(path), "utf-8");
獲取元素對象 Element
Elements elements = document.getElementsByTag("name");
對象的使用：
1. Jsoup：工具類诀紊，可以解析html或xml文檔，返回Document
解析方法 parse解析html或xml文檔隅俘，返回Document
parse?(File in, String charsetName)：解析xml或html文件的邻奠。
parse?(String html)：解析xml或html字符串
parse?(URL url, int timeoutMillis)：通過網(wǎng)絡路徑獲取指定的html或xml的文檔對象
2. Document：文檔對象笤喳。代表內(nèi)存中的dom樹
獲取Element對象
getElementById?(String id)：根據(jù)id屬性值獲取唯一的element對象
getElementsByTag?(String tagName)：根據(jù)標簽名稱獲取元素對象集合
getElementsByAttribute?(String key)：根據(jù)屬性名稱獲取元素對象集合
getElementsByAttributeValue?(String key, String value)：根據(jù)對應的屬性名和屬性值獲取元素對象集合
3. Elements：元素Element對象的集合÷笛纾可以當做 ArrayList<Element>來使用
4. Element：元素對象
獲取子元素對象
getElementById?(String id)：根據(jù)id屬性值獲取唯一的element對象
getElementsByTag?(String tagName)：根據(jù)標簽名稱獲取元素對象集合
getElementsByAttribute?(String key)：根據(jù)屬性名稱獲取元素對象集合
getElementsByAttributeValue?(String key, String value)：根據(jù)對應的屬性名和屬性值獲取元素對象集合
獲取屬性值
String attr(String key)：根據(jù)屬性名稱獲取屬性值
獲取文本內(nèi)容
String text():獲取文本內(nèi)容
String html():獲取標簽體的所有內(nèi)容(包括字標簽的字符串內(nèi)容)
5. Node：節(jié)點對象
是Document和Element的父類
快捷查詢方式
selector:選擇器
使用的方法：Elements select?(String cssQuery(選擇器語句))
選擇器語句：
div
id
.class
div p
div > p
div[class = ' cl ' ]
XPath：XPath即為XML路徑語言杀狡，它是一種用來確定XML（標準通用標記語言的子 集）文檔中某部分位置的語言
使用Jsoup的Xpath需要額外導入jar包。
查詢w3cshool參考手冊贰镣，使用xpath的語法完成查詢
———————————————————————————————————————————
web服務器軟件：Tomcat
服務器：安裝了服務器軟件的計算機
服務器軟件：接收用戶的請求呜象，處理請求，做出響應
web服務器軟件：接收用戶的請求碑隆，處理請求恭陡，做出響應。
在web服務器軟件中上煤，可以部署web項目休玩，讓用戶通過瀏覽器來訪問這些項目
web容器
常見的java相關的web服務器軟件：
webLogic：oracle公司，大型的JavaEE服務器劫狠，支持所有的JavaEE規(guī)范拴疤，收費的。
webSphere：IBM公司独泞，大型的JavaEE服務器呐矾，支持所有的JavaEE規(guī)范，收費的阐肤。
JBOSS：JBOSS公司的凫佛，大型的JavaEE服務器，支持所有的JavaEE規(guī)范孕惜，收費的愧薛。
Tomcat：Apache基金組織，中小型的JavaEE服務器衫画，僅僅支持少量的JavaEE規(guī)范servlet/jsp毫炉。開源的，免費的削罩。
JavaEE：Java語言在企業(yè)級開發(fā)中使用的技術規(guī)范的總和瞄勾，一共規(guī)定了13項大的規(guī)范
Tomcat：web服務器軟件
1. 下載：http://tomcat.apache.org/
2. 安裝：解壓壓縮包即可。
- 注意：安裝目錄建議不要有中文和空格
3. 卸載：刪除目錄就行了
4. 啟動：
bin/startup.bat ,雙擊運行該文件即可
訪問：瀏覽器輸入：http://localhost:8080 回車訪問自己
http://別人的ip:8080 訪問別人
6. 配置:
部署項目的方式：
1. 直接將項目放到webapps目錄下即可弥激。
hello：項目的訪問路徑-->虛擬目錄
簡化部署：將項目打成一個war包进陡，再將war包放置到webapps目錄下。
- war包會自動解壓縮
2. 配置conf/server.xml文件
在<Host>標簽體中配置
<Context docBase="D:\hello" path="/hehe" />
docBase:項目存放的路徑
path：虛擬目錄
3. 在conf\Catalina\localhost創(chuàng)建任意名稱的xml文件微服。在文件中編寫
<Context docBase="D:\hello" />
虛擬目錄：xml文件的名稱
靜態(tài)項目和動態(tài)項目：
目錄結構
java動態(tài)項目的目錄結構：
-- 項目的根目錄
-- WEB-INF目錄：
-- web.xml：web項目的核心配置文件
-- classes目錄：放置字節(jié)碼文件的目錄
-- lib目錄：放置依賴的jar包
————————————————————————————————————————————
Servlet： server applet
概念：運行在服務器端的小程序
Servlet就是一個接口趾疚，定義了Java類被瀏覽器訪問到(tomcat識別)的規(guī)則。
將來我們自定義一個類，實現(xiàn)Servlet接口糙麦，復寫方法辛孵。
若無法使用server相關結構則導入tomcat中l(wèi)ib目錄下server的jar包
快速入門：
1. 創(chuàng)建JavaEE項目
2. 定義一個類，實現(xiàn)Servlet接口
3. 實現(xiàn)接口中的抽象方法
4. 配置Servlet
在web.xml中配置：
<servlet>
<servlet-name>demo1</servlet-name>
<servlet-class>cn.itcast.web.servlet.ServletDemo1</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>demo1</servlet-name>
<url-pattern>/demo1</url-pattern>
</servlet-mapping>
執(zhí)行原理：
1. 當服務器接受到客戶端瀏覽器的請求后赡磅，會解析請求URL路徑魄缚，獲取訪問的Servlet的資源路徑
2. 查找web.xml文件，是否有對應的<url-pattern>標簽體內(nèi)容焚廊。
3. 如果有冶匹，則在找到對應的<servlet-class>全類名
4. tomcat會將字節(jié)碼文件加載進內(nèi)存，并且創(chuàng)建其對象
5. 調(diào)用其方法
Servlet中的生命周期方法：
1. 被創(chuàng)建：執(zhí)行init方法咆瘟，只執(zhí)行一次
Servlet什么時候被創(chuàng)建徙硅？
默認情況下，第一次被訪問時搞疗，Servlet被創(chuàng)建
可以配置執(zhí)行Servlet的創(chuàng)建時機。
在<servlet>標簽下配置
1. 第一次被訪問時须肆，創(chuàng)建
<load-on-startup>的值為負數(shù)
2. 在服務器啟動時匿乃，創(chuàng)建
<load-on-startup>的值為0或正整數(shù)
Servlet的init方法，只執(zhí)行一次豌汇，說明一個Servlet在內(nèi)存中只存在一個對象幢炸，Servlet是單例的
多個用戶同時訪問時，可能存在線程安全問題拒贱。
解決：盡量不要在Servlet中定義成員變量宛徊。即使定義了成員變量，也不要對修改值
2. 提供服務：執(zhí)行service方法逻澳，執(zhí)行多次
每次訪問Servlet時闸天，Service方法都會被調(diào)用一次。
3. 被銷毀：執(zhí)行destroy方法斜做，只執(zhí)行一次
Servlet被銷毀時執(zhí)行苞氮。服務器關閉時，Servlet被銷毀
只有服務器正常關閉時瓤逼，才會執(zhí)行destroy方法笼吟。
destroy方法在Servlet被銷毀之前執(zhí)行，一般用于釋放資源
Servlet3.0：
好處：
支持注解配置霸旗〈铮可以不需要web.xml了。
步驟：
1. 創(chuàng)建JavaEE項目诱告，選擇Servlet的版本3.0以上撵枢，可以不創(chuàng)建web.xml
2. 定義一個類，實現(xiàn)Servlet接口
3. 復寫方法
4. 在類上使用@WebServlet注解，進行配置
Servlet的體系結構
Servlet -- 接口
|
GenericServlet -- 抽象類
|
HttpServlet -- 抽象類
GenericServlet：將Servlet接口中其他的方法做了默認空實現(xiàn)诲侮，只將service()方法作為抽象
將來定義Servlet類時镀虐，可以繼承GenericServlet，實現(xiàn)service()方法即可
HttpServlet：對http協(xié)議的一種封裝沟绪，簡化操作
定義類繼承HttpServlet
復寫doGet/doPost方法
Servlet相關配置
1. urlpartten:Servlet訪問路徑
一個Servlet可以定義多個訪問路徑 ： @WebServlet({"/d4","/dd4","/ddd4"})
路徑定義規(guī)則：
/xxx：路徑匹配
/xxx/xxx:多層路徑刮便，目錄結構
*.do：擴展名匹配，后綴名可任意選擇
————————————————————————————————————————————
HTTP
概念：Hyper Text Transfer Protocol 超文本傳輸協(xié)議
傳輸協(xié)議：定義了绽慈，客戶端和服務器端通信時恨旱，發(fā)送數(shù)據(jù)的格式
特點：
1. 基于TCP/IP的高級協(xié)議
2. 默認端口號:80
3. 基于請求/響應模型的:一次請求對應一次響應
4. 無狀態(tài)的：每次請求之間相互獨立，不能交互數(shù)據(jù)
歷史版本：
1.0：每一次請求響應都會建立新的連接
1.1：復用連接
請求消息數(shù)據(jù)格式
1. 請求行
請求方式 請求url 請求協(xié)議/版本
GET /login.html HTTP/1.1
請求方式：
HTTP協(xié)議有7中請求方式坝疼，常用的有2種
GET：
1. 請求參數(shù)在請求行中搜贤，在url后。
2. 請求的url長度有限制的
3. 不太安全
POST：
1. 請求參數(shù)在請求體中
2. 請求的url長度沒有限制的
3. 相對安全
2. 請求頭：客戶端瀏覽器告訴服務器一些信息
請求頭名稱: 請求頭值
常見的請求頭：
1. User-Agent：瀏覽器告訴服務器钝凶，我訪問你使用的瀏覽器版本信息
可以在服務器端獲取該頭的信息仪芒，解決瀏覽器的兼容性問題
2. Referer：http://localhost/login.html
告訴服務器，我(當前請求)從哪里來耕陷？
作用：
1. 防盜鏈：
2. 統(tǒng)計工作：
3. 請求空行
空行掂名，就是用于分割POST請求的請求頭，和請求體的哟沫。
4. 請求體(正文)：
封裝POST請求消息的請求參數(shù)的
字符串格式：
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
