Java Web編程技術(shù)：靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ)

上傳人：熊*** IP屬地：山東上傳時間：2024-02-04 格式：PPTX 頁數(shù)：90 大?。?.23MB 積分：30 舉報 版權(quán)申訴

Java Web編程技術(shù)：靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ)_第2頁

Java Web編程技術(shù)：靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ)_第3頁

Java Web編程技術(shù)：靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ)_第4頁

Java Web編程技術(shù)：靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ)_第5頁

已閱讀5頁，還剩85頁未讀，繼續(xù)免費閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ)【知識目標(biāo)】掌握HTML常用標(biāo)簽的使用。掌握J(rèn)avaScript的語法。掌握CSS的語法?！灸芰δ繕?biāo)】能閱讀使用HTML、CSS和JavaScript編寫的靜態(tài)網(wǎng)頁源代碼。能靈活運用HTML的常用標(biāo)簽編寫靜態(tài)網(wǎng)頁源代碼。能靈活使用JavaScript編寫功能腳本。能靈活使用CSS設(shè)計靜態(tài)網(wǎng)頁樣式。靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ)3.1HTML基礎(chǔ)3.2JavaScript基礎(chǔ)3.3CSS基礎(chǔ)3.1.1概述3.1.2常見標(biāo)簽元素3.1.3網(wǎng)頁布局3.1.4表單3.1HTML基礎(chǔ)HTML是一種標(biāo)記語言，使用HTML標(biāo)簽來描述網(wǎng)頁。HTML標(biāo)簽是由尖括號包圍的關(guān)鍵詞，不會顯示在瀏覽器中，只在后臺起到解釋作用，包括：成對標(biāo)簽（大部分），如：<p>和</p>，標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽（或開放標(biāo)簽），第二個標(biāo)簽是結(jié)束標(biāo)簽（或閉合標(biāo)簽）。單個標(biāo)簽（少部分），如：換行符<br/>。HTML文檔就是網(wǎng)頁，它包含HTML標(biāo)簽和內(nèi)容。3.1.1概述【例3-1-1】：第一個靜態(tài)網(wǎng)頁源文件<html><head><title>我的第一個網(wǎng)頁</title></head><body><h1>MyFirstHeading</h1><p>Myfirstparagraph.</p></body></html><html>：網(wǎng)頁全局框架，定義整個HTML文檔，成對出現(xiàn)。3.1.2常見標(biāo)簽元素

1、<html>元素<html><body>Thisismybody!</body></html><body>：網(wǎng)頁的主體，成對出現(xiàn)。注意：該標(biāo)簽對需要位于<html>與</html>中。3.1.2常見標(biāo)簽元素

2、<body>元素<html><body>Thisismybody!</body></html><head>：網(wǎng)頁的頭部，是所有頭部元素的容器，成對出現(xiàn)。在html文檔中，<head>與<body>平級，二者都是<html>的下級?？商砑拥絟ead的標(biāo)簽：<title>、<base>、<link>、<meta>、<script>以及<style>。3.1.2常見標(biāo)簽元素

3、<head>元素<title>：網(wǎng)頁的標(biāo)題，成對出現(xiàn)。功能：定義瀏覽器工具欄中的標(biāo)題；提供頁面被添加到收藏夾時顯示的標(biāo)題；顯示在搜索引擎結(jié)果中的頁面標(biāo)題。3.1.2常見標(biāo)簽元素

4、<title>元素【例3-1-3】：一個包含標(biāo)題的網(wǎng)頁<html><head><title>Titleofthedocument</title></head><body>Thisismybody!</body></html><p>：引入段落，成對出現(xiàn)。3.1.2常見標(biāo)簽元素

5、<p>元素<html><head><title>段落示例</title></head><body>Thisismybody!<p>Myfirstparagraph.</p></body></html><h1>-<h6>：定義了標(biāo)題1到標(biāo)題6的文字大小和樣式，成對出現(xiàn)。3.1.2常見標(biāo)簽元素

