當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

HTML/CSS/JavaScript学习总结(转)

發(fā)布時間：2023/12/10 javascript 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML/CSS/JavaScript学习总结(转) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

HTML

網(wǎng)站開發(fā)的主要原則是：

–?用標(biāo)簽元素HTML描述網(wǎng)頁的內(nèi)容結(jié)構(gòu)；

–?用CSS描述網(wǎng)頁的排版布局；

–?用JavaScript描述網(wǎng)頁的事件處理，即鼠標(biāo)或鍵盤在網(wǎng)頁元素上的動作后的程序

HTML（Hyper?Text?Mark-up?Language?超文本標(biāo)記語言）的縮寫，是最基礎(chǔ)的網(wǎng)頁語言?。?

Html是通過標(biāo)簽來定義的語言，代碼都是由標(biāo)簽所組成?。Html代碼不用區(qū)分大小寫?。

Html代碼由<html>開始</html>結(jié)束。里面由頭部分<head></head>和體部分<body></body>兩部分組成。

標(biāo)簽：是由一對尖括號<>和標(biāo)簽名稱組成。
標(biāo)簽分為“起始標(biāo)簽”和“結(jié)束標(biāo)簽”兩種，二者的標(biāo)簽名稱是相同的，只是結(jié)束標(biāo)簽多了一個斜杠“/”

在元素的起始標(biāo)簽中，可以包含“屬性”來表示元素的其他特性

<標(biāo)簽名?屬性名='屬性值'>?數(shù)據(jù)內(nèi)容?</標(biāo)簽名>

??????????????????<標(biāo)簽名?屬性名='屬性值'?/>

多個屬性時：<hr??size=“3”??align=“l(fā)eft”??width=”75%”>用空格分開

Html?的命名：文件的擴(kuò)展名要以.html或.html結(jié)束。

??文件名中只可由英文字母、數(shù)字或下劃線組成。

??文件名中不要包含特殊符號，比如空格、$等

所有標(biāo)記都要用尖括號（<>）括起來，這樣，瀏覽器就可以知道，尖括號內(nèi)的標(biāo)記是HTML命令。

任何空格或回車在代碼中都無效，插入空格或回車有專用的標(biāo)記，分別是?、<br>。因此，不同的標(biāo)記間用回車鍵換行再編寫是個不錯的習(xí)慣。

@?title元素：文件標(biāo)題聲明?

@?link元素和style元素常用于CSS?

@?script元素用于腳本

@?meta元素?元信息

@?<base>?超鏈接網(wǎng)址基準(zhǔn)參考點(diǎn)?

name?屬性：網(wǎng)頁的描述信息。當(dāng)取keywords時，content屬性的內(nèi)容就作為搜索引擎的關(guān)鍵字進(jìn)行搜索。

http-equiv?屬性：模擬HTTP協(xié)議的響應(yīng)消息頭。

@?body元素是html文件的主體元素，它包含所有要在網(wǎng)頁上顯示的各種元素?。

????????設(shè)置頁面背景:bgcolor

????????設(shè)置背景圖片:background

????????設(shè)計正文顏色:text

設(shè)置頁面邊距:topmargin、leftmargin、

??????????????????????????rightmargin、bottomnargin

??????????????設(shè)置顯示內(nèi)容與瀏覽器的距離

添加空格——?

<b>?…?</b>?粗.<i>?…?</i>斜?<s>?…?</s>?刪<u>?…?</u>?下劃<sub>?…?</sub>?下標(biāo)??????????<sup>?…?</sup>?上標(biāo)???????????

.<address>?…?</address>?地址????????自動傾斜??

.<big>?…?</big>?大字

<strong>?…?</strong>?加強(qiáng)語氣?(?加粗?

<em>...</em>?加強(qiáng)語氣?(?傾斜?

段落縮進(jìn)<blockquote>

設(shè)置水平線<hr>

向中對齊?<center>?

格式：?<center>?…?</center>

插入定義列表<dl>

<dl>

??<dt>名稱</dt>

??????<dd>說明</dd>

??<dt>名稱</dt>

??????<dd>說明</dd>

?????<dd>說明</dd>

??…

</dl>

插入無序列表<ul>

<ul>

??<li>項(xiàng)目名稱</li>…

??…

<ul>

<ul>：符號標(biāo)簽（○●■）

type屬性：disc???●??(?默認(rèn))???????circle???○?????????????square??■

<ul?type="circle">

插入有序列表<ol>

<ol>

??<li>項(xiàng)目名稱</li>…

??…

</ol>

超鏈接概述

鏈接在網(wǎng)頁制作中是一個必不可少的部分，在瀏覽網(wǎng)頁時，單擊一張圖片或者一段文字就可以彈出一個新的網(wǎng)頁，這些功能都是通過超鏈接來實(shí)現(xiàn)的，在HTML文件中，超鏈接的建立是很簡單的，但是掌握超鏈接的原理對網(wǎng)頁的制作是至關(guān)重要的。在學(xué)習(xí)超鏈接之前，需要先了解一下“URL”，所謂URL（Uniform?Resource?Locator）指統(tǒng)一資源定位符，通常包括三個部分：協(xié)議代碼、主機(jī)地址、具體的文件名

超鏈接標(biāo)簽的使用

創(chuàng)建超鏈接的標(biāo)簽為<a>和</a>，使用格式如下：
<a?href=“資源地址”???target=“是否在新窗口顯示”???title=“指向鏈接時顯示的文字”>
鏈接名稱
</a>

_parent	在上一級窗口中打開，一般使用分楨的框架頁會經(jīng)常使用
_blank	在新窗口打開
_self	在同一個框架或窗口中打開，該項(xiàng)一般不用設(shè)置
_top	在瀏覽器的整個窗口中打開，忽略任何框架

鏈接路徑

–?絕對路徑：包含了標(biāo)識Internet上的文件所需要的所有信息，包括完整的協(xié)議名稱、主機(jī)名稱、文件夾名稱和文件名稱。格式為：

通信協(xié)議://服務(wù)器地址:端口號/文件位置…/文件名

http://ww.sina.com.cn/web/index.html

相對路徑：是以當(dāng)前文件所在路徑為起點(diǎn)，進(jìn)行相對文件的查找。

鏈接到同一文檔的某個部分

??錨記標(biāo)簽用于使用戶“跳”到文檔的某個部分?

??HTML?的?NAME?屬性用于創(chuàng)建錨標(biāo)記??

<A?NAME?=?“marker”>主題名稱</A>

<A?HREF=?“#marker”>主題名稱</A>

為達(dá)到這種跳轉(zhuǎn)效果，請?jiān)?HREF?參數(shù)中使用該標(biāo)記

B?發(fā)送E-mail：在html頁面中，可以建立e-mail鏈接，當(dāng)瀏覽者單擊鏈接后，系統(tǒng)會啟動默認(rèn)的本地郵件服務(wù)系統(tǒng)發(fā)送郵件，格式為：

<a?href=“mailto:e-mail地址?subject=郵件主題”>
描述文字

</a>

<a?href=“mailto:zhangsan@126.com?subject=一個消息”>

聯(lián)系我

</a>

LINK?顏色的設(shè)置

??基本格式：<body?link=”顏色”?alink=”顏色”?vlink=”顏色”>

??link?超鏈接尚被選中的文字

??alink?超鏈接點(diǎn)選但未被放開的顏色

??vlink?超鏈接已被點(diǎn)選過的顏色

插入并格式化圖像

B?<img>標(biāo)簽：用于在網(wǎng)頁中插入圖像內(nèi)容。

–?src屬性：用于設(shè)置圖像文件的相對或絕對URL地址。

–?共三種類型：GIF：是圖形和圖片的最佳格式，適用于透明或動畫圖形。

–?JPG或JPEG：更適合存放照片

–?PNG：擁有許多JPEG與GIF的共同優(yōu)點(diǎn)，所以最近越來越流行。

通過設(shè)置width屬性和height屬性可以控制圖像的顯示寬度和高度，他們的長度單位可是百分比，也可是像素。

?<a?href="URL"><img?src="URL"></a>

注意點(diǎn):邊框的問題.

可通過border=“0”去掉邊框

屬性名稱???????????????????????屬性值????????????????????????說明

Align??????????????????????????left???????????????圖像靠左文字靠右

Right????????圖像靠右文字靠左

Top????????文字往上靠

middle?????????文字靠中

bottom??文字靠下

空隙設(shè)置

Vspace???垂直上下兩端和物件距離

Hspace??水平左右兩端和物件距離

設(shè)置圖像映射

圖像地圖：<map>

map標(biāo)簽要和img標(biāo)簽聯(lián)合使用。

<img?src=”URL”?usemap=””></img>

<map?name＝””>

<area?shape=””?cords=”?,?,?,?”?href＝”URL”>

</map>

語法說明

<img>標(biāo)記表示插入圖像文件，src表示插入圖像的路徑；

???<map>標(biāo)記表示插入圖像映射；

???<area>標(biāo)記表示圖像映射區(qū)域；

???rhape屬性表示映射區(qū)域形狀：

?????—?“rect”表示矩形區(qū)域；

?????—?“circle”表示橢圓形區(qū)域；

?????—?“poly”表示多邊形區(qū)域；

???cords表示感應(yīng)區(qū)域的坐標(biāo)

創(chuàng)建表格?

<BODY>

<TABLE?BORDER?=?2?>

?<TR>

???<TD>姓名</TD>

???<TD>性別</TD>

???<TD>分?jǐn)?shù)</TD>

?</TR>

?<TR>

??<TH>姓名</TH>

???<TH>性別</TH>

???<TH>分?jǐn)?shù)</TH>???<TH>表示行或列標(biāo)題，粗體顯示?

?</TR>

?.......

</TABLE>

<TH?align="center">性別</TH>居中

COLSPAN=“n”?屬性表示跨多少列?

ROWSPAN=“n”?屬性表示跨多少行?

表格的顏色設(shè)置：

　　表格的背景色?<TABLE?bgcolor=顏色值>?

　　行的背景色　<TR?bgcolor=顏色值>?

???列的背景色??<TD?bgcolor=顏色值>

表格的尺寸設(shè)置：

　　<TABLE???width=n1???height=n2>

??frame常見屬性

??規(guī)定表格周圍的哪一側(cè)的邊框是可見的。

??rules常見屬性

???規(guī)定水平或垂直的分界線。

???注釋：必須與?"border"?屬性配合使用！

定義表格列的分組。通過此元素，您可以對列進(jìn)行組合以便進(jìn)行格式化。?

<colgroup?span="3"?bgcolor=“red”></colgroup>

Span:表格的直列數(shù)，而不是第幾列。?

定義某個表格中針對一個或多個列的屬性值。您只能在表格或?colgroup?中使用此屬性。

<table>

???<col></col>????代表第1列

??<col?span=“2”?bgcolor=“red”></col>???代表第2，3?兩列

??<tr>….</tr>

單元格間距，邊距

<table?cellspacing=””?cellpadding=“”>

