Web應用開發(fā)-網(wǎng)頁設計基礎課件_第1頁
Web應用開發(fā)-網(wǎng)頁設計基礎課件_第2頁
Web應用開發(fā)-網(wǎng)頁設計基礎課件_第3頁
Web應用開發(fā)-網(wǎng)頁設計基礎課件_第4頁
Web應用開發(fā)-網(wǎng)頁設計基礎課件_第5頁
已閱讀5頁，還剩267頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

Web應用開發(fā)——網(wǎng)頁設計基礎Web應用開發(fā)——網(wǎng)頁設計基礎1第2章網(wǎng)頁設計基礎2.1HTML與XML2.2利用CSS布局網(wǎng)頁2.3JavaScript客戶端編程

第2章網(wǎng)頁設計基礎2.1HTML與XML22.1HTML與XML超文本標記語言（HyperTextMarkupLanguage，簡稱HTML）是Web頁面的標記性語言，通過一定的格式標記文本及圖像等元素，使之在瀏覽器中顯示出不同內(nèi)容和風格的網(wǎng)頁。2.1HTML與XML超文本標記語言（Hyper32.1.1HTML文檔的基本結構HTML文檔擁有一種“嵌套”結構4html標簽定義一個網(wǎng)頁head標簽定義網(wǎng)頁的頭部body標簽定義網(wǎng)頁的主體p標簽啟動一個段落title標簽定義網(wǎng)頁的標題2.1.1HTML文檔的基本結構HTML文檔擁有一種“嵌4HTML文檔的基本結構5HTML文檔的基本結構55頁面標記文字和段落標記超鏈接標記列表標記表格標記表單標記2.1.2HTML文檔的主要標記頁面標記2.1.2HTML文檔的主要標記6（1）頁面標記<HTML><HEAD>

<title>...</title><link>...</link> <meta>...</meta> <script>...</script></HEAD><BODYbackground=#bgcolor=#text=#link=#alink=#vlink=#>......</BODY></HTML> （1）頁面標記<HTML>7背景色彩和文字色彩<bodybgcolor=#text=#link=#alink=#vlink=#>bgcolor---背景色彩text---非可鏈接文字的色彩link---可鏈接文字的色彩alink---正被點擊的可鏈接文字的色彩vlink---已經(jīng)點擊(訪問)過的可鏈接文字的色彩#=rrggbb色彩是用16進制的紅－綠－藍(red-green-blue,RGB)值來表示。

16進制的數(shù)碼有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.背景色彩和文字色彩8（2）文字和段落標記標題字體

＜h#＞...＜/h#＞

HTMLheadingsaredefinedwiththe<h1>to<h6>tags.#=1~6；h1為最大字，h6為最小字字體標記

＜font＞...＜/font＞

(1)字體大?。糵ontsize=#＞...＜/font＞

(2)文字顏色＜fontcolor=#rrggbb＞...＜/font＞

(3)粗體字＜b＞...＜/b＞(4)斜體字＜i＞...＜/i＞

（2）文字和段落標記標題字體＜h#＞...＜/h#＞9顏色名稱和對應的十六進制數(shù)碼Black="#000000"Green="#008000"Silver="#C0C0C0"Lime="#00FF00"Gray="#808080"Olive="#808000"White="#FFFFFF"Yellow="#FFFF00"Maroon="#800000"Navy="#000080"Red="#FF0000"Blue="#0000FF"Purple="#800080"Teal="#008080"Fuchsia="#FF00FF"Aqua="#00FFFF"顏色名稱和對應的十六進制數(shù)碼Green="#0010給文本設置一些特殊格式，如粗體、斜體、下劃線、上下標等。

（3）字體樣式標記物理樣式標記

屬性說明屬性說明<B>…</B>黑體字<SUP>…</SUP>上標<I>…</I>斜體字<SUB>…</SUB>下標<U>…</U>加下劃線<SMALL>…</SMALL>小字體<S>…</S>加刪除線<BIG>…</BIG>大字體出邏輯樣式標記

屬性說明<EM>…</EM>輸出需要強調(diào)的文本（通常是斜體加黑體）<STRONG>…</STRONG>輸出加重文本（通常也是斜體加黑體）<CITF>…</CITF>輸出引用方式的字體，通常是斜體<DEL>…</DEL>為文本加上刪除線給文本設置一些特殊格式，如粗體、斜體、下劃線、上下標等。（11（4）文字布局分段和換行標記

<p>

段落(可以看作是空行)

<br>換行例如：你好嗎？<p>很好。你好嗎？<br>很好。文字的對齊(Alignment)

<palign=#>...</p>

<center>...</center>#=left,center,right

（4）文字布局分段和換行標記12DIV標記

DIV標記用于為文檔分節(jié)，以便為文檔的不同部分應用不同的段落格式，其標記為<DIV>和</DIV>。單獨的DIV標記不能完成任何工作，必須與align屬性聯(lián)合使用。位于DIV標記符中的多段文本將被認為是一個節(jié)，可為它們設置一致的對齊格式。<DIValign=left|center|right>文本或圖像</DIV>

水平線標記

水平線標記<hr>在網(wǎng)頁中添加一條水平線，將不同的信息分開。<hralign=對齊方式color=顏色size=粗細width=長度noshade>DIV標記DIV標記用于為文檔分節(jié)，以便為文檔13內(nèi)部鏈接