6、<h1>-<h6>元素<html><head><title>1~6級標(biāo)題示例</title></head><body><h1>一級標(biāo)題</h1><h2>二級標(biāo)題</h2><h3>三級標(biāo)題</h3><h4>四級標(biāo)題</h4><h5>五級標(biāo)題</h5><h6>六級標(biāo)題</h6></body></html><a>：引入超級鏈接，成對出現(xiàn)。

<ahref="跳轉(zhuǎn)網(wǎng)頁URL">鏈接顯示文本</a>3.1.2常見標(biāo)簽元素

7、<a>元素<html><head><title>超鏈接示例</title></head><body><ahref="">百度搜索</a></body></html><img>：引入圖像，單個出現(xiàn)。<imgsrc="圖片存放地址"width="寬度值"height="高度值"/>3.1.2常見標(biāo)簽元素

8、<img>元素<html><head><title>圖片示例</title></head><body><imgsrc="flower.jpg"width="100"height="150"/></body></html>注意：<img>標(biāo)簽中src屬性值通常使用相對地址，以便項目在不同Web服務(wù)器上進(jìn)行部署。<img>標(biāo)簽中width和height屬性值為整數(shù)，單位是像素，若不設(shè)置則默認(rèn)圖片以源圖片文件實際大小顯示。

3.1.2常見標(biāo)簽元素

8、<img>元素<table>：定義表格，成對出現(xiàn)。<tr>：定義表格內(nèi)的行，成對出現(xiàn)。<td>：定義每行內(nèi)的單元格，成對出現(xiàn)。單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。<th>：定義表格的表頭，成對出現(xiàn)。大多數(shù)瀏覽器會把表頭顯示為粗體居中的文本。

3.1.2常見標(biāo)簽元素

9、<table>元素【例3-1-8】：一個包含2行2列表格的網(wǎng)頁<html><head><title>表格示例</title></head><body><tableborder="1"style="width:150"><tr><th>學(xué)號</th><th>姓名</th></tr><tr><td>1001</td>

<td>王偉</td></tr></table></body></html><ul>：無序列表，成對出現(xiàn)。無序列表是一個項目的列表，此列項目使用粗體圓點進(jìn)行標(biāo)記。<li>：列表項，成對出現(xiàn)。列表項可以是段落、換行符、圖片、鏈接以及其他列表等。

3.1.2常見標(biāo)簽元素

10、<ul>元素【例3-1-9】：一個包含2個項目的無序列表的網(wǎng)頁<html><head><title>無序列表示例</title></head><body>專業(yè)列表<ul><li>軟件與信息服務(wù)</li><li>移動應(yīng)用開發(fā)</li></ul></body></html><ol>：有序列表，成對出現(xiàn)。有序列表也是一列項目，列表項目使用數(shù)字進(jìn)行標(biāo)記。

<li>：列表項，成對出現(xiàn)。列表項可以是段落、換行符、圖片、鏈接以及其他列表等。

3.1.2常見標(biāo)簽元素

11、<ol>元素【例3-1-10】：一個包含2個項目的有序列表的網(wǎng)頁<html><head><title>有序列表示例</title></head><body>學(xué)院列表<ol><li>人工智能與大數(shù)據(jù)學(xué)院</li><li>電子與物聯(lián)網(wǎng)學(xué)院</li></ol></body></html><dl>：自定義列表，成對出現(xiàn)。自定義列表不僅僅是一列項目，而是項目及其注釋的組合。<dt>：自定義列表項，成對出現(xiàn)。<dd>：自定義列表項的注釋，成對出現(xiàn)。3.1.2常見標(biāo)簽元素

12、<dl>元素【例3-1-11】：一個包含2個項目的自定義列表的網(wǎng)頁<html><head><title>自定義列表示例</title></head><body>學(xué)院列表<dl><dt>人工智能與大數(shù)據(jù)學(xué)院</dt><dd>開設(shè)有移動應(yīng)用開發(fā)、軟件與信息服務(wù)等8個專業(yè)</dd><dt>電子與物聯(lián)網(wǎng)學(xué)院</dt><dd>開設(shè)電子信息工程技術(shù)、應(yīng)用電子技術(shù)等7個專業(yè)</dd></dl></body></html>方式1：使用<div>元素進(jìn)行網(wǎng)頁布局。方式2：使用表格進(jìn)行布局。3.1.3網(wǎng)頁布局【例3-1-12】：使用<div>元素在網(wǎng)頁中創(chuàng)建多行多列布局<html><head><title>使用div布局示例</title></head><body><divstyle="width:500px">

