?

組成：
首先，我們需要了解下web前端由哪些組成：

1. 頁面結構：html、Servlet、jsp（Java Server Page）=html+java

2. 頁面樣式：css（Cascading Style Sheet，層疊樣式表）

3. 頁面交互：js（javascript）、jQuery、AJAX

?

一、CSS的優先級和繼承：

1.1 CSS的優先級：

行內樣式>ID選擇器>類選擇器>標簽選擇器。

就近原則。

?

1.2 CSS繼承：

原則：

1、父元素的樣式會在子元素中生效，但是如果子元素也定義了同樣的樣式，遵循就近原則，以子元素設定的為準。

2、子元素設置的樣式不會對父元素的樣式產生影響。

?

二、盒子模型：

2.1 內邊距padding：

padding的取值：

給定一個值：四個內邊距值都是該值。

給定兩個值：按照上/下、右/左取值。

給定三個值：按照上、右/左、下取值。

給定四個值：按照上、右、下、左取值。（順時針）

padding-top

padding-right

padding-bottom

padding-left

?

2.2 邊框border：

邊框的方向：

border

border-top

border-right

border-bottom

border-left

邊框的特征：

border-style：邊框的樣式

border-width：邊框的寬度

border-color：邊框顏色

邊框的方向和特征：

border-top-style

border-top-width

border-top-color

?

2.3 外邊距margin：

margin：

給定一個值：四個方向的邊距全部是該值；

給定兩個值：上/下、右/左；

給定三個值：上、右/左、下；

給定四個值：上、右、下、左。

margin-top

margin-right

margin-bottom

marginleft

?

?

2.4 盒子模型的大小問題：

?

?

三. js特點：

3.1 概述：

javascript，java腳本，跟java沒有關系。

NetScape公司。

?

3.2 特點：

1、腳本語言，依賴于html/jsp/asp頁面，可以在瀏覽器中運行。

2、屬于解釋性語言，不需要編譯。

3、跨平臺，與平臺無關。

4、基于對象的。

?

3.3 js和java的區別：

1、js是基于對象的，java是面向對象。

2、js屬于Netscape公司，java屬于sun公司。

3、java語言先編譯后解釋，js不需要編譯。

4、java的語法規則比較強，js語法比較弱。

?

四、js的語法：

4.1 js的引入：

內部引入：直接寫在html/jsp頁面中，可以寫在head內，也可寫在body內。

?

2、外部引入：把js代碼單獨寫在js文件中，在html/jsp的head（body）中引入js文件。

?

4.2 數據類型：

4.2.1 基本類型：

Number：數字類型

Boolean：布爾類型

String：字符串類型，用””定界，如”2017-08-02”

4.2.2 對象類型：

數組：

對象：Math

自定義對象：

Date：使用’’定界

4.2.3 特殊類型：

null

undefined

?

4.3 js的運算符：

4.3.1 算術運算符：

運算符	描述	例子	結果
+	加	?	?
-	減	?	?
*	乘	?	?
/	除	?	?
%	余	?	?
++	自增	?	?
--	自減	?	?

++i和i++：

--i和i--：

4.3.2 賦值運算符：

=

+=

-=

*=

/=

%=

4.3.3 比較運算符：

==：

===：全等（類型和值）、強等

!=

>

<

>=

<=

?

“23”==23 ??true

“23”===23?? false

4.3.4 位運算符：

&

|

！

^

4.3.5 邏輯運算符：

&

&&：短路與

|

||：短路或

4.4 js函數：

1、顯示函數:

?

2、隱式函數（匿名函數）：

?

4.5 js表達式：

4.5.1 if-else 表達式：

案例1：用戶登錄時“賬號為空”驗證：

?

案例2：if與三目表達式的互換

?

4.5.2 switch-case表達式

If表達式集合switch表達式的使用選擇：

If表達式——特定的范圍

Switch——有限的、固定值

?

4.5.3 for表達式

?

4.5.4 while/do-while表達式

While：先判斷后執行

Do-while：先執行后判斷

4.5.5 with表達式：

?

4.6 js事件：

4.6.1 onchange事件：

當輸入框的內容發生變化、失去焦點時觸發動作。

?

4.6.2 onclick事件：

可以使用js動態修改css樣式：

使用js給html元素動態綁定事件：

?

4.6.3 onfocus事件：

4.6.4 onsubmit和onreset事件：

onmouseover：當鼠標從指定的元素上經過時觸發；

onmouseout：當鼠標從指定的元素上移除時觸發；

onmousedown 和 onmouseup：當鼠標按下（或放開）該元素時觸發；

onload：當頁面加載完畢后會自動觸發，一般放在body中，作為body的屬性使用。

?

?

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的CSS基础和js基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。