學習總結

HTML

網站開發的主要原則是：

– 用標簽元素HTML描述網頁的內容結構；

– 用CSS描述網頁的排版布局；

– 用JavaScript描述網頁的事件處理，即鼠標或鍵盤在網頁元素上的動作后的程序

HTML（Hyper Text Mark-up Language 超文本標記語言）的縮寫，是最基礎的網頁語言。

Html是通過標簽來定義的語言，代碼都是由標簽所組成。Html代碼不用區分大小寫。

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

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

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

<標簽名屬性名='屬性值'> 數據內容 </標簽名>

<標簽名屬性名='屬性值' />

多個屬性時：<hr size=“3” align=“left” width=”75%”>用空格分開

Html 的命名：文件的擴展名要以.html或.html結束。

文件名中只可由英文字母、數字或下劃線組成。

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

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

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

@ title元素：文件標題聲明

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

@ script元素用于腳本

@ meta元素元信息

@ <base> 超鏈接網址基準參考點

name 屬性：網頁的描述信息。當取keywords時，content屬性的內容就作為搜索引擎的關鍵字進行搜索。

http-equiv 屬性：模擬HTTP協議的響應消息頭。

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

設置頁面背景:bgcolor

設置背景圖片:background

設計正文顏色:text

設置頁面邊距:topmargin、leftmargin、

rightmargin、bottomnargin

設置顯示內容與瀏覽器的距離

添加空格——

<b> … </b> 粗.<i> … </i>斜 <s> … </s> 刪<u> … </u> 下劃<sub> … </sub> 下標 <sup> … </sup> 上標

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

.<big> … </big> 大字

