2023年htmlcssjavascript學(xué)習(xí)筆記大全

目錄

HTML篇。錯誤!未定義書簽。

一、HTML的相關(guān)介紹錯誤!未定義書簽。

1>HTML的介紹。錯誤!未定義書簽。

2、HTML可以做什么。錯誤!未定義書簽。

3、HTML運(yùn)營原理。錯誤!未定義書簽。

1）本地運(yùn)營錯誤!未定義書簽。

2）遠(yuǎn)程訪問運(yùn)營。錯誤!未定義書簽。

4、HTTP的開發(fā)工具錯誤!未定義書簽。

二、HTML的基本語法錯誤!未定義書簽。

1、HTML基本語法。錯誤!未定義書簽。

2、HTML符號實(shí)體。錯誤!未定義書簽。

3、超鏈接。錯誤!未定義書簽。

4、HTML圖片元素錯誤!未定義書簽。

5、表格。錯誤!未定義書簽。

6、有序列表與無序列表。錯誤!未定義書簽。

1）無序列表。錯誤!未定義書簽。

2）有序列表。錯誤!未定義書簽。

7、框架標(biāo)記。錯誤!未定義書簽。

8、HTML表單元素錯誤!未定義書簽。

（1）表單元素格式。錯誤!未定義書簽。

（2）action指定把請求交給那個頁面。錯誤!未定義書簽。

3）input元素。錯誤!未定義書簽。

9、字體錯誤!未定義書簽。

1）字體大小錯誤!未定義書簽。

2）物理字體錯誤!未定義書簽。

3）邏輯字體錯誤!未定義書簽。

4）客戶端字體錯誤!未定義書簽。

10、文字布局錯誤!未定義書簽。

1）文字對齊（橫向）錯誤!未定義書簽。

2）文字的分區(qū)錯誤!未定義書簽。

6）與格式化文本錯誤!未定義書簽。

7）圖像。錯誤!未定義書簽。

11、跑馬燈錯誤!未定義書簽。

12、多媒體頁面錯誤!未定義書簽。

div+css篇。錯誤!未定義書簽。

一、div+css是什么錯誤!未定義書簽。

二、語法錯誤!未定義書簽。

1、head標(biāo)簽錯誤!未定義書簽。

2、元素錯誤!未定義書簽。

3、選擇器。錯誤!未定義書簽。

1）類選擇器。錯誤!未定義書簽。

（1）基本語法錯誤!未定義書簽。

(2)案例錯誤!未定義書簽。

2)id選擇器。錯誤!未定義書簽。

(1)基本語法錯誤!未定義書簽。

3)html元素選擇器。錯誤!未定義書簽。

(1)基本語法錯誤!未定義書簽。

(2)結(jié)論。錯誤!未定義書簽。

4)通配符選擇器錯誤!未定義書簽。

5)案例練習(xí)錯誤!未定義書簽。

6)選擇器的進(jìn)一步討論錯誤!未定義書簽。

(1)父子選擇器錯誤!未定義書簽。

(2)選擇器優(yōu)先級錯誤!未定義書簽。

(3)id選擇器與class選擇器的比較。錯誤!未定義書簽。

(4)CSS文獻(xiàn)簡化錯誤!未定義書簽。

4、塊元素和行內(nèi)連元素錯誤!未定義書簽。

1)概念。錯誤!未定義書簽。

2)兩者區(qū)別。錯誤!未定義書簽。

5、流。錯誤!未定義書簽。

1)標(biāo)準(zhǔn)流/非標(biāo)準(zhǔn)流概念。錯誤!未定義書簽。

2)盒子模型。錯誤!未定義書簽。

(1)概念。錯誤!未定義書簽。

(2)浮動錯誤!未定義書簽。

3)定位錯誤!未定義書簽。

（l）static定位錯誤！未定義書簽。

（2）relative定位（相對定位）錯誤!未定義書簽。

（3）absolute定位（絕對定位）錯誤!未定義書簽。

（4）fixed定位。錯誤!未定義書簽。

（5）inherit錯誤!未定義書簽。

Javascript篇錯誤!未定義書簽。

一、js的基本介紹錯誤!未定義書簽。

二、js基本語法（一）錯誤!未定義書簽。

1、js標(biāo)記符錯誤!未定義書簽。

2、js中的數(shù)據(jù)類型錯誤!未定義書簽。

（1）基本數(shù)據(jù)類型（三大類型）。錯誤!未定義書簽。

（2）復(fù)合數(shù)據(jù)類型。錯誤!未定義書簽。

（3）特殊數(shù)據(jù)類型。錯誤!未定義書簽。

3、變量的定義、初始化、賦值。錯誤!未定義書簽。

4、運(yùn)算符錯誤!未定義書簽。

5、流程控制（三大流程控制）。錯誤!未定義書簽。

6、循環(huán)控制。錯誤!未定義書簽。

三、js基本語法（二）錯誤!未定義書簽。

1、函數(shù)。錯誤!未定義書簽。

1）語法。錯誤!未定義書簽。

2）函數(shù)的引用。錯誤!未定義書簽。

