HTML/CSS/JavaScript學習總結(轉)

時間 2019-11-12

標籤 html css javascript 學習總結欄目 HTML 简体版

原文原文鏈接

HTML

網站開發的主要原則是：javascript

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

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

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

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

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

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 此屬性指定控件的名稱。例如，若是表單中有幾個文本框，則能夠用名稱 TEXT一、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;

}

span.right{

margin-left:40px;

}

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

– 實驗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，其餘類推