表格嵌套

在HTML文件中，第一個<table>標(biāo)記表示插入第一表格，第二個<table>標(biāo)記插入在標(biāo)記<td></td>之間，表示在單元格中插入表格，也就是嵌套表格。

框架標(biāo)簽
框架就是把一個瀏覽器窗口劃分為若干個小窗口，每個窗口可以顯示不同的URL網(wǎng)頁。

所有的框架標(biāo)簽要放在一個HTML文檔中，HTML頁面的文檔體標(biāo)簽<body>被框架集標(biāo)簽<frameset>所取代，然后通過<frameset>的子窗口標(biāo)簽<frame>定義每一個子窗口和子窗口的頁面屬性。

B?<frameset>標(biāo)簽

<frameset?rows=“框架窗口高度,框架窗口高度，…”>

</frameset>?

<html>

<head>

???<title>框架的基本結(jié)構(gòu)<title>

</head>

???<frame>

…

</frameset>

</html>

<frameset?cols=“框架窗口寬度,框架窗口寬度，…”>

</frameset>?

還可設(shè)置的屬性包括：

frameborder：是否顯示框架結(jié)構(gòu)的邊框線，取值為0、1或yes、no。取值為1或yes邊框?qū)@示，取值為0或no邊框?qū)[藏。

framespacing：默認(rèn)邊框線的寬度為1，該屬性可調(diào)整邊框線的寬度。（以像素為單位）

bordercolor：可設(shè)置邊框線顏色。

scrolling：設(shè)置框架是否顯示滾動條。取值為yes、no或auto。yes表示滾動條一直顯示；no表示無論什么情況都不顯示滾動條；auto是系統(tǒng)的默認(rèn)值，它是根據(jù)內(nèi)容來調(diào)整的，當(dāng)頁面長度超過瀏覽器窗口的范圍時就會自動顯示滾動條。

B?<noframes>標(biāo)簽

如果遇到不支持框架結(jié)構(gòu)的瀏覽器，此時就需要用到該標(biāo)簽來設(shè)置替換的內(nèi)容，并告訴瀏覽者其瀏覽器無法打開框架頁面。

<a?href=“right1.html”?target=“mainFrame”>新聞中心</a>

使用iframe進(jìn)行頁面內(nèi)的頁面嵌套

可以定義嵌套頁面的大小、位置等

用法：

可以通過name屬性將鏈接的顯示目標(biāo)定位到

iframe框架內(nèi)。

??<bgsound>?是用以插入背景音樂，但只適用於?IE，其參數(shù)設(shè)定不多。
如下?<bgsound?src="your.mid"?autostart=true?loop=infinite>?

??src="your.mid"?
設(shè)定?midi?檔案及路徑，可以是相對或絕對

??autostart=true?
是否在音樂檔傳完之後，就自動播放音樂。true?是，false?否?(內(nèi)定值)。?

??loop=infinite?
是否自動反覆播放。LOOP=2?表示重復(fù)兩次，Infinite?表示重復(fù)多次。?

??<EMBED>?是用以插入各種多媒體，格式可以是?Midi、Wav、AIFF、AU?等等，Netscape?及?新版的?IE?都支援。其參數(shù)設(shè)定多。如下

???<EMBED?src="your.mid"?autostart="true"?loop="true"?hidden="true">?

??src="your.mid"?
設(shè)定?midi?檔案及路徑，可以是相對或絕對

??autostart=true?
是否在音樂檔傳完之後，就自動播放音樂。true?是，false?否?(內(nèi)定值)。?

??loop="true"?
是否自動反覆播放。LOOP=2?表示重復(fù)兩次，true?是，?false?否。?

??HIDDEN="true"?
是否完全隱藏控制畫面，true?為是，no?為否?(內(nèi)定)。?

??STARTTIME="分:秒"?
設(shè)定歌曲開始播放的時間。如?STARTTIME="00:30"?表示從第30秒處開始播放。?

??VOLUME="0-100"?
設(shè)定量的大小，數(shù)值是0到100之間。內(nèi)定則為使用者系統(tǒng)本身之設(shè)定。?

??WIDTH="整數(shù)"?和?HIGH="整數(shù)"?
設(shè)定控制畫面的寬度和高度。(若?HIDDEN="no")?

ALIGN="center"?
設(shè)定控制畫面和旁邊文字的對　方式，其值可以是?top、bottom、center、baseline、?left、right、texttop、middle、absmiddle、absbottom。?

controls="smallconsole"?
設(shè)定控制畫面的外貌。預(yù)設(shè)值是?console。?
console?一般正常的面板?　　
smallconsole?較小的面板?　　
playbutton?只顯示播放按鈕?　　
pausecutton?只顯示暫停按鈕?　　
stopbutton?只顯示停止按鈕?　　
volumelever?只顯示音量調(diào)整鈕?

<Marquee>滾動的文字</Marquee>

??Direction=”滾動方向”left[左]right[右]up[上]down[下]

??Behavior=”滾動方式”?scroll[一圈一圈繞著走]?slide[只走一次]?alternate[來回的走]

??Loop=”滾動的循環(huán)次數(shù)”?若未指定則循環(huán)不止(loop=”infinite”)

??Bgcolor=”背底顏色”Width=“寬度”Height=“高度”

??onMouseOver=”this.stop()”onMouserOut=”this.start()”

??Scrollamount=”速度”?數(shù)值越大速度越快?

??Scrolldelay=“延時”（走一步，停一停）?

表單Form

??<form?action=處理表單信息的服務(wù)器端應(yīng)用程序?method=處理表單數(shù)據(jù)的方法(POST/GET)?name=表單名稱?target=打開窗口的方式>

??表單元素

??</form

文本框

??<input?name=“文本框名稱”?type=“text”?value=“初始值”?size=“顯示字符數(shù)”?maxlength=“最多容納字符數(shù)”>

–?密碼框

??<input?name=“文本框名稱”?type=“password”?value=“初始值”?size=“顯示字符數(shù)”?maxlength=“最多容納字符數(shù)”>

–?多行文本框

??<textarea?name=“多行文本框名稱”?cols=“每行中的字符數(shù)”?rows=“顯示的行數(shù)”>

???初始內(nèi)容

??</textarea>

單選框、復(fù)選框

–?單選框

??<input?name=“單選框名稱”?type=“radio”?value=“選擇名稱”?checked(初始狀態(tài)，如果為默認(rèn)，則寫checked；否則不寫)>

–?復(fù)選框

??<input?name=“復(fù)選框名稱”?type=“checkbox”?value=“選擇名稱”?checked(初始狀態(tài)，如果為選中，則寫checked；否則不寫)>

列表框

(A)、菜單式?

??<select?name=“列表框名稱”>

??<option?selected(哪個為初始選擇，就添加selected語句[只有一個])?value=“提交值”>列表1</option>

??<option?value=“提交值”>列表2</option>

??<option?value=“提交值”>列表3</option>

??...

??</select>

??(B)、列表式

??<select?name=“列表框名稱”?size=“顯示的行數(shù)”?multiple(如果允許多選，則有該命令；否則沒有此命令)>

??<option?selected(哪個為初始選擇，就添加selected語句[可有多個，但沒有意義])?value=“提交值”>列表1</option>

??<option?value=“提交值”>列表2</option>

??<option?value=“提交值”>列表3</option>

??...

??</select>

下拉菜單?

<B>誰是?2002?年世界杯冠軍？</B>

<SELECT?NAME?=“myselect">

<OPTION?SELECTED>西班牙</OPTION>

</SELECT>

按鈕

??<input?type=“按鈕類型(reset、submit、button)”?name=“按鈕名稱”?value=“按鈕顯示文本”>

–?隱藏域

??<input?name=“名稱”?type=“hidden”?value=“提交值”>

–?瀏覽框

??<input?name=“名稱”?type=“file”?size=“顯示字符長度”?maxlength=“最大長度”>

BUTTON（按鈕）

<INPUT?name="button1"?type="submit"?value="提交">

??<INPUT?name="button2"?type="reset"?value="重置">

??<INPUT?name="button3"?type="button"?value="普通按鈕">

Type?屬性：
submit：	提交按鈕
reset：	重置按鈕
button：	普通按鈕

文本框、按鈕、單選按鈕、復(fù)選框等都是輸入元素。

<INPUT?type=“?”?name=“?”?size=”?”???

???value=“?”?maxlength=“?”?checked=“?”>

Type????此屬性指定元素的類型。元素類型可以有多種選擇：TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN?和?BUTTON。默認(rèn)選擇為?TEXT。

Name???此屬性指定控件的名稱。例如，如果表單中有幾個文本框，則可以用名稱?TEXT1、TEXT2?或選擇的任何名稱來標(biāo)識它們。Name?屬性的作用域是在?FORM?元素內(nèi)。

?Value????此屬性是可選屬性，它指定控件的初始值。但是，如果?TYPE?為?RADIO，則必須指定一個值。

Size????此屬性指定控件的初始寬度。如果?TYPE?為?TEXT?或?PASSWORD，則控件的大小以字符為單位。對于其他輸入類型，寬度以像素為單位。???

Maxlength????此屬性用于指定可在?TEXT?或?PASSWORD?元素中輸入的最大字符數(shù)。

Checked?????此屬性是?Boolean?屬性，指定按鈕是否是打開的。當(dāng)輸入類型為?RADIO?或?CHECKBOX?時，使用此屬性。

CSS

F?CSS的基本概念

??掌握樣式表的語法規(guī)則

??樣式表的分類：

–?行內(nèi)樣式表

–?內(nèi)嵌樣式表

–?外部樣式表

??掌握常用的樣式

指定顯示樣式

<P?style?=?"color:red;font-size:30px;font-family:隸書;">?

F?CSS基礎(chǔ)

@?CSS是Cascading?Style?Sheet的縮寫，翻譯為“層疊樣式表”，簡稱“樣式表”。

@?樣式表的首要目的是為網(wǎng)頁上的元素精確定位。其次，把網(wǎng)頁上的內(nèi)容結(jié)構(gòu)和格式控制相分離。即html的標(biāo)簽主要是定義網(wǎng)頁的內(nèi)容，而CSS決定這些網(wǎng)頁內(nèi)容如何顯示。

@?優(yōu)點(diǎn)：簡化網(wǎng)頁的格式代碼，加快網(wǎng)頁下載顯示的速度，也減少了需要上傳的代碼數(shù)量，大大減輕了重復(fù)勞動的工作量。

屬?性	CSS名稱	說?明
顏色?	color	?
文本屬性	font-size	字體大小
	font-family	字體
	text-align	文本對齊
邊框?qū)傩?/p> (用于表單元素)?	border-style	邊框樣式
	border-width	邊框?qū)挾?
	border-color	邊框顏色?
定位屬性(position)	top	頂部邊距（上邊距）
	left	左邊距
	width	寬度
	height	高度
	z-index	z?軸索引號，用于層

F?使用CSS