<divstyle="background-color:#99bbbb">

<h1style="margin-bottom:0">MainTitleofWebPage

</h1>

</div>

<divstyle="background-color:#ffff99;height:200px;width:100px;float:left;">

<ulstyle="margin:0">

<li>JavaScript</li>

</ul>

</div>

<divstyle="background-color:#EEEEEE;height:200px;width:400px;float:left;">Contentgoeshere

</div></div></body></html>123123【例3-1-13】：使用表格在網(wǎng)頁中創(chuàng)建多行多列布局<html><head><title>使用表格布局示例</title></head><body><tablestyle="width:500">

<tdcolspan="2"style="background-color:#99bbbb">

<h1>MainTitleofWebPage</h1>

</td>

</tr>

<trvalign="top">

<tdstyle="background-color:#ffff99;width:100px;text-align:top;">

<ulstyle="margin:0">

<li>JavaScript</li>

</ul>

</td>

<tdstyle="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">Contentgoeshere</td>

</tr></table></body></html>123123表單是一個包含表單元素的區(qū)域，允許用戶在表單中輸入信息。name：設(shè)置表單元素名稱，便于在JavaScript腳本中定位和操作表單及其元素。action：設(shè)置此表單數(shù)據(jù)提交目的頁的URL，可以是相對地址或絕對地址。method：設(shè)置表單以哪種方式提交數(shù)據(jù)，默認(rèn)為get方式。3.1.4表單<formname="表單名"action="數(shù)據(jù)提交目的頁URL"method="get|post"></form><input>：用于接收向表單輸入的數(shù)據(jù)。屬性type：定義輸入類型，常用類型如下3.1.4表單類型值表現(xiàn)樣式text單行文本框，框中輸入的信息將以明文字符樣式顯示password單行文本框，框中輸入的信息將以密顯字符樣式顯示Radio單選按鈕checkbox多選按鈕submit提交按鍵，點擊該按鈕將提交表單數(shù)據(jù)到目的頁reset重置按鈕，點擊該按鈕將恢復(fù)表單所有輸入項為默認(rèn)值button普通按鈕hidden不顯示，但表單信息提交時會將此輸入項的內(nèi)容一并提交到目的頁【例3-1-14】：在網(wǎng)頁中使用表單提交數(shù)據(jù)信息<formname="myForm"action="formHandle.jsp"method="post">姓名：<inputtype="text"name="name"/><p>密碼：<inputtype="password"name="password"/><p>性別：<inputtype="radio"name="sex"value="male"checked/>男<inputtype="radio"name="sex"value="female"/>女<p>擅長：<inputtype="checkbox"name="course"value="JSP"/>JSP<inputtype="checkbox"name="course"value="ASP.NET"/>ASP.NET<inputtype="checkbox"name="course"value="PHP"/>PHP<p><inputtype="submit"value="提交"/><inputtype="reset"value="重置"/></form>注意：如果希望表單中存在的多個單選按鈕同組互斥，則需要將這些<input>標(biāo)簽中name屬性值設(shè)置為同一個值。當(dāng)表單在提交數(shù)據(jù)時，只有單選按鈕或復(fù)選框處于選中狀態(tài)，其包含的信息才會被提交到目的頁，因此，這兩類<input>標(biāo)簽通常在編寫時都需要設(shè)置value屬性值。3.1.4表單注意：當(dāng)表單在提交數(shù)據(jù)時，文本框和密碼框中輸入的文本信息會被提交到目的頁，因此通常無需設(shè)置<input>標(biāo)簽的value屬性值，但如果表單初始加載時，需要在文本框和密碼框中顯示默認(rèn)的信息，也可以設(shè)置該標(biāo)簽的value屬性值。提交按鈕和重置按鈕通常無需包含向目的頁提交的信息，因此無需設(shè)置<input>標(biāo)簽的name屬性值。3.1.4表單注意：表單是以請求參數(shù)名-值對兒的形式向目的頁提交信息的，其中參數(shù)名即是各<input>標(biāo)簽中name屬性的值，參數(shù)值即是各<input>標(biāo)簽中value屬性的值，需要特別說明的是文本框和密碼框的value屬性值即是在文本框和密碼框中輸入的內(nèi)容，若<input>標(biāo)簽中未設(shè)置name屬性值則不會生成提交信息。3.1.4表單3.2.1JavaScript基本語法3.2.2在頁面上嵌入JavaScript3.2.3JavaScript處理HTML事件3.2JavaScript基礎(chǔ)JavaScript變量是用于存放信息的“容器”，為其命名必須遵循以下的規(guī)則：變量名由字母、下劃線、$或數(shù)字組成；變量名必須以字母、$和_開頭；變量名稱對大小寫敏感，例如y和Y就是不同的變量；變量名不能以JavaScript系統(tǒng)關(guān)鍵字及保留字命名。變量的聲明：3.2.1JavaScript基本語法