3）函數(shù)的調(diào)用方法錯誤!未定義書簽。

2、數(shù)組（數(shù)據(jù)類型：引用類型/復(fù)合類型）錯誤!未定義書簽。

1）基本語法錯誤!未定義書簽。

2）數(shù)組在內(nèi)存中的存在形式。錯誤!未定義書簽。

3）js數(shù)組是引用傳遞錯誤!未定義書簽。

4）js的增長方式。錯誤!未定義書簽。

5）js數(shù)組的幾個應(yīng)用錯誤!未定義書簽。

6）數(shù)組的其他引用方式。錯誤!未定義書簽。

7）冒泡排序錯誤!未定義書簽。

8）二分查找錯誤!未定義書簽。

四、js對象編程錯誤!未定義書簽。

簡樸介紹：。錯誤!未定義書簽。

1、js面向（基于）對象的特性介紹。錯誤!未定義書簽。

2、為什么需要對象。錯誤!未定義書簽。

4、創(chuàng)建類的基本語法錯誤!未定義書簽。

5、訪問對象屬性的兩種方法錯誤!未定義書簽。

6、對象引用問題js垃圾回收機(jī)制（GC）的說明錯誤!未定義書簽。

7、this問題的提出錯誤!未定義書簽。

8、js類的定義。錯誤!未定義書簽。

9、js成員函數(shù)定義。錯誤!未定義書簽。

關(guān)于Object類的說明錯誤!未定義書簽。

10、構(gòu)造方法（函數(shù)）錯誤!未定義書簽。

11、創(chuàng)建對象的又一種形式。錯誤!未定義書簽。

12、js的三大特性錯誤!未定義書簽。

1)抽象的概念。錯誤!未定義書簽。

2)封裝錯誤!未定義書簽。

3)繼承。錯誤!未定義書簽。

4)重載及覆蓋錯誤!未定義書簽。

5)多態(tài)。錯誤!未定義書簽。

6)閉包。錯誤!未定義書簽。

五、js內(nèi)部類。錯誤!未定義書簽。

1、分類。錯誤!未定義書簽。

2、內(nèi)部類錯誤!未定義書簽。

1)Object類錯誤!未定義書簽。

2)Math類錯誤!未定義書簽。

3)Date類錯誤!未定義書簽。

4)String類。錯誤味定義書簽。

5)Array類。錯誤！未定義書簽。

6)Boolean類錯誤!未定義書簽。

7)Number類。錯誤!未定義書簽。

3、系統(tǒng)函數(shù)。錯誤!未定義書簽。

六、js事件驅(qū)動錯誤!未定義書簽。

1、概述。錯誤!未定義書簽。

2、事件驅(qū)動機(jī)制的理解。錯誤!未定義書簽。

3、js訪問樣式并修改樣式錯誤!未定義書簽。

1)訪問內(nèi)部style錯誤!未定義書簽。

2)訪問外部css。錯誤!未定義書簽。

4、事件驅(qū)動機(jī)制不同瀏覽器的兼容。錯誤!未定義書簽。

5、同一個事件可以被多個解決程序解決。錯誤!未定義書簽。

七、dom編程。錯誤!未定義書簽。

1、dom編程的必要性。錯誤!未定義書簽。

2、dom編程簡介錯誤!未定義書簽。

3、分類錯誤!未定義書簽。

4、dom關(guān)系圖。錯誤!未定義書簽。

5、dom對象錯誤!未定義書簽。

6、bom(TheBrowserObjectMode1)-瀏覽器對象模型簡介。錯

誤!未定義書簽。

7、window對象。錯誤!未定義書簽。

8、history對象錯誤!未定義書簽。

9、如何綁定事件監(jiān)聽。錯誤!未定義書簽。

10、document對象。錯誤！未定義書簽。

11>body對象。錯誤!未定義書簽。

12、對dom的加強(qiáng)錯誤!未定義書簽。

13、style對象錯誤!未定義書簽。

14、forms對象和form對象。錯誤!未定義書簽。

15、其他對象。錯誤!未定義書簽。

HTML篇

一、HTML的相關(guān)介紹

1、HTML的介紹

html是一種標(biāo)記語言，重要用于網(wǎng)頁開發(fā)，使用html可以展現(xiàn)文字

圖片、視屏、聲音等。html是我們web開發(fā)的基礎(chǔ)

2、HTML可以做什么

①HTML可以編寫靜態(tài)網(wǎng)頁.

②該靜態(tài)網(wǎng)頁可以包括文字、圖形、動畫、聲音、

表格、鏈接,從而構(gòu)成一個個漂亮的網(wǎng)頁。

3、HTML運(yùn)營原理

1）本地運(yùn)營

HTML文獻(xiàn)本地存放，使用本地瀏覽器打開

2）遠(yuǎn)程訪問運(yùn)營

HTML文獻(xiàn)在另一臺服務(wù)器中存放，使用瀏覽器通過網(wǎng)絡(luò)打開

4、HTTP的開發(fā)工具

①記事本

②dw

