給自己腦袋裏的html、css、JavaScript等概念做個梳理，方便以後複習
不過這方面的知識，需要不斷練習，不會用就看w3cschool的文檔，慢慢就上手了

文章目錄

Javaweb學習

WEB概念概述

JavaWeb:使用Java語言開發基於互聯網的項目

軟件架構

C/S: Client/Server 客戶端/服務器端。
- 在用戶本地有一個客戶端程序，在遠程有一個服務器端程序
- 優點：用戶體驗好
- 缺點：開發、安裝，部署，維護麻煩
B/S: Browser/Server 瀏覽器/服務器端
- 只需要一個瀏覽器，用戶通過不同的網址(URL)，客戶訪問不同的服務器端程序
- 優點：開發、安裝，部署，維護簡單
- 缺點：
  1. 如果應用過大，用戶的體驗可能會受到影響
  2. 對硬件要求過高

B/S架構詳解

靜態資源：使用靜態網頁開發技術發佈的資源。
特點：
1. 所有用戶訪問，得到的結果是一樣的
2. 如果用戶請求的是靜態資源，那麼服務器會直接將靜態資源發送給瀏覽器。瀏覽器中內置了靜態資源的解析引擎，可以展示靜態資源
動態資源：使用動態網頁及時發佈的資源。
特點：
1. 所有用戶訪問，得到的結果可能不一樣
2. 如果用戶請求的是動態資源，那麼服務器會執行動態資源，轉換爲靜態資源，再發送給瀏覽器

靜態資源

HTML：用於搭建基礎網頁，展示頁面的內容
CSS：用於美化頁面，佈局頁面
JavaScript：控制頁面的元素，讓頁面有一些動態的效果

HTML

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

Hyper Text Markup Language 超文本標記語言
1. 超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本
2. 標記語言是由標籤構成的語言，並不說編程語言。<標籤名稱> 如 html，xml
快速入門

語法
1. html文檔後綴名 .html 或者 .htm
2. 標籤分類
圍堵標籤：有開始標籤和結束標籤。如 <html> </html>
自閉和標籤：開始標籤和結束標籤在一起。如 <br/>
3. 標籤可以嵌套：需要正確嵌套，不能你中有我，我中有你，如<a><b></b></a>
4. 在開始標籤中可以定義屬性。屬性是由鍵值對構成，值需要用引號(單雙都可)引起來
5. html的標籤不區分大小寫，但是建議使用小寫。

代碼
```
<html>

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

</html>
```

標籤學習

文件標籤：構成html最基本的標籤


	html:html文檔的根標籤
	head：頭標籤。用於指定html文檔的一些屬性。引入外部的資源
	title：標題標籤。
	body：體標籤
	<!DOCTYPE html>：html5中定義該文檔是html文檔

文本標籤：和文本有關的標籤


	 	<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. 數值%：佔比相對於父元素的比例

圖片標籤

<!--
	src:指定圖片的位置
	align:擺放位置
	alt:圖片的名稱，加載不出圖片時會顯示出來
	width:寬度
	height:高度
-->
<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">

列表標籤


	有序列表：
		ol:
		li:
	無序列表：
		ul:
		li:

鏈接標籤

<!-- 
a:定義一個超鏈接
	屬性：
		* href：指定訪問資源的URL(統一資源定位符)
		* target：指定打開資源的方式
			* _self:默認值，在當前頁面打開
			* _blank：在空白頁面打開
-->
<a href="https://www.baidu.com" target="_self">當前頁面跳轉</a>
<br>
<a href="https://www.baidu.com" target="_blank">新頁面跳轉</a>
<br>
<a href="https://www.baidu.com"><img src="image/圖片.jpg"></a>

div和span

<!-- 
div:每一個div佔滿一整行。塊級標籤
span：文本信息在一行展示，行內標籤 內聯標籤
-->
<div></div>
<span></span>

語義化標籤：html5中爲了提高程序的可讀性，提供了一些標籤
```
	<header>：頁眉
	<footer>：頁腳
```

表格標籤

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

HTML標籤：表單標籤