@?CSS通過“樣式”來表示網(wǎng)頁的顏色、字體、背景色、邊框線及網(wǎng)頁內(nèi)容的位置及大小尺寸等屬性。

@?一系列的樣式組成了“樣式表”。

@?CSS的語法結(jié)構(gòu)：

選擇符{樣式屬性:取值;樣式屬性:取值;樣式屬性:取值;…}

CSS的基本語法

樣式和樣式表

???1．樣式

????樣式是由成對的屬性名和屬性值以冒號“：”相間組成。?

????????2．樣式表

?????一系列的“樣式”以分號“；”相間組成為“樣式表”。

根據(jù)樣式代碼的位置，分為三類：

q?行內(nèi)樣式

q?內(nèi)嵌樣式

q?外部樣式

q?行內(nèi)樣式：HTML標(biāo)簽直接使用style屬性，稱為行內(nèi)樣式（Inline?Style）。它適用于只需要簡單地將一些樣式應(yīng)用于某個獨(dú)立的元素的情況。

例如：<table?style="color:red;margin-left:200px">

???????????…

???????????</table>

注意：在使用行內(nèi)樣式的過程中，建議同學(xué)們在<head>標(biāo)簽中添加<meta>標(biāo)簽，添加的<meta>標(biāo)簽如下：

<head>

</head>
內(nèi)聯(lián)的樣式比其他方法更加靈活。要使用內(nèi)聯(lián)樣式，必須使用Content-Style-Type?HTTP頁眉擴(kuò)展對整個文檔進(jìn)行單獨(dú)的樣式表語言聲明。使用內(nèi)聯(lián)CSS的網(wǎng)頁制作者必須將text/css作為Content-Style-Type?HTTP頁眉.

@?內(nèi)嵌樣式表：是在<head>標(biāo)簽內(nèi)添加<style></style>標(biāo)簽對，在標(biāo)簽對內(nèi)定義需要的樣式。

例如，<head>

td{font-size:9pt;color:red}

.font105{font-size:10.5pt;color:blue}

</style>

</head>

注意：有些低版本的瀏覽器不能識別style標(biāo)記，這意味著低版本的瀏覽器會忽略style標(biāo)記里的內(nèi)容，并把style標(biāo)記里的內(nèi)容以文本直接顯示到頁面上。為了避免這樣的情況發(fā)生，我們用加HTML注釋的方式（）隱藏內(nèi)容而不讓它顯示?

內(nèi)嵌樣式-2?選擇器

選擇器分為：

??HTML?選擇器

??CLASS?類選擇器

??ID?選擇器

??樣式選擇器

??HTML標(biāo)簽選擇器：在HTML頁面中使用的標(biāo)簽，如果在CSS中被定義，那么此網(wǎng)頁的所有該標(biāo)簽都將按照CSS中定義的樣式顯示。?

??類選擇器：使用HTML標(biāo)簽的class屬性引入CSS中定義的樣式規(guī)則的名字，稱為類選擇器，class屬性指定的樣式名字必須是以“.”開頭。

??ID選擇器：ID屬性是用來定義某一特定的HTML元素，與class屬性剛好相反，class屬性是用來定義一組功能或格式相同的HTML元素。ID選擇器定義的CSS名稱必須以“#”開頭，

??通用選擇器：是所有選擇器中最強(qiáng)大卻最少使用的。通用選擇器的作用就像是通配符，它匹配所有可用元素。?

??偽類選擇器：是指對同一HTML元素的各種狀態(tài)和其所包括的部分內(nèi)容的一種定義方式。?

Id的優(yōu)先級高于class

外部樣式

@?外聯(lián)樣式表:是將<style>標(biāo)簽內(nèi)的樣式語句定義在擴(kuò)展名為.css的文件中。通過使用<link>標(biāo)簽引入樣式文件。

例如，<head>
<link?href="mystyle.css"?rel="stylesheet"??type=“text/css”>
????</head>

優(yōu)點(diǎn)：一個外部樣式表文件可以應(yīng)用于多個頁面。當(dāng)你改變這個樣式表文件時，所有頁面的樣式都隨之而改變。在制作大量相同樣式頁面的網(wǎng)站時，非常有用，不僅減少了重復(fù)的工作量，而且有利于以后的修改、編輯，瀏覽時也減少了重復(fù)下載代碼。?

使用LINK（鏈接）標(biāo)簽?，語法：

<HEAD>

<LINK???rel?=?“stylesheet”????type?=?”text/css”????href?=?”樣式表文件.css”?>

</HEAD>

可以連接多個html應(yīng)用到html里面

行內(nèi)樣式表、內(nèi)嵌樣式表、外部樣式表各有優(yōu)勢，實(shí)際的開發(fā)中常常

需要混合使用：

??有關(guān)整個網(wǎng)站統(tǒng)一風(fēng)格的樣式代碼，放置在獨(dú)立的樣式文件*.css

??某些樣式不同的頁面，除了鏈接外部樣式文件，還需定義內(nèi)嵌樣式

??某張網(wǎng)頁內(nèi)，部分內(nèi)容”與眾不同“，采用行內(nèi)樣式

對于某個HTML標(biāo)簽：

1）如果有多種樣式，如果規(guī)定的樣式?jīng)]有沖突，則疊加；

2）如果有沖突，則最先考慮行內(nèi)樣式表顯示，如果沒有，再考慮內(nèi)嵌樣式顯示，如果還沒有，最后采用外面樣式表顯示，否則就按HTML的默認(rèn)樣式顯示；

CSS中的注釋

樣式規(guī)則的注釋
樣式規(guī)則是使用/*需要注釋的內(nèi)容*/進(jìn)行注釋的。即在需要注釋的內(nèi)容前使用“/*”標(biāo)記開始注釋，在內(nèi)容的結(jié)尾使用“*/”結(jié)束。注釋可以多行內(nèi)容注釋。其注釋范圍在“/*”與“*/”之間

常用的樣式屬性

??1．文字

??2．背景

??3．邊框線

??4．高度和寬度

??5．間距和邊距

??6．列表

??7．位置和布局

指定“對象”來定義樣式表的語法規(guī)則如下：

對象1,?對象2?……?{?樣式表?}

下級對象

用于某一種元素中的下級元素，定義時兩元素名之間用空格相間。

P?em{color:blue;}

所以元素對象

?*｛color：blue;

CSS文字與文本

設(shè)置字體——font-family

設(shè)置字號——font-size

設(shè)置字體樣式——font-style

設(shè)置字體加粗——font-weight

設(shè)置字體變體——font-variant

組合設(shè)置字體屬性——font

文本的精細(xì)排版

調(diào)整字符間距——letter-spacing

調(diào)整單詞間距——word-spacing

添加文字修飾——text-decoration

設(shè)置文本排列方式——text-align

設(shè)置段落縮進(jìn)——text-indent

調(diào)整行高——line-height

轉(zhuǎn)換英文大小寫——text-transform

顏色和背景

設(shè)置顏色——color

設(shè)置背景顏色——background-color

插入背景圖片——background-image

插入背景附件——background-attachment

設(shè)置重復(fù)背景圖片——background-repeat

設(shè)置背景圖片位置——background-position

設(shè)置文本排列方式——text-align

??語法說明

該語法中的4個屬性值可以任意選擇其中一個。其中，left代表左對齊方式；right代表右對齊方式；center代表居中對齊方式；justify代表兩端對齊方式。

轉(zhuǎn)換英文大小寫——text-transform

插入背景圖片——background-image

基本語法

background-image:url|none

URL指定要插入的背景圖片路徑或名稱，路徑可以為絕對路徑也可以為相對路徑。第6章有絕對路徑和相對路徑的詳細(xì)內(nèi)容講解。圖片的格式一般以GIF、JPG和PNG格式為主。

???none是一個默認(rèn)值，表示沒有背景圖片

插入背景附件——background-attachment

基本語法

background-attachment:scroll|fixed

???scroll表示背景圖片是隨著滾動條的移動而移動。是瀏覽器的默認(rèn)值。

???fixed表示背景圖片固定在頁面上不動，不隨著滾動條的移動而移動。

設(shè)置重復(fù)背景圖片——background-repeat

基本語法

background-repeat:repeat|repeat-x|repeat-y|no-repeat

設(shè)置背景圖片位置——background-position

??基本語法

background-position：百分比|長度|關(guān)鍵字

利用百分比和長度設(shè)置圖片位置時，都要指定兩個值，并且這兩個值要用空格隔開。一個代表水平位置，一個代表垂直位置。水平位置的參考點(diǎn)是網(wǎng)頁頁面的左邊，垂直位置的參考點(diǎn)是頁面的上邊。

??關(guān)鍵字在水平方向的主要有l(wèi)eft、center、right，表示居左、居中和居右。關(guān)鍵字在垂直方向的主要有top、center、bottom，表示頂端、居中和底端。其中水平方向和垂直方向的關(guān)鍵字可相互搭配使用。

?使用百分比和關(guān)鍵字對比說明background-position屬性的屬性值。

邊框和邊距

設(shè)計邊框樣式——border-style

調(diào)整邊框?qū)挾取猙order-width

設(shè)置邊框顏色——border-color

設(shè)置邊框?qū)傩浴猙order

邊距——margin-top?/margin-bottom?/margin-left/?margin-right/margin

填充——padding-top／padding-?bottom?/padding-left?/?padding-?right?/padding

設(shè)計邊框樣式——border-style

基本語法

border-style:樣式取值

border-top-style:樣式取值

border-bottom-style:樣式取值

border-left-style:樣式取值

border-right-style:樣式取值

邊框樣式屬性中border-style是一個復(fù)合屬性，其他4個都是單個邊框的樣式屬性，只能取一個值，而復(fù)合屬性border-style可以同時取一到4個值。下面分別說明border-style屬性的4個取值方法：

—?取一個值：四條邊框均使用這一個值。e:s

—?取兩個值：上下邊框使用第一個值，左右邊框使用第二個值，兩個值一定要用空格隔開。

—?取三個值：上邊框使用第一個值，左右邊框使用第二個值，下邊框使用第三個值，取值之間要用空格隔開。

—?取4個值：四條邊框按照上、右、下、左的順序來調(diào)用取值。取值之間也要用空格隔開。

調(diào)整邊框?qū)挾取猙order-width

基本語法

border-width:關(guān)鍵字|長度

border-top-width:關(guān)鍵字|長度

border-bottom-width:關(guān)鍵字|長度

border-right-width:關(guān)鍵字|長度

border-left-width:關(guān)鍵字|長度

邊框?qū)挾葘傩曰菊Z法中的關(guān)鍵字說明

??長度包括長度值和長度單位，不可以使用負(fù)數(shù)。長度單位可以使用絕對單位也可使用相對單位，如px、pt、cm等。

??基本語法中邊框?qū)挾葘傩詁order-width是一個復(fù)合屬性，可以同時設(shè)置四條邊框的寬度。具體使用方法和邊框樣式的復(fù)合屬性border-style是一樣的，可以參照上一節(jié)關(guān)于border-style的講解