1、變量var

變量名[=變量值];示例1：示例2：3.2.1JavaScript基本語法

1、變量varname="Lily";//聲明變量name并賦值varname; //聲明變量namename="Lily";//為name賦值字符串是使用單引號或雙引號括起來的字符序列，用字符串為變量賦值，則該變量即為字符串類型。示例3：根據(jù)需要，我們可以在字符串中嵌套使用單、雙引號，只要將字符串括起來的引號成對匹配即可。示例4：3.2.1JavaScript基本語法

2、數(shù)據(jù)類型——(1)字符串類型varname1="Lily";varname2='Lucy';varanswer1="Mynameis'Lily'";varanswer12='Mynameis"Lucy"';JavaScript只有一種數(shù)值類型，不分整型或非整型，并且支持使用科學(xué)計數(shù)法表示數(shù)值。示例5：3.2.1JavaScript基本語法

2、數(shù)據(jù)類型——(2)數(shù)值類型varx=1;//聲明變量x并賦值為1vary=2.5;//聲明變量y并賦值為2.5varz=2.5e3;//聲明變量z并賦值為2500在JavaScript中可以使用布爾類型表示邏輯上的真和假，因此布爾類型的數(shù)據(jù)只能有兩個值：true或false。示例6：3.2.1JavaScript基本語法

2、數(shù)據(jù)類型——(3)布爾類型varflag=true;//聲明變量flag并賦值為true創(chuàng)建方法1：先創(chuàng)建數(shù)組，再對每個數(shù)組元素賦值。創(chuàng)建方法2：在創(chuàng)建數(shù)組對象的時候賦值。創(chuàng)建方法3：不創(chuàng)建變量，直接賦值。3.2.1JavaScript基本語法

2、數(shù)據(jù)類型——(4)數(shù)組varnames=newArray();//聲明并創(chuàng)建一個數(shù)組namesnames[0]="Lily";//為數(shù)組names的第一個元素賦值names[1]="Lucy";//為數(shù)組names的第二個元素賦值varnames=newArray("Lily","Lucy");varnames=["Lily","Lucy"];在JavaScript中，數(shù)組元素的類型并不要求必須相同，也就是說，我們可以在同一數(shù)組的各數(shù)組元素中存入不同類型的數(shù)據(jù)。注意：在JavaScript中無論采用什么方法創(chuàng)建數(shù)組時，數(shù)組的元素個數(shù)從理論上而言是無限的，因此不會出現(xiàn)數(shù)組訪問越界的問題。3.2.1JavaScript基本語法

2、數(shù)據(jù)類型——(4)數(shù)組varinformations=["Lily",18,true];JavaScript對象是擁有屬性和方法的數(shù)據(jù)，也可以將對象視為一個可存放信息特殊的變量，因為一個對象可以包含多個屬性，每個屬性可視為一個單獨的變量。對象的定義語法格式：示例113.2.1JavaScript基本語法