概念：用於採集用戶輸入的數據的。用於和服務器進行交互。
form：用於定義表單的。可以定義一個範圍，範圍代表採集用戶數據的範圍

屬性
1. action：指定提交數據的URL
2. method:指定提交方式（一共7種，2種比較常用）
get
1. 請求參數會在地址欄中顯示。
2. 會封裝到請求行中(HTTP協議後講解)。
3. 請求參數大小是有限制的.不太安全
post：
1. 請求參數不會再地址欄中顯示。會封裝在請求體中(HTTP協議後講解)
2. 請求參數的大小沒有限制。
3. 較爲安全。
注意：表單項中的數據要想被提交：必須指定其name屬性

表單項標籤

<!-- 
input：可以通過type屬性值，改變元素展示的樣式
	type屬性：
		text：文本輸入框，默認值
			placeholder：指定輸入框的提示信息，當輸入框的內容發生變化，會自動清空提示信息	-->
	<input type="text" placeholder="請輸入">
	
	
	<!-- password：密碼輸入框 -->
	<input type="password">
	
	<!-- radio:單選框
		* 注意：
			1. 要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。
			2. 一般會給每一個單選框提供value屬性，指定其被選中後提交的值
			3. checked屬性，可以指定默認值 -->
	<input type="radio" name="gender" value="male">
	<input type="radio" name="gender" value="female">	
	
	<!--checkbox：複選框
		* 注意：
			1. 一般會給每一個單選框提供value屬性，指定其被選中後提交的值
			2. checked屬性，可以指定默認值 -->

	<!-- file：文件選擇框 -->
	<input type="file">
		
	<!-- hidden：隱藏域，用於提交一些信息。 -->
	<input type="hidden">
	
	<!-- 按鈕：
		submit：提交按鈕。可以提交表單
		button：普通按鈕
		image：圖片提交按鈕
			src屬性指定圖片的路徑	-->
	<input type="submit">
	<input type="button">
	<input type="image">

   <!-- label：指定輸入項的文字描述信息
	   * 注意：
		   label的for屬性一般會和 input 的 id屬性值 對應。如果對應了，則點擊label區域，會讓input輸入框獲取焦點。-->
   <input type="label" for="name">
   <input type="text" id="name">
   
<!-- select: 下拉列表
	子元素：option，指定列表項 -->
	<select>
		<option>男</option>
		<option>女</option>
	</select>
	
<!-- textarea：文本域
	cols：指定列數，每一行有多少個字符
	rows：默認多少行。 -->
	<textarea rows="3" cols="20">
		大象大象你的鼻子怎麼那麼長
	</textarea>

CSS：頁面美化和佈局控制

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

CSS的使用：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標籤，引入外部的資源文件 -->
<!-- a.css文件： 
	div{
	    color:green;
	}   -->
<link rel="stylesheet" href="css/a.css">
<!-- 也可以寫成 
<style>
    @import "css/a.css";
</style>
-->
<div>hello css</div>
<div>hello css</div>

注意：

1,2,3種方式 css作用範圍越來越大
1方式不常用，後期常用2,3

CSS語法
- 格式：
  選擇器 {
  屬性名1:屬性值1;
  屬性名2:屬性值2;
  …
  }
- 選擇器:篩選具有相似特徵的元素
- 注意：
  每一對屬性需要使用；隔開，最後一對屬性可以不加；
選擇器：篩選具有相似特徵的元素

分類
1. 基礎選擇器
  1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一
  語法：#id屬性值{}
  2. 元素選擇器：選擇具有相同標籤名稱的元素
  語法：標籤名稱{}
  注意：id選擇器優先級高於元素選擇器
  3. 類選擇器：選擇具有相同的class屬性值的元素。
  語法：.class屬性值{}
  注意：類選擇器選擇器優先級高於元素選擇器
