文章目錄

前言

目的：簡要的複習web前端知識

主參考鏈接：https://www.w3school.com.cn/

1.Web概述

1.1.軟件架構

C/S: Client/Server 客戶端/服務器端
在用戶本地有一個客戶端程序，在遠程有一個服務器端程序

如：QQ，迅雷…
- 優點：
  
  用戶體驗好
- 缺點：
  
  開發、安裝，部署，維護麻煩
B/S: Browser/Server 瀏覽器/服務器端

只需要一個瀏覽器，用戶通過不同的網址(URL)，客戶訪問不同的服務器端程序
- 優點：開發、安裝，部署，維護簡單
- 缺點：
  1. 如果應用過大，用戶的體驗可能會受到影響
  2. 對硬件要求過高

1.2.B/S架構詳解

資源分類：
- 靜態資源：使用靜態網頁開發技術發佈的資源。
  - 特點：
    - 所有用戶訪問，得到的結果是一樣的。
    - 如：文本，圖片，音頻、視頻, HTML,CSS,JavaScript…
    - 如果用戶請求的是靜態資源，那麼服務器會直接將靜態資源發送給瀏覽器。瀏覽器中內置了靜態資源的解析引擎，可以展示靜態資源
- 動態資源：使用動態網頁及時發佈的資源。
  
  特點：
  - 所有用戶訪問，得到的結果可能不一樣。
  - 如：jsp/servlet,php,asp…
  - 如果用戶請求的是動態資源，那麼服務器會執行動態資源，轉換爲靜態資源，再發送給瀏覽器

2.HTML基礎

2.1.概述

概念：是最基礎的網頁開發語言

Hyper Text Markup Language 超文本標記語言
超文本:

超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本.
標記語言:

由標籤構成的語言。<標籤名稱> 如 html，xml

標記語言不是編程語言。

2.2.快熟入門

語法：

html文檔後綴名 .html 或者 .htm
標籤分爲
- 圍堵標籤：有開始標籤和結束標籤。如 <html> </html>
- 自閉和標籤：開始標籤和結束標籤在一起。如 <br/>
標籤可以嵌套：

需要正確嵌套，不能你中有我，我中有你
- 錯誤：<a><b></a></b>
- 正確：<a><b></b></a>
在開始標籤中可以定義屬性。屬性是由鍵值對構成，值需要用**引號(單雙都可)**引起來
html的標籤不區分大小寫，但是建議使用小寫。

<html>
        <head>
            <title>title</title>
        </head>

        <body>
            <FONT color='red'>Hello World</font><br/>

            <font color='green'>Hello World</font>
        </body>
	
</html>

2.3.標籤學習（部分）

2.3.1.文件標籤：

構成 html 最基本的標籤

<html> : html文檔的根標籤
<head>：頭標籤。用於指定 html 文檔的一些屬性。引入外部的資源
- <meta charset="utf-8"/>：提供有關頁面的元信息 參考
- <link rel="stylesheet" type="text/css" href="css/webbase.css"/>：鏈接一個外部樣式表
<title>：標題標籤。
<body>：體標籤
<!DOCTYPE html>：html5 中定義該文檔是 html 文檔。

2.3.2.文本標籤：

註釋：
<h1> to <h6>：標題標籤。 h1~h6:字體大小逐漸遞減

<p>：段落標籤
<br>：換行標籤
<hr>：展示一條水平線

它的屬性：
- color：顏色
- width：寬度
- size：高度
- align：對其方式
  
  可選：center：居中；left：左對齊；right：右對齊
<b>：字體加粗
<i>：字體斜體
<font>:字體標籤
<center>:文本居中
- 屬性：
  
  color：顏色；size：大小； face：字體

屬性定義：
* 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. 數值：width=‘20’ ,數值的單位，默認是 px(像素)
  2. 數值%：佔比相對於父元素的比例

2.3.3.圖片標籤：