(Dfrontpage

④vs

(Dmyeclipse

⑥其它ide..

二、HTML的基本語法

1、HTML基本語法

不管HTML文獻(xiàn)有多復(fù)雜，它的基本結(jié)構(gòu)如下：

〈元素屬性='屬性值’內(nèi)容〈/元素〉

〈元素屬性='屬性值'.??/>

注意：元素就是標(biāo)記

段落標(biāo)記qp>

<fonts/ze="”>字體標(biāo)記size取值

1到7

Vh#>標(biāo)題字體々/7#>#=1,2,3,4,5,6

<b></b>字體加粗

2、HTML符號實(shí)體

顯示結(jié)果貓送實(shí)體名彝實(shí)體編號

空格(nb3p;“160;

<小于號61t；“60;

>大于號“62；

6和號samp;6138；

引號squot;(?34；

*轍號sapos;（IE不支持）“39;

顯示結(jié)果描述實(shí)體名稱實(shí)體生號

分ficent;“162;

￡蟒(pound;“163;

Y日后6yen;“165;

§節(jié)&secc;“167;

<￡>版權(quán)ficopy;“169;

9注冊商標(biāo)“174;

X乘號ד21S;

除號^divide;“247;

3、超鏈接

<ahref='a.htm1'>超鏈接1</a>

<br/>

<ahref='a.html'target='_blank'>超鏈接2target='_blan

k'</a>

<br/>

<ahref=">超鏈接3百度</a>

4、HTML圖片元素

<imgsrc='l.jpg'width=170px/>

5、表格

用處:可以顯示數(shù)據(jù)和圖片，并且可以布局

<tableborde「=”邊框?qū)挾?cellspacing="空隙大小”

cellpadding="填充大小”〉

</table>

<table>__</table>-定義表格

<tr>-定義表行

<th>-定義表頭

<td>-定義表元（表格的具體數(shù)據(jù)）

<tdcolspan=#>表時該單元格占#歹I」

<tdrowspan=#>表時該單元格占#行

6、有序列表與無序列表

1）無序列表

VW"屬性值”》

列表內(nèi)容<：/〃>

<lul>

<UL>的屬性設(shè)定（常用）：例如：<ULtype："square。

type=square

設(shè)定符號款式，具值有三種，如下，默認(rèn)為type=*diSc"：

type—disc'時的利而符W為實(shí)心圓點(diǎn).

type="circle時的列項符號為空心圓.

type=*squaxe時的列項符號為空心正方形。

2）有序列表

<oltyped屬性值start="起始直'>

<li>列表內(nèi)容</li>

</ol>

V。6稱為耐列表標(biāo)記.<口測用以標(biāo)示列表

項目.所謂順序列表就是每一項有順序，又稱

編號列表.

<06的屬性設(shè)定（常用）=

例如：<oltype=,'iMstart="4"x/ol>

type="i"

設(shè)建目款式，其值有五種，請參考右表，內(nèi)

定為

type="1

start="4"

設(shè)定開始數(shù)目，不論設(shè)定了目款式，其

值只能是12.3..等整數(shù)，默認(rèn)為start="1".

i可以取以下值中的任意T：

1阿拉伯?dāng)?shù)字1,2.3,...

a小寫字母a,b,c,...

A大寫字母A.B.C,...

I小寫羅馬數(shù)字I.ii.iii

I大寫羅馬數(shù)字I.II.Ill

7、框架標(biāo)記

〈framesetframeborder="邊框大小”

cols="，各窗口百分比，隔開”

rows="各窗口百分比”〉

<framename="給frame取名"src="html路徑“noresize>

</frameset>

說明：<frameset>元素中不能出現(xiàn)<border》標(biāo)簽

<framesetcols='30%,*'[rows=130%,*']noresizeborder=0>

小結(jié)：表格里面可嵌套表格，框架里面可嵌套框架

8、HTML表單元素

1）表單元素重要用于讓用戶輸入數(shù)據(jù),并提交給服務(wù)器

2）基本語法

<fbmiaction*^url"meflwd=與二

<inputtype=svbmit><u^puttype=re$et>

</fonn>

星號中部分可以為GFT.也可以是F'CWT

案例:

登錄系統(tǒng)

X直?。篒

登錄。k!

源碼:

①1ogin

<html>

<head>

<tit1e>登錄</title>

<linkrel="shortcuticon"href='G:\HTML\picture\64.png

type="image/x-icon"/>

</head>

<body>

。<h1>登錄界面</h1>

<><fromaction=???method="get">

用戶名:<inputtype='text'name='username'/></br>

。密召馬：<inputtype='password'name='password'/></br>

<!--對齊漢字，可用兩個 或者使用全角一個空格-->

<inputtype='submit'value='登錄'/>  <input

type='reset'va1ue='重新填寫'/>

<imgsrc='G:\HTML\picture\xnnf.png'/>

</from>

</body>

</htm1>

（1）表單元素格式

<inputtype=*naxne=*?/>

type=text（文本框）password（密碼框）hidden（隱藏域）checkbox（復(fù)選框）

radio（單選框）submit（提交按鈕）reset（重置按鈕）image（圖片按鈕）

name是你給該表單元素取名

（2）action指定把請求交給那個頁面

3)input元素

畫直線

<hrsize=#width=#color=>

復(fù)選框、單選框默認(rèn)

<inputtype="checkbox"name=#checked>

<inputtype="radio"name=#checked>

下拉選項框

<optionselected>#</option>

下拉選項框表達(dá)一次性顯示多少條記錄

<selectsize=#>

下拉選項框表達(dá)一次性選擇多少條記錄

<se1ectmuItipe=#>

:target匯總

<ahref=urltarget=_blank>新窗口

<ahref=urltarget=_self>本窗口

<ahref=urltarget=_parent>父窗口

<ahref=urltarget=_top>整個瀏覽器窗口

<ahref=urltarget=JBfo]frame的名字>

9、字體

1）字體大小

<font今天天氣夏好!“…今天天氣真好!

<fontsixe=6>兮天天,五好！今天天氣真好!

</font>今天天氣真好!

<fontsize=5>今天為（氣真好I

<fontsix=4》今夭夭氣真好!</font>今夭夭氣真好!

<fontsixe=3》今夭夭氣JC奸I</font>今天天氣真好I

<fontsize=2>今天天氣真好I</font>今天天氣喜好!

<fontsize=I〉今天天氣其好!</font>令父父華賓好，

2）物理字體

<b>今天天氣真好?</b>今天天氣真好I

<i>今女天氣真好I</i>今天天氣真好!

<u冷天天氣真好I</u>今天天氣真好I

<tt>今天天氣真好I</tt>今天天氣真好！

^{今天天5M好！}今天天工工好！

_{今天天氣真好I}今天天氣真好！

<s>今天天氣真好I</s>今天天氣真好U

〈strike〉今天天氣真好I〈/strike）今天天氣真好I

3）邏輯字體

〈迎今天天氣真好！</em>今天天氣真奸!

〈strong〉今天天氣真好I〈/strong〉今天天氣真好I

<code>今天天氣真好I〈/code》今天天氣真好！

<sanp>今天天氣真好I</sanp>今天天氣JI好！

〈心心今天天氣真好！</kbd>今夭夭氣真好！

<var》今天天氣真好I</var>今天天氣真好!

〈北修今天天氣真好I〈/dfn〉今天天氣真好!

<cite>今天天氣真好I</cite>今天天氣真好!

〈small》今天天氣真好！</sroall>今天天?真好！

<big>今天天氣真好I</big>今天天氣真好！

4）客戶端字體

<fontface="禮U,...,曠〉...</font>

#=客戶端可獲得的字體

〈fontface="Arial,Helvetica*>HellovIorldl</font>

HellowWorld!

10、文字布局

1）文字對齊（橫向）

<hnalign=#>...</hn>

<palign=#>...</p>#=left,center,right

<h3ali<n=center>Hello<\h3>

<h3alxgn=rxght>Hello<\h3>

2）文字的分區(qū)

<divalign=left>...</div>

<divalign=left>

Canyoufeelhappinesswithoutunpleasant?<br>

Pleaseshowaeyourmile.

</div>

Canyoufeelhappinesswithoutunpleasant?

Pleaseshowmeyoursmile.

<divalign=center>...</div>

<divalign=right>...</div>

6）與格式化文本

<pre></pre>

7）圖像

<imgsrc=#>#=圖象的URL

<imgalt=#>

#=在瀏覽器尚未完全讀入圖象時，在圖象位置顯示的文字.

<iMsrc=*f.<if*alt=*MYFACE:-）*>

<imgalign=#>#=top,middle,bottom

<i>gsrc=URLalicn=top>Myface*

MyFacet

11>跑馬燈

<marquee></marquee>

12、多媒體頁面

④嵌入多媒體文本(EMBED)

基本語法<embedsrc=#>#=URL

本標(biāo)記可以用來在主頁中嵌入多媒體文本，如：

電影(movie),聲音(sound),虛擬現(xiàn)實(shí)語言(vrrol)

體含<enbed>標(biāo)記，您需要把plugin安裝完備。

請注意1ettbedattributesaredifferentbetweeneachplugins.

?背景音樂Only

<bgsoundsrc=#>#=WAV文件的URL

<bgsoundloop=tt>#=循環(huán)數(shù)

<bgsoundsrc="sound,wav*loop=3>

div+css篇

一、div+css是什么

div元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供

結(jié)構(gòu)和背景的元素。

號ss是英語CascadingStyleSheets（層疊樣式表單）的縮寫，

它更一種用來表現(xiàn)HTML或XML等文件式樣的計算機(jī)語言.

div+css是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用術(shù)語之一，通常

為了說明與HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式的區(qū)別,

因為XHTML網(wǎng)站設(shè)計標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用

DIV+CSS的方式實(shí)現(xiàn)各種定位。

我們可以簡單的這樣理解div+css:

div是用于存放內(nèi)容（文字,圖片.元素）的容器。

css是用于指定放在div中的內(nèi)容如何顯示，包括這些內(nèi)容的位置

和外觀.

①外部CSS

②內(nèi)部CSS

二、語法

1>head標(biāo)簽

<head>

<title>cssl.html</title>

<!--這個keywords是給搜索引擎看.-->

<metahttp-equiv=nkeywordsncontent="dell筆記本，怪味鴨，keywords

<metahttp-equiv=Hdescriptionncontent=uthisismypagen>

<!-告訴瀏覽器文件時什么編碼一>

<metahttp-equiv=ncontent-typencontent=ntext/html;charset=UTF-8n>

<!一引入css文件-->

<!--<1inkrel=nstylesheetntype=ntext/cssnhref=n./styles.cssn>-->

</head>

2、元素

<元素名Style="屬性名:屬性直屬性名:屬性值1;H/>

<spanstyle="font-size:50px；color：#9D3124\font-weight:

boLder；”>欄目三</spanxbr/>

<spanstyIe="font-size：40px；co1or：#55CB50；font-

style:obL/que;”>欄目四</spanxbr/>

3、選擇器

選擇器是css中非常重要的概念,css提供四種選擇器：

①類迷掙罌，又叫class選擇器

②id選擇器

③html元素選擇器

④通配符選掙器

簡單的說，率擇器就是在css中釗文，而在網(wǎng)頁頁面(html,jsp,php

,)中必用。

1)類選擇器