2. 擴展選擇器：
  1. 選擇所有元素：
    語法： *{}
  2. 並集選擇器：
    選擇器1,選擇器2{}
  3. 子選擇器：篩選選擇器1元素下的選擇器2元素
    語法：選擇器1 選擇器2{}
  4. 父選擇器：篩選選擇器2的父元素選擇器1
    語法：選擇器1 > 選擇器2{}
  5. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
    語法：元素名稱[屬性名=“屬性值”]{}
  6. 僞類選擇器：選擇一些元素具有的狀態
    語法：元素:狀態{}
    狀態：
    link：初始化的狀態
    visited：被訪問過的狀態
    active：正在訪問狀態
    hover：鼠標懸浮狀態

屬性

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

	float：浮動
		left
		right

JavaScript

概念：一門客戶端腳本語言
- 運行在客戶端瀏覽器中的。每一個瀏覽器都有JavaScript的解析引擎
- 腳本語言：不需要編譯，直接就可以被瀏覽器解析執行了
功能：
- 可以來增強用戶和html頁面的交互過程，可以來控制html元素，讓頁面有一些動態的效果，增強用戶的體驗。
JavaScript發展史：
1. 1992年，Nombase公司，開發出第一門客戶端腳本語言，專門用於表單的校驗。命名爲： C-- ，後來更名爲：ScriptEase
2. 1995年，Netscape(網景)公司，開發了一門客戶端腳本語言：LiveScript。後來，請來SUN公司的專家，修改LiveScript，命名爲JavaScript
3. 1996年，微軟抄襲JavaScript開發出JScript語言
4. 1997年，ECMA(歐洲計算機制造商協會)，制定出客戶端腳本語言的標準：ECMAScript，就是統一了所有客戶端腳本語言的編碼方式。
JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)
ECMAScript：客戶端腳本語言的標準

基本語法
1. 與html結合方式
  內部JS：定義<script>，標籤體內容就是js代碼
  外部JS：定義<script>，通過src屬性引入外部的js文件
  注意：
  * <script>可以定義在html頁面的任何地方。但是定義的位置會影響執行順序。
  * <script>可以定義多個。
2. 註釋
  1. 單行註釋：//註釋內容
  2. 多行註釋：/*註釋內容*/
3. 數據類型：
  1. 原始數據類型(基本數據類型)：
    1. number：數字。整數/小數/NaN(not a number 一個不是數字的數字類型)
    2. string：字符串。字符串 “abc” “a” ‘abc’
    3. boolean: true和false
    4. null：一個對象爲空的佔位符
    5. undefined：未定義。如果一個變量沒有給初始化值，則會被默認賦值爲undefined
  2. 引用數據類型：對象
4. 變量
  - 變量：一小塊存儲數據的內存空間
  - Java語言是強類型語言，而JavaScript是弱類型語言。
    - 強類型：在開闢變量存儲空間時，定義了空間將來存儲的數據的數據類型。只能存儲固定類型的數據
    - 弱類型：在開闢變量存儲空間時，不定義空間將來的存儲數據類型，可以存放任意類型的數據。
  - 語法：
    var 變量名 = 初始化值;
  - typeof運算符：獲取變量的類型。
    注：null運算後得到的是object
5. 運算符
  1. 一元運算符：只有一個運算數的運算符 ++，-- ， +(正號)
    - ++ --: 自增(自減)
      - ++(–) 在前，先自增(自減)，再運算
      - ++(–) 在後，先運算，再自增(自減)
    - +(-)：正負號
    - 注意：在JS中，如果運算數不是運算符所要求的類型，那麼js引擎會自動的將運算數進行類型轉換
    其他類型轉number：
    string轉number：按照字面值轉換。如果字面值不是數字，則轉爲NaN（不是數字的數字）
    boolean轉number：true轉爲1，false轉爲0
  2. 算數運算符 + - * / % ...
  3. 賦值運算符 = += -+....
  4. 比較運算符 > < >= <= == ===(全等於)
    - 比較方式
      1. 類型相同：直接比較
      * 字符串：按照字典順序比較。按位逐一比較，直到得出大小爲止。
      2. 類型不同：先進行類型轉換，再比較
      * ===：全等於。在比較之前，先判斷類型，如果類型不一樣，則直接返回false
  5. 邏輯運算符 && || !
    - 其他類型轉boolean：
      1. number：0或NaN爲假，其他爲真
      2. string：除了空字符串("")，其他都是true
      3. null&undefined:都是false
      4. 對象：所有對象都爲true
  6. 三元運算符 ? : 表達式
    - 語法：
      - 表達式? 值1:值2;
      - 判斷表達式的值，如果是true則取值1，如果是false則取值2；