<ahref=”1.htm”>請單擊查看1.htm中的內(nèi)容</a>

外部鏈接

<ahref="/">鏈接到主頁</a><ahref="telnet://">遠程登錄</a>

書簽鏈接

（1）在同一頁面中，要使用書簽名：<ahref="#書簽名">超鏈接標題名稱</a>（2）在不同頁面之間，要使用鏈接的URL地址：<ahref="URL地址#書簽名">超鏈接標題名稱</a>(5)超鏈接標記(Link)(5)超鏈接標記(Link)14（6）列表標記（ListTags）無序列表無序列表使用的一對標簽是<ul></ul>，每一個列表項前使用<li>。其結構如下：<ultype=符號類型>

<li>第一項

<li>第二項

<li>第三項

</ul><ul>

<li>Today

<li>Tommorow</ul>TodayTommorow

（6）列表標記（ListTags）無序列表無序列表使用的一15有序列表有序列表使用的一對標簽是<ol></ol>，每一個列表項前使用<li>。其結構如下所示：

<oltype=符號類型start=起始編號>

<li>第一項

<li>第二項

<li>第三項

</ol>有序列表的type屬性取值取值說

明type=1列表項用數(shù)字編號（1,2,3...），默認值type=A列表項用大寫字母編號（A,B,C...）type=a列表項用小寫字母編號（a,b,c...）type=I列表項用大寫羅馬數(shù)字編號（Ⅰ,Ⅱ,Ⅲ...）type=i列表項用小寫羅馬數(shù)字編號（i,ii,iii...）有序列表有序列表使用的一對標簽是<ol></ol>，每一個列16定義列表(Definitionlists)定義性列表可以用來給每一個列表項再加上一段說明性文字，說明獨立于列表項另起一行顯示。列表項使用<DT>標明，說明性文字使用<DD>表示。

<DL>

<DT>第一項<DD>敘述第一項的定義

<DT>第二項<DD>敘述第二項的定義

<DT>第三項<DD>敘述第三項的定義

</DL>定義列表(Definitionlists)定義性列表可以17例2-1列表標記的使用示例

<html><head><title>列表標記示例</title></head><body><oltype=1><li><u>無序列表</u><ultype=circle> <li>Photoshop <li>Illustrator <li>CorelDraw</ul><li><u>有序列表</u><oltype=a> <li>Photoshop <li>Illustrator <li>CorelDraw</ol><li><u>定義列表</u><dl><dt>Photoshop<dd>Adobe公司的圖像處理軟件

<dt>Illustrator<dd>Adobe公司的矢量繪圖軟件

<dt>CorelDraw<dd>Corel公司的圖形圖像軟件

</dl></ol><body></html>例2-1列表標記的使用示例<html>18（7）表格標記（TableTags）

表格的基本語法

定義表格<table>...</table>

定義表格的標題<caption>…</caption>

定義表格行<tr>...</tr>定義表頭<th>...</th>定義表的單元格<td>...</td>

設定表格的屬性【1】設定邊框的寬度＜tableborder=#＞

【2】設定邊框的顏色＜tablebordercolor=#rrggbb＞【3】調(diào)整表格寬度，高度＜tablewidth=#height=#＞

【4】設定表格的背景色＜tablebgcolor=#rrggbb＞（7）表格標記（TableTags）表格的基本語法19一個最簡單的帶邊框的表格<tableborder><tr><th>Food</th><th>Drink</th><th>Sweet</th></tr><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>X</td><td>Y</td><td>Z</td></tr></table>

FoodDrinkSweetABCXYZ一個最簡單的帶邊框的表格FoodDrinkSweetABC20表格---跨多行、多列的表元(TableSpan)（1）跨多列的表元

<thcolspan=#> <tableborder> <tr><thcolspan=3>MorningMenu</th> <tr><th>Food</th><th>Drink</th><th>Sweet</th> <tr><td>A</td><td>B</td><td>C</td> </table>表格---跨多行、多列的表元(TableSpan)21（2）跨多行的表元

<throwspan=#>

<tableborder> <tr><throwspan=3>MorningMenu</th><th>Food</th> <td>A</td></tr><tr><th>Drink</th><td>B</td></tr> <tr><th>Sweet</th><td>C</td></tr> </table>（2）跨多行的表元<throwspan=#>22（9）表單標記（FormTags）表單是用戶和Web應用程序、Web數(shù)據(jù)庫進行交互的界面。#=text,password,checkbox,radio,submit,reset<FORMaction=腳本URL

Method=Get/Post><inputtype=#

name=##

value=…>……</FORM>action屬性指明處理數(shù)據(jù)的程序的URL地址method屬性指明數(shù)據(jù)提交的方法（9）表單標記（FormTags）表單是用戶和Web應用程23表單信息傳遞給服務器的兩種方式：GET/POSTGET方法:將信息封裝在一個URL中提交給Server(數(shù)據(jù)長度受限)。/mypath/myscript.pl?username=v1&password=v2

POST方法:將信息封裝在一個MessageBody中提交給服務器(表單大小不受限)。表單信息傳遞給服務器的兩種方式：GET/POSTGET方24復選框<inputtype=checkboxname=名稱

value=值

checked>

單選框<inputtype=radio

name=名稱

value=值

checked>

文本域單行文字輸入

<input

type=textname=名稱value=初值>密碼輸入

<input

type=password