<img>：展示圖片
- 屬性：
  - src：指定圖片的位置
  - alt：規定圖像的替代文本。

<img src="image/jingxuan_2.jpg" align="right" alt="古鎮" width="500" height="500"/>
 <!--相對路徑
		* 以.開頭的路徑
			* ./：代表當前目錄  ./image/1.jpg
			* ../:代表上一級目錄
		     -->
 <img src="./image/jiangwai_1.jpg">
 <img src="../image/jiangwai_1.jpg">

2.3.4.列表標籤：

無序列表：

<ul>
	<li>Coffee</li>
	<li>Milk</li>
</ul>

有序列表：

<ol>
	<li>Coffee</li>
	<li>Milk</li>
</ol>

2.3.5.鏈接標籤：

<a>:定義一個超鏈接

屬性：
- href：指定訪問資源的URL(統一資源定位符)
- target：指定打開資源的方式
- _self：默認值，在當前頁面打開
- _blank：在空白頁面打開

  <a href="http://www.baidu.com">點我</a>

2.3.6.div 和 span：

<p>：標記了一個段落，中間寫一段文字
<div>:每一個 div 佔滿一整行。塊級標籤(自動換行)
<span>：文本信息在一行展示。行內標籤內聯標籤（不會換行）

具體用法，參見：

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

<p><span>some text.</span>some other text.</p>

2.3.7.語義化標籤：

html5 中爲了提高程序的可讀性，提供了一些標籤。

<header>：頁眉
<footer>：頁腳

2.3.8.表格標籤：

<table>：定義表格
* width：寬度
- border：邊框
- cellpadding：定義內容和單元格的距離
- cellspacing：定義單元格之間的距離。如果指定爲0，則單元格的線會合爲一條、
- bgcolor：背景色
- align：對齊方式
<tr>：定義行
- bgcolor：背景色
- align：對齊方式
<td>：定義單元格
- colspan：合併列
- rowspan：合併行
<th>：定義表頭單元格
<caption>：表格標題
<thead>：表示表格的頭部分
<tbody>：表示表格的體部分
<tfoot>：表示表格的腳部分

如果您使用 thead、tfoot 以及 tbody 元素，您就必須使用全部的元素。它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數據前呈現頁腳了。您必須在 table 元素內部使用這些標籤。

  <table border="1">
  <caption>Monthly savings</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
  </tbody>
</table>

2.4.表單標籤

2.4.1.表單：

概念：用於採集用戶輸入的數據的。用於和服務器進行交互。

<form>：用於定義表單的。可以定義一個範圍，範圍代表採集用戶數據的範圍

屬性：

action：指定提交數據的URL
method:指定提交方式

分類：一共7種，2 種比較常用。

get：
1. 請求參數會在地址欄中顯示。會封裝到請求行中。
2. 請求參數大小是有限制的。
3. 不太安全。
post：
2. 請求參數不會再地址欄中顯示。會封裝在請求體中。
2. 請求參數的大小沒有限制。
3. 較爲安全。
其它：HEAD、 PUT、DELETE、OPTIONS、TRACE

總結：

get 查看數據,
post 創建新數據行,
put 更新數據,
delete 刪除數據行

表單項中的數據要想被提交：必須指定其name屬性

2.4.2.表單項標籤：

<input>：可以通過type屬性值，改變元素展示的樣式

type屬性：

text：文本輸入框，默認值

placeholder：指定輸入框的提示信息，當輸入框的內容發生變化，會自動清空提示信息
password：密碼輸入框
radio:單選框

注意：
- 要想讓多個單選框實現單選的效果，則多個單選框的 name 屬性值必須一樣。
- 一般會給每一個單選框提供 value 屬性，指定其被選中後提交的值
- checked 屬性，可以指定默認值。如下，默認爲 male

<form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
</form>

checkbox：複選框

注意：
- 一般會給每一個單選框提供 value 屬性，指定其被選中後提交的值
- checked屬性，可以指定默認值
file：文件選擇框
hidden：隱藏域，用於提交一些信息。