(1)基本語法

?類選擇器名{

屬性名:屬性值;

???

}T

(2)案例

XXX.CSS:

.styLe1{

?font-size：40px；

ocolor:#384100;

?background—co1or:pink;

}

xxx.html:

<spanclass="styLe1">BBP</span>

2)id選擇器

(1)基本語法

期d選擇器名{

屬性名:屬性值;

)

說明：html文獻(xiàn)中引用id選擇器

〈元素id='id選擇器名稱‘></元素>

3)html元素選擇器

(1)基本語法

html元素名稱{

屬性名?.屬性值;

}

(2)結(jié)論

當(dāng)一個元素被id選擇器，類選擇器，html選擇器修飾，優(yōu)先級是:id>

類>html

4)通配符選擇器

如果希望所有的元素都符合某一種樣式，可以使用通配符選擇

器。

*{margin:0;padding:0}

可以讓所有html元素的外邊距和內(nèi)邊距都默認(rèn)為0,有時特別有用。

說明：

margin:10px9px9px7px;/*假如給出四個值，表達(dá)上、右、下、左

*/

margin:10px9Px7px;。/*假如給出三個值，表達(dá)上、(左右)、下*/

5)案例練習(xí)

再比如，我們希望所有的超錢接

(1)默認(rèn)樣式是黑色，24px,沒有下劃線

