2023年htmlcssjavascript學習筆記大全

目錄

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

一、HTML的相關介紹錯誤!未定義書簽。

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

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

3、HTML運營原理。錯誤!未定義書簽。

1）本地運營錯誤!未定義書簽。

2）遠程訪問運營。錯誤!未定義書簽。

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

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

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

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

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

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

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

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

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

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

7、框架標記。錯誤!未定義書簽。

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標簽錯誤!未定義書簽。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4、塊元素和行內連元素錯誤!未定義書簽。

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

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

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

1)標準流/非標準流概念。錯誤!未定義書簽。

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

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

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

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

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

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

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

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

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

Javascript篇錯誤!未定義書簽。

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

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

1、js標記符錯誤!未定義書簽。

2、js中的數據類型錯誤!未定義書簽。

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

（2）復合數據類型。錯誤!未定義書簽。

（3）特殊數據類型。錯誤!未定義書簽。

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

4、運算符錯誤!未定義書簽。

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

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

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

1、函數。錯誤!未定義書簽。

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

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

3）函數的調用方法錯誤!未定義書簽。

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

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

2）數組在內存中的存在形式。錯誤!未定義書簽。

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

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

5）js數組的幾個應用錯誤!未定義書簽。

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

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

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

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

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

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

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

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

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

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

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

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

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

關于Object類的說明錯誤!未定義書簽。

10、構造方法（函數）錯誤!未定義書簽。

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

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

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

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

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

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

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

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

五、js內部類。錯誤!未定義書簽。

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

2、內部類錯誤!未定義書簽。

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

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

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

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

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

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

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

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

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

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

2、事件驅動機制的理解。錯誤!未定義書簽。

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

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

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

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

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

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

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

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

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

4、dom關系圖。錯誤!未定義書簽。

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

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

誤!未定義書簽。

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

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

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

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

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

12、對dom的加強錯誤!未定義書簽。

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

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

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

HTML篇

一、HTML的相關介紹

1、HTML的介紹

html是一種標記語言，重要用于網頁開發(fā)，使用html可以展現文字

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

2、HTML可以做什么

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

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

表格、鏈接,從而構成一個個漂亮的網頁。

3、HTML運營原理

1）本地運營

HTML文獻本地存放，使用本地瀏覽器打開

2）遠程訪問運營

HTML文獻在另一臺服務器中存放，使用瀏覽器通過網絡打開

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

①記事本

②dw