name=名稱value=初值>多行文本域

<textareaname=名稱

rows=文本域行數(shù)cols=文本域列寬><textarea>選擇域復選框單選框文本域單行文字輸入25<selectname=菜單名稱size=選項個數(shù)multiple><optionvalue=選項值1selected>顯示內(nèi)容1</option><optionvalue=選項值2>顯示內(nèi)容2</option>……<optionvalue=選項值n>顯示內(nèi)容n</option></select>按鈕域（1）提交按鈕：單擊提交按鈕，可以實現(xiàn)表單內(nèi)容的提交。<inputtype=submitname=名稱value="提交”>（2）重置按鈕：單擊重置按鈕，可以清除表單中已經(jīng)輸入的內(nèi)容。<inputtype=resetname=名稱value=”重置”>（3）普通按鈕：使用普通按鈕可以通過調(diào)用函數(shù)完成其他操作。<inputtype=buttonname=名稱value=文本>

菜單和列表域<selectname=菜單名稱size=選項個數(shù)mu26例：表單的綜合應用

<html><head><TITLE>表單的綜合應用</TITLE></head><body><formaction=""method="post">您的姓名：<inputname=″name″size=10type=text><br>您的個人主頁地址：<inputname=”URL”size=50type=textvalue="http://"> <textareaname="JianYi"clos="20"rows="5">您的建議</textarea><br>

您的密碼：<inputtype=passwordname=″password1″size=8><br>確認密碼：<inputtype=passwordname=″password2″size=8><br>所在城市：<select><optionselectedvalue="01">北京</option><optionvalue="02">上海</option></select><p>個人愛好：<inputtype="checkbox"name="c1">看書

<inputtype="checkbox"name="c2">打球

<inputtype="checkbox"name="c3">音樂<br>性別：<inputtype="radio"name="r1"checked>男

<inputtype="radio"name="r1">女<p><inputtype="submit"name="s1"value="確定"><inputtype="reset"name="s2"value="重寫"> </form></body></html>例：表單的綜合應用<html>272.1.3XML基本概念XML（eXtensibleMarkupLanguage，擴展性標識語言）是由萬維網(wǎng)聯(lián)盟W3C定義的，它提供了一種描述結構數(shù)據(jù)的格式。XML可以定義語義標記，是元標記語言。XML不像HTML那樣只能使用規(guī)定的標記，用戶可以自己定義需要的標記。XML文檔是純文本，可用文本編輯器創(chuàng)建。2.1.3XML基本概念XML（eXtensibleM28一個典型的XML文檔

<?xmlversion="1.0"encoding="ISO-8859-1"?><bookstore><bookcategory="COOKING"><titlelang="en">EverydayItalian</title><author>GiadaDeLaurentiis</author><year>2005</year><price>30.00</price></book><bookcategory="CHILDREN"><titlelang="en">HarryPotter</title><author>JK.Rowling</author><year>2005</year><price>29.99</price></book><bookcategory="WEB"><titlelang="en">LearningXML</title><author>ErikT.Ray</author><year>2003</year><price>39.95</price></book></bookstore>XML文檔樹例：一個XML文檔bookstore.xml一個典型的XML文檔

XML文檔樹例：一個XML文檔boo29XML實現(xiàn)內(nèi)容與形式的分離。XML擴展性比HTML強。XML的語法比HTML嚴格。XML具有良好的自描述性。

XML與HTML的不同

XML實現(xiàn)內(nèi)容與形式的分離。XML與HTML的不同302.1.4XML文檔的語法規(guī)則結構良好的（Well-formed）XML文檔

如果某個文檔符合XML語法規(guī)范，那么我們就說這個文檔是“結構良好”的文檔。有效的（Validate）XML文檔

指通過了DTD驗證的，具有良好結構的XML文檔。2.1.4XML文檔的語法規(guī)則結構良好的（Well-fo31XML語法元素：<標簽>文本內(nèi)容</標簽>聲明：<?xmlversion="1.0"encoding="gb2312"?>

XML聲明是告訴瀏覽器將要處理的文檔是XML文件。 version屬性指明文檔遵循哪個版本的XML規(guī)范。 encoding屬性指示文檔中字符使用的編碼標準。注釋：<!--這是一個XML注釋-->屬性：<salarycurrency="US$">25000</salary>32XML語法元素：<標簽>文本內(nèi)容</標簽>3232結構良好的XML文檔需滿足：下面是一個合理的HTML文檔，但卻完全不符合XML格式要求：<HTML><BODY><h2>西安歡迎你<br><fontcolor="red"size=4>西安歡迎你</FONT><hr><bsize=6><i>西安歡迎你</b></i></body>有且僅有一個根元素；所有的XML標記必須成對出現(xiàn)，將數(shù)據(jù)包圍在中間；所有的XML標記必須正確嵌套；XML標記對大小寫敏感；所有元素的屬性值必須加引號。結構良好的XML文檔需滿足：下面是一個合理的HTML文檔，但332.1.5驗證XML的有效性DTD（DocumentTypeDefinition，文檔類型定義）是對XML文檔所做的規(guī)范和約定，它指定了一系列XML文檔必須遵守的規(guī)則。DTD由許多約定和聲明語句構成，這些語句可以包含在XML文檔內(nèi)部，稱為內(nèi)部DTD，也可以獨立保存為一個文件，稱為外部DTD。2.1.5驗證XML的有效性DTD（DocumentT341）內(nèi)部DTD