(2)當(dāng)鼠標(biāo)移動到超鏈接時，自動出現(xiàn)下劃線

(3)點(diǎn)擊后，超鏈接變成冬色。這又該怎么實(shí)現(xiàn)呢？[test.html]

6)選擇器的進(jìn)一步討論

(1)父子選擇器

①父子選擇器

請大家看一個圖：[HTMLPage.htm]

如果希望特別強(qiáng)調(diào)/常兩個字.該

新聞一舶二新忙新聞四新妣如何處理？方案：

a.id選擇器

b.class選擇器

這是一財螳麴新聞

fc.父子選擇器

#sty1e2{

ofont-size：50px;

。background-co1or:si1ver;

)

#sty1e2span{

font—size:60px；

color:#ff0000；

)

說明：

1.父子選擇器可以有多層，但用法不多

#sty1e2spanspan{

?font-size：6Opx;

color:#ff0110;

)

2.父子選擇器合用于類選擇器和id選擇器

(2)選擇器優(yōu)先級

1.假如一個元素被id選擇器和類選擇器同時修飾，優(yōu)先級：id>class

2.當(dāng)一個元素同時被c1ass、id、html,*修飾時，優(yōu)先級是：

id>c1ass>htm1>*

(3)id選擇器與class選擇器的比較

一個元素只能有一個id選擇器,可以有多個class選擇器

看T1隧

京新聞一新聞二艇新聞四新聞五

這是一則半罐要的新聞

希望新聞三下劃線，同時斜體：

思路：

(1)可以給新聞三配置id選擇器

(2)再指定一個class選擇器.丫

CSS：

.5tyLe1{

ofont-size:40px;

oco1or:#3BA100;

background—color：pink;

)

.styLe1_new{

ofont-size:70px；

colortbuLe;

。background-color:#e8ec42；

text-decoration:underLine;

)

html:

<spanc1ass="5tyLelsty1el_new">新聞3</span>

說明：兩個類選擇器同時作用于一個元素發(fā)生沖突時，在css文獻(xiàn)中排在前面

的類選擇器的優(yōu)先級低于排在后面的

(4)CSS文獻(xiàn)簡化

在CSS文獻(xiàn)中，假如有多個class/id/htm1選擇器有相同的部分,可以吧相

同的CSS樣式放在一起,這樣可以簡化css文獻(xiàn)

例：

CSS:

/*類選擇器*/

.5tyLel{

font-size：40px;

0co1or:#3BA100;

/*background-color:pink;*/

)

.styLel_new{

ofont—size:70px;

。co1or：bLue；

。/*background-color:pink;*/

text-decoration:underLine；

}