設(shè)置邊框顏色——border-color

基本語法

border-color:顏色關(guān)鍵字|RGB值

border-top-color:顏色關(guān)鍵字|RGB值

border-bottom-color:顏色關(guān)鍵字|RGB值

border-left-color:顏色關(guān)鍵字|RGB值

border-right-color:?顏色關(guān)鍵字|RGB值

顏色關(guān)鍵字可使用常用的16個關(guān)鍵字

???RGB值使用十六進(jìn)制的RGB值和RGB函數(shù)值都行。

??在使用邊框顏色復(fù)合屬性border-color時，如果只設(shè)置1種顏色，則四條邊框的顏色一樣；設(shè)置2種顏色，則邊框的上下為一個顏色，左右為另一個顏色；設(shè)置3種顏色，邊框的顏色順序?yàn)樯稀⒆笥摇⑾?#xff1b;設(shè)置4中顏色，邊框的顏色順序?yàn)樯稀⒂摇⑾隆⒆蟆?/p>

設(shè)置邊框?qū)傩浴猙order

基本語法

border:<邊框?qū)挾?gt;||<邊框樣式>||<邊框顏色>

border-top:?<上邊框?qū)挾?gt;||<上邊框樣式>||<上邊框顏色>

border-right:?<右邊框?qū)挾?gt;||<右邊框樣式>||<右邊框顏色>

border-bottom:?<下邊框?qū)挾?gt;||<下邊框樣式>||<下邊框顏色>

border-left:?<左邊框?qū)挾?gt;||<左邊框樣式>||<左邊框顏色>

基本語法中每一個屬性都是一個復(fù)合屬性，都可以同時設(shè)置邊框的寬度、樣式和顏色屬性。但是在用該語法定義邊框?qū)傩詴r，每個屬性間必須用空格隔開。

??這五個屬性語法中，只有border可以同時設(shè)置四條邊框的屬性。其他的只能設(shè)置單邊框的屬性。

邊距——margin-top?/margin-bottom?/margin-left/?margin-right/margin

??基本語法

margin-top:長度|百分比|auto

margin-bottom:?長度|百分比|auto

margin-left:?長度|百分比|auto

margin:?長度|百分比|auto

長度包括長度值和長度單位，長度單位可以使用前面多次提到的絕對單位或相對單位。

??百分比是相對于上級元素寬度的百分比，允許使用負(fù)數(shù)。

???auto為自動提取邊距值，是默認(rèn)值。

???margin復(fù)合屬性和其他復(fù)合屬性的設(shè)置方法是一樣的，也可以取1到4個值來同時設(shè)置邊框周圍的四個邊距。

填充——padding-top／padding-?bottom?/padding-left?/?padding-?right?/padding

基本語法

padding-top:長度|百分比

padding-bottom:?長度|百分比

padding-left:?長度|百分比

padding-right:?長度|百分比

padding:?長度|百分比

長度包括長度值和長度單位。?

??百分比是相對于上級元素寬度的百分比，不允許使用負(fù)數(shù)。

??填充復(fù)合屬性padding的取值方法，可以參照邊框樣式border-style的取值方法。

列表

設(shè)計列表樣式——list-style-type

添加列表圖像——list-style-image

調(diào)整列表位置——list-style-position

設(shè)計列表樣式——list-style-type

基本語法

list-style-type:<屬性值>

添加列表圖像——list-style-image

基本語法

list-style-image:none|URL

none表示不使用圖像符號。

???URL指定圖像的名稱或者路徑。

調(diào)整列表位置——list-style-position

基本語法

list-style-position:outside|inside

outside表示列表符號不向內(nèi)縮進(jìn)，是列表的默認(rèn)屬性值。

???inside表示列表符號向內(nèi)縮進(jìn)

定位

定位方式——position

設(shè)置位置——top、bottom、right、left

浮動——float

清除——clear

定位方式——position

基本語法

position:static|absolute|relative

static表示為靜態(tài)定位，是默認(rèn)設(shè)置。

???absolute表示絕對定位，與下一節(jié)的位置屬性top、bottom、right、left等結(jié)合使用可實(shí)現(xiàn)對元素的絕對定位。

???relative表示相對定位，對象不可層疊，但也要依據(jù)top、bottom、right、left等屬性來設(shè)置元素的具體偏移位置

設(shè)置位置——top、bottom、right、left

??基本語法

top:auto|長度值|百分比

bottom:?auto|長度值|百分比

left:?auto|長度值|百分比

right:?auto|長度值|百分比

浮動——float

基本語法

float:left|right|none

???left表示浮動元素在左邊，是居左對齊的。

???right表示浮動元素在右邊，是居右對齊的。

???none表示不浮動，是默認(rèn)值

清除——clear

基本語法

clear:left|right|both|none

清除——clear

語法說明

??left表示不允許在某元素的左邊有浮動元素。

???right表示不允許在某元素的右邊有浮動元素。

???both表示在某元素左右兩邊都不允許有浮動元素。

???none表示在某元素左右兩邊都允許有浮動元素

層的應(yīng)用

圖層的創(chuàng)建——<div>

創(chuàng)建嵌套圖層

層的屬性設(shè)置

圖層的創(chuàng)建——<div>

基本語法

<body>

<div?id="Layer1"?style="position:absolute;?left:29px;?top:12px;?width:165px;?height:104px;"></div>

</body>

在進(jìn)行層的定義時，需要將層的樣式同時定義，否則在網(wǎng)頁中不會顯示出來。

創(chuàng)建嵌套圖層

基本語法

<body>

<div?id="Layer1"?style="position:absolute;?z-index:1;?left:29px;?top:12px;?width:165px;?height:104px;"></div>

</body>

圖層的嵌套只要插入多個成對的<div></div>，設(shè)置好的層的樣式屬性就可以完成層的嵌套。

層的屬性設(shè)置

??圖層定義常見屬性

層的屬性設(shè)置

基本語法

<body>

<div?id="Layer1"?style="position:absolute;?left:29px;?z-index:1;?top:12px;?width:165px;?height:104px;"></div>

</body>

position屬性將對象從文檔流中拖出，進(jìn)行絕對定位；

???left、top屬性進(jìn)行左邊距和頂端間距的設(shè)置；

???width、height屬性進(jìn)行寬度和高度設(shè)置；

???層疊通過z-index屬性定義。

CSS層

設(shè)置層空間——z-index

設(shè)置層裁切——clip

設(shè)置層大小—度來—width、height

設(shè)置層溢出——overflow

設(shè)置層可見——visibility

設(shè)置層空間——z-index

基本語法

z-index:auto|數(shù)字

auto表示子層會按照父層的屬性顯示。

??數(shù)字必須是無單位的整數(shù)或負(fù)數(shù)，但一般情況下都取正整數(shù)，所以z-index屬性值為1的層位于最下層。

設(shè)置層裁切——clip

基本語法

clip:rect{<上>|<右>|<下>|<左>}?|auto

auto表示不裁切。

????rect的4個坐標(biāo)值表示所裁切矩形的4個頂點(diǎn)位置，其中以網(wǎng)頁左上角為坐標(biāo)（0，0），而上、右、下、左這4個坐標(biāo)值則是以左上角為參照點(diǎn)計算的。而且任意一個坐標(biāo)值都可由auto來代替，表示該邊不裁切。

設(shè)置層大小—width、height

??基本語法

??width:auto|長度?

??height:auto|長度

??width表示的是寬度，而height表示的是高度。

?????auto表示自動設(shè)置長度。

????長度包括長度值和單位。

????長度也可使用相對值中的百分比。

??對于每個層在設(shè)置層大小時，其中只能設(shè)置寬度和高度中的一個值，另一個值則自動獲得。如果兩個值都設(shè)置了，則還要同時設(shè)置層溢出屬性overflow。

設(shè)置層溢出——overflow

基本語法

overflow:?visible/hidden/scroll/auto

visible：擴(kuò)大層的容納范圍，將所有內(nèi)容都顯示出來。

???hidden：隱藏超出范圍的內(nèi)容（超出范圍的內(nèi)容將被裁切掉）。

???scroll：表示一直顯示滾動條。

???auto：當(dāng)層內(nèi)容超出了層的容納范圍時，則顯示滾動條。

設(shè)置層可見——visibility

基本語法

??visibility:visible|hidden|inherit

visible表示該層是可見的。

????hidden表示該層被隱藏，是不可見的。

???inherit表示子層或子元素會繼承父層或父元素的可見性，父級元素可見則子級元素也可見。

鼠標(biāo)指針——cursor

基本語法

cursor:auto|關(guān)鍵字|URL（圖像地址）

auto表示根據(jù)對象元素的內(nèi)容自動選擇鼠標(biāo)指針形狀。

???URL（圖像地址）表示選取自定義的圖像作為鼠標(biāo)指針的形狀。

??關(guān)鍵字共有16種，是系統(tǒng)預(yù)先定義好的鼠標(biāo)指針形狀，具體說明和形狀見表20-2

屬?性	CSS名稱	說?明
邊界屬性	margin-top	設(shè)設(shè)置對象的上邊距
	m?margin?-right	設(shè)設(shè)置對象的右邊距
	m?margin?-bottom	設(shè)設(shè)置對象的下邊距
	m?margin?-left	設(shè)設(shè)置對象的左邊距
? 邊框?qū)傩?/p>	bbborder-style	設(shè)設(shè)置邊框的樣式
	boborder-width	設(shè)設(shè)置邊框的寬度
	boborder-color	設(shè)設(shè)置邊框的顏色
? 填充屬性	papadding-top	設(shè)設(shè)置內(nèi)容與上邊框之間的距離
	papadding-right	設(shè)設(shè)置內(nèi)容與右邊框之間的距離
	papadding-bottom	設(shè)設(shè)置內(nèi)容與下邊框之間的距離
	papadding-left	設(shè)設(shè)置內(nèi)容與左邊框之間的距離

偽類

??偽類是一種特殊的類選擇符，用來指定鏈接或者與其相關(guān)的選擇符的狀態(tài)；能被支持CSS的瀏覽器自動所識別的特殊選擇符，

??偽類與選擇符間用冒號相連，在CSS中，偽類對文本或圖像處于鏈接狀態(tài)的修飾，故選擇符大部分下是a標(biāo)記，本章主要對a標(biāo)記做實(shí)例講解，其中偽類有四種常用形式是本章要講解的，內(nèi)容如下：

??“:link”用在為訪問的鏈接上

??“:hover”用于鼠標(biāo)光標(biāo)置于其上的鏈接

??“:active”用于獲得焦點(diǎn)（如“被單擊”）的鏈接上

??“:visited”用在已經(jīng)訪問過的鏈接上

??盒子在標(biāo)準(zhǔn)流中的定位原則

??實(shí)驗(yàn)1——行內(nèi)元素之間的水平margin?

span.left{

margin-right:30px;

}

span.right{

margin-left:40px;

}

??盒子在標(biāo)準(zhǔn)流中的定位原則