按鈕類：

submit：提交按鈕。可以提交表單
button：普通按鈕
image：圖片提交按鈕

<select>: 下拉列表

子元素：option，指定列表項

<form>
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected="selected">Fiat</option>
        <option value="audi">Audi</option>
    </select>
</form>

<textarea>：文本域

cols：指定列數，每一行有多少個字符
rows：默認多少行。

<textarea rows="10" cols="30">
The cat was playing in the garden. </textarea>

**label **：指定輸入項的文字描述信息

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

注意：label 的 for 屬性一般會和 input 的 id屬性值對應。如果對應了，則點擊label區域，會讓input輸入框獲取焦點。

3.CSS基礎

3.1.概述

概念： Cascading Style Sheets 層疊樣式表

層疊：多個樣式可以作用在同一個html的元素上，同時生效
好處：
1. 功能強大
2. 將內容展示和樣式控制分離
  - 降低耦合度。解耦
  - 讓分工協作更容易
  - 提高開發效率

3.2.CSS的使用

3.2.1.CSS 與html 結合方式

內聯樣式
- 在標籤內使用 style 屬性指定css代碼
- 如：
```
<div style="color:red;">hello css</div>
```

內部樣式

在head標籤內，定義style標籤，style標籤的標籤體內容就是css代碼,
使用選擇器，控制所需要的對象

如：

		<style>
		        div{
		            color:blue;
		        }	
		</style>

			<div>hello css</div>

外部樣式
1. 定義css資源文件。
2. 在head標籤內，定義link標籤，引入外部的資源文件
  
  前兩個屬性爲固定寫法：
  - rel="stylesheet"：定義 href 連接的文檔是一個新樣式表（定義文檔關係）
  - type="text/css"：規定被鏈接文檔的 MIME 類型（文本/css,即css文本）
    
    說如果某種瀏覽器不能識別css的，會將代碼認爲text，從而不顯示也不報錯。

       a.css文件：				
       				div{
       				    color:green;
       					}


		<link rel="stylesheet" type="text/css" 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>3.2.2 css語法

3.2.2.css語法

格式：

選擇器 {
		屬性名1:屬性值1;
		屬性名2:屬性值2;
		...
		}

選擇器:篩選具有相似特徵的元素

多重聲明：

如果要定義不止一個聲明，每一對屬性需要使用；隔開，最後一對屬性可以不加。
記得寫引號