/*id選擇器*/

#styLe2{

font-size:40px；

o/*background-color:silver;*/。

)

/*合并選擇器相同屬性*/

?styLel,.styLel_newt#styLe2{

?background—co1or：pinh;

}

x

4、塊元素和行內(nèi)連元素內(nèi)聯(lián)元素只會

1)概念

行內(nèi)元素(inlineelement),又叫內(nèi)聯(lián)元素：

內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素<span><a>

塊元素(blockelement):

塊元素一般都從新行開,可以容納文本，其它內(nèi)聯(lián)元素和其它塊元素，

即使內(nèi)容不能占滿一行，塊元素也要把整行占滿。常見塊元素<div><p>

說明：內(nèi)聯(lián)元素可以根據(jù)不同的瀏覽器來添加不同的東西，不一定是僅僅文本

或者是內(nèi)聯(lián)元素

2）兩者區(qū)別

①行內(nèi)元素只占內(nèi)容的寬度，塊元素內(nèi)容不管內(nèi)容多少要占全行。

I

②行內(nèi)元素只能容納文本和其它行內(nèi)元素，塊元素可以容納文本,

行內(nèi)元素和塊元秦（與瀏覽器類版本和類型有關(guān)）

③一些css屬性對行內(nèi)元素不生效，tt$nmargin,left,right,width,

height.建議盡可能使用塊元素定仙。（與瀏覽器類版本和類型有關(guān)）

說明：

請注意彳亍內(nèi)元資口塊元素可以相互轉(zhuǎn)換

display:intjne-＞轉(zhuǎn)為行內(nèi)元素（比如div）

display:block-＞轉(zhuǎn)為塊元素（比如a）

案例：

<spansty1e="display：block"c1ass="styl">bbp</span>

<br/>

<psty1e="display:inLine"class="stylM>BBP</p>bbp

5、流

1）標(biāo)準(zhǔn)流/非標(biāo)準(zhǔn)流概念

流:在現(xiàn)實(shí)生活中就是流水，在網(wǎng)頁設(shè)計中就是指元素（標(biāo)簽）的排列

方式。

標(biāo)準(zhǔn)流:元素在網(wǎng)頁中就象流水，排在前面的元素（標(biāo)簽）內(nèi)容前面

出現(xiàn)，排后面的元素（標(biāo)簽）內(nèi)容后面出現(xiàn)。

非標(biāo)準(zhǔn)流：當(dāng)某個元素（標(biāo)簽）脫離了標(biāo)準(zhǔn)流［比如因為相對定位］排列

,我們統(tǒng)稱為非標(biāo)準(zhǔn)流排列。關(guān)于非標(biāo)準(zhǔn)流，我們在定位小節(jié)講解。

2｝盒子模型

(1)概念

要搞清盒子模型，就必須先明白下面幾個概念：

在網(wǎng)頁設(shè)計中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框

(border).邊界(margin),CSS盒子模式都具備這些屬性。

MARGIN邊界

B

O

X

說明：

1.html元素都可以看做一個盒子

2.盒子模型的參照物不同樣，則使用的css的屬性不同樣

3.假如不想破壞外觀，則盡量使用margin進(jìn)行布局

(2)浮動

浮動是CSS中很重要的概念，必須掌握。浮動涉及到左浮動、

右浮動、清除浮動

左浮動:盡量的向左邊移動,讓出自己的空間給下一個元素，知道碰到父元素的

左邊框

右浮動：盡量的向左邊移動,讓出自己的空間給下一個元素，知道碰到父元素的

右邊框

如果我們的div框很多,外面的框無法容納水平排列的浮動div元素

那么其它浮動塊向下移動，直到有足夠的空間。

如果浮動元素的高度不同，那么當(dāng)它們向下移動時可能被其它浮

動元素“卡住”：

案例1：

案例2：字包圖

清除浮動：

如果不希望別的元素在某個元素的左邊或者右邊，可以使用清除浮動的

方法clear:right;clear:left:clear:both

3）定位

CSS定位（Positioning）屬性允許你對元素進(jìn)行定位.position屬性值：

static（默認(rèn)值）：元素框正常生成。塊級元素生成一個矩形框，作為

文檔流/標(biāo)準(zhǔn)流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父

元素中。

relative:元素框偏移某個距離。元素仍保持其未定位前的形狀，它

原本所占的空間仍保留.從這一角度看，好像該元素仍然在文檔流/標(biāo)準(zhǔn)流

中一樣。

absolute:元素框從文檔流完全刪除，并相對于其包含塊定位。包含

塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流

中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個

塊級框，而不論原來它在正常流中生成何種類型的框。

fixed:元素框的表現(xiàn)類似于將position設(shè)置為absolute,不過其包

含塊是視窗本身。

(1)static定位

默認(rèn)的定位方式

說明：left與top屬性不生效

（2）relative定位（相對定位）

元素框偏移某個距離（left和top）,元素保持其定位前的形狀，它原

本所占的空間任然保存，從這一角度看,該元素任然在文檔流/標(biāo)準(zhǔn)流中

同樣