2、數(shù)據(jù)類型——(5)對象var對象名={屬性名1:屬性值1,屬性名2:屬性值2,……};varcustomer={name:"Lily",age:18,vip:true}; 對象屬性的尋址方式方式1：對象名.屬性名方式2：對象名["屬性名"]示例12:3.2.1JavaScript基本語法

2、數(shù)據(jù)類型——(5)對象varcustomer={name:"Lily",age:18,vip:true};varname=;varage=customer["age"];基本語法格式3.2.1JavaScript基本語法

3、結(jié)構(gòu)語句——(1)if語句if(條件){代碼段1}else{代碼段2}示例1:示例2：3.2.1JavaScript基本語法

3、結(jié)構(gòu)語句——(1)if語句if(x>=0){y=x;//y值為x的值}else{y=-x;//y值為x的相反數(shù)}if(x<0){

alert("x不能為負(fù)數(shù)！");}if(x>0){alert("x是正數(shù)！");}elseif(x==0){alert("x是0！");

}else{alert("x是負(fù)數(shù)");}示例3:基本語法格式3.2.1JavaScript基本語法

3、結(jié)構(gòu)語句——(2)switch語句switch(條件表達(dá)式){

case表達(dá)式1:語句塊1

break;……

case表達(dá)式n:語句塊n

break;

default:語句塊n+1}注意：case分支若包含語句塊則最后必須使用break語句，這樣才能在本case分支的語句塊執(zhí)行結(jié)束后跳出整個switch語句，從而阻止代碼自動地向下一個case分支運行。在一個switch語句中的所有case表達(dá)式的值必須互不相同，否則就會出現(xiàn)二義性。case分支中可以沒有語句塊，此時多個case分支共享同一語句塊，沒有語句的case分支可省略break語句。3.2.1JavaScript基本語法

3、結(jié)構(gòu)語句——(2)switch語句示例4:3.2.1JavaScript基本語法

3、結(jié)構(gòu)語句——(1)if語句示例5:switch(d){case6:alert("今天是星期六");break;case7:alert("今天是星期日");

break;default: alert("今天是工作日");}switch(d){case1:case2:case3:case4:case5:alert("今天是工作日");

break;case6:alert("今天是星期六");

break;case7:alert("今天是星期日");

break;default: alert("輸入數(shù)據(jù)錯誤");}基本語法格式示例6：3.2.1JavaScript基本語法