**提示：**如果值爲若干單詞，則要給值加引號""
- p {font-family: "sans serif";}
值的不同寫法和單位
1. 除了英文單詞 red，我們還可以使用十六進制的顏色值 #ff0000：p { color: #ff0000; }
2. 爲了節約字節，我們可以使用 CSS 的縮寫形式：p { color: #f00; }
3. 我們還可以通過兩種方法使用 RGB 值：
  - p { color: rgb(255,0,0); }
  - p { color: rgb(100%,0%,0%); }
請注意，當使用 RGB 百分比時，即使當值爲 0 時也要寫百分比符號。但是在其他的情況下就不需要這麼做了。比如說，當尺寸爲 0 像素時，0 之後不需要使用 px 單位，因爲 0 就是 0，無論單位是什麼。
空格和大小寫

大多數樣式表包含不止一條規則，而大多數規則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯：
```
body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }
```

3.2.3.選擇器

基礎選擇器（優先級1>3>2）

id選擇器：選擇具體的id屬性值的元素。建議在一個html頁面中id值唯一
- 語法：#id屬性值{}
```
     #red {color:red;}
```
元素選擇器：選擇具有相同標籤名稱的元素
- 語法：標籤名稱{}
- 注意：id選擇器優先級高於元素選擇器
```
[html {color:black;}
```
類選擇器：選擇具有相同的class屬性值的元素。
- 語法：.class屬性值{}
- 注意：類選擇器選擇器優先級高於元素選擇器
```
.fancy td {
	color: #f60;
	background: #666;
	}
```

擴展選擇器：

選擇所有元素
- 語法： *{}
並集選擇器：選擇兩個
- 選擇器1,選擇器2{}
```
h2, p {color:gray;}
```
後代選擇器(包含選擇器)：選擇器1元素下的選擇器2元素
- 語法： 選擇器1 選擇器2{}
```
h1 em {color:red;}
```
```
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
```
- 注意：兩個元素之間的層次間隔可以是無限的，可選擇任意後代
子元素選擇器：只選擇某個元素的子元素（一層）
- 語法： 選擇器1 > 選擇器2{}
```
h1 > strong {color:red;}
```
```
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
```
- 拓展：結合後代選擇器和子選擇器
```
table.company td > p
```
  上面的選擇器會選擇作爲 td 元素子元素的所有 p 元素，這個 td 元素本身從 table 元素繼承，該table元素有一個包含 company 的 class 屬性。

屬性選擇器：選擇元素名稱，屬性名=屬性值的元素

語法： 元素名稱[屬性名]{}

<!--對有 href 屬性的錨（a 元素）應用樣式>
	a[href] {color:red;}
<!將同時有 href 和 title 屬性的 HTML 超鏈接的文本設置爲紅色>
	a[href][title] {color:red;}

<h1>可以應用樣式：</h1>
<a title="W3School Home" href="http://w3school.com.cn">W3School</a>
<hr />
<h1>無法應用樣式：</h1>
<a href="http://w3school.com.cn">W3School</a>

相鄰兄弟選擇器：選擇緊接在另一元素後的元素（二者必須有相同父元素）。
- 語法：元素1 + 元素2 {}
```
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
```
```
li + li {font-weight:bold;}
```
  - 上面這個選擇器只會把列表中的第二個和第三個列表項變爲粗體。第一個列表項不受影響。
  - 這兩個列表是相鄰兄弟，列表項本身也是相鄰兄弟。不過，第一個列表中的列表項與第二個列表中的列表項不是相鄰兄弟，因爲這兩組列表項不屬於同一父元素（最多隻能算堂兄弟）。
  - 請記住，用一個結合符只能選擇兩個相鄰兄弟中的第二個元素。

僞類選擇器：選擇一些元素具有的狀態

語法： 元素:狀態{}

如：在 <a>標籤上設置

a:link {color: #FF0000}		/* 未訪問的鏈接 */
a:visited {color: #00FF00}	/* 已訪問的鏈接 */
a:hover {color: #FF00FF}	/* 鼠標移動到鏈接上 */
a:active {color: #0000FF}	/* 選定的鏈接 */

拓展：

first-child 僞類：選擇元素的第一個子元素

 p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

<div>
	<p>These are the necessary steps:</p>
<ul>
	<li>Intert Key</li>
	<li>Turn key <strong>clockwise</strong></li>
	<li>Push accelerator</li>
</ul>
	<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

第一個規則將作爲某元素第一個子元素的所有 p 元素設置爲粗體。
第二個規則將作爲某個元素（在 HTML 中，這肯定是 ol 或 ul 元素）第一個子元素的所有 li 元素變成大寫。

:lang 僞類：使你有能力爲不同的語言定義特殊的規則

在下面的例子中，:lang 類爲屬性值爲 no 的 q 元素定義引號的類型：

<html>
<head>
<style type="text/css">
    q:lang(no)
       {
       quotes: "~" "~"
       }
</style>
</head>

<body>
	<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

僞元素：用於向某些選擇器設置特殊效果

參考鏈接
1. :first-line ：用於向文本的首行設置特殊樣式。
2. :first-letter：用於向文本的首字母設置特殊樣式
3. :before：在元素的內容前面插入新內容。
4. :after：可以在元素的內容之後插入新內容。

3.2.4.屬性

字體、文本
- font-size：字體大小
- color：文本顏色
- text-align：對其方式
- line-height：行高
背景
- background：
邊框
- border：設置邊框，符合屬性
尺寸
- width：寬度
- height：高度
盒子模型：控制佈局 建議參考
- margin：外邊距
- padding：內邊距
  - 默認情況下內邊距會影響整個盒子的大小
  - box-sizing: border-box; 設置盒子的屬性，讓width和height就是最終盒子的大小
- float：浮動
- left
- right

4.JavaScript

4.1.概述

概念： 一門客戶端腳本語言
- 運行在客戶端瀏覽器中的。每一個瀏覽器都有 JavaScript 的解析引擎
- 腳本語言：不需要編譯，直接就可以被瀏覽器解析執行了

功能：可以來增強用戶和 html 頁面的交互過程，可以來控制 html 元素，讓頁面有一些**動態的效果，**增強用戶的體驗。

JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)

命名規範：JS 大小寫敏感

常量：全部大寫 NUM
變量：小駝峯式 userInfo
函數 & 方法：小駝峯式 getName()
類 & 構造函數：大寫駝峯式 Persion
私有屬性和方法：前綴爲下劃線 _name: string;

4.2.ECMAScript基本語法

客戶端腳本語言的標準。

4.2.1.與html結合方式

內部 JS：
- 定義<script>，標籤體內容就是js代碼
外部 JS：
- 定義<script>，通過src屬性引入外部的js文件

注意：

<script>可以定義在html頁面的任何地方。但是定義的位置會影響執行順序。
<script>可以定義多個。

4.2.2.註釋

單行註釋：//註釋內容
多行註釋：/* 註釋內容 */

4.2.3.數據類型

字符串值
數值
布爾值
數組
對象。

JavaScript 定義了 5 種原始數據類型，舉例：

number：數字。整數/小數/NaN(比如字符串轉換失敗的數字"123aa")
string：字符串。字符串 “abc” “a” ‘abc’
boolean: true 和 false
null：一個對象爲空的佔位符
undefined：未定義。如果一個變量沒有給初始化值，則會被默認賦值爲 undefined

4.2.4.變量

變量：一小塊存儲數據的內存空間
Java語言是強類型語言，而JavaScript是弱類型語言。
* 強類型：在開闢變量存儲空間時，定義了空間將來存儲的數據的數據類型。只能存儲固定類型的數據。
- 弱類型：在開闢變量存儲空間時，不定義空間將來的存儲數據類型，可以存放任意類型的數據。
語法：
- var 變量名 = 初始化值;
- typeof 運算符：獲取變量的類型。
  
  注：null 運算後得到的是 object
- 未使用等號賦值，聲明之後，變量是沒有值的。（技術上，它的值是 undefined。）

4.2.5.運算

一元運算符：只有一個運算數的運算符

++與--：自增、自減

混合用：前++先運算在使用，後++先用後運算。（運算即自增、自減）
- +(-)：正負號
  
  注意：在 JS 中，如果運算數不是運算符所要求的類型，那麼js引擎會自動的將運算數進行類型轉換
其他類型轉 number：
- string 轉 number：按照字面值轉換。如果字面值不是數字，則轉爲NaN（不是數字的數字）
- boolean 轉 number：true轉爲1，false轉爲0

算數運算符

+ - * / %…

賦值運算符

= += -+=…

比較運算符

> < >= <= == ===(全等於)

比較方式

類型相同：直接比較

字符串：按照字典順序比較。按位逐一比較，直到得出大小爲止。

類型不同：先進行類型判斷，再比較
- ===：全等於。在比較之前，先判斷類型，如果類型不一樣，則直接返回false

邏輯運算符

&& || !

其他類型轉boolean：

number：0或NaN爲假，其他爲真
string：除了空字符串("")，其他都是true
null&undefined:都是 false
對象：所有對象都爲true

三元運算符

表達式? 值1:值2;判斷表達式的值，如果是**true **則取值1，如果是 false 則取值2；

 var c = a > b ? 1:0;

4.2.6.流程控制語句

if...else...
switch:
- 在java中，switch語句可以接受的數據類型：
  
  byte int shor char,枚舉(1.5) ,String(1.7)
- 在JS中,switch語句可以接受任意的原始數據類型
while
do...while
for

4.2.7. JS 特殊語法

語句以;結尾，如果一行只有一條語句則;可以省略 (不建議)
變量的定義使用var關鍵字，也可以不使用
- 用：定義的變量是局部變量
- 不用：定義的變量是全局變量(不建議)
tips：若定義在方法內部，需要調用纔可使用。

4.2.8.基本對象

在 JavaScript 中，幾乎“所有事物”都是對象。除了前面數據類型提到的5種原始值，都是對象。

Function：函數(方法)對象

創建方式：

 1. var fun = new Function(形式參數列表,方法體);  //忘掉吧
 2. 
     function 方法名稱(形式參數列表){
              方法體
     }

 3. 
        var 方法名 = function(形式參數列表){
                        方法體
         }

屬性：方法名稱.length:代表形參的個數
特點：
1. 方法定義是，形參的類型不用寫,返回值類型也不寫。
2. 方法是一個對象，如果定義名稱相同的方法，會覆蓋
3. 在JS中，方法的調用只與方法的名稱有關，和參數列表無關(無重載)
4. 在方法聲明中有一個隱藏的內置對象（數組），arguments,封裝所有的實際參數
調用：

方法名稱(實際參數列表);

Array:數組對象

創建：
- var arr = new Array(元素列表);
- var arr = new Array(默認長度);
- var arr = [元素列表];
方法
- join(參數):將數組中的元素按照指定的分隔符拼接爲字符串
- push()：向數組的末尾添加一個或更多元素，並返回新的長度。
屬性：length:數組的長度
特點：JS中，數組元素的類型可變的，數組長度可變的。

Boolean

new Boolean(value);	//構造函數
Boolean(value);		//轉換函數,返回 bool 值

Date：日期對象

創建： var date = new Date();
方法：
- toLocaleString()：返回當前date對象對應的時間本地字符串格式
- getTime():獲取毫秒值。返回當前如期對象描述的時間到1970年1月1日零點的毫秒值差

Math：數學對象

創建：Math對象不用創建，直接使用。 Math.方法名();
方法：
- random():返回 0 ~ 1 之間的隨機數。含0不含1
- ceil(x)：對數進行上舍入。
- floor(x)：對數進行下舍入。
- round(x)：把數四捨五入爲最接近的整數。
屬性： PI 圓周率

Number

var myNum=new Number(value);//返回一個新創建的 Number 對象
var myNum=Number(value);//它將把自己的參數轉換成一個原始的數值，並且返回這個值

String

new String(s);//它返回一個新創建的 String 對象
String(s);//只把 s 轉換成原始的字符串，並返回轉換後的值

Global

特點：全局對象，這個Global中封裝的方法不需要對象就可以直接調用。 方法名();
方法：
- encodeURI():urI 編碼
- decodeURI():urI 解碼
- encodeURIComponent():url 編碼,編碼的字符更多(解析含有分隔符，比如 ? 和 #)
- decodeURIComponent():url 解碼
- parseInt():將字符串轉爲數字
  
  逐一判斷每一個字符是否是數字，直到不是數字爲止，將前邊數字部分轉爲number
- isNaN():判斷一個值是否是 NaN
  
  NaN六親不認，連自己都不認。NaN參與的==比較全部爲 false
- eval():計算 JavaScript 字符串，並把它作爲腳本代碼來執行。
URl 編碼： %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

RegExp：正則表達式對象

正則表達式：定義字符串的組成規則。
欲更詳細，參考鏈接

單個字符:[]：方括號用於查找某個範圍內的字符：
- 如： [a] [ab] [a-zA-Z0-9_]
元字符:代表特殊含義的單個字符:
- \d:單個數字字符 [0-9]
- \w:單個單詞字符[a-z A-Z 0-9]
量詞符號：
- ?：表示出現0次或1次
- *：表示出現0次或多次
- +：出現1次或多次
- {m,n}:表示 m<= 數量 <= n
  
  m如果缺省： {,n}最多n次
  
  n如果缺省：{m,} 最少m次
開始結束符號
- ^:開始
- $:結束
正則對象：

創建
- var reg = new RegExp("正則表達式");
- var reg = /正則表達式/;
方法
- test(參數):驗證指定的字符串是否符合正則定義的規範

4.3.BOM

4.3.1.概述

概念：Browser Object Model 瀏覽器對象模型

將瀏覽器的各個組成部分封裝成對象。

組成：

Window：窗口對象
Navigator：瀏覽器對象
Screen：顯示器屏幕對象
History：歷史記錄對象
Location：地址欄對象

4.3.2.Window：窗口對象

方法

與彈出框有關的方法：
- alert() 顯示帶有一段消息和一個確認按鈕的警告框。
- confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
  - 如果用戶點擊確定按鈕，則方法返回 true
  - 如果用戶點擊取消按鈕，則方法返回 false
- prompt() 顯示可提示用戶輸入的對話框。
  - 返回值：獲取用戶輸入的值
與打開關閉有關的方法：
- close() 關閉瀏覽器窗口。誰調用我，我關誰
- open() 打開一個新的瀏覽器窗口。返回新的Window對象
與定時器有關的方式
- setTimeout() 在指定的毫秒數後調用函數或計算表達式。
  - 參數：
    1. js代碼或者方法對象
    2. 毫秒值
  - 返回值：唯一標識，用於取消定時器
- clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
- setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。
- clearInterval() 取消由 setInterval() 設置的 timeout。

屬性：

獲取其他BOM對象：
- history
- location
- Navigator
- Screen:
獲取DOM對象
- document

特點：

Window對象不需要創建可以直接使用 window使用。 window.方法名();
window引用可以省略。 方法名();

4.3.3.Location：地址欄對象

創建(獲取)：
1. window.location
2. location
方法：
- reload() 重新加載當前文檔。刷新
屬性
- href 設置或返回完整的 URL。

4.3.4.History：歷史記錄對象

創建(獲取)：
1. window.history
2. history
方法：
- back() 加載 history 列表中的前一個 URL。
- forward() 加載 history 列表中的下一個 URL。
- go(參數) 加載 history 列表中的某個具體頁面。

參數：
- 正數：前進幾個歷史記錄
- 負數：後退幾個歷史記錄

屬性：
- length 返回當前窗口歷史列表中的 URL 數量。

4.4.DOM

4.4.1.概述

概念： Document Object Model 文檔對象模型

將標記語言文檔的各個組成部分，封裝爲對象。可以使用這些對象，對標記語言文檔進行CRUD的動態操作。

W3C DOM 標準被分爲 3 個不同的部分：

核心 DOM - 針對任何結構化文檔的標準模型
- Document：文檔對象
- Element：元素對象
- Attribute：屬性對象
- Text：文本對象
- Comment：註釋對象
- Node：節點對象，其他5個的父對象
XML DOM：針對 XML 文檔的標準模型
HTML DOM ：針對 HTML 文檔的標準模型

4.4.2.核心DOM

Document：文檔對象

創建(獲取)：在html中dom模型中可以使用 window 對象來獲取
- window.document
- document
方法：

獲取 Element 對象：
- getElementById() ：根據 id 屬性值獲取元素對象。id 屬性值一般唯一
- getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
- getElementsByClassName():根據 Class 屬性值獲取元素對象們。返回值是一個數組
- getElementsByName(): 根據 name 屬性值獲取元素對象們。返回值是一個數組
創建其他 DOM 對象：
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()

Element：元素對象

獲取/創建：通過document 來獲取和創建
方法：
- removeAttribute()：刪除屬性
- setAttribute()：設置屬性

Node：節點對象，其他5個的父對象

特點：所有dom對象都可以被認爲是一個節點
方法：

CRUD dom樹：
- appendChild()：向節點的子節點列表的結尾添加新的子節點。
- removeChild() ：刪除（並返回）當前節點的指定子節點。
- replaceChild()：用新節點替換一個子節點。
屬性：
- parentNode 返回節點的父節點。

4.4.3.HTML DOM

標籤體的設置和獲取：innerHTML
使用 html 元素對象的屬性
控制元素樣式
1. 使用元素的style屬性來設置

提前定義好類選擇器的樣式，通過元素的 className 屬性來設置其 class 屬性值。

 <script>
   	document.getElementById("p1").innerHTML="New text!";
   	//修改樣式，font-size--> fontSize
   	document.getElementById("p2").style.fontSize = "20px";
</script>

4.4.4.事情監聽

概念：某些組件被執行了某些操作後，觸發某些代碼的執行。

事件：某些操作。如：單擊，雙擊，鍵盤按下了，鼠標移動了
事件源：組件。如：按鈕文本輸入框…
監聽器：代碼。
註冊監聽：將事件，事件源，監聽器結合在一起。當事件源上發生了某個事件，則觸發執行某個監聽器代碼。

常見的事件：

點擊事件：
- onclick：單擊事件
- ondblclick：雙擊事件
焦點事件
- onblur：失去焦點
- onfocus:元素獲得焦點。
加載事件：
- onload：一張頁面或一幅圖像完成加載。
加載事件：
- onload：一張頁面或一幅圖像完成加載。
鼠標事件：
- onmousedown 鼠標按鈕被按下。
- onmouseup 鼠標按鍵被鬆開。
- onmousemove 鼠標被移動。
- onmouseover 鼠標移到某元素之上。
- onmouseout 鼠標從某元素移開。
鍵盤事件：
- onkeydown 某個鍵盤按鍵被按下。
- onkeyup 某個鍵盤按鍵被鬆開。
- onkeypress 某個鍵盤按鍵被按下並鬆開。
選擇和改變
onchange 域的內容被改變。
onselect 文本被選中。
表單事件：
- onsubmit 確認按鈕被點擊。
- onreset 重置按鈕被點擊。

5.JSP

JSP（全稱 Java Server Pages）是由 Sun Microsystems 公司倡導和許多公司參與共同創建的一種使軟件開發者可以響應客戶端請求，而動態生成 HTML、XML 或其他格式文檔的Web網頁的技術標準。菜鳥教程

一個特殊的頁面，其中既可以指定定義html標籤，又可以定義 java 代碼
JSP 本質上就是一個 Servlet
通過網頁表單獲取用戶輸入數據、訪問數據庫及其他數據源，然後動態地創建網頁。
JSP標籤有多種功能，比如訪問數據庫、記錄用戶選擇信息、訪問JavaBeans組件等，還可以在不同的網頁中傳遞控制信息和共享信息。

生命週期，與 servlet 相似

編譯階段：servlet容器編譯servlet源文件，生成servlet類
初始化階段：加載與JSP對應的servlet類，創建其實例，並調用它的初始化方法
執行階段：調用與 JSP 對應的 servlet 實例的服務方法
銷燬階段：調用與JSP對應的servlet實例的銷燬方法，然後銷燬servlet實例

5.1.語法

腳本程序 可以包含任意量的Java語句、變量、方法或表達式，只要它們在腳本語言中是有效的。
JSP聲明 一個聲明語句可以聲明一個或多個變量、方法，供後面的Java代碼使用。在JSP文件中，您必須先聲明這些變量和方法然後才能使用它們。
JSP表達式 一個JSP表達式中包含的腳本語言表達式，先被轉化成String，然後插入到表達式出現的地方。表達式元素中可以包含任何符合 Java 語言規範的表達式，但是不能使用分號來結束表達式。