說明:relative的參照點(diǎn)是它本來的位置

■■■■

(3)absolute定位(絕對定位)

元素從本來的位置脫離,并讓出自己的空間,后面的元素就會占有本來的空間

說明：

這里我們特別強(qiáng)調(diào)一點(diǎn)，

absolute定位是對離自己最

近的那個非標(biāo)準(zhǔn)流盒子而言

的。

(4)fixed定位

見上圖

(5)inherit

。將子元素的position設(shè)立為繼承父元素的position

Javascript篇

一、js的基本介紹

①jS是開發(fā)web的腳本語言

②常用于個靜態(tài)HTML添加動態(tài)功能，用于響應(yīng)用戶的各種操作

說明：

①腳本語言日HTML加C,C++,Java,C#等角程語t之間

②腳本語言與紿程語言有相似地方，其品教與編

程語言類仞，也有變量。與編程語言之間最大的區(qū)別是編程語言

的語法和規(guī)則更為廣格和索殺一些:~>和本。二事法相對寬松一

③腳本語i?是一一解釋，生語"FI例如Python.vbscript,

javascript等等，之不象c\c++與可以白譯成二進(jìn)制代碼，以^執(zhí)

行文件的形式存在,:/宋語J執(zhí)7丁而雇件

◎腳本語言一般卻有相應(yīng)的除X引珞|來群稗執(zhí)行javascript的腳

本引造就別泡鳧春I

■javascrip在能除立運(yùn)行］之要次人列其它密程語言中才能運(yùn)

行（html,asp,,jsp,php...）

■javascriptx能用引b（brower砌嵬品）/s（server服務(wù)舞）開發(fā),

印套們多說的web開發(fā)（比如網(wǎng)站開發(fā)，web應(yīng)用等.）

■javascripti.要針對每戶滿約程，&就是說js一般選行在卷戶端

■javascript?？梢詫Ψ?wù)器搞的程「比皎多啦!）

■|javascript敕新標(biāo)本是1.81

/解釋性語言：在執(zhí)行時直接對源碼進(jìn)行執(zhí)行

/java程序.java->.class—>jvmjs->瀏覽器（js引擎來解釋執(zhí)行）

/js大多數(shù)情況下由客戶端瀏覽區(qū)執(zhí)行，有少數(shù)情況執(zhí)行在服務(wù)器端

,由于js是瀏覽器來執(zhí)行的，因此不同的瀏覽器也許對jS的支持不同樣

二、js基本語法（一）

案例一:

<head>

<title>new_htm1_file</tit1e>

<scriptlanguage="javascript">

functiontest(){

window.a1ert("He11oWorld1");

6)

</script>

</head>

<body>

<inputtype="button"onelick="test()"value="z^z^―

T"/>

</body>

說明：

?js代碼一般是放在head標(biāo)簽間的，但也可以隨意

?js代碼必須要用〈script1anguage=wjavascript^X/scrip

t＞包起，若沒有包起，瀏覽器會將其視為普通文本解決

?在一個HTML文獻(xiàn)中可以出現(xiàn)多對script片段，瀏覽器會按照先后順序依

次執(zhí)行

改善：一個加法程序

<script1anguage="javascript">

functionadd(){

ovarnuml=123;

vannum2=456;

vanresult=numl+num2;

window,a1ert(z結(jié)果是：'+result)；

?}

</script>

說明：

(1)js是弱數(shù)據(jù)類型語言，即在定義變量時，統(tǒng)一使用var表達(dá),甚至可以去除

var

(2)js中變量的數(shù)據(jù)類型是由瀏覽器引擎決定的

1、js標(biāo)記符

I標(biāo)識符限指JavaScript中定義的符號,例如，變量名，函數(shù)名，數(shù)組

名等.標(biāo)識符可以由任意順序的大小寫于母、整字、下劃線O和美元符

號($)組成，但標(biāo)識符不能以數(shù)字開頭，|不能曷JavaScript中的保留關(guān)錮

IS

合法的標(biāo)識符舉例：

indentifier?username,user_name?_userName、Jusemanle

非法的標(biāo)識符舉例：int,98.3、HelloWorld

?JavaScript嚴(yán)格區(qū)分大小寫conputer和Computer是兩個完全不同的符號

?JavaScript程序代碼的格式

每條功能執(zhí)行語句的最后必須用分號匕)結(jié)束，每個詞之間用空格、制

表符、換行符或大括號、小括號這樣的分隔符隔開.

?語句塊使用｛｝來表示

?JavaScript程序的注釋

/*…*/中可以嵌套“〃”注釋，但不能嵌套“/?-*/".

2、js中的數(shù)據(jù)類型

（1）基本數(shù)據(jù)類型（三大類型）

?Number（數(shù)字類型）

1：整型常量（10進(jìn)制\8進(jìn)制\16進(jìn)制）

十六進(jìn)制以O(shè)x或0X開頭，例如：0x8a。

八進(jìn)制必須以0開頭，例如：0123.

十進(jìn)制的第一位不能是0（數(shù)字0除外），例如：123.

2、實(shí)型常量

12.32、193.98、5E7、4e5等.