<strong> … </strong> 加強語氣 ( 加粗

<em>...</em> 加強語氣 ( 傾斜

段落縮進<blockquote>

設置水平線<hr>

向中對齊 <center>

格式： <center> … </center>

插入定義列表<dl>

<dl>

…

</dl>

插入無序列表<ul>

<ul>

<li>項目名稱</li>…

…

<ul>

<ul>：符號標簽（○●■）

type屬性：disc ● ( 默認) circle ○ square ■

插入有序列表<ol>

<ol>

<li>項目名稱</li>…

…

</ol>

超鏈接概述

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

超鏈接標簽的使用

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

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

鏈接路徑

– 絕對路徑：包含了標識Internet上的文件所需要的所有信息，包括完整的協議名稱、主機名稱、文件夾名稱和文件名稱。格式為：

通信協議://服務器地址:端口號/文件位置…/文件名

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

相對路徑：是以當前文件所在路徑為起點，進行相對文件的查找。

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

· 錨記標簽用于使用戶“跳”到文檔的某個部分

· HTML 的 NAME 屬性用于創建錨標記

為達到這種跳轉效果，請在 HREF 參數中使用該標記

B 發送E-mail：在html頁面中，可以建立e-mail鏈接，當瀏覽者單擊鏈接后，系統會啟動默認的本地郵件服務系統發送郵件，格式為：

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

</a>

聯系我

</a>

LINK 顏色的設置

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

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

· alink 超鏈接點選但未被放開的顏色

· vlink 超鏈接已被點選過的顏色

插入并格式化圖像

B <img>標簽：用于在網頁中插入圖像內容。

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

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

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

– PNG：擁有許多JPEG與GIF的共同優點，所以最近越來越流行。

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

注意點:邊框的問題.

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

屬性名稱屬性值說明

Align left 圖像靠左文字靠右

Right 圖像靠右文字靠左

Top 文字往上靠

middle 文字靠中

bottom 文字靠下

空隙設置

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

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

設置圖像映射

圖像地圖：<map>

map標簽要和img標簽聯合使用。

</map>

語法說明

<img>標記表示插入圖像文件，src表示插入圖像的路徑；

<map>標記表示插入圖像映射；

<area>標記表示圖像映射區域；

rhape屬性表示映射區域形狀：

— “rect”表示矩形區域；

— “circle”表示橢圓形區域；

— “poly”表示多邊形區域；

cords表示感應區域的坐標

創建表格

<BODY>

<TR>

</TR>

<TR>

<TH>分數</TH> <TH>表示行或列標題，粗體顯示

</TR>

.......

</TABLE>

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

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

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

表格的顏色設置：

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

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

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

表格的尺寸設置：

· frame常見屬性

規定表格周圍的哪一側的邊框是可見的。

· rules常見屬性

規定水平或垂直的分界線。

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

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

Span:表格的直列數，而不是第幾列。

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

<table>

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

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

單元格間距，邊距

表格嵌套

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

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

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

B <frameset>標簽

</frameset>

<html>

<head>

<title>框架的基本結構<title>

</head>

<frame>

…

</frameset>

</html>

</frameset>

還可設置的屬性包括：

frameborder：是否顯示框架結構的邊框線，取值為0、1或yes、no。取值為1或yes邊框將會顯示，取值為0或no邊框將會隱藏。

framespacing：默認邊框線的寬度為1，該屬性可調整邊框線的寬度。（以像素為單位）

bordercolor：可設置邊框線顏色。

scrolling：設置框架是否顯示滾動條。取值為yes、no或auto。yes表示滾動條一直顯示；no表示無論什么情況都不顯示滾動條；auto是系統的默認值，它是根據內容來調整的，當頁面長度超過瀏覽器窗口的范圍時就會自動顯示滾動條。

B <noframes>標簽

如果遇到不支持框架結構的瀏覽器，此時就需要用到該標簽來設置替換的內容，并告訴瀏覽者其瀏覽器無法打開框架頁面。

使用iframe進行頁面內的頁面嵌套

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

用法：

可以通過name屬性將鏈接的顯示目標定位到

iframe框架內。

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

· src="your.mid"
設定 midi 檔案及路徑，可以是相對或絕對

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

· loop=infinite
是否自動反覆播放。LOOP=2 表示重復兩次，Infinite 表示重復多次。

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

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

· src="your.mid"
設定 midi 檔案及路徑，可以是相對或絕對

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

· loop="true"
是否自動反覆播放。LOOP=2 表示重復兩次，true 是， false 否。

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

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

· VOLUME="0-100"
設定量的大小，數值是0到100之間。內定則為使用者系統本身之設定。

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

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

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

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

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

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

· Loop=”滾動的循環次數” 若未指定則循環不止(loop=”infinite”)

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

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

· Scrollamount=”速度” 數值越大速度越快

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

表單Form

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

· 表單元素

· </form

文本框

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

– 密碼框

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

– 多行文本框

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

· 初始內容

· </textarea>

單選框、復選框

– 單選框

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

– 復選框

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

列表框

(A)、菜單式

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

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

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

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

· ...

· </select>

· (B)、列表式

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

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

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

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

· ...

· </select>

下拉菜單

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

</SELECT>

按鈕

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

– 隱藏域

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

– 瀏覽框

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

BUTTON（按鈕）

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

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

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

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

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

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

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

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

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

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

CSS

F CSS的基本概念

· 掌握樣式表的語法規則

· 樣式表的分類：

– 行內樣式表

– 內嵌樣式表

– 外部樣式表

· 掌握常用的樣式

指定顯示樣式

F CSS基礎

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

@ 樣式表的首要目的是為網頁上的元素精確定位。其次，把網頁上的內容結構和格式控制相分離。即html的標簽主要是定義網頁的內容，而CSS決定這些網頁內容如何顯示。

@ 優點：簡化網頁的格式代碼，加快網頁下載顯示的速度，也減少了需要上傳的代碼數量，大大減輕了重復勞動的工作量。

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

F 使用CSS

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

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

@ CSS的語法結構：

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

CSS的基本語法

樣式和樣式表

1．樣式

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

2．樣式表

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

根據樣式代碼的位置，分為三類：

q 行內樣式

q 內嵌樣式

q 外部樣式

q 行內樣式：HTML標簽直接使用style屬性，稱為行內樣式（Inline Style）。它適用于只需要簡單地將一些樣式應用于某個獨立的元素的情況。

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

…

</table>

注意：在使用行內樣式的過程中，建議同學們在<head>標簽中添加<meta>標簽，添加的<meta>標簽如下：

<head>

</head>
內聯的樣式比其他方法更加靈活。要使用內聯樣式，必須使用Content-Style-Type HTTP頁眉擴展對整個文檔進行單獨的樣式表語言聲明。使用內聯CSS的網頁制作者必須將text/css作為Content-Style-Type HTTP頁眉.

@ 內嵌樣式表：是在<head>標簽內添加<style></style>標簽對，在標簽對內定義需要的樣式。

例如，<head>

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

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

</style>

</head>

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

內嵌樣式-2 選擇器

選擇器分為：

· HTML 選擇器

· CLASS 類選擇器

· ID 選擇器

· 樣式選擇器

· HTML標簽選擇器：在HTML頁面中使用的標簽，如果在CSS中被定義，那么此網頁的所有該標簽都將按照CSS中定義的樣式顯示。

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

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

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

· 偽類選擇器：是指對同一HTML元素的各種狀態和其所包括的部分內容的一種定義方式。

Id的優先級高于class

外部樣式

@ 外聯樣式表:是將<style>標簽內的樣式語句定義在擴展名為.css的文件中。通過使用<link>標簽引入樣式文件。

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

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

使用LINK（鏈接）標簽，語法：

<HEAD>

</HEAD>

可以連接多個html應用到html里面

行內樣式表、內嵌樣式表、外部樣式表各有優勢，實際的開發中常常

需要混合使用：

· 有關整個網站統一風格的樣式代碼，放置在獨立的樣式文件*.css

· 某些樣式不同的頁面，除了鏈接外部樣式文件，還需定義內嵌樣式

· 某張網頁內，部分內容”與眾不同“，采用行內樣式

對于某個HTML標簽：

1）如果有多種樣式，如果規定的樣式沒有沖突，則疊加；

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

CSS中的注釋

樣式規則的注釋
樣式規則是使用/*需要注釋的內容*/進行注釋的。即在需要注釋的內容前使用“/*”標記開始注釋，在內容的結尾使用“*/”結束。注釋可以多行內容注釋。其注釋范圍在“/*”與“*/”之間

常用的樣式屬性

· 1．文字

· 2．背景

· 3．邊框線

· 4．高度和寬度

· 5．間距和邊距

· 6．列表

· 7．位置和布局

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

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

下級對象

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

P em{color:blue;}

所以元素對象

*｛color：blue;

CSS文字與文本

設置字體——font-family

設置字號——font-size

設置字體樣式——font-style

設置字體加粗——font-weight

設置字體變體——font-variant

組合設置字體屬性——font

文本的精細排版

調整字符間距——letter-spacing

調整單詞間距——word-spacing

添加文字修飾——text-decoration

設置文本排列方式——text-align

設置段落縮進——text-indent

調整行高——line-height

轉換英文大小寫——text-transform

顏色和背景

設置顏色——color

設置背景顏色——background-color

插入背景圖片——background-image

插入背景附件——background-attachment

設置重復背景圖片——background-repeat

設置背景圖片位置——background-position

設置文本排列方式——text-align

· 語法說明

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

轉換英文大小寫——text-transform

插入背景圖片——background-image

基本語法

background-image:url|none

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

none是一個默認值，表示沒有背景圖片

插入背景附件——background-attachment

基本語法

background-attachment:scroll|fixed

scroll表示背景圖片是隨著滾動條的移動而移動。是瀏覽器的默認值。

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

設置重復背景圖片——background-repeat

基本語法

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

設置背景圖片位置——background-position

· 基本語法

background-position：百分比|長度|關鍵字

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

關鍵字在水平方向的主要有left、center、right，表示居左、居中和居右。關鍵字在垂直方向的主要有top、center、bottom，表示頂端、居中和底端。其中水平方向和垂直方向的關鍵字可相互搭配使用。

使用百分比和關鍵字對比說明background-position屬性的屬性值。

邊框和邊距

設計邊框樣式——border-style

調整邊框寬度——border-width

設置邊框顏色——border-color

設置邊框屬性——border

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

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

設計邊框樣式——border-style

基本語法

border-style:樣式取值

border-top-style:樣式取值

border-bottom-style:樣式取值

border-left-style:樣式取值

border-right-style:樣式取值

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

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

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

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

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

調整邊框寬度——border-width

基本語法

border-width:關鍵字|長度

border-top-width:關鍵字|長度

border-bottom-width:關鍵字|長度

border-right-width:關鍵字|長度

border-left-width:關鍵字|長度

邊框寬度屬性基本語法中的關鍵字說明

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

基本語法中邊框寬度屬性border-width是一個復合屬性，可以同時設置四條邊框的寬度。具體使用方法和邊框樣式的復合屬性border-style是一樣的，可以參照上一節關于border-style的講解

設置邊框顏色——border-color

基本語法

border-color:顏色關鍵字|RGB值

border-top-color:顏色關鍵字|RGB值

border-bottom-color:顏色關鍵字|RGB值

border-left-color:顏色關鍵字|RGB值

border-right-color: 顏色關鍵字|RGB值

顏色關鍵字可使用常用的16個關鍵字

RGB值使用十六進制的RGB值和RGB函數值都行。

在使用邊框顏色復合屬性border-color時，如果只設置1種顏色，則四條邊框的顏色一樣；設置2種顏色，則邊框的上下為一個顏色，左右為另一個顏色；設置3種顏色，邊框的顏色順序為上、左右、下；設置4中顏色，邊框的顏色順序為上、右、下、左。

設置邊框屬性——border

基本語法

border:<邊框寬度>||<邊框樣式>||<邊框顏色>

border-top: <上邊框寬度>||<上邊框樣式>||<上邊框顏色>

border-right: <右邊框寬度>||<右邊框樣式>||<右邊框顏色>

border-bottom: <下邊框寬度>||<下邊框樣式>||<下邊框顏色>

border-left: <左邊框寬度>||<左邊框樣式>||<左邊框顏色>

基本語法中每一個屬性都是一個復合屬性，都可以同時設置邊框的寬度、樣式和顏色屬性。但是在用該語法定義邊框屬性時，每個屬性間必須用空格隔開。

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

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

· 基本語法

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

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

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

margin: 長度|百分比|auto

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

百分比是相對于上級元素寬度的百分比，允許使用負數。

auto為自動提取邊距值，是默認值。

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

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

基本語法

padding-top:長度|百分比

padding-bottom: 長度|百分比

padding-left: 長度|百分比

padding-right: 長度|百分比

padding: 長度|百分比

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

百分比是相對于上級元素寬度的百分比，不允許使用負數。

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

列表

設計列表樣式——list-style-type

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

調整列表位置——list-style-position

設計列表樣式——list-style-type

基本語法

list-style-type:<屬性值>

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

基本語法

list-style-image:none|URL

none表示不使用圖像符號。

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

調整列表位置——list-style-position

基本語法

list-style-position:outside|inside

outside表示列表符號不向內縮進，是列表的默認屬性值。

inside表示列表符號向內縮進

定位

定位方式——position

設置位置——top、bottom、right、left

浮動——float

清除——clear

定位方式——position

基本語法

position:static|absolute|relative

static表示為靜態定位，是默認設置。

absolute表示絕對定位，與下一節的位置屬性top、bottom、right、left等結合使用可實現對元素的絕對定位。

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

設置位置——top、bottom、right、left

· 基本語法

top:auto|長度值|百分比

bottom: auto|長度值|百分比

left: auto|長度值|百分比

right: auto|長度值|百分比

浮動——float

基本語法

float:left|right|none

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

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

none表示不浮動，是默認值

清除——clear

基本語法

clear:left|right|both|none

清除——clear

語法說明

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

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

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

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

層的應用

圖層的創建——<div>

創建嵌套圖層

層的屬性設置

圖層的創建——<div>

基本語法

<body>

</body>

在進行層的定義時，需要將層的樣式同時定義，否則在網頁中不會顯示出來。

創建嵌套圖層

基本語法

<body>

</body>

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

層的屬性設置

· 圖層定義常見屬性

層的屬性設置

基本語法

<body>

</body>

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

left、top屬性進行左邊距和頂端間距的設置；

width、height屬性進行寬度和高度設置；

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

CSS層

設置層空間——z-index

設置層裁切——clip

設置層大小—度來—width、height

設置層溢出——overflow

設置層可見——visibility

設置層空間——z-index

基本語法

z-index:auto|數字

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

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

設置層裁切——clip

基本語法

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

auto表示不裁切。

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

設置層大小—width、height

· 基本語法

· width:auto|長度

· height:auto|長度

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

· ? auto表示自動設置長度。

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

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

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

設置層溢出——overflow

基本語法

overflow: visible/hidden/scroll/auto

visible：擴大層的容納范圍，將所有內容都顯示出來。

hidden：隱藏超出范圍的內容（超出范圍的內容將被裁切掉）。

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

auto：當層內容超出了層的容納范圍時，則顯示滾動條。

設置層可見——visibility

基本語法

· visibility:visible|hidden|inherit

visible表示該層是可見的。

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

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

鼠標指針——cursor

基本語法

cursor:auto|關鍵字|URL（圖像地址）

auto表示根據對象元素的內容自動選擇鼠標指針形狀。

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

關鍵字共有16種，是系統預先定義好的鼠標指針形狀，具體說明和形狀見表20-2

屬性	CSS名稱	說明
邊界屬性	margin-top	設設置對象的上邊距
	m margin -right	設設置對象的右邊距
	m margin -bottom	設設置對象的下邊距
	m margin -left	設設置對象的左邊距
邊框屬性	bbborder-style	設設置邊框的樣式
	boborder-width	設設置邊框的寬度
	boborder-color	設設置邊框的顏色
填充屬性	papadding-top	設設置內容與上邊框之間的距離
	papadding-right	設設置內容與右邊框之間的距離
	papadding-bottom	設設置內容與下邊框之間的距離
	papadding-left	設設置內容與左邊框之間的距離

偽類

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

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

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

· “:hover”用于鼠標光標置于其上的鏈接

· “:active”用于獲得焦點（如“被單擊”）的鏈接上

· “:visited”用在已經訪問過的鏈接上

· 盒子在標準流中的定位原則

· 實驗1——行內元素之間的水平margin

span.left{

margin-right:30px;

background-color:#a9d6ff;

}

span.right{

margin-left:40px;

background-color:#eeb0b0;

}

· 盒子在標準流中的定位原則

– 實驗2——塊級元素之間的豎直margin

<body>

</body>

CSS+Div 應用實例布局

· 流體浮動布局

· 固定浮動布局

· 固定定位布局

JavaScript

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

· 當用戶在客戶端的瀏覽器中顯示該網頁時，瀏覽器就會執行JavaScript程序，讓用戶通過交互式的操作變換網頁顯示的內容，以實現HTML語言所不能實現的一些功能。

· 提供了數據驗證的基本功能。

· JS是基于對象，Java是面向對象。

· JS只需解釋就可以執行，Java需要先編譯成字節碼文件，再執行。

· JS是弱類型，Java是強類型。

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

· JavaScript的特點

· 解釋性：由瀏覽器直接解釋執行

· 用于客戶端

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

· 簡單易用：腳本式語言最大的優點是易學易用，是一種輕量級的程序語言

· 動態性:他可以直接對用戶或客戶輸入作出響應，無須經過web服務程序，他對用戶的反映響應，是采用以事件驅動的方式進行的。

· 跨平臺性:只要是可以解釋Js的瀏覽器都可以執行，和操作系統無關

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

· JavaScript的作用

– 校驗用戶輸入的內容：用戶輸入內容的校驗常分為兩種

· 格式性校驗：JavaScript

· 功能性校驗

– 有效地組織網頁內容

– 動態地顯示網頁內容：時鐘顯示等

– 動畫顯示

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

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

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

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

注意：如果在script標簽中定義了src屬性，那么標簽中的內容不會被執行。

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

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

</body>
</html>

· 需注意：

– JavaScript程序內容必須置于<script> </script>標簽中，type=“text/javascript”用于區別其他腳本程序語言。

– 對于不支持javascript程序的瀏覽器，標記之間的內容就會被隱藏起來，否則就會被當做html的內容顯示出來，而對于支持javascript程序的瀏覽器，這對標簽不起任何作用。

– Javascript程序對大小寫字母是敏感的，即在同一個程序語句中如果使用大寫或小寫字母將代表不同的意義。

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

– Javascript程序在html文件中的位置沒有嚴格的規定，但根據Javascript程序的功能和作用，一般將其置于3種位置：

· 在html<body>標記中的任何位置。如果所編寫的Javascript程序用于輸出網頁內容的，應該將Javascript程序置于html文件中需要顯示該內容的位置。

· 在html<head>標記。如果所編寫的Javascript程序需要在某一個html文件中多次使用，那就應該編寫Javascript函數，并將函數置于html文件的<head>標記中。

· 在一個單獨的js文件中。如果編寫的Javascript程序需要在多個html文件中使用，或Javascript程序內容很長時。

數據類型

· JavaScript主要包括3種數據類型：簡單數據類型、特殊數據類型、復合數據類型。

· 簡單數據類型：數值型、字符型、布爾型

· 復合數據類型：對象、數組、函數

· 特殊數據類型：null、undefined

轉義字符

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

· 常量：不能改變的數據。可以為整型、邏輯型、字符串型等。

· 變量：在計算機內存中暫時保存數據的地方。用關鍵字var聲明或用賦值的形式。var i；i=10；var count=10；var i，j；

· 變量命名規則

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

– 后續字符可以是字母、數字、下劃線或美元符；

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

– 字符大小寫敏感；

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

· 變量弱類型檢查，且可隨時改變數據類型

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

· 用typeof()運算符返回表達式的數據類型var a=18;
typeof(a) ---number

“+”連接字符串

運算符和表達式

· 運算符對一個或多個變量或值（操作數）進行運算，并返回一個新值

· 根據所執行的運算，運算符可分為以下類別：

– 算術運算符

– 比較運算符

– 邏輯運算符

– 賦值運算符=、+=、-=、*=、/=、%=

– 位運算符（很少用）

– 算術運算符

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

比較運算符

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

邏輯運算符

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

流程控制

· 所謂結構化程序設計思想，就是要使所設計的程序給人一種一目了然的感覺，條理清晰，模塊化，書寫層次分明，要求：

– 順序結構：一條接一條，自上而下

– 選擇結構：判斷給定條件，根據不同情況做不同處理

– 循環結構：多次重復執行同一系列命令

if 語句

語法：

if(條件)

{

JavaScript代碼;

}

switch 語句

語法

switch (表達式)

{

case 常量1 :

JavaScript語句;

break;

case 常量2 :

JavaScript語句;

break;

...

default :

JavaScript語句;

}

· 網頁中嵌入腳本有兩種方式：使用<Script>標簽或外部 *. js文件

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

· “+”可以用于兩個數相加，還可以用于連接字符串

· parseInt() 和 parseFloat() 函數將字符串分別轉換為整型和小數

· 運算符號分為算術運算符、比較運算符、邏輯運算符

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

· 多分支語句switch根據表達式的值，進入不同的分支執行

循環

· for循環

· do-while

· while

for循環

var i;

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

{

// 語句;

}

while和do－while循環

q while循環

while(循環條件)

{

//語句；

}

q do－while循環

{

//語句；

}while(循環條件);

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

內置函數

· eval 函數：用于計算字符串表達式的值

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

var anExpression = "6 * 9 % 7";

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

isNaN 函數：用于驗證參數是否為 NaN（非數字）

isNaN(numValue)

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

如果值是 NaN，那么 isNaN 函數返回 true ，否則返回 false

自定義函數

· 定義函數：

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

語句;

}

· 調用函數：
函數調用一般和表單元素的事件一起使用，調用格式為：事件名＝“函數名” ;

參數是由函數的使用方傳遞到函數體中的變量，用于為函數中的操作提供相應的信息和數據。

· 參數的傳遞

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

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

· 參數的個數
當函數包含多個參數時，使用arguments.length可以得到使用該函數時輸入的參數個數，而arguments包括了各參數內容。

· 注意：調用有參數的函數，但沒有給其傳值，函數一樣可以運行，或者調用沒有參數的函數，給其傳值，該函數也一樣運行。

· 說的簡單點：只要寫了函數名后面跟了一對小括號，該函數就會運行。

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

例：

function demo()//定義函數。

{

alert(arguments.length);

}

demo(“hello”,123,true);//調用函數。

那么彈出的對話框結果是3，如果想得到所有的參數值，可以通過for循環遍歷該數組。

為了增強閱讀性，最好按照規范，按定義好的形式參數傳遞實際參數。

函數在調用時的其他寫法：

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

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

//那么該函數也可以通過show()的方式運行

變量的作用域

· JavaScript的變量分為全局變量和局部變量。全局變量是作用在全程序范圍內的變量，它聲明在函數體外；局部變量是定義在函數體內的變量，它僅僅在函數體內起作用。

例如， var errorMessage=“”;

function checkRequired(v,label){

… …

var msg=“請輸入”+label;

errorMessage=errorMessage+msg;

}

JavaScript 對象簡介

· 內置對象

· 瀏覽器對象

· 自定義對象

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

– 該對象為靜態對象，表示在引用該對象的屬性或方法時不需要為它創建實例；

– 在引用該對象屬性和方法時必須為它創建一個實例，叫做動態對象。

創建字符串有兩種不同方法：

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

· 創建 String 對象

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

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

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

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

· 數字字符串和數值的相互轉換

String相關函數

· 屬性：length

· 方法：

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

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

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

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

– toLowerCase:返回一個字符串，該字符串中的字母被轉換為小寫字母。

Math 對象

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

數學運算 Math對象

· Math.ceil(x)返回>=x的最小整數

· Math.floor(x) 返回<=x的最大整數

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

· Math.random()返回0-1之間的隨機小數

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

Date 對象

Data 方法的分組

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

用作 Date 方法的參數的整數

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

Set 方法

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

Get 方法：

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

To 方法：

方法	說明
ToGMTString	使用格林尼治標準時間 (GMT) 數據格式將 Date 對象轉換成字符串表示
ToLocaleString	使用當地時間格式將 Date 對象轉換成字符串表示

Parse 方法和 UTC 方法

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

數組

· 聲明數組

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

例： var emp = new Array(3)

· 添加元素

emp[0] = “AA";

emp[1] = “BB";

emp[2] = “CC";

也可以聲明數組并賦初值：

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

· 方案1 ：

– var objArr = new Array();//創建一個空數組

– var objArr = new Array(10);//創建含10個元素的數組

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

· 方案2：

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

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

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

· 組合數組的創建

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

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

· 數組的length屬性：表示數組的長度

· 多維數組：js本身是沒有多維數組概念，要通過組合數組來創建

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

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

常用屬性

length ：返回數組中元素的個數

常用方法

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

數組的方法

· objArr.toString():轉換成字符串，并用,連接：

– [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作為分隔符，將數組轉換成字符串，當separator為逗號時等同于toString()

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

· objArr.push(v1,v2,…):將參數添加到數組結尾：

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

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

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

· 循環語句分為：for 循環、while循環、do-while循環

· Eval( )函數可以計算某個計算表達式的值，

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

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

· Math對象的random( )方法可以產生0－1的隨機數

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

Window 對象

· 窗口對象window是瀏覽器網頁的文檔對象模型結構中的最高級的對象，只要網頁的html標記中包含有<body>或<frameset>標記，該網頁就會包含一個窗口對象。

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

屬性

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

方法

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

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

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

height：窗口高度；

width：窗口寬度；

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

left：窗口距離屏幕左側的象素值；

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

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

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

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

status：是否顯示狀態欄內的信息，yes或1為允許；

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

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

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

setTimeout（“調用的函數名”，間隔的毫秒數）

表示過多少毫秒，就調用某個函數來執行

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

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

if (…)

clearTimeout（myclock）;；

定時器的使用：實現延期執行或重復執行

· window對象提供了兩種方法來實現定時器：

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

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

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

· 如何取消定時器：

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

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

屏幕（screen）對象

· 屏幕對象是JavaScript運行時自動產生的對象

· 屏幕對象常用屬性

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

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

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

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

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

· 網頁可見區域寬：document.body.clientWidth

· 網頁可見區域高：document.body.clientHeight

· 網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)

· 網頁可見區域高：document.body.offsetHeight (包括邊線的寬)

· 網頁正文全文寬：document.body.scrollWidth

· 網頁正文全文高：document.body.scrollHeight

· 網頁被卷去的高：document.body.scrollTop

· 網頁被卷去的左：document.body.scrollLeft

· 網頁正文部分上：window.screenTop

· 網頁正文部分左：window.screenLeft

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

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

· 屏幕可用工作區高度：window.screen.availHeight

· 屏幕可用工作區寬度：window.screen.availWidth

Location對象

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

– Location對象是wodow對象的子對象，包含了窗口對象的網頁地址內容，即URL。例如：

· window.location=“http://www.sohu.com”;//跳轉到頁面

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

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

· Window.location.replace(url);//用url刷新當前網頁

方法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	設置或檢索位置或 URL 的主機名和端口號
hostname	設置或檢索位置或 URL 的主機名部分
href	設置或檢索完整的 URL 字符串

方法

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

歷史記錄（history）對象

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

· 常用屬性和方法

– history.length：歷史對象的個數

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

– history.Go(n)或者history.go(網址)：顯示瀏覽器的歷史列表中第n個網址的網頁，n>0 前進 n<0 后退

– history.forward()；//顯示瀏覽器歷史列表中前進一個網址的網頁

Document對象

· document文檔對象是window對象的一個主要部分，它包含了網頁顯示的各個元素對象。

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

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

常用屬性

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

常用方法

名稱	說明
clear ( )	清除當前文檔
close ( )	關閉輸出流并強制顯示發送的數據
write ("text")	將文本寫入文檔

· JavaScript 程序是事件驅動程序

· onFocus獲得焦點事件，表示獲得鼠標光標， onBlur失去焦點事件，剛好與之相反

· 瀏覽器對象是一個分層次的結構，window是頂層根對象

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

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

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

Form對象及其元素對象

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

· 引用form對象

– 使用form標記中的name屬性值
document.form1 document.form2

– 使用forms數組對象
document.forms[0] document.forms[1]
document.forms[“form1”]

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

表單的onsubmit事件。事件響應調用函數doSubmit()進行驗證，根據函數的返回值決定是否提交

· Form中的元素對象
form中的元素對象一般都可以與html的標記一一對應。

· 引用form中的元素對象

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

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

JavaScript 事件處理程序

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

表示鼠標按下時，將調用執行函數check( ) 。

JavaScript 事件

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

onFocus和onBlur 事件

文本框獲得鼠標焦點時（onFocus）調用的函數：

清空卡號文本框

文本框失去鼠標焦點時（onBlur）調用的函數：

判斷格式是否正確

focus( )方法

再次獲得焦點，即鼠標

光標回到卡號文本框

onMouseOver="src='dog2.jpg'"

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

請注意：

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

文本框對象

· 文本框元素用于在表單中輸入字、詞或一系列數字

· 可以通過將 HTML 的 INPUT 標簽中的 type 設置為“text”，以創建文本框元素

文本框對象 – 事件處理程序

文本框	事件	onBlur	文本框失去焦點
		onChange	文本框的值被修改
		onFocus	光標進入文本框中
	方法	focus( )	獲得焦點，即獲得鼠標光標
	方法	select( )	選中文本內容，突出顯示輸入區域
	屬性	readOnly	只讀，文本框中的內容不能修改

onFocus事件調用的函數clearText（）清空賬號文本框中的內容

onBlur事件調用的函數check（）檢查輸入的賬號是否是“10”打頭，并且是數字

onChange事件調用的函數compute( )用來計算總價

命令按鈕對象

命令按鈕對象是網頁中最常用的元素之一

按鈕 - 事件處理程序

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

onSubmit事件處理代碼：

如果函數返回true，則向遠程服務器提交表單；

如果函數返回false，則取消提交。

復選框對象

· 當用戶需要在選項列表中選擇多項時，可以使用復選框對象

· 要創建復選框對象，請使用 <INPUT> 標簽

復選框 - 事件處理程序

復選框	事件	onBlur	復選框失去焦點
		onFocus	復選框獲得焦點
		onClick	復選框被選定或取消選定
	屬性	checked	復選框是否被選中，選中為true，未選中為false。您可以使用此屬性查看復選框的狀態或設置復選框是否被選中
	屬性	value	設置或獲取復選框的值

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

修改每個復選框的名稱都為mybox，使這4個復選框構成一個數組mybox

使用數組和for循環大大簡化代碼

單選按鈕對象

· 當用戶只需要從選項列表中選擇一個選項時，可以使用單選按鈕對象

· 要創建單選按鈕對象，請使用 <INPUT> 標簽

單選按鈕 - 事件和屬性

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

下拉列表框

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

</SELECT>

下拉列表框-事件和屬性

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

表單驗證

· JavaScript 最常見的用法之一就是驗證表單

· 對于檢查用戶輸入是否存在錯誤和是否疏漏了必選項，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 是一些與表單對象相關的事件處理程序

· 在瀏覽器窗口中，如果文本框獲得焦點，則會調用 onFocus 事件處理程序

· 當對象失去焦點或光標退出對象時，將執行 onBlur 事件處理程序

· 當修改文本框內容或改寫下拉列表框的選項時，則會調用 onChange 事件處理程序

· JavaScript的主要功能之一是用于表單驗證

本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請點擊舉報。

精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

HTML

CSS

JavaScript