6. 流程控制語句
  1. if…else…
  2. switch:
    - 在java中，switch語句可以接受的數據類型： byte int shor char,枚舉(1.5) ,String(1.7)
      - switch(變量):
        case 值:
    - 在JS中,switch語句可以接受任意的原始數據類型
  3. while
  4. do…while
  5. for
7. JS特殊語法
  1. 語句以;結尾，如果一行只有一條語句則 ;可以省略 (不建議)
  2. 變量的定義使用var關鍵字，也可以不使用
    - 用：定義的變量是局部變量
    - 不用：定義的變量是全局變量(不建議)
8. 練習：99乘法表

<!DOCTYPE html>
		<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <title>99乘法表</title>
		    <style>
		        td{
		            border: 1px solid;
		        }
		
		    </style>
		
		    <script>
		
		        document.write("<table  align='center'>");
		         //1.完成基本的for循環嵌套，展示乘法表
		        for (var i = 1; i <= 9 ; i++) {
		            document.write("<tr>");
		            for (var j = 1; j <=i ; j++) {
		                document.write("<td>");
		
		                //輸出  1 * 1 = 1
		                document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");
		
		                document.write("</td>");
		            }
		            /*//輸出換行
		            document.write("<br>");*/
		
		            document.write("</tr>");
		        }
		
		        //2.完成表格嵌套
		        document.write("</table>");
		
		    </script>
		</head>
		<body>
		
		</body>
		</html>

基本對象
1. Function：函數(方法)對象
  1. 創建：
```
 function 方法名稱(形式參數列表){
                    方法體
                }
```
```
var 方法名 = function(形式參數列表){
                    方法體
               }
```
  2. 特點
    1. 方法定義是，形參的類型不用寫,返回值類型也不寫。
    2. 方法是一個對象，如果定義名稱相同的方法，會覆蓋
    3. 在JS中，方法的調用只與方法的名稱有關，和參數列表無關
    4. 在方法聲明中有一個隱藏的內置對象（數組），arguments,封裝所有的實際參數
  3. 調用：方法名稱(實際參數列表);
2. Array:數組對象
  1. 創建：
    1. var arr = new Array(元素列表);
    2. var arr = new Array(默認長度);
    3. var arr = [元素列表];
  2. 方法
    join(參數):將數組中的元素按照指定的分隔符拼接爲字符串
    push() 向數組的末尾添加一個或更多元素，並返回新的長度。
  3. 屬性
    length:數組的長度
  4. 特點：
    1. JS中，數組元素的類型可變的。
    2. JS中，數組長度可變的。
3. Boolean
4. Date：日期對象
  1. 創建：var date = new Date();
  2. 方法：
    toLocaleString()：返回當前date對象對應的時間本地字符串格式
    getTime():獲取毫秒值。返回當前如期對象描述的時間到1970年1月1日零點的毫秒值差
5. Math：數學對象
  1. 特點：Math對象不用創建，直接使用。 Math.方法名();
  2. 方法：
    random():返回 0 ~ 1 之間的隨機數。含0不含1
    ceil(x)：對數進行上舍入。
    floor(x)：對數進行下舍入。
    round(x)：把數四捨五入爲最接近的整數。
  3. 屬性：PI
6. Number
7. String
8. RegExp：正則表達式對象
  1. 正則表達式：定義字符串的組成規則。
    1. 單個字符:[]
      如： [a] [ab] [a-zA-Z0-9_]
      - 特殊符號代表特殊含義的單個字符:
        \d:單個數字字符 [0-9]
        \w:單個單詞字符[a-zA-Z0-9_]
    2. 量詞符號：
      ?：表示出現0次或1次
      *：表示出現0次或多次
      +：出現1次或多次
      {m,n}:表示 m<= 數量 <= n
      * m如果缺省： {,n}:最多n次
      * n如果缺省：{m,} 最少m次
    3. 開始結束符號
      - ^:開始
      - $:結束
  2. 正則對象：
    1. 創建
      1. var reg = new RegExp(“正則表達式”);
      2. var reg = /正則表達式/;
    2. 方法
      1. test(參數):驗證指定的字符串是否符合正則定義的規範