特殊數(shù)值：NaN、Infinity、isNaN（）、isFinite（）|

?Boolean（布爾值）!

true和false。

?String字符串

"abookofJavaScript'\'abc\"a"、

字符串中的特殊字符，篇要以反斜杠《\）后跟一個普通字符來表示

,例如：V、5、V、山、\'、\"、\\xxx

說明：

1.通過typcof可以看到變量的具體數(shù)值類型

2.NaN->notanumber

Infinity-＞無窮大

isNaNQ-＞判斷一個值是否是個數(shù)值

isFinite（）判斷一個值是否是一個有窮大

（2）復(fù)合數(shù)據(jù)類型

（3）特殊數(shù)據(jù)類型

說明：

undefine:

1.window.altcr(tt)//tt未定義

2.vartt;

3、變量的定義、初始化、賦值

■定義變量

①什么是定義變量？

vara;這就是定義了一個變量，變量名是a

?初始化變量

在定義變量的時候，就給值。

vara=45;這就是初始化變量a

.給變量賦值

比如你先定義了變量：vartt;

然后，再給值tt=780;->這就是給變量賦值.

?自動轉(zhuǎn)換

請看一個案例:

vara=L2;a?45;parselnt(),parseFloat()是系統(tǒng)函數(shù)

??韓順平；

a=”,可以直接使用

wind。*,alert(a);

.強(qiáng)制轉(zhuǎn)裨

如何字如串轉(zhuǎn)成數(shù)字？

vara-parselnt(**123*,)

varb=parseFloat(“12.3");

...〃其它后面介紹

說明:

varb=123;->b為數(shù)值

b=b+”"；->b為字符串

4、運(yùn)算符

說明：

①

在邏輯運(yùn)算中，0、""、false,null、undefined.NaN均表示false

②"II”原則:將返回第一個不為false的值或?qū)ο?，或返回最后一個值（當(dāng)全為

false時）

vana=4;

vanb=3；

c=a||3;

window.alert（c）;運(yùn)營結(jié)果：c=4;

5、流程控制（三大流程控制）

1）順序控制

2）分支控制

（1）單分支

if（條件表達(dá)式）｛

語句；

）

（2）雙分支

if（條件表達(dá)式）｛

S語句；

｝else｛

語句；

）

（3）多分支

①if（條件表達(dá)式）｛

語句；

｝elseif（條件表達(dá)式1）｛

語句;

}elseif...{

}[else（

}]

說明：

一旦找到滿足條件的入口,執(zhí)行完畢后就直接結(jié)束這個多分支

②

switch（條件表達(dá)式）（

case常量1:

語句；break;

case常量2;

語句；break;

case常量n;

語句；break;

default:

語句；

break;

）I

說明：

條件語句可以使符合jS規(guī)范的有數(shù)據(jù)類型（數(shù)組、對象也可以，但一般不用，即除

外），這一點(diǎn)與Java或C等語言不同

6、循環(huán)控制

1）for（條件表達(dá)式）循環(huán)

2）while（條件表達(dá)式）循環(huán)

3）do{

}while（條件表達(dá)式）循環(huán)

說明：

在ie8中可以通過工具來對js代碼進(jìn)行調(diào)試

三、js基本語法（二）

1、函數(shù)

1）語法

function函數(shù)名（參數(shù)列表）

（

。語句…

?return返回值；

）

說明：

1.無返回值

2.參數(shù)列表中不要寫類型var,只需要寫參數(shù)名就行

3.無返回值卻又接受了，則返回undefine

2）函數(shù)的引用

1.建立.js文獻(xiàn)

2.在.js文獻(xiàn)中寫函數(shù)

3.在需要的文獻(xiàn)中引入，引入語法：

（scriptlanguage="javascript"s,c="所要引入的js文獻(xiàn)途徑

名'”></script>

說明：有兩個函數(shù)

//escape和unesauep函數(shù)往往配合使用，可以防止亂碼出現(xiàn)

varstrl="順平

varstr2=escape(strl);

window.alert(str2);

varstr3=unescape(str2);

window.alert(str3);

3）函數(shù)的調(diào)用方法

①番教名（借論給①教的參敷1,傳邊給，心救的參救2,…J

②交量=必數(shù)名；

此時變量就相當(dāng)于品致的引用（指針），可以這樣調(diào)用，心敷：

交量（實(shí)際參敦.?）

b特別說明

1.對于有返回值的國數(shù)調(diào)用，也可以在程序中近揉使用返回

的結(jié)果,例如：alertCres="+sum（2,3））；

2.沒有返回值的心效，珂返回undefined。

說明：

1.第二種方法不推薦使用

2.函數(shù)的調(diào)用過程（內(nèi)存分析）

〃處，是一個函數(shù)，它接受數(shù)值

functicmabc(numl)(

if(nunl>3)(

abc(-numl),〃遞歸.

)

docuoent.witeln(nu?l),

)

械⑸

p34

3.js支持參數(shù)個數(shù)可變的函數(shù)

functionabcl(){

。//在芯中有一個arguments可以訪問所有的傳入值

for(vari=0；i<