(Dfrontpage

④vs

(Dmyeclipse

⑥其它ide..

二、HTML的基本語法

1、HTML基本語法

不管HTML文獻有多復雜，它的基本結構如下：

〈元素屬性='屬性值’內容〈/元素〉

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

注意：元素就是標記

段落標記qp>

<fonts/ze="”>字體標記size取值

1到7

Vh#>標題字體々/7#>#=1,2,3,4,5,6

<b></b>字體加粗

2、HTML符號實體

顯示結果貓送實體名彝實體編號

空格(nb3p;“160;

<小于號61t；“60;

>大于號“62；

6和號samp;6138；

引號squot;(?34；

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

顯示結果描述實體名稱實體生號

分ficent;“162;

￡蟒(pound;“163;

Y日后6yen;“165;

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

<￡>版權ficopy;“169;

9注冊商標“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、表格

用處:可以顯示數據和圖片，并且可以布局

<tableborde「=”邊框寬度"cellspacing="空隙大小”

cellpadding="填充大小”〉

</table>

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

<tr>-定義表行

<th>-定義表頭

<td>-定義表元（表格的具體數據）

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

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

6、有序列表與無序列表

1）無序列表

VW"屬性值”》

列表內容<：/〃>

<lul>

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

type=square

設定符號款式，具值有三種，如下，默認為type=*diSc"：

type—disc'時的利而符W為實心圓點.

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

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

2）有序列表

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

<li>列表內容</li>

</ol>

V。6稱為耐列表標記.<口測用以標示列表

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

編號列表.

<06的屬性設定（常用）=

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

type="i"

設建目款式，其值有五種，請參考右表，內

定為

type="1

start="4"

設定開始數目，不論設定了目款式，其

值只能是12.3..等整數，默認為start="1".

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

1阿拉伯數字1,2.3,...

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

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

I小寫羅馬數字I.ii.iii

I大寫羅馬數字I.II.Ill

7、框架標記

〈framesetframeborder="邊框大小”

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

rows="各窗口百分比”〉

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

</frameset>

說明：<frameset>元素中不能出現<border》標簽

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

小結：表格里面可嵌套表格，框架里面可嵌套框架

8、HTML表單元素

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

2）基本語法

<fbmiaction*^url"meflwd=與二

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

</fonn>

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

案例:

登錄系統(tǒng)

X直丁：I

登錄。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（復選框）

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

name是你給該表單元素取名

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

3)input元素

畫直線

<hrsize=#width=#color=>

復選框、單選框默認

<inputtype="checkbox"name=#checked>

<inputtype="radio"name=#checked>

下拉選項框

<optionselected>#</option>

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

<selectsize=#>

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

<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

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

電影(movie),聲音(sound),虛擬現實語言(vrrol)

體含<enbed>標記，您需要把plugin安裝完備。

請注意1ettbedattributesaredifferentbetweeneachplugins.

?背景音樂Only

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

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

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

div+css篇

一、div+css是什么

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

結構和背景的元素。

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

它更一種用來表現HTML或XML等文件式樣的計算機語言.

div+css是網站標準（或稱“WEB標準”）中常用術語之一，通常

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

因為XHTML網站設計標準中，不再使用表格定位技術，而是采用

DIV+CSS的方式實現各種定位。

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

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

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

和外觀.

①外部CSS

②內部CSS

二、語法

1>head標簽

<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中釗文，而在網頁頁面(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文獻中引用id選擇器

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

3)html元素選擇器

(1)基本語法

html元素名稱{

屬性名?.屬性值;

}

(2)結論

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

類>html

4)通配符選擇器

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

器。

*{margin:0;padding:0}

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

說明：

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

*/

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

5)案例練習

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

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

(2)當鼠標移動到超鏈接時，自動出現下劃線

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

6)選擇器的進一步討論

(1)父子選擇器

①父子選擇器

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

如果希望特別強調/常兩個字.該

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

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.當一個元素同時被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文獻中排在前面

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

(4)CSS文獻簡化

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

同的CSS樣式放在一起,這樣可以簡化css文獻

例：

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、塊元素和行內連元素內聯(lián)元素只會

1)概念

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

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

塊元素(blockelement):

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

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

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

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

2）兩者區(qū)別

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

I

②行內元素只能容納文本和其它行內元素，塊元素可以容納文本,

行內元素和塊元秦（與瀏覽器類版本和類型有關）

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

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

說明：

請注意彳亍內元資口塊元素可以相互轉換

display:intjne-＞轉為行內元素（比如div）

display:block-＞轉為塊元素（比如a）

案例：

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

<br/>

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

5、流

1）標準流/非標準流概念

流:在現實生活中就是流水，在網頁設計中就是指元素（標簽）的排列

方式。

標準流:元素在網頁中就象流水，排在前面的元素（標簽）內容前面

出現，排后面的元素（標簽）內容后面出現。

非標準流：當某個元素（標簽）脫離了標準流［比如因為相對定位］排列

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

2｝盒子模型

(1)概念

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

在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框

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

MARGIN邊界

B

O

X

說明：

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

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

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

(2)浮動

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

右浮動、清除浮動

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

左邊框

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

右邊框

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

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

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

動元素“卡住”：

案例1：

案例2：字包圖

清除浮動：

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

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

3）定位

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

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

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

元素中。

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

原本所占的空間仍保留.從這一角度看，好像該元素仍然在文檔流/標準流

中一樣。

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

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

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

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

fixed:元素框的表現類似于將position設置為absolute,不過其包

含塊是視窗本身。

(1)static定位

默認的定位方式

說明：left與top屬性不生效

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

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

本所占的空間任然保存，從這一角度看,該元素任然在文檔流/標準流中

同樣

說明:relative的參照點是它本來的位置

■■■■

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

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

說明：

這里我們特別強調一點，

absolute定位是對離自己最

近的那個非標準流盒子而言

的。

(4)fixed定位

見上圖

(5)inherit

。將子元素的position設立為繼承父元素的position

Javascript篇

一、js的基本介紹

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

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

說明：

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

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

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

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

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

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

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

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

本引造就別泡鳧春I

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

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

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

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

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