3、結(jié)構(gòu)語句——(3)while語句while(表達(dá)式){

語句塊}vari=1,sum=0;while(i<=5){//當(dāng)i<=5時，執(zhí)行循環(huán)

sum=sum+i;//將i值累加到sum中i++;//i值加1}基本語法格式示例7：3.2.1JavaScript基本語法

3、結(jié)構(gòu)語句——(4)do-while語句do{

語句塊}while(表達(dá)式);vari=1,sum=0;do{sum=sum+i;//將i值累加到sum中i++;//i值加1}while(i<=5);//當(dāng)i<=5時，執(zhí)行循環(huán)基本語法格式示例8：3.2.1JavaScript基本語法

3、結(jié)構(gòu)語句——(5)for語句for

(表達(dá)式

1;表達(dá)式

2;表達(dá)式3){

語句塊}varsum=0;for(vari=1;i<=5;i++){sum=sum+i;//將i值累加到sum中}break語句主要用于循環(huán)語句或switch語句中，其功能是終止其所在的循環(huán)語句或switch語句的執(zhí)行，然后順序執(zhí)行下面的后續(xù)語句。語法格式：break;示例9：3.2.1JavaScript基本語法

3、結(jié)構(gòu)語句——(6)break語句varsum=0;for(vari=1;i<=5;i++){

if(i==3)break;//當(dāng)i為3時跳出循環(huán)sum=sum+i;//將i值累加到sum中}continue語句是一種只能在循環(huán)語句中使用的轉(zhuǎn)移語句，其功能是中斷循環(huán)體語句的本次執(zhí)行，然后開始下一次循環(huán)。語法格式：continue;示例10：3.2.1JavaScript基本語法

3、結(jié)構(gòu)語句——(7)continue語句varsum=0;for(vari=1;i<=5;i++){

if(i==3)continue;//當(dāng)i為3時結(jié)束本次循環(huán)sum=sum+i;//將i值累加到sum中}JavaScript函數(shù)是執(zhí)行特定任務(wù)的代碼塊。定義函數(shù)語法格式：示例11：3.2.1JavaScript基本語法

4、函數(shù)function函數(shù)名(參數(shù)名1,參數(shù)名2,……){語句塊}functionmultiple(x,y){

returnx*y; }調(diào)用函數(shù)的語法格式：示例12：3.2.1JavaScript基本語法

4、函數(shù)函數(shù)名(參數(shù)值1,參數(shù)值2,……);functionmyFunction(){

varmul; //定義變量//調(diào)用函數(shù)multiple并設(shè)置傳入值分別為2和3mul=multiple(2,3);//向客戶端輸出變量mul的值

document.write("mul="+mul); }方式1：將JavaScript代碼直接放入當(dāng)前HTML頁面中，此時，所有的Javascript代碼必須位于<script>與</script>標(biāo)簽之間，而<script>與</script>標(biāo)簽對必須放置在<html></html>標(biāo)簽對中。方式2：將JavaScript代碼放在獨立的文件（文件后綴為.js）中，然后在HTML頁面中設(shè)置<script>標(biāo)簽屬性，將JavaScript腳本文件包含在本頁面中。3.2.2在頁面上嵌入JavaScript【例3-2-1】：在HTML頁面中直接嵌入JavaScript代碼<html><head><metacharset="UTF-8"><title>JavaScript內(nèi)嵌示例</title></head><body></body><scripttype="text/javascript">functionmultiple(x,y){returnx*y; //返回兩數(shù)之積}

functionmyFunction(){varmul; //定義變量mul=multiple(2,3);//調(diào)用函數(shù)multiple()document.write("mul="+mul); //向客戶端輸出變量mul的值}myFunction(); //調(diào)用函數(shù)myFunction()</script></html>step1：在Web項目中找到要放入JavaScript文件的文件夾，右鍵單擊該文件夾，在彈出的快捷菜單中選擇【New】→【Other…】命令，打開“新建”窗口。在Eclipse中創(chuàng)建JavaScript腳本文件的過程右鍵單擊文件夾step2：在“新建”窗口中，選擇JavaScript組中的“JavaScriptSourceFile”選項，并點擊【Next】按鈕，打開“新建JavaScript文件”窗口。在Eclipse中創(chuàng)建JavaScript腳本文件的過程step3：在“新建JavaScript文件”窗口中，輸入文件名稱（注意保證文件后綴為.js），保持其它設(shè)置項的默認(rèn)值不變，然后點擊【Finish】按鈕，完成JavaScript文件的創(chuàng)建。在Eclipse中創(chuàng)建JavaScript腳本文件的過程【例3-2-2】：在HTML頁面中使用外部JavaScript文件functionmultiple(x,y){returnx*y; //返回兩數(shù)之積}

functionmyFunction(){varmul; //定義變量mul=multiple(2,3);//調(diào)用函數(shù)multiple()document.write("mul="+mul); //向客戶端輸出變量mul的值}myJS.js【例3-2-2】：在HTML頁面中使用外部JavaScript文件<html><head><metacharset="UTF-8"><title>JavaScript外部文件使用示例</title></head><body></body><scriptsrc="myJS.js"></script><scripttype="text/javascript">myFunction(); //調(diào)用myJS.js文件中的函數(shù)myFunction()</script></html>exampleForJS2.html注意：外部獨立的JS文件中不能包含<script>標(biāo)簽。在HTML頁面文件中，不能在同一個<script>標(biāo)簽對中既包含外部獨立JS文件又包含內(nèi)嵌JavaScript代碼。3.2.2在頁面上嵌入JavaScriptHTML事件是發(fā)生在HTML元素上的事情，它可以是瀏覽器行為，也可以是用戶行為。處理某HTML事件，需要在相應(yīng)HTML標(biāo)簽中添加對應(yīng)事件屬性并設(shè)置屬性值為相應(yīng)的JS腳本。3.2.3JavaScript處理HTML事件事件名事件屬性名事件描述點擊事件onclick用戶點擊某個HTML元素鼠標(biāo)移入事件onmouseover用戶移動鼠標(biāo)置于某個HTML元素上鼠標(biāo)移出事件onmouseout用戶將位于某個HTML元素上的鼠標(biāo)移出該元素改變事件onchange某個HTML元素發(fā)生改變鍵盤按鍵按下事件onkeydown用戶按下鍵盤上的某個按鍵加載頁面事件onload瀏覽器已完成當(dāng)前頁面的加載【例3-2-3】：在HTML頁面中對鼠標(biāo)點擊事件的處理<html><head><metacharset="UTF-8"><title>鼠標(biāo)點擊事件示例</title></head><body><scripttype="text/javascript">functionmyFuction(obj){varstr=obj.value;//讀取obj對象的value屬性值alert("點擊"+str+"!");//在客戶端彈出提示框，顯示拼接字符串}</script><inputtype="button"onclick="alert('點擊按鈕1!')"value="按鈕1"/><inputtype="button"onclick="myFuction(this)"value="按鈕2"/></body></html>【例3-2-4】：在HTML頁面中對鼠標(biāo)移入和移出事件的處理<body><scripttype="text/javascript">functionmyFuction(flag){varobj=document.getElementById("demo");if(flag=="over"){obj.innerHTML="鼠標(biāo)位于段落上!";}else{obj.innerHTML="鼠標(biāo)移出段落!";} }</script><pid="demo"onmouseover="myFuction('over')"onmouseout="myFuction('out')">JavaScript能改變HTML元素的內(nèi)容。</p></body>【例3-2-5】：在HTML頁面中對元素內(nèi)容改變事件的處理<html><head><metacharset="UTF-8"><title>元素改變事件示例</title></head><body><scripttype="text/javascript">functionmyFuction(){varobj=document.getElementById("demo");alert("姓名："+obj.value);//彈出提示框，顯示文本框中輸入的內(nèi)容

}</script>姓名：<inputid="demo"type="text"onchange="myFuction()"></body></html>層疊樣式表(CascadingStyleSheets)是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。3.3CSS基礎(chǔ)3.3.1CSS基礎(chǔ)語法3.3.2CSS三種嵌入形式3.3.3CSS選擇器3.3CSS基礎(chǔ)CSS規(guī)則語法示例3.3.1CSS基礎(chǔ)語法選擇器名{屬性名1:值1;……;屬性名n:值n;}/*h1元素內(nèi)的文字顏色為紅色，字體大小為14像素*/h1{color:red;font-size:14px;}注意：如果屬性值是顏色，除了可以設(shè)置已有的顏色名稱外，還可以設(shè)置屬性值為顏色的十六進(jìn)制編碼。如果屬性值為包含空格的若干單詞的集合，則需要給屬性值加引號。3.3.1CSS基礎(chǔ)語法/*h1元素內(nèi)的文字顏色為紅色，字體大小為14像素*/h1{color:#ff0000;font-size:14px;}/*p元素內(nèi)的文字樣式為'sansserif'*/p{font-family:"sansserif";}注意：是否包含空格或換行不會影響CSS在瀏覽器的工作效果，因此為了增強(qiáng)樣式定義的可讀性，建議每行只描述一個屬性，但不要在屬性值與單位之間留有空格。CSS對大小寫不敏感，但如果涉及到與HTML文檔一起工作的話，class和id名稱對大小寫是敏感的。3.3.1CSS基礎(chǔ)語法h1{color:#ff0000;/*h1元素內(nèi)的文字顏色為紅色*/font-size:14px;/*h1元素內(nèi)的字體大小為14像素*/}注意：可以對選擇器進(jìn)行分組，被分組的選擇器可以共享相同的聲明。子元素會繼承父元素的屬性，除非子元素單獨應(yīng)用了樣式。3.3.1CSS基礎(chǔ)語法h1,h2,h3,h4,h5,h6{/*規(guī)則適用于h1~h6元素*/color:#ff0000;/*元素內(nèi)的文字顏色為紅色*/}方式1：內(nèi)聯(lián)樣式，需要在相關(guān)的標(biāo)簽內(nèi)設(shè)置style屬性的值。方式2：內(nèi)部樣式表，使用<style></style>標(biāo)簽組在靜態(tài)網(wǎng)頁頭部包含所有的CSS規(guī)則。方式3：外部樣式表，將所有CSS規(guī)則放置在單獨的外部樣式文件(后綴為.css)中，并在當(dāng)前靜態(tài)網(wǎng)頁中使用<link>標(biāo)簽鏈接外部樣式文件。3.3.2CSS三種嵌入形式【例3-3-1】：在HTML頁面中使用內(nèi)聯(lián)樣式的CSS設(shè)置頁面樣式<html><head><metacharset="UTF-8"><title>CSS內(nèi)聯(lián)樣式示例</title></head><body><h1>這是默認(rèn)樣式的一級標(biāo)題</h1><h1style="color:red;font-size:14px;">這是重新設(shè)置樣式的一級標(biāo)題</h1></body></html>【例3-3-2】：在HTML頁面中使用CSS內(nèi)部樣式表設(shè)置頁面樣式<html><head><metacharset="UTF-8"><title>CSS內(nèi)部樣式表示例</title>

<styletype="text/css">h1{color:#ff0000;font-size:14px;}p{margin-left:20px;font-size:20px;}</style></head><body><h1>這是重新設(shè)置樣式的一級標(biāo)題</h1><p>這是重新設(shè)置樣式的段落</p></body></html>step1：在Web項目中找到要放入JavaScript文件的文件夾，右鍵單擊該文件夾，在彈出的快捷菜單中選擇【New】→【Other…】命令，打開“新建”窗口。在Eclipse中創(chuàng)建外部樣式表文件的過程右鍵單擊文件夾step2：在“新建”窗口中，選擇Web組中的“CSSFile”選項，并點擊【Next】按鈕，打開“新建CSS文件”窗口。在Eclipse中創(chuàng)建外部樣式表文件的過程step3：在“新建CSS文件”界面中，輸入文件名稱（注意保證文件后綴為.css），保持其它設(shè)置項的默認(rèn)值不變，然后點擊【Finish】按鈕，完成CSS文件的創(chuàng)建。在Eclipse中創(chuàng)建外部樣式表文件的過程【例3-3-3】：在HTML頁面中使用CSS外部樣式表設(shè)置頁面樣式@CHARSET"UTF-8";h1{color:#ff0000;font-size:14px;}p{margin-left:20px;font-size:20px;}myStyle.css<html><head><metacharset="UTF-8"><title>CSS外部樣式表示例</title><linkrel="stylesheet"type="text/css"href="myStyle.css"/></head><body><h1>這是重新設(shè)置樣式的一級標(biāo)題</h1><p>這是重新設(shè)置樣式的段落</p></body></html>exampleForCSS3.html注意：如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式中被繼承過來，也就是說內(nèi)聯(lián)樣式的作用強(qiáng)于內(nèi)部樣式表，內(nèi)部樣式表的作用強(qiáng)于外部樣式表。3.3.2CSS三種嵌入形式h3{color:red;text-align:left;font-size:8px;}外部樣式表h3{text-align:right;font-size:20px;}內(nèi)部樣式表h3{color:red;text-align:right;font-size:20px;}實際樣式內(nèi)部樣式表外部樣式表【例3-3-4】：在HTML頁面中使用三種CSS的嵌入方式設(shè)置頁面樣式@CHARSET"UTF-8";h3{color:red; /*元素內(nèi)的文字顏色為紅色*/text-align:left;/*元素內(nèi)的文字靠左排列*/font-size:8pt;/*元素內(nèi)的文字大小為8像素*/}myStyle.css【例3-3-4】：在HTML頁面中使用三種CSS的嵌入方式設(shè)置頁面樣式<html><head><metacharset="UTF-8"><title>CSS多種嵌入形式示例</title><linkrel="stylesheet"type="text/css"href="myStyle.css"/><stylety

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

Java Web編程技術(shù)：靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ)

文檔簡介

溫馨提示

最新文檔

評論

Java Web編程技術(shù)：靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ)

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