–?實(shí)驗(yàn)2——塊級元素之間的豎直margin?

<body>

<div?style="margin-bottom:50px;">塊元素1</div>

<div?style="margin-top:30px;">塊元素2</div>

</body>

CSS+Div?應(yīng)用實(shí)例?????布局

??流體浮動布局

??固定浮動布局

??固定定位布局

JavaScript

??Javascript是一種由Netscape的LiveScript發(fā)展而來的；是寫在HTML文件中的一種基于對象和事件驅(qū)動并具有安全性能的腳本語言；區(qū)分大小寫的客戶端腳本語言。

??當(dāng)用戶在客戶端的瀏覽器中顯示該網(wǎng)頁時，瀏覽器就會執(zhí)行JavaScript程序，讓用戶通過交互式的操作變換網(wǎng)頁顯示的內(nèi)容，以實(shí)現(xiàn)HTML語言所不能實(shí)現(xiàn)的一些功能。?

??提供了數(shù)據(jù)驗(yàn)證的基本功能。

??JS是基于對象，Java是面向?qū)ο蟆?/p>

??JS只需解釋就可以執(zhí)行，Java需要先編譯成字節(jié)碼文件，再執(zhí)行。

??JS是弱類型，Java是強(qiáng)類型。?

??JavaScript???是寫在HTML文檔中的一種基于對象（Object）和事件驅(qū)動（EventDriven)、并具有安全性能的腳本語言。

??JavaScript的特點(diǎn)

??解釋性：由瀏覽器直接解釋執(zhí)行

??用于客戶端

??安全性:不允許直接訪問本地硬盤

??簡單易用：腳本式語言最大的優(yōu)點(diǎn)是易學(xué)易用，是一種輕量級的程序語言

??動態(tài)性:他可以直接對用戶或客戶輸入作出響應(yīng)，無須經(jīng)過web服務(wù)程序，他對用戶的反映響應(yīng)，是采用以事件驅(qū)動的方式進(jìn)行的。

??跨平臺性:只要是可以解釋Js的瀏覽器都可以執(zhí)行，和操作系統(tǒng)無關(guān)

JavaScript的局限性：瀏覽器有很多種，每種對JavaScript的支持程度是不一樣的，效果會有一定的差距。

??JavaScript的作用

–?校驗(yàn)用戶輸入的內(nèi)容：用戶輸入內(nèi)容的校驗(yàn)常分為兩種

??格式性校驗(yàn)：JavaScript

??功能性校驗(yàn)

–?有效地組織網(wǎng)頁內(nèi)容

–?動態(tài)地顯示網(wǎng)頁內(nèi)容：時鐘顯示等

–?動畫顯示

??編寫JavaScript腳本：可以使用任何一種文字編輯器來編寫,我們使用Dreamweaver、EditPlus、UE等。

??執(zhí)行：與HTML文檔配合，將其插入到HTML文檔中，然后通過瀏覽器執(zhí)行HTML文檔即可。瀏覽器可以是IE、firefox等。

–?使用?<script>?標(biāo)簽將語句嵌入文檔
<html>
<head>
<script?type=”text/javascript”?>
function???showAlert()
{???alert(“web“)；}
</script>
</head>
<body?>?…?…</body>
</html>

當(dāng)有多個html頁面使用到相同的JS腳本時，可以將js代碼封裝到一個文件中，只要在script標(biāo)簽的src屬性引入一個js文件。（方便后期維護(hù)，擴(kuò)展）

注意：如果在script標(biāo)簽中定義了src屬性，那么標(biāo)簽中的內(nèi)容不會被執(zhí)行。

–?將?JavaScript?源文件鏈接到?HTML?文檔中
<html>
<head>
<script?type=”text/javascript”?src=“common.js“></script>
</head>
<body?>web程序設(shè)計</body>
</html>
common.js文件內(nèi)容
function?showAlert（）{
alert（“web程序設(shè)計“）；
}

–?事件跟隨式
<html>
<head>
</head>
<body?οnlοad=”window.alert(‘hello?web’);”>
???<a?href="javascript:alert(new?Date());">abc</a>

??????<input?type=button?value=test?οnclick="alert(new?Date());">

</body>
</html>

??需注意：

–?JavaScript程序內(nèi)容必須置于<script>?</script>標(biāo)簽中，type=“text/javascript”用于區(qū)別其他腳本程序語言。

–?對于不支持javascript程序的瀏覽器，標(biāo)記之間的內(nèi)容就會被隱藏起來，否則就會被當(dāng)做html的內(nèi)容顯示出來，而對于支持javascript程序的瀏覽器，這對標(biāo)簽不起任何作用。

–?Javascript程序?qū)Υ笮懽帜甘敲舾械?#xff0c;即在同一個程序語句中如果使用大寫或小寫字母將代表不同的意義。

–?使用注釋/*多行注釋*/????//單行注釋

–?Javascript程序在html文件中的位置沒有嚴(yán)格的規(guī)定，但根據(jù)Javascript程序的功能和作用，一般將其置于3種位置：

??在html<body>標(biāo)記中的任何位置。如果所編寫的Javascript程序用于輸出網(wǎng)頁內(nèi)容的，應(yīng)該將Javascript程序置于html文件中需要顯示該內(nèi)容的位置。

??在html<head>標(biāo)記。如果所編寫的Javascript程序需要在某一個html文件中多次使用，那就應(yīng)該編寫Javascript函數(shù)，并將函數(shù)置于html文件的<head>標(biāo)記中。

??在一個單獨(dú)的js文件中。如果編寫的Javascript程序需要在多個html文件中使用，或Javascript程序內(nèi)容很長時。

數(shù)據(jù)類型

??JavaScript主要包括3種數(shù)據(jù)類型：簡單數(shù)據(jù)類型、特殊數(shù)據(jù)類型、復(fù)合數(shù)據(jù)類型。

??簡單數(shù)據(jù)類型：數(shù)值型、字符型、布爾型

??復(fù)合數(shù)據(jù)類型：對象、數(shù)組、函數(shù)

??特殊數(shù)據(jù)類型：null、undefined

轉(zhuǎn)義字符

字?符	說?明	示?例
\b	退格符	alert(“這是第一句?\b??這是第二句”)
\f	換頁符	alert(“這是第一句\f?這是第二句”)
\n	換行符	alert(“這是第一句\n?這是第二句”)
\r	回車符	alert(“這是第一句\r?這是第二句”)
\t	制表符?	alert(“這是第一句\t?這是第二句”)

??常量：不能改變的數(shù)據(jù)。可以為整型、邏輯型、字符串型等。

??變量：在計算機(jī)內(nèi)存中暫時保存數(shù)據(jù)的地方。用關(guān)鍵字var聲明或用賦值的形式。var??i；i=10；var?count=10；var?i，j；

??變量命名規(guī)則

–?第一個字符必須是字母（大小寫均可）、下劃線（_）或美元符（$）;

–?后續(xù)字符可以是字母、數(shù)字、下劃線或美元符；

–?變量名稱不能是保留字；

–?字符大小寫敏感；

??變量可以不聲明直接使用??k=100；（k沒定義就直接用）

??變量弱類型檢查，且可隨時改變數(shù)據(jù)類型

??變量的數(shù)據(jù)類型及其轉(zhuǎn)換
JavaScript聲明變量時無需定義數(shù)據(jù)類型，因此，其變量又稱為“無類型”變量，也就是說，聲明后的變量名可以隨時被賦值為任意類型的數(shù)據(jù)，?JavaScript將會自動給予轉(zhuǎn)換。
var?count=1;
…
count=“the?count?of?var?is?”+count;

??用typeof()運(yùn)算符返回表達(dá)式的數(shù)據(jù)類型var?a=18;
typeof(a)???---number

“+”連接字符串

運(yùn)算符和表達(dá)式?

??運(yùn)算符對一個或多個變量或值（操作數(shù)）進(jìn)行運(yùn)算，并返回一個新值

??根據(jù)所執(zhí)行的運(yùn)算，運(yùn)算符可分為以下類別：

–?算術(shù)運(yùn)算符

–?比較運(yùn)算符

–?邏輯運(yùn)算符

–?賦值運(yùn)算符=、+=、-=、*=、/=、%=

–?位運(yùn)算符（很少用）

–?算術(shù)運(yùn)算符

?	說?明	示?例	?
+	加	a?=?5?+?8	?
-	減	a?=?8?-?5	?
/	除	a?=?20?/?5	?
*	乘	a?=?5*19	?
%	取模－兩個數(shù)相除的余數(shù)	10?%?3?=?1	?
++	一元自加。該運(yùn)算符帶一個操作數(shù)，將操作數(shù)的值加?1。返回的值取決于?++?運(yùn)算符位于操作數(shù)的前面或是后面	?	++x將返回?x?自加運(yùn)算后的值。 x++?將返回?x?自加運(yùn)算前的值
-?-	一元自減。該運(yùn)算符只帶一個操作數(shù)。返回的值取決于?--?運(yùn)算符位于操作數(shù)的前面或是后面	--x?將返回?x?自減運(yùn)算后的值。 x--?將返回?x?自減運(yùn)算前的值	?

比較運(yùn)算符

運(yùn)算符	說?明	示?例
=?=?	等于。如果兩個操作數(shù)相等，則返回真。	a?=?=?b
!=	不等于。如果兩個操作數(shù)不相等，則返回真。	Var2?!=?5
>	大于。如果左邊的操作數(shù)大于右邊的操作數(shù)，則返回真。	Var1?>?var2
<	小于。如果左邊的操作數(shù)小于右邊的操作數(shù)，則返回真。	Var2?<?var1
<=	小于等于。如果左邊的操作數(shù)小于或等于右邊的操作數(shù)，則返回真。	Var2?<=?4 Var2?<=?var1
>=	大于等于。如果左邊的操作數(shù)大于或等于右邊的操作數(shù)，則返回真。	Var1?>=?5 Var1?>=?var2

邏輯運(yùn)算符

運(yùn)算符	值	說?明
與?(?&&)	expr1?&&?expr2	只有當(dāng)?expr1?和?expr2?同為真時，才返回真。否則，返回假。
或?(?\|\|?)	expr1?\|\|?expr2	如果其中一個表達(dá)式為真，或兩個表達(dá)式同為真，則返回真。否則，返回假。
非?(!)	!expr	如果表達(dá)式為真，則返回假。如果為假，則返回真。

流程控制

??所謂結(jié)構(gòu)化程序設(shè)計思想，就是要使所設(shè)計的程序給人一種一目了然的感覺，條理清晰，模塊化，書寫層次分明，要求：

–?順序結(jié)構(gòu)：一條接一條，自上而下

–?選擇結(jié)構(gòu)：判斷給定條件，根據(jù)不同情況做不同處理

–?循環(huán)結(jié)構(gòu)：多次重復(fù)執(zhí)行同一系列命令

if?語句?

語法：

if(條件)

???JavaScript代碼;

switch?語句?

語法

switch?(表達(dá)式)