下面就是一個帶有DTD的XML文檔：<?xmlversion="1.0"?><!DOCTYPEperson[<!ELEMENTperson(name,sex,age)><!ELEMENTname(#PCDATA)><!ELEMENTsex(#PCDATA)><!ELEMENTage(#PCDATA)>]><person><name>George</name><sex>Man</sex><age>28</age></person>當DTD被包含在

一個XML文檔中，那么它包裝在一個

DOCTYPE聲明里：<!DOCTYPE根元素

[元素聲明]>1）內(nèi)部DTD下面就是一個帶有DTD的XML文檔：352）外部DTD假設有一個XML文檔，它引用了一個外部DTD文檔person.dtd<?xmlversion="1.0"?><!DOCTYPEpersonSYSTEM"person.dtd"><person><name>George</name><sex>Man</sex><age>28</age></person>假如DTD位于XML文檔的外部，那么它應被封裝在一個DOCTYPE定義中：<!DOCTYPE根元素SYSTEM"文件名">2）外部DTD假設有一個XML文檔，它引用了一個外部DTD36XMLSchemaXMLSchema是W3C開發(fā)的一種新的約束XML文檔的模式，是一種特殊的XML文件，遵循XML的語法規(guī)則。與DTD相比，XMLSchema具有如下優(yōu)點：（1）可以更容易地描述文檔結構；（2）可以方便地定義數(shù)據(jù)類型；（3）可重用性。XMLSchemaXMLSchema是W3C開發(fā)的一種37W3C規(guī)定，一個XMLSchema文檔的根標記必須是“schema”，名稱空間必須是“/2001/XMLSchema”，下面是它的基本形式：<?xmlversion=”1.0”?><xs:schemaxmlns:xs=/2001/XMLSchema>

<xs:elementname=”標記名稱”type=”數(shù)據(jù)類型”></xs:element>

</xs:schema>XMLSchemaW3C規(guī)定，一個XMLSchema文檔的根標記必須是“sc382.1.6XML文檔的顯示單獨用XML不能顯示頁面，須使用格式化技術。顯示XML文件常見的有：CSS（CascadingStyleSheets）樣式表XSL（eXtensibleStylesheetLanguage）樣式語言2.1.6XML文檔的顯示單獨用XML不能顯示頁面，須使39CSS樣式表案例名稱：CSS樣式表程序名稱：greeting.css

GREETING{font-size:48pt;font-weight:bold;}案例名稱：調(diào)用CSS的XML文件程序名稱：greeting.xml

<?xmlversion="1.0"encoding="utf-8"?><?xml-stylesheettype="text/css"href="greeting.css"?><GREETING> Hello！</GREETING>CSS樣式表案例名稱：CSS樣式表案例名稱：調(diào)用CSS的40XSL樣式語言XSL是一種可以將XML文檔轉化成瀏覽器能夠識別的HTML文檔的語言。

XSL由兩部分組成：一是轉化XML文檔；二是格式化XML文檔。通常，XSL是通過將每一個XML元素“翻譯”為HTML元素，來實現(xiàn)這種轉換的。XSL樣式表自身也是一個XML文檔。XSL樣式語言XSL是一種可以將XML文檔轉化成瀏覽器能41XSL樣式表的例子程序名稱：persons.xml（調(diào)用XSL的XML文件）

<?xmlversion="1.0"encoding="gb2312"?><?xml-stylesheettype="text/xsl"href="8-08.xsl"?><persons><person><name>小張</name><age>25</age><tel>66666666</tel></person><person><name>小王</name><age>26</age><tel>66666667</tel></person></persons>XSL樣式表的例子程序名稱：persons.xml（調(diào)用42程序名稱：persons.xsl

（XSL文件）<?xmlversion="1.0"encoding="GB2312"?><xsl:stylesheetxmlns:xsl="/TR/WD-xsl"><xsl:templatematch="/"><HTML><BODY><CENTER><TABLEBORDER="1"><TR><TD>姓名</TD><TD>年齡</TD><TD>電話</TD></TR>

<xsl:for-eachselect="persons/person"><TR><TD><xsl:value-ofselect="name"/></TD><TD><xsl:value-ofselect="age"/></TD><TD><xsl:value-ofselect="tel"/></TD></TR>

</xsl:for-each></TABLE></CENTER></BODY></HTML></xsl:template></xsl:stylesheet>XSL文件以一個XML聲明開始。xsl:stylesheet元素聲明這是一個樣式表文件。<xsl:templatematch="/">語句表示XML的源文檔在當前目錄下。程序名稱：persons.xsl

（XSL文件）XSL文件43XHTML＝XML+HTMLXHTML(eXtensibleHyperTextMarkupLanguage)是“遵循XML規(guī)范”的HTML，比HTML要嚴格。使用DOCTYPE元素指定所遵循的標準：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">44XHTML＝XML+HTMLXHTML(eXtensible44遵循XHTML的基本規(guī)范標簽必須嚴格嵌套。標簽名和屬性名必須小寫。標簽必須嚴格配對，即使是空元素也要封閉。每個屬性都必須賦值，屬性值用雙引號括起來。45遵循XHTML的基本規(guī)范標簽必須嚴格嵌套。4545DHTML=

HTML/XHTML+CSS+JavaScriptDHTML（DynamicHTML）HTML/XHTML用于定義文檔結構CSS確定信息的外在表現(xiàn)形式JavaScript則用于編程以便動態(tài)操控CSS和HTML46DHTML=

HTML/XHTML+CSS+Ja462.2

利用CSS布局網(wǎng)頁CSS的基本概念：CSS是一種標記性語言，它用于控制網(wǎng)頁樣式，并允許將網(wǎng)頁內(nèi)容與顯示樣式分離，為網(wǎng)頁里的元素創(chuàng)建在瀏覽器中的表現(xiàn)樣式。CSS以HTML語言為基礎，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等。2.2利用CSS布局網(wǎng)頁CSS的基本概念：47例

一個簡單的HTML網(wǎng)頁（welcome.htm）<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><!--這里將要插入CSS--></head><body><h1>歡迎你到西安來！</h1><h3>歡迎你常到西安來?。?lt;/h3></body></html>2.2

利用CSS布局網(wǎng)頁例一個簡單的HTML網(wǎng)頁（welcome.htm）2.248在上例的HTML文件中加入CSS代碼（welcome_css.htm）

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css"><!–h1{font-style:italic;color:red;display:inline;}--></style></head><body><h1>歡迎你到西安來！</h1><h3style="color:black;font-weight:200">歡迎你常到西安來！！</h3></body></html>說明：注釋標簽<!---->是避免不支持CSS的瀏覽器將CSS內(nèi)容作為網(wǎng)頁的正文顯示出來在上例的HTML文件中加入CSS代碼（welcome_css49CSS的主要特點（1）體現(xiàn)了“內(nèi)容結構和格式控制相分離”的原則。（2）更容易控制頁面的布局。使用外部CSS文件可以方便地修改網(wǎng)頁的顯示效果而不必修改網(wǎng)頁本身；可以同時定義多個網(wǎng)頁的顯示風格。（3）可以制作出更小、下載更快的網(wǎng)頁。（4）可以更快更容易地維護及更新大量的網(wǎng)頁。（5）良好的瀏覽器兼容性。CSS的主要特點（1）體現(xiàn)了“內(nèi)容結構和格式控制相分離”的原50在HTML中使用CSS樣式表，主要分為三種方式：內(nèi)嵌樣式（InlineStyle）內(nèi)部樣式表（InternalStyleSheet）外部樣式表（ExternalStyleSheet）2.2.1在HTML中使用CSS

在HTML中使用CSS樣式表，主要分為三種方式：2.2.51在<body>內(nèi)部使用<style>定義CSS代碼

<標簽style=“CSS代碼”></標簽>例如：<html><body><h3style=“color:black;font-weight:200”>西安歡迎你</h3><Pstyle=”font-size:20pt;color:red”>西安歡迎你</p></body></html>521.內(nèi)嵌樣式2.內(nèi)部樣式表在<head></head>中編寫CSS代碼

<styletype=“text/css”>CSS規(guī)則</style>在<body>內(nèi)部使用<style>定義CSS代碼521.52使用<link>鏈接外部CSS文件（如mycss.css）

<linktype="text/css"rel="stylesheet"href="mycss.css"/>3.外部樣式表使用@import指令引入外部CSS文件<styletype="text/css">

@import"mycss.css";</style>4.使用@import指令引入外部CSS文件使用<link>鏈接外部CSS文件（如mycss.css）535.樣式表的優(yōu)先級順序

當同一個HTML元素被不止一個樣式定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中，它們的優(yōu)先順序如下：（1）瀏覽器缺省---優(yōu)先級最低（2）外部樣式表（3）內(nèi)部樣式表（位于<head>標簽內(nèi)部）（4）內(nèi)嵌樣式（在HTML元素內(nèi)部）---優(yōu)先級最高5.樣式表的優(yōu)先級順序當同一個HTML元素被不止一個542.2.2CSS基本語法<styletype="text/css">

/*這里是注釋*/

HTML標簽

{屬性:屬性值;屬性:屬性值……}</style>說明：

CSS內(nèi)部的注釋以“/*”開始，以“*/”結束；屬性的定義用“{}”包含；定義多個屬性時，各個屬性間用“；”分隔。例如：<style>h1{color:red;font-size:15pt;text-align:center}p{color:black;font-size:10pt;text-indent:1px}</style>2.2.2CSS基本語法<styletype="te55CSS文檔由一條或多條CSS規(guī)則組成通常CSS規(guī)則由三部分組成，分別是：

選擇器、屬性和屬性值。562.2.2CSS樣式規(guī)則的基本結構CSS文檔由一條或多條CSS規(guī)則組成562.2.2CSS56HTML頁面中的標記都是通過不同的CSS選擇器去控制的。常用的CSS選擇器主要包括以下幾種：HTML標簽選擇器（HTMLselector）類選擇器（Classselector）id選擇器（idselector）偽類選擇器（Pseudo-classesselector）派生選擇器（ContextualSelector）2.2.2CSS選擇器HTML頁面中的標記都是通過不同的CSS選擇器去控制的。常用57用于設定HTML文檔中指定標簽的顯示樣式58p

{ color:Red; font-size:25px;

}1.HTML標簽選擇器用于設定HTML文檔中指定標簽的顯示樣式58p1.HTML58

定義類：指定標簽.類名{屬性:屬性值;屬性:屬性值;......}或

.類名{屬性：屬性值；屬性：屬性值；......}引用類：<指定標簽class="類名">59 .red_large_text

{ color:Red; font-size:25px;

} <pclass="red_large_text">thisisaparagraph.</p> <aclass=“red_large_text”href=“">北京大學</a>定義一個類別選擇器在不同元素中應用類別選擇器在一個HTML文檔中，為同一HTML標簽指定不同的樣式，或同一樣式類被不同的HTML標簽元素所應用，可以使用類選擇器。2.類選擇器（Classselector）

定義類：指定標簽.類名{屬性:屬性值;屬性:屬性值;593.ID選擇器定義ID#ID名

{屬性：屬性值；屬性：屬性值}引用ID<標志id＝"ID名"><styleType="text/css">#a{color:red}#b{color:blue}</style><pid="a">段落1文字</p><pid="b">段落2文字</p>3.ID選擇器定義ID<styleType="text/60有一些特殊的HTML元素可以擁有不同的狀態(tài)。例如，用于定義超鏈接的<a>標簽就可以處于“未被訪問”、“已被訪問過”、“鼠標懸浮其上”等幾種狀態(tài)。對于這種元素，CSS使用偽類選擇器來給其不同的狀態(tài)定義樣式。4.偽類選擇器HTML元素:偽類名

{屬性:屬性值;屬性:屬性值;……}

例如，<styletype="text/css">a:link{color:#FF0000}/*未被訪問的鏈接紅色*/a:visited{color:#00FF00}/*已被訪問過的鏈接綠色*/a:hover{color:#FFCC00}/*鼠標懸浮在上的鏈接橙色*/a:active{color:#0000FF}/*鼠標點中激活鏈接藍色*/</style>有一些特殊的HTML元素可以擁有不同的狀態(tài)。例如，用于定義超615.派生選擇器

派生選擇器允許你根據(jù)文檔的上下文關系來確定某個標簽的樣式。父元素子元素{屬性:屬性值;屬性:屬性值;……}

例如，<html><head><styleTYPE="text/css">pem{color:red}</style></head><body><p>段落中用em強調(diào)的字是<em>紅色</em>

的</p><h3>標題中用em強調(diào)的字<em>不是紅色</em>

的</h3></body></html>5.派生選擇器派生選擇器允許你根據(jù)文檔的上下文關系來確定622.2.3樣式規(guī)則的繼承

樣式規(guī)則的繼承是指嵌套的HTML子元素會繼承外層的父元素所設置的樣式規(guī)則。例如，有這樣的CSS規(guī)則：

<styleTYPE="text/css">body{font-family:Verdana,sans-serif;}p{font-family:Times,"TimesNewRoman",serif;}</style>2.2.3樣式規(guī)則的繼承樣式規(guī)則的繼承是指嵌套的HTML632.2.4常見的樣式屬性字體屬性文本屬性背景屬性邊框屬性邊距屬性列表樣式屬性定位屬性(顯示、隱藏和移動)2.2.4常見的樣式屬性字體屬性641.字體屬性2.文本屬性1.字體屬性2.文本屬性653.背景屬性4.邊框屬性

3.背景屬性4.邊框屬性665.邊距屬性

例：設置元素的上下左右邊距（寬度相同）<HTML><HEAD><TITLE>CSS邊距屬性margin</TITLE><STYLEtype="text/css">.D1{border:1pxsolid#FF0000;}.D2{border:1pxsolidgray;}.D3{margin:1cm;border:1pxsolidgray;}</STYLE></HEAD><BODY><DIVCLASS="D1"><DIVCLASS="D2">沒有margin</DIV></DIV><P>上面的div沒有設置邊距屬性，僅設置了邊框屬性(border)</P><HR><P>下面的div設置了邊距屬性，邊距1厘米，表示上下左右邊距都為1厘米</P><DIVCLASS="D1"><DIVCLASS="D3">margin設為1cm</DIV></DIV></BODY></HTML>5.邊距屬性例：設置元素的上下左右邊距（寬度相同）676.列表樣式屬性

7.間隙屬性6.列表樣式屬性7.間隙屬性688.定位屬性8.定位屬性692.2.5CSS盒子模式大部分網(wǎng)頁都采用一種“塊”狀結構，塊之間可以相互嵌套，通過“塊”的排列與定位實現(xiàn)網(wǎng)頁的總體布局。這種塊狀布局通常采用DIV來進行編排，即CSS盒子模式(Boxmodel)。假設我們在一個平面上，把不同大小和顏色的盒子，以一定的順序和間隙擺放好，看到的就是如圖3-4所示的一個盒子（Box）。盒子由里向外依次是：content、padding、border、margin。2.2.5CSS盒子模式大部分網(wǎng)頁都采用一種“塊”狀結構，70CSS盒子模型

CSS將所有的HTML塊元素看成是一個盒子，每個盒子都由以下部分組成：內(nèi)容(content)：所有HTML元素的內(nèi)容，如文本和圖片。內(nèi)容區(qū)域的寬和高用width和height屬性來表示。間隙(padding)：設置元素內(nèi)容到元素邊框的距離,即圍繞content提供的空白。邊框(border)：設定一個元素的邊線。邊距(margin)：設置一個元素所占空間的邊緣到相鄰元素之間的距離。CSS盒子模型CSS將所有的HTML塊元素看成是一個盒子，712.3JavaScript客戶端編程2.3JavaScript客戶端編程72JavaScript是一種基于對象的腳本語言，主要用于開發(fā)Web應用程序的客戶端部分。JavaScript代碼由瀏覽器解釋執(zhí)行，實現(xiàn)一些數(shù)據(jù)驗證、頁面動態(tài)顯示等效果。JavaScript由Netscape公司開發(fā)，在1995年配合其瀏覽器推出，與Java并無本質聯(lián)系，但其語法與Java非常相近。2.3.1JavaScript概述2.3.1JavaScript概述73腳本的執(zhí)行原理應用服務器IEIE解析HTML標簽和JavaScript腳本從服務器端下載含JavaScript的頁面返回響應客戶端請求含JS的頁面發(fā)送請求1用戶輸入23腳本的執(zhí)行原理應用IEIE解析HTML標簽和JavaScri74JavaScript可以做什么控制文檔的外觀和內(nèi)容：通過Document對象的write方法可以在瀏覽器解析文檔時將HTML寫入文檔中。驗證表單輸入內(nèi)容：在客戶端驗證表單中的輸入，避免向服務器提交非法數(shù)據(jù)，節(jié)約服務器資源?？蛻舳擞嬎愫吞幚恚簭谋韱沃凶x取輸入數(shù)據(jù)并進行計算。設置和檢索cookie：將用戶名、賬號等信息持久地保存于Cookie中，在用戶下一次訪問網(wǎng)站時自動地讀取這些信息。捕捉用戶事件并相應地調(diào)整頁面：根據(jù)鍵盤或鼠標的動作，使頁面的某一部分變得可編輯。與服務器端應用程序進行交互：這是AJAX技術的基礎，可在后臺獲取服務器端數(shù)據(jù)，并更新局部頁面。JavaScript可以做什么控制文檔的外觀和內(nèi)容：通過Do75在網(wǎng)頁中嵌入JavaScript腳本

<html><head><title>腳本的基本結構</title><scripttype="text/javascript">varcount=0;document.write("淘寶網(wǎng)歡迎您！");for(i=0;i<5;i++)document.write("<h2>淘寶網(wǎng)歡迎您！</h2>");</script></head><body><h1>BODY部分的內(nèi)容</h1></body></html>如何使用JavaScript實現(xiàn)此部分內(nèi)容？示例：在網(wǎng)頁中嵌入JavaScript腳本<html>如何使用J76引入JavaScript腳本的方式有3種：使用<script>標記在HTML文檔中直接嵌入腳本在HTML文檔中鏈接JavaScript源文件在HTML標記內(nèi)添加JavaScript代碼引入JavaScript腳本的方式有3種：使用<script77方式1：在HTML文檔中直接嵌入腳本<html>

<head>

<scripttype="text/javascript">

…………

</script>

</head>

</html>方式1：在HTML文檔中直接嵌入腳本<html>

<head78方式2：在HTML文檔中鏈接JavaScript源文件<html>

<head>

<scriptsrc="test01.js"type="text/javascript"></script>

</head>

<body>

</body></html>document.write("Hello,world!");alert("Hello,world!");

示例：test01.html示例：test01.js<scripttype="text/javascript"src="文件名.js"></script>方式2：在HTML文檔中鏈接JavaScript源文件<ht79<html><head><title>在標記內(nèi)添加腳本測試</title></head><body> <buttononClick="alert('這是標記內(nèi)的腳本！')">

在標記內(nèi)添加腳本測試</button></body></html>方式3：在HTML標記中嵌入JavaScript腳本示例：test02.html<html>方式3：在HTML標記中嵌入JavaScript80在JavaScript中，常用的字符串輸入輸出方法有document對象的write()方法、window對象的alert()方法、文本框及消息輸入框等。消息框包括確認框、提示框等。使用JavaScript輸入與輸出信息document.write(“待輸出的字符串”);//向頁面輸出文本window.alert(“待輸出的字符串”);//彈出帶“確定”按鈕的對話框confirm(“待輸出的字符串”);//確認框prompt("提示文本","默認值")//提示輸入框在JavaScript中，常用的字符串輸入輸出方法有docu81<html><head><title>確認框示例</title><scriptlanguage="javascript">functiontest(){varvalue=confirm("確定要執(zhí)行該操作嗎？");alert("你的選擇是："+value);}</script></head><body>

確認框示例<buttononClick="test()">測試</button></body></html>示例：test04.html<html>示例：test04.html82<html><head><title>提示輸入框示例</title><scriptlanguage="javascript">functiontest(){varvalue=prompt("請輸入你的名字","佚名")alert("您的名字是："+value);}</script></head><body>

提示輸入框示例<buttononClick="test()">測試</button></body></html>示例：test05.html<html>示例：test05.html832.3.2JavaScript基本語法2.3.2JavaScript基本語法84函數(shù)異常處理控制語句運算符變量基本語法

1.基本語法示意函數(shù)異常處理控制語句運算符變量基本語法1.基本語法示意852.變量

varcount;count=5;定義變量賦值varx,y,z=10;varcount=10;同時聲明和賦值變量聲明多個變量變量名通常以字母，也可以以下劃線或者$符號開頭變量名大小寫敏感，即"x"和"X"為不同的變量2.變量varcount;count=5;86數(shù)據(jù)類型

string（字符串）類型：是用單引號或雙引號括起來的一個或幾個字符。number（數(shù)值）類型：可以是整數(shù)和浮點數(shù)。boolean（布爾）類型：值為true或者false。object（對象）類型：用于定義對象。數(shù)據(jù)類型string（字符串）類型：是用單引號或雙引號括起87運算符對一個或多個變量或值（操作數(shù)）進行運算，并返回一個新值根據(jù)所執(zhí)行的運算，運算符可分為以下類別字符串運算符：+算術運算符：+、-、*、/、%、++、--、-(求反)比較運算符：==、!=、>、>=、<、<=邏輯運算符：&&、||、！位運算符：&、|、～、∧、<<、>>、>>>賦值運算符：=、+=、-=、*=、/=、%=等3.運算符3.運算符884.流程控制if條件語句switch多分支語句if(條件){//JavaScript代碼;}else{//JavaScript代碼;}switch(表達式){case常量1: JavaScript語句1; break; case常量2: JavaScript語句2; break; ... default:JavaScript語句3;}4.流程控制if條件語句if(條件)switch(表達式)89<html><head><title>switch語句示例</title><scripttype="text/javascript">varnow=newDate();vardate=now.getDay();switch(date){case1:alert("今天是星期一");break;case2:alert("今天是星期二");break;case3:alert("今天是星期三");break;case4:alert("今天是星期四");break;case5:alert("今天是星期五");break;case6:alert("今天是星期六");break;default:alert("今天是星期日");}</script></head><body></body></html>示例：test06.html<html>示例：test06.html90for、while循環(huán)語句for(初始化;條件;增量){

語句集;

}while(條件){

語句集;}for、while循環(huán)語句for(初始化;條件;增量91<html><head><title>for循環(huán)語句打印乘法口訣</title><scripttype="text/javascript">for(vari=1;i<=9;i++){for(varj=1;j<=9;j++){if(j<=i){//只打印下三角

document.write("\t"+j+"*"+I+"="+(i*j));}}document.write("<br/>");//換行

}</script></head><body></body></html>示例：test07.html<html>示例：test07.html92Break語句出現(xiàn)在循環(huán)語句或switch語句內(nèi)，用于強行跳出循環(huán)或switch語句。在嵌套循環(huán)中，break語句只跳出當前循環(huán)體，并不跳出整個嵌套循環(huán)。Continue語句用在循環(huán)結構中，作用是跳過循環(huán)體內(nèi)剩余的語句而提前進入下一次循環(huán)。Break語句93sum=0；i=0；while（true）｛

i++；

if（i>100）break；

if（i%2==0）continue；

sum=sum+i；}示例：sum=0；示例：945.異常處理語句拋出異常：throw捕獲異常：try處理異常：catch清理現(xiàn)場：finally<scripttype=“text/javascript”><!--varn1=7;varn2=0;try{if(n2==0)thrownewError(“除0”);document.write(n1/n2);}catch(err){document.write(“出錯”+err.message);}finally{deleten1;deleten2;document.write(“<br/>操作完成”);}--></script>5.異常處理語句拋出異常：throw<scripttyp956.函數(shù)函數(shù)是已命名的代碼塊，其中的語句作為一個整體被調(diào)用執(zhí)行，且只有在調(diào)用時才會執(zhí)行。函數(shù)定義通常放在HTML文檔的<head>塊中，也可以放在其他位置，但要確保先定義后使用。函數(shù)可以由事件觸發(fā)調(diào)用，也可以由腳本中的代碼調(diào)用6.函數(shù)函數(shù)是已命名的代碼塊，其中的語句作為一個整體被調(diào)用執(zhí)96創(chuàng)建函數(shù)function

函數(shù)名(參數(shù)1,參數(shù)2，…){

語句體;}調(diào)用函數(shù)函數(shù)調(diào)用一般和表單元素的事件一起使用，格式為：

事件名＝“函數(shù)名”;functionshowHello(){varcount=document.myForm.txtCount.value;for(i=0;i<count;i++)document.write("<H2>HelloWorld</H2>");}<INPUTtype="submit"name="Submit"value="顯示HelloWorld"onClick="showHello()">表示單擊此按鈕時，調(diào)用函數(shù)showHello()執(zhí)行示例：按用戶輸入的次數(shù)顯示問候語創(chuàng)建函數(shù)functionshowHello()表示單擊此97說明：函數(shù)名是調(diào)用函數(shù)時所引用的名稱，在同一個腳本文件里函數(shù)名必須唯一。形式參數(shù)表用以接收傳入數(shù)據(jù)，在調(diào)用函數(shù)時，其實參的個數(shù)和類型必須與形參相一致。大括號中是函數(shù)的執(zhí)行語句，如果要返回一個值，則應該在最后一行使用return語句。說明：函數(shù)名是調(diào)用函數(shù)時所引用的名稱，在同一個腳本文件里函數(shù)98函數(shù)調(diào)用方式語句調(diào)用事件調(diào)用<scripttype="text/javascript">functionadd(a,b){return(a+b);}varresult=add(2,3);alert("a與b兩數(shù)之和為"+result);</script><html><head><title>javascript函數(shù)的事件調(diào)用</title><scripttype="text/javascript">functionshowmessage(){alert("這是JavaScript事件調(diào)用函數(shù)");}</script></head><body><inputtype="button"value="鼠標單擊事件調(diào)用函數(shù)"onClick="showmessa

溫馨提示

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

評論

0/150

提交評論