9. Global
  1. 特點：全局對象，這個Global中封裝的方法不需要對象就可以直接調用。方法名();
  2. 方法：
    encodeURI():url編碼
    decodeURI():url解碼
    
    encodeURIComponent():url編碼,編碼的字符更多
    decodeURIComponent():url解碼
    
    parseInt():將字符串轉爲數字
    - 逐一判斷每一個字符是否是數字，直到不是數字爲止，將前邊數字部分轉爲number
      isNaN():判斷一個值是否是NaN
    - NaN六親不認，連自己都不認。NaN參與的==比較全部問false
    eval():講 JavaScript 字符串，並把它作爲腳本代碼來執行。

BOM

概念：Browser Object Model 瀏覽器對象模型。將瀏覽器的各個組成部分封裝成對象。
組成：
- Window：窗口對象
- Navigator：瀏覽器對象
- Screen：顯示器屏幕對象
- History：歷史記錄對象
- Location：地址欄對象
Window：窗口對象
1. 方法
  1. 與彈出框有關的方法：
    alert() 顯示帶有一段消息和一個確認按鈕的警告框。
    confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
    - 如果用戶點擊確定按鈕，則方法返回true
    - 如果用戶點擊取消按鈕，則方法返回false
      prompt() 顯示可提示用戶輸入的對話框。
    - 返回值：獲取用戶輸入的值
  2. 與打開關閉有關的方法：
    close() 關閉瀏覽器窗口。
    open() 打開一個新的瀏覽器窗口：返回新的Window對象
  3. 與定時器有關的方式
    setTimeout() 在指定的毫秒數後調用函數或計算表達式。
    - 參數：
      1. js代碼或者方法對象
      2. 毫秒值
    - 返回值：唯一標識，用於取消定時器
      clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
      setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。
      clearInterval() 取消由 setInterval() 設置的 timeout。
2. 屬性：
  1. 獲取其他BOM對象：
    history
    location
    Navigator
    Screen:
  2. 獲取DOM對象
    document
3. 特點
  - Window對象不需要創建可以直接使用 window使用。 window.方法名();
  - window引用可以省略。方法名();
Location：地址欄對象
1. 創建(獲取)：
  1. window.location
  2. location
2. 方法：
  - reload() 重新加載當前文檔。刷新
3. 屬性
  - href 設置或返回完整的 URL。
History：歷史記錄對象
1. 創建(獲取)：
  1. window.history
  2. history
2. 方法：
  - back() 加載 history 列表中的前一個 URL。
  - forward() 加載 history 列表中的下一個 URL。
  - go(參數) 加載 history 列表中的某個具體頁面。
    參數：
    * 正數：前進幾個歷史記錄
    * 負數：後退幾個歷史記錄
3. 屬性：
  length 返回當前窗口歷史列表中的 URL 數量。

DOM

概念： Document Object Model 文檔對象模型
將標記語言文檔的各個組成部分，封裝爲對象。可以使用這些對象，對標記語言文檔進行CRUD的動態操作
W3C DOM 標準被分爲 3 個不同的部分：
- 核心 DOM - 針對任何結構化文檔的標準模型
  Document：文檔對象
  Element：元素對象
  Attribute：屬性對象
  Text：文本對象
  Comment:註釋對象
  Node：節點對象，其他5個的父對象
- XML DOM - 針對 XML 文檔的標準模型
- HTML DOM - 針對 HTML 文檔的標準模型

核心DOM模型：

Document：文檔對象
1. 創建(獲取)：在html dom模型中可以使用window對象來獲取
  1. window.document
  2. document