{

? case?常量1?:?

? ???JavaScript語句;

???break;

? case?常量2?:?

? ???JavaScript語句;

? ???break;

? ...

? ???default?:?

????????JavaScript語句;

}

??網(wǎng)頁中嵌入腳本有兩種方式：使用<Script>標(biāo)簽或外部?*.?js文件

??JavaScript?中聲明變量：var??變量名?

???“+”可以用于兩個數(shù)相加，還可以用于連接字符串

??parseInt()?和?parseFloat()?函數(shù)將字符串分別轉(zhuǎn)換為整型和小數(shù)

??運(yùn)算符號分為算術(shù)運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符

??條件語句分為if語句，if-else語句、if的嵌套

??多分支語句switch根據(jù)表達(dá)式的值，進(jìn)入不同的分支執(zhí)行

循環(huán)?

??for循環(huán)

??do-while

??while??

for循環(huán)

var?i;

for?(i=0;?i<10;?i++)

{

??//?語句;?

}

while和do－while循環(huán)

q?while循環(huán)

?????while(循環(huán)條件)

?????{

????????//語句；

?????}

q?do－while循環(huán)

????do

????{

??????//語句；

????}while(循環(huán)條件);

??函數(shù)實(shí)際上就是一段有名字的程序，這樣，在整個程序的任何位置，只要使用該名字，就會執(zhí)行由這段名字命名的程序。

內(nèi)置函數(shù)??

??eval?函數(shù)：?用于計算字符串表達(dá)式的值?

?????該函數(shù)可以對以字符串形式表示的任意有效的?JavaScript代碼求值。eval()?函數(shù)有一個參數(shù)，該參數(shù)就是想要求值的代碼。

???var?anExpression?=?"6?*?9?%?7";

???var?total?=?eval(anExpression);?//?將變量?total?賦值為?5

isNaN?函數(shù)：用于驗(yàn)證參數(shù)是否為?NaN（非數(shù)字）

?????????isNaN(numValue)

???????????返回一個?Boolean?值，指明提供的值是否是保留值?NaN?（不是數(shù)字）。

????如果值是?NaN，?那么?isNaN?函數(shù)返回?true?，否則返回?false?

自定義函數(shù)

??定義函數(shù)：

function?函數(shù)名([參數(shù)1,參數(shù)2，…]){?

????語句;?

}

??調(diào)用函數(shù)：
函數(shù)調(diào)用一般和表單元素的事件一起使用，調(diào)用格式為：事件名＝“函數(shù)名”?;

??????參數(shù)是由函數(shù)的使用方傳遞到函數(shù)體中的變量，用于為函數(shù)中的操作提供相應(yīng)的信息和數(shù)據(jù)。

??參數(shù)的傳遞

–?按值傳遞：傳遞的只是原變量的一份拷貝，因此，如果在函數(shù)中改變了這個參數(shù)的值，原變量不會跟著改變，它將保留原有的值。

–?按地址傳遞：這時傳遞的是原變量的內(nèi)存地址，即函數(shù)中的參數(shù)和原變量是同一個變量。因此在函數(shù)中改變了參數(shù)值，原變量也會隨之改變。

??參數(shù)的個數(shù)
當(dāng)函數(shù)包含多個參數(shù)時，使用arguments.length可以得到使用該函數(shù)時輸入的參數(shù)個數(shù)，而arguments包括了各參數(shù)內(nèi)容。

??注意：調(diào)用有參數(shù)的函數(shù)，但沒有給其傳值，函數(shù)一樣可以運(yùn)行，或者調(diào)用沒有參數(shù)的函數(shù)，給其傳值，該函數(shù)也一樣運(yùn)行。

??說的簡單點(diǎn)：只要寫了函數(shù)名后面跟了一對小括號，該函數(shù)就會運(yùn)行。

其實(shí)，在函數(shù)中有一個參數(shù)數(shù)組對象（arguments），該對象將傳遞的參數(shù)都封裝在一個數(shù)組中。

例：

function?demo()//定義函數(shù)。

{

alert(arguments.length);

}

demo(“hello”,123,true);//調(diào)用函數(shù)。

那么彈出的對話框結(jié)果是3，如果想得到所有的參數(shù)值，可以通過for循環(huán)遍歷該數(shù)組。

為了增強(qiáng)閱讀性，最好按照規(guī)范，按定義好的形式參數(shù)傳遞實(shí)際參數(shù)。

函數(shù)在調(diào)用時的其他寫法：

var?show?=?demo();//show變量接收demo函數(shù)的返回值。

var?show?=?demo;//這種寫法是可以的，意為show和demo代表同一個函數(shù)。

??//那么該函數(shù)也可以通過show()的方式運(yùn)行

變量的作用域

??JavaScript的變量分為全局變量和局部變量。全局變量是作用在全程序范圍內(nèi)的變量，它聲明在函數(shù)體外；局部變量是定義在函數(shù)體內(nèi)的變量，它僅僅在函數(shù)體內(nèi)起作用。

例如，?var?errorMessage=“”;

function?checkRequired(v,label){

…?…

var?msg=“請輸入”+label;

errorMessage=errorMessage+msg;

}

JavaScript?對象簡介?

??內(nèi)置對象

??瀏覽器對象

??自定義對象

??注意：一個對象在被引用之前，必須存在。另外在JavaScript中對于對象屬性和方法的引用，有兩種情況：

–?該對象為靜態(tài)對象，表示在引用該對象的屬性或方法時不需要為它創(chuàng)建實(shí)例；

–?在引用該對象屬性和方法時必須為它創(chuàng)建一個實(shí)例，叫做動態(tài)對象。?

創(chuàng)建字符串有兩種不同方法?：

??使用?var?語句??????var?newstr?=?“這是我的字符串"

??創(chuàng)建?String?對象

var?newstr?=?new?String?(“這是我的字符串")

??字符串相加：+或+=??（字符串的連接）

??在字符串中使用特殊字符
“sdfg’????×?????“她說：’今天不出門’”?????√???或使用轉(zhuǎn)義字符????“她說：\”今天不出門\””????“\n”??

??比較字符串是否相等??==??!=???user==null?||?user==“”

??數(shù)字字符串和數(shù)值的相互轉(zhuǎn)換

String相關(guān)函數(shù)

??屬性：length

??方法：

–?charAt(index):?返回指定索引位置處的字符。

–?indexOf(subString[,?startIndex]):?返回?String?對象內(nèi)第一次出現(xiàn)子字符串的字符位置。

–?substr(start?[,?length?]):返回一個從指定位置開始的指定長度的子字符串。

–?substring(start,?end):返回位于?String?對象中指定位置的子字符串。

–?toLowerCase:返回一個字符串，該字符串中的字母被轉(zhuǎn)換為小寫字母。

Math?對象?

?	名稱?	說?明
屬性	PI	∏?的值，?約等于?3.1415
	LN10	10?的自然對數(shù)的值，約等于?2.302
	E	Euler?的常量的值，約等于?2.718。Euler?的常量用作自然對數(shù)的底數(shù)
?	abs(y)	返回?y?的絕對值
	sin?(y)?	返回?y?的正弦，返回值以弧度為單位。
	cos?(y)	返回?y?的余弦，返回值以弧度為單位
	tan?(y)	返回?y?的正切，返回值以弧度為單位?
	min?(x,?y)	返回?x?和?y?兩個數(shù)中較小的數(shù)?
	max?(x,?y)	返回?x?和?y?兩個數(shù)中較大的數(shù)?
	random	返回0-1的隨機(jī)數(shù)
方法	round?(y)	四舍五入取整
方法	sqrt?(y)	返回?y?的平方根

數(shù)學(xué)運(yùn)算?Math對象

??Math.ceil(x)返回>=x的最小整數(shù)

??Math.floor(x)?返回<=x的最大整數(shù)

??Math.pow(x,y)返回x的y次方

??Math.random()返回0-1之間的隨機(jī)小數(shù)

??Math.round(x)返回x的四舍五入的整數(shù)，特定精度的四舍五入見[1.1.htm]

Date?對象

Data?方法的分組

方法分組	說?明?
setxxx	這些方法用于設(shè)置時間和日期值
getxxx?	這些方法用于獲取時間和日期值
Toxxx	這些方法用于從?Date?對象返回字符串值
parsexxx?&?UTCxx	這些方法用于解析字符串

用作?Date?方法的參數(shù)的整數(shù)

值	整?數(shù)?
Seconds?和?minutes	0?至?59?
Hours	0?至?23?
Day	0?至?6（星期幾）?
Date	1?至?31（月份中的天數(shù)）?
Months	0?至?11（一月至十二月）?

Set?方法

方法	說明
setDate	設(shè)置?Date?對象中月份中的天數(shù)，其值介于?1?至?31?之間。
setHours	設(shè)置?Date?對象中的小時數(shù)，其值介于?0?至?23?之間。
setMinutes	設(shè)置?Date?對象中的分鐘數(shù)，其值介于?0?至?59?之間。?
setSeconds	設(shè)置?Date?對象中的秒數(shù)，其值介于?0?至?59?之間。?
setTime	設(shè)置?Date?對象中的時間值。?
setMonth	設(shè)置?Date?對象中的月份，其值介于?1?至?12?之間。

Get?方法：

方法	說明
getDate	返回?Date?對象中月份中的天數(shù)，其值介于?1?至?31?之間
getDay	返回?Date?對象中的星期幾，其值介于?0?至?6?之間
getHours	返回?Date?對象中的小時數(shù)，其值介于?0?至?23?之間
getMinutes	返回?Date?對象中的分鐘數(shù)，其值介于?0?至?59?之間
getSeconds	返回?Date?對象中的秒數(shù)，其值介于?0?至?59?之間
getMonth	返回?Date?對象中的月份，其值介于?0?至11?之間
getFullYear	返回?Date?對象中的年份，其值為四位數(shù)
getTime	返回自某一時刻（1970?年?1?月?1?日）以來的毫秒數(shù)

To?方法：

方?法	說?明?
ToGMTString	使用格林尼治標(biāo)準(zhǔn)時間?(GMT)?數(shù)據(jù)格式將?Date?對象轉(zhuǎn)換成字符串表示
ToLocaleString	使用當(dāng)?shù)貢r間格式將?Date?對象轉(zhuǎn)換成字符串表示

Parse?方法和?UTC?方法?

方?法	說?明
Date.parse?(date?string?)	用日期字符串表示自?1970?年?1?月?1?日以來的毫秒數(shù)?
Date.UTC?(year,?month,?day,?hours,?min.,?secs.?)	Date?對象中自?1970?年?1?月?1?日以來的毫秒數(shù)?

數(shù)組

??聲明數(shù)組?

????var?數(shù)組名?=?new?Array(數(shù)組大小);

??例：?var?emp?=?new?Array(3)

??添加元素?

????emp[0]?=?“AA";

????emp[1]?=?“BB";

????emp[2]?=?“CC";

也可以聲明數(shù)組并賦初值：

?????例：?var?emp=new?Array(“AA”，“BB”，“CC”)；