■javascript。可以對服務器搞的程「比皎多啦!）

■|javascript敕新標本是1.81

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

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

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

,由于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標簽間的，但也可以隨意

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

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

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

次執(zhí)行

改善：一個加法程序

<script1anguage="javascript">

functionadd(){

ovarnuml=123;

vannum2=456;

vanresult=numl+num2;

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

?}

</script>

說明：

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

var

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

1、js標記符

I標識符限指JavaScript中定義的符號,例如，變量名，函數名，數組

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

號($)組成，但標識符不能以數字開頭，|不能曷JavaScript中的保留關錮

IS

合法的標識符舉例：

indentifier?username,user_name?_userName、Jusemanle

非法的標識符舉例：int,98.3、HelloWorld

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

?JavaScript程序代碼的格式

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

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

?語句塊使用｛｝來表示

?JavaScript程序的注釋

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

2、js中的數據類型

（1）基本數據類型（三大類型）

?Number（數字類型）

1：整型常量（10進制\8進制\16進制）

十六進制以Ox或0X開頭，例如：0x8a。

八進制必須以0開頭，例如：0123.

十進制的第一位不能是0（數字0除外），例如：123.

2、實型常量

12.32、193.98、5E7、4e5等.

特殊數值：NaN、Infinity、isNaN（）、isFinite（）|

?Boolean（布爾值）!

true和false。

?String字符串

"abookofJavaScript'\'abc\"a"、

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

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

說明：

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

2.NaN->notanumber

Infinity-＞無窮大

isNaNQ-＞判斷一個值是否是個數值

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

（2）復合數據類型

（3）特殊數據類型

說明：

undefine:

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

2.vartt;

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

■定義變量

①什么是定義變量？

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

?初始化變量

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

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

.給變量賦值

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

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

?自動轉換

請看一個案例:

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

??韓順平；

a=”,可以直接使用

wind。*,alert(a);

.強制轉裨

如何字如串轉成數字？

vara-parselnt(**123*,)

varb=parseFloat(“12.3");

...〃其它后面介紹

說明:

varb=123;->b為數值

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

4、運算符

說明：

①

在邏輯運算中，0、""、false,null、undefined.NaN均表示false

②"II”原則:將返回第一個不為false的值或對象，或返回最后一個值（當全為

false時）

vana=4;

vanb=3；

c=a||3;

window.alert（c）;運營結果：c=4;

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

1）順序控制

2）分支控制

（1）單分支

if（條件表達式）｛

語句；

）

（2）雙分支

if（條件表達式）｛

S語句；

｝else｛

語句；

）

（3）多分支

①if（條件表達式）｛

語句；

｝elseif（條件表達式1）｛

語句;

}elseif...{

}[else（

}]

說明：

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

②

switch（條件表達式）（

case常量1:

語句；break;

case常量2;

語句；break;

case常量n;

語句；break;

default:

語句；

break;

）I

說明：

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

外），這一點與Java或C等語言不同

6、循環(huán)控制

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

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

3）do{

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

說明：

在ie8中可以通過工具來對js代碼進行調試

三、js基本語法（二）

1、函數

1）語法

function函數名（參數列表）

（

。語句…

?return返回值；

）

說明：

1.無返回值

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

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

2）函數的引用

1.建立.js文獻

2.在.js文獻中寫函數

3.在需要的文獻中引入，引入語法：

（scriptlanguage="javascript"s,c="所要引入的js文獻途徑

名'”></script>

說明：有兩個函數

//escape和unesauep函數往往配合使用，可以防止亂碼出現

varstrl="順平

varstr2=escape(strl);

window.alert(str2);

varstr3=unescape(str2);

window.alert(str3);

3）函數的調用方法

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

②交量=必數名；

此時變量就相當于品致的引用（指針），可以這樣調用，心敷：

交量（實際參敦.?）

b特別說明

1.對于有返回值的國數調用，也可以在程序中近揉使用返回

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

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

說明：

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

2.函數的調用過程（內存分析）

〃處，是一個函數，它接受數值

functicmabc(numl)(

if(nunl>3)(

abc(-numl),〃遞歸.

)

docuoent.witeln(nu?l),

)

械⑸

p34

3.js支持參數個數可變的函數

functionabcl(){

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

for(vari=0；i<