2. 方法：
  獲取Element對象：
  1. getElementById() ：根據id屬性值獲取元素對象。id屬性值一般唯一
  2. getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
  3. getElementsByClassName():根據Class屬性值獲取元素對象們。返回值是一個數組
  4. getElementsByName(): 根據name屬性值獲取元素對象們。返回值是一個數組
  創建其他DOM對象：
  1. createAttribute(name)
  2. createComment()
  3. createElement()
  4. createTextNode()
Element：元素對象
1. 獲取/創建：通過document來獲取和創建
2. 方法：
  1. removeAttribute()：刪除屬性
  2. setAttribute()：設置屬性
Node：節點對象，其他5個的父對象
- 特點：所有dom對象都可以被認爲是一個節點
- 方法：
  CRUD dom樹：
  * appendChild()：向節點的子節點列表的結尾添加新的子節點。
  * removeChild() ：刪除（並返回）當前節點的指定子節點。
  * replaceChild()：用新節點替換一個子節點。
- 屬性：
  parentNode 返回節點的父節點。

HTML DOM

標籤體的設置和獲取：innerHTML
使用html元素對象的屬性

控制元素樣式

使用元素的style屬性來設置

  //修改樣式方式1
  div1.style.border = "1px solid red";
  div1.style.width = "200px";
  //font-size--> fontSize
  div1.style.fontSize = "20px";

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

事件監聽機制

概念：某些組件被執行了某些操作後，觸發某些代碼的執行。
- 事件：某些操作。如：單擊，雙擊，鍵盤按下了，鼠標移動了
- 事件源：組件。如：按鈕文本輸入框…
- 監聽器：代碼。
- 註冊監聽：將事件，事件源，監聽器結合在一起。當事件源上發生了某個事件，則觸發執行某個監聽器代碼。
常見的事件：
1. 點擊事件：
  1. onclick：單擊事件
  2. ondblclick：雙擊事件
2. 焦點事件
  1. onblur：失去焦點
  2. onfocus:元素獲得焦點。
3. 加載事件：
  1. onload：一張頁面或一幅圖像完成加載。
4. 鼠標事件：
  1. onmousedown 鼠標按鈕被按下。
  2. onmouseup 鼠標按鍵被鬆開。
  3. onmousemove 鼠標被移動。
  4. onmouseover 鼠標移到某元素之上。
  5. onmouseout 鼠標從某元素移開。
5. 鍵盤事件：
  1. onkeydown 某個鍵盤按鍵被按下。
  2. onkeyup 某個鍵盤按鍵被鬆開。
  3. onkeypress 某個鍵盤按鍵被按下並鬆開。
6. 選擇和改變
  1. onchange 域的內容被改變。
  2. onselect 文本被選中。
7. 表單事件：
  1. onsubmit 確認按鈕被點擊。
  2. onreset 重置按鈕被點擊。
demo
```
<body>
			<img id="light" src="img/off.gif"  onclick="fun();">
			<img id="light2" src="img/off.gif">
			
			<script>
			    function fun(){
			        alert('我被點了');
			        alert('我又被點了');
			    }
			
			    function fun2(){
			        alert('咋老點我？');
			    }
			
			    //1.獲取light2對象
			    var light2 = document.getElementById("light2");
			    //2.綁定事件
			    light2.onclick = fun2;
			    </script>
		</body>
			    
```

Javaweb靜態資源學習筆記

文章目錄

Javaweb學習

WEB概念概述

HTML

標籤學習

HTML標籤：表單標籤

表單項標籤

CSS：頁面美化和佈局控制

CSS的使用：CSS與html結合方式

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

屬性

JavaScript

ECMAScript：客戶端腳本語言的標準

基本對象

BOM

DOM

核心DOM模型：

HTML DOM

事件監聽機制

常見的事件：

工作中用到的腳本合集

24-5-18 X

LeetCode—數字轉換爲十六進制數（位運算）

LeetCode—贖金信（數組的三種解法）

LeetCode—通配符匹配（DP）

LeetCode—最長迴文串（數組）

Servlet+HTTP+Request+Response+SevletContext+Cookie+Session大雜燴學習筆記

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結