??方案1?：

–?var?objArr?=?new?Array();//創(chuàng)建一個空數(shù)組

–?var?objArr?=?new?Array(10);//創(chuàng)建含10個元素的數(shù)組

–?var?objArr?=?new?Array(“a”,”b”,”c”);//創(chuàng)建數(shù)組并初始化

??方案2：

–?var?objArr?=?[];//通方案1

–?var?objArr?=?[10];//包含一個數(shù)字10的元素，注意：和方案1不一樣

–?var?objArr?=?[“a”,”b”,”c”];//通方案1

??組合數(shù)組的創(chuàng)建

–?var?objArr?=?[[new?Date()],”abc”,1234];//該數(shù)組包含三種數(shù)據(jù)類型，分別是對象類型,字符串類型和數(shù)字類型

??如何引用元素：objArr[index]的形式來使用數(shù)組中的一個元素，index是元素在數(shù)組的索引，從0開始計算

??數(shù)組的length屬性：表示數(shù)組的長度

??多維數(shù)組：js本身是沒有多維數(shù)組概念，要通過組合數(shù)組來創(chuàng)建

–?二維數(shù)組舉例1：創(chuàng)建2*6的二維數(shù)組
var?arr?=?new?Array(4);
for(var?i=0;i<4;i++)
arr[i]=?new?Array(6);

–?二維數(shù)組舉例2：3*3
var?arr?=?[[1,2,3],[4,5,6],[7,8,9]];

常用屬性

length?：返回數(shù)組中元素的個數(shù)

常用方法

方?法	說?明
join	將數(shù)組中的元素組合成字符串
reverse	顛倒數(shù)組元素的順序，使第一個元素成為最后一個，而最后一個元素成為第一個
sort	對數(shù)組元素進(jìn)行排序

數(shù)組的方法

??objArr.toString():轉(zhuǎn)換成字符串，并用,連接：

–?[1,2,3].toString()?->?“1,2,3”

–?[“a”,”b”,”c”,[1,2,3,4]].toString()?->?“a,b,c,1,2,3,4”

??objArr.join(separator):將separator作為分隔符，將數(shù)組轉(zhuǎn)換成字符串，當(dāng)separator為逗號時等同于toString()

??objArr.pop()返回數(shù)組最后一個元素值，注意：這里同時會將該元素從數(shù)據(jù)中清除，即objArr.length?減1

??objArr.push(v1,v2,…):將參數(shù)添加到數(shù)組結(jié)尾：

–?[1,2,3,4].push(“a”,”b”)?->?[1,2,3,4,”a”,”b”]

??objArr.shift():移出數(shù)組第一個元素，并返回該值

??Array對象常用的屬性是length，排序方法：sort

??循環(huán)語句分為：for?循環(huán)、while循環(huán)、do-while循環(huán)

??Eval(?)函數(shù)可以計算某個計算表達(dá)式的值，

???isNaN(?)函數(shù)可用于判斷是否是一個數(shù)字??

??String對象的indexOf(?)方法用于查找子字符串?

??Math對象的random(?)方法可以產(chǎn)生0－1的隨機(jī)數(shù)

??Date對象有setxxx(?)方法用于設(shè)置日期和時間，getxxx(?)方法用于獲得日期和時間

Window?對象

??窗口對象window是瀏覽器網(wǎng)頁的文檔對象模型結(jié)構(gòu)中的最高級的對象，只要網(wǎng)頁的html標(biāo)記中包含有<body>或<frameset>標(biāo)記，該網(wǎng)頁就會包含一個窗口對象。

??window對象的常用屬性和方法

屬性?

名稱?	說明?
document	表示給定瀏覽器窗口中的?HTML?文檔。?
history?	包含有關(guān)客戶訪問過的URL的信息。
location	包含有關(guān)當(dāng)前?URL?的信息。?
name	設(shè)置或檢索窗口或框架的名稱。?
status?	設(shè)置或檢索窗口底部的狀態(tài)欄中的消息。?
screen	包含有關(guān)客戶端的屏幕和顯示性能的信息。?

方法?

名稱?	說明?
alert?(“m提示信息")	顯示包含消息的對話框。?
confirm（“提示信息”）	顯示一個確認(rèn)對話框，包含一個確定取消按鈕
prompt（”提示信息“）	彈出提示信息框
open?("url","name")	打開具有指定名稱的新窗口，并加載給定?URL?所指定的文檔；如果沒有提供?URL，則打開一個空白文檔
close?(?)	關(guān)閉當(dāng)前窗口
setTimeout(”函數(shù)”,毫秒數(shù))?	設(shè)置定時器：經(jīng)過指定毫秒值后執(zhí)行某個函數(shù)?
clearTimeout(定時器對象)?	取消setTimeout設(shè)置

open（”打開窗口的url”，”窗口名”，”窗口特征”）

窗口的特征如下，可以任意組合：

height：?窗口高度；?

width：?窗口寬度；?

top：?窗口距離屏幕上方的象素值；?

left：窗口距離屏幕左側(cè)的象素值；?

toolbar：?是否顯示工具欄，yes為顯示；?

menubar，scrollbars?表示菜單欄和滾動欄。?

resizable：?是否允許改變窗口大小，yes或1為允許?

location：?是否顯示地址欄，yes或1為允許?

status：是否顯示狀態(tài)欄內(nèi)的信息，yes或1為允許；

screen.width---顯示器屏幕的寬度

??????????????screen.height---顯示屏幕的高度??

定時器函數(shù)setTimeout?()的用法：

setTimeout（“調(diào)用的函數(shù)名”，間隔的毫秒數(shù)）

表示過多少毫秒，就調(diào)用某個函數(shù)來執(zhí)行

清除某個定時器：clearTimeout()方法。

例如：var?myclock＝setTimeout（”move(?)”,500）;

if?(…)

clearTimeout（myclock）;；

定時器的使用：實(shí)現(xiàn)延期執(zhí)行或重復(fù)執(zhí)行

??window對象提供了兩種方法來實(shí)現(xiàn)定時器：

–?window.?setTimeout(表達(dá)式[expression],延時時間[n])?

–?window.?setInterval(表達(dá)式[expression],延時時間[n])

注意：expression可以是用引號括起來的代碼，也可以是一個函數(shù)名（不能帶任何參數(shù)的函數(shù)）

??如何取消定時器：

–?取消setTimeout：window.clearTimeout(id);?

–?取消setInterval:window.clearInterval(id);

屏幕（screen）對象

??屏幕對象是JavaScript運(yùn)行時自動產(chǎn)生的對象

??屏幕對象常用屬性

–?height：返回顯示屏幕的高度。?

–?width?：返回顯示器屏幕的寬度。

–?availHeight?：返回顯示屏幕的高度?(除?Windows?任務(wù)欄之外)。?

–?availWidth：返回顯示屏幕的寬度?(除?Windows?任務(wù)欄之外)。

–?colorDepth：返回目標(biāo)設(shè)備或緩沖器上的調(diào)色板的比特深度（每像素中用于顏色的位數(shù)，其值為1,4,8,15,16,24,32）。

??網(wǎng)頁可見區(qū)域?qū)?#xff1a;document.body.clientWidth

??網(wǎng)頁可見區(qū)域高：document.body.clientHeight

??網(wǎng)頁可見區(qū)域?qū)?#xff1a;document.body.offsetWidth?(包括邊線的寬)

??網(wǎng)頁可見區(qū)域高：document.body.offsetHeight?(包括邊線的寬)

??網(wǎng)頁正文全文寬：document.body.scrollWidth

??網(wǎng)頁正文全文高：document.body.scrollHeight

??網(wǎng)頁被卷去的高：document.body.scrollTop

??網(wǎng)頁被卷去的左：document.body.scrollLeft

??網(wǎng)頁正文部分上：window.screenTop

??網(wǎng)頁正文部分左：window.screenLeft

??屏幕分辨率的高：window.screen.height

??屏幕分辨率的寬：window.screen.width

??屏幕可用工作區(qū)高度：window.screen.availHeight

??屏幕可用工作區(qū)寬度：window.screen.availWidth

Location對象

??處理地址欄信息：location對象

–?Location對象是wodow對象的子對象，包含了窗口對象的網(wǎng)頁地址內(nèi)容，即URL。例如：

??window.location=“http://www.sohu.com”;//跳轉(zhuǎn)到頁面

??window.loaction.href=“http://www.sohu.com”;//同上

??window.location.reload();//刷新頁面

??Window.location.replace(url);//用url刷新當(dāng)前網(wǎng)頁

方法1：<a?href=“javascript:window.open(‘http://www.yahoo.com’,’_self’)”>
??????????????????window.open()
?????????????</a>

方法2：<a?href=“javascript:location.href=‘http://www.yahoo.com’”>
??????????????????location.href
?????????????</a>

方法3：<a?href=“javascript:location.?replace(‘http://www.yahoo.com’)”>
??????????????????location.replace()
?????????????</a>

Location?對象屬性?

名稱?	說明?
host	設(shè)置或檢索位置或?URL?的主機(jī)名和端口號
hostname	設(shè)置或檢索位置或?URL?的主機(jī)名部分
href	設(shè)置或檢索完整的?URL?字符串

方法?

名稱	說明
assign("url")	加載?URL?指定的新的?HTML?文檔。??
reload()	重新加載當(dāng)前頁
replace("url")?	通過加載?URL?指定的文檔來替換當(dāng)前文檔

歷史記錄（history）對象

??歷史記錄對象是窗口對象下的一個子對象。它實(shí)際上是一個對象數(shù)組，包含了一系列的用戶訪問過的url地址，用于瀏覽器工具欄中的“前進(jìn)”和“后退”按鈕。

??常用屬性和方法

–?history.length：歷史對象的個數(shù)

–?history.back();顯示瀏覽器歷史列表中后退一個網(wǎng)址的網(wǎng)頁

–?history.go(n)或者h(yuǎn)istory.go(網(wǎng)址)：顯示瀏覽器的歷史列表中第n個網(wǎng)址的網(wǎng)頁，n>0?前進(jìn)??n<0??后退

–?history.forward()；//顯示瀏覽器歷史列表中前進(jìn)一個網(wǎng)址的網(wǎng)頁

Document對象

??document文檔對象是window對象的一個主要部分，它包含了網(wǎng)頁顯示的各個元素對象。

–?document.write(str);//輸出一行

–?document.writeln(str);//輸出一行，并回車

常用屬性

名稱?	說明
alinkColor	設(shè)置或檢索文檔中所有活動鏈接的顏色?
bgColor	設(shè)置或檢索?Document?對象的背景色?
body	指定文檔正文的開始和結(jié)束
linkColor	設(shè)置或檢索文檔鏈接的顏色
location	包含關(guān)于當(dāng)前?URL?的信息?
title	包含文檔的標(biāo)題
url	設(shè)置或檢索當(dāng)前文檔的?URL
vlinkColor	設(shè)置或檢索用戶訪問過的鏈接的顏色?

常用方法?

名稱?	說明?
clear?(?)	清除當(dāng)前文檔?
close?(?)	關(guān)閉輸出流并強(qiáng)制顯示發(fā)送的數(shù)據(jù)
write?("text")	將文本寫入文檔

??JavaScript?程序是事件驅(qū)動程序

??onFocus獲得焦點(diǎn)事件，表示獲得鼠標(biāo)光標(biāo)，?onBlur失去焦點(diǎn)事件，剛好與之相反

??瀏覽器對象是一個分層次的結(jié)構(gòu)，window是頂層根對象

??打開窗口使用window對象的open(?)方法

??設(shè)置定時器，使用window對象的setTimeout(?)方法

??location對象的back(?)和forward(?)方法等同于前進(jìn)、后退按鈕

Form對象及其元素對象

??Form對象：是文檔對象的一個主要元素。Form對象中包含有許多用于收集用戶輸入內(nèi)容的元素對象，例如，文本框、按鈕等，通過這些元素對象，form將用戶輸入的數(shù)據(jù)傳遞到服務(wù)器端進(jìn)行處理。

??引用form對象

–?使用form標(biāo)記中的name屬性值
document.form1???????document.form2

–?使用forms數(shù)組對象
document.forms[0]?????????????????document.forms[1]??
document.forms[“form1”]

??Form對象的常用屬性、方法和事件

表單的onsubmit事件。事件響應(yīng)調(diào)用函數(shù)doSubmit()進(jìn)行驗(yàn)證，根據(jù)函數(shù)的返回值決定是否提交

??Form中的元素對象
form中的元素對象一般都可以與html的標(biāo)記一一對應(yīng)。

??引用form中的元素對象

–?通過元素的名稱
document.form1.username

–?通過form的元素數(shù)組對象的方法
document.form1.elements[0]
document.form1.elements[“username”]

JavaScript?事件處理程序?

事件處理程序的基本語法是：事件名="?JavaScript?代碼函數(shù)"?

<INPUT?type=”BUTTON”?…??onClick=“alert(“單擊我！”);”>

<INPUT?type=”BUTTON”?…??onMouseDown=“check(?)”>

表示鼠標(biāo)按下時，將調(diào)用執(zhí)行函數(shù)check(?)?。

JavaScript?事件?

事件名	說明
onClick	鼠標(biāo)單擊
onChange?	文本內(nèi)容或下拉菜單中的選項(xiàng)發(fā)生改變
onFocus?	獲得焦點(diǎn)，表示文本框等獲得鼠標(biāo)光標(biāo)。
onBlur?	失去焦點(diǎn)，表示文本框等失去鼠標(biāo)光標(biāo)。
onMouseOver?	鼠標(biāo)懸停，即鼠標(biāo)停留在圖片等的上方
onMouseOut?	鼠標(biāo)移出，即離開圖片等所在的區(qū)域
onMouseMove	鼠標(biāo)移動，表示在<DIV>層等上方移動
onLoad?	網(wǎng)頁文檔加載事件
onSubmit?	表單提交事件
onMouseDown?	鼠標(biāo)按下
onMouseUp?	鼠標(biāo)彈起

onFocus和onBlur?事件

文本框獲得鼠標(biāo)焦點(diǎn)時（onFocus）調(diào)用的函數(shù)：

清空卡號文本框?

文本框失去鼠標(biāo)焦點(diǎn)時（onBlur）調(diào)用的函數(shù)：

判斷格式是否正確?

focus(?)方法

再次獲得焦點(diǎn)，即鼠標(biāo)

光標(biāo)回到卡號文本框

onMouseOver="src='dog2.jpg'"?

表示本圖片的圖片名稱替換為dog2.jpg。

請注意：

由于外面兩端已有雙引號，為區(qū)別起見，dog2.jpg改用為單引號括起來。

文本框?qū)ο?/p>

??文本框元素用于在表單中輸入字、詞或一系列數(shù)字

??可以通過將?HTML?的?INPUT?標(biāo)簽中的?type?設(shè)置為“text”，以創(chuàng)建文本框元素

文本框?qū)ο?–?事件處理程序

文本框	事件	onBlur	文本框失去焦點(diǎn)
		onChange	文本框的值被修改
		onFocus	光標(biāo)進(jìn)入文本框中
	方法	focus(?)	獲得焦點(diǎn)，即獲得鼠標(biāo)光標(biāo)
	方法	select(?)	選中文本內(nèi)容，突出顯示輸入?yún)^(qū)域
	屬性	readOnly?	只讀，文本框中的內(nèi)容不能修改?

onFocus事件調(diào)用的函數(shù)clearText（）清空帳號文本框中的內(nèi)容

onBlur事件調(diào)用的函數(shù)check（）檢查輸入的帳號是否是“10”打頭，并且是數(shù)字

onChange事件調(diào)用的函數(shù)compute(?)用來計算總價?

命令按鈕對象

命令按鈕對象是網(wǎng)頁中最常用的元素之一

<INPUT?type="submit"?name="button1"??value="提交">

<INPUT?type="reset"?name="button2"??value="重置">

<INPUT?type="button"?name="button3"??value="計算">

按鈕?-?事件處理程序

表單元素	事件處理程序	說明
命令按鈕	onSubmit	表單提交事件，單擊“提交”按鈕時產(chǎn)生，此事件屬于<FORM>元素，不屬于提交按鈕
命令按鈕	onClick	按鈕單擊事件

onSubmit事件處理代碼：

<FORM??onSubmit=”return?調(diào)用函數(shù)名”>…</FORM>

如果函數(shù)返回true，則向遠(yuǎn)程服務(wù)器提交表單；

如果函數(shù)返回false，則取消提交。

復(fù)選框?qū)ο?/p>

??當(dāng)用戶需要在選項(xiàng)列表中選擇多項(xiàng)時，可以使用復(fù)選框?qū)ο?/p>

??要創(chuàng)建復(fù)選框?qū)ο?#xff0c;請使用?<INPUT>?標(biāo)簽

復(fù)選框?-?事件處理程序

復(fù)選框	事件	onBlur	復(fù)選框失去焦點(diǎn)
		onFocus?	復(fù)選框獲得焦點(diǎn)?
		onClick?	復(fù)選框被選定或取消選定
	屬性	checked	復(fù)選框是否被選中，選中為true，未選中為false。您可以使用此屬性查看復(fù)選框的狀態(tài)或設(shè)置復(fù)選框是否被選中
	屬性	?value	設(shè)置或獲取復(fù)選框的值

<PRE>是為了原樣顯示字符串中的換行”\n”格式

修改每個復(fù)選框的名稱都為mybox，使這4個復(fù)選框構(gòu)成一個數(shù)組mybox?

使用數(shù)組和for循環(huán)大大簡化代碼

單選按鈕對象

??當(dāng)用戶只需要從選項(xiàng)列表中選擇一個選項(xiàng)時，可以使用單選按鈕對象

??要創(chuàng)建單選按鈕對象，請使用?<INPUT>?標(biāo)簽

單選按鈕?-?事件和屬性

單選按鈕	事件	onBlur	單選按鈕失去焦點(diǎn)
		onFocus?	單選按鈕獲得焦點(diǎn)?
		onClick?	單選按鈕被選定或取消選定
	屬性	checked	單選按鈕是否被選中，選中為true，未選中為false。您可以使用此屬性查看單選按鈕的狀態(tài)或設(shè)置單選按鈕是否被選中
	屬性	?value	設(shè)置或獲取單選按鈕的值

下拉列表框

<SELECT?name="myselect"?>

??????<OPTION>--請選擇開戶帳號的城市--</OPTION>

??????<OPTION?value="北京市">北京市</OPTION>

??????<OPTION?value="上海市">上海市</OPTION>

??????<OPTION?value="重慶市">重慶市</OPTION>

??????<OPTION?value="天津市">天津市</OPTION>

??????<OPTION?value="四川省">四川省</OPTION>

??????<OPTION?value="山東省">山東省</OPTION>

??????<OPTION?value="湖北省">湖北省</OPTION>

</SELECT>

下拉列表框-事件和屬性

下拉列表框	事件	onBlur	下拉列表框失去焦點(diǎn)
		onChange	當(dāng)選項(xiàng)發(fā)生改變時產(chǎn)生
		onFocus	下拉列表框獲得焦點(diǎn)
	屬性	value	下拉列表框中，被選選項(xiàng)的值
		options	所有的選項(xiàng)組成一個數(shù)組，options表示整個選項(xiàng)數(shù)組，第一個選項(xiàng)即為options[0]，第二個即為options[1]，其他以此類推
		selectedIndex	返回被選擇的選項(xiàng)的索引號，如果選中第一個返回0，第二個返回1，其他類推

表單驗(yàn)證?

??JavaScript?最常見的用法之一就是驗(yàn)證表單

??對于檢查用戶輸入是否存在錯誤和是否疏漏了必選項(xiàng)，JavaScript?是一種十分便捷的方法

??<SCRIPT?LANGUAGE="JavaScript">

??function?validate(?)

??{

??var??f=document.reg_form;

??if(f.uname.value=="")

??{

??alert("請輸入姓名");

??f.uname.focus();???檢查姓名

??return?false;

??}??

??if?(f.gender[0].checked==false?&&?f.gender[1].checked==false)

??{

??alert("請指定性別");

??f.gender[0].focus();

??return?false;???檢查性別

??}

??if?((f.password.value.length?<?6)?||?(f.password.value?==?""))

??{

??alert("請輸入至少?6?個字符的密碼！");

??f.password.focus();

??return?false;???檢查密碼

??}

??q=f.email.value.indexOf("@");

??if?(q==-1)

??{

??alert("請輸入有效的電子郵件地址");

??f.email.focus();

??return?false;???檢查郵件地址

??}

??<FORM?name="reg_form"?onSubmit="return?validate()"?action="submit.htm">

??if?(f.age.value<1?||?f.age.value>?99?||?isNaN(f.age.value))

??{

??alert("請輸入有效的年齡！");

??f.age.focus();

??return?false;???檢查年齡

??}

??</SCRIPT>

??OnBlur、onChange?和?OnFocus?是一些與表單對象相關(guān)的事件處理程序

??在瀏覽器窗口中，如果文本框獲得焦點(diǎn)，則會調(diào)用?onFocus?事件處理程序

??當(dāng)對象失去焦點(diǎn)或光標(biāo)退出對象時，將執(zhí)行?onBlur?事件處理程序??

??當(dāng)修改文本框內(nèi)容或改寫下拉列表框的選項(xiàng)時，則會調(diào)用?onChange?事件處理程序

??JavaScript的主要功能之一是用于表單驗(yàn)證

轉(zhuǎn)載于:https://www.cnblogs.com/Vae1990Silence/p/4733080.html

總結(jié)

以上是生活随笔為你收集整理的HTML/CSS/JavaScript学习总结(转)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：电大计算机网考选择题多少分,2016年度
下一篇：中反应器体积_缠绕管式反应器大幅提高能效