Web技術(shù)應(yīng)用基礎(chǔ)_第1頁(yè)
Web技術(shù)應(yīng)用基礎(chǔ)_第2頁(yè)
Web技術(shù)應(yīng)用基礎(chǔ)_第3頁(yè)
Web技術(shù)應(yīng)用基礎(chǔ)_第4頁(yè)
Web技術(shù)應(yīng)用基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩54頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

15.1XMLXML的產(chǎn)生

HTML遇到一些瓶頸問(wèn)題，促使可擴(kuò)展性標(biāo)記語(yǔ)言XML（eXtendableMarkupLanguage）的誕生。1996年7月XML工作小組在W3C（World

WideWebConsortium）的贊助下成立，于1998.1.10正式通過(guò)XML1.0規(guī)范。由于XML具有可擴(kuò)展性、結(jié)構(gòu)性、自我描述性的特點(diǎn)，并采用數(shù)據(jù)和樣式分離原則，使其在數(shù)據(jù)的管理、交換上擁有極為卓越的性能。2XML與HTML的比較

XML的開(kāi)發(fā)并不是取代HTML的，而是彌補(bǔ)其不足的。具體有以下差異：1.XML文件可以自定義標(biāo)記和屬性，HTML則不能。2.XML是屬于一般用途的標(biāo)記語(yǔ)言，而HTML則是一種特殊用途的標(biāo)記語(yǔ)言。3.XML著重于文件的結(jié)構(gòu)，而HTML則擅長(zhǎng)于文件的表現(xiàn)。4.XML文件可以有選擇地利用DTD或XML綱要（XMLSchema）來(lái)確認(rèn)文件的有效性，HTML則不可以。3XML文檔的類型兩種類型：良構(gòu)的XML文檔有效的XML文檔4良構(gòu)的XML文檔范例<?xmlversion="1.0"encoding="GB2312"?><resume><name>MichaelGuo</name><sex>Male</sex><birthday>1966.7</birthday><skill>ComputerGraphics,Datamining,Teacher</skill></resume>5良構(gòu)的XML文檔必須符合以下規(guī)則

所有的XML文檔都要有一個(gè)包含所有其他元素的根元素所有的元素必須有開(kāi)始標(biāo)記和結(jié)束標(biāo)記標(biāo)記必須正確嵌套，不能交叉大小寫敏感空白不能隨便放置所有的屬性值必須用引號(hào)（英文狀態(tài)的半角字符）括起來(lái)更詳細(xì)的規(guī)則，可參考W3C網(wǎng)站或相關(guān)書籍6

有效的XML文檔有效的XML文檔是遵照XML語(yǔ)法規(guī)則和文檔類型定義（DTD)規(guī)則構(gòu)造的一種文檔。DTD（DocumentTypeDefinition）是一段關(guān)于該文檔中數(shù)據(jù)的組織存放結(jié)構(gòu)的說(shuō)明。定義了某項(xiàng)數(shù)據(jù)應(yīng)該在哪出現(xiàn)規(guī)定了各種數(shù)據(jù)項(xiàng)之間的關(guān)系7內(nèi)部DTD范例resum-in.xml<?xmlversion="1.0"encoding="GB2312"?><!DOCTYPEresume[<!ELEMENTresume(name,sex,birthday,skill)><!ELEMENTname(#PCDATA)><!ELEMENTsex(#PCDATA)><!ELEMENTbirthday(#PCDATA)><!ELEMENTskill(#PCDATA)>]><resume><name>MichaelGuo</name><sex>Male</sex><birthday>1966.7</birthday><skill>ComputerGraphics,Datamining,Teacher</skill></resume>定義resume文檔空格8外部DTD預(yù)先定義好DTD文檔resume.dtd<!ELEMENTresume(name,sex,birthday,skill)><!ELEMENTname(#PCDATA)><!ELEMENTsex(#PCDATA)><!ELEMENTbirthday(#PCDATA)><!ELEMENTskill(#PCDATA)>9使用外部型DTD聲明的XML文檔Resume-ex.xml<?xmlversion="1.0"encoding="GB2312"?><!DOCTYPEresumeSYSTEM"resume.dtd"><resume><name>MichaelGuo</name><sex>Male</sex><birthday>1966.7</birthday><skill>ComputerGraphics,Datamining,Teacher</skill></resume>10XML文檔的瀏覽在瀏覽器中直接瀏覽如良構(gòu)的XML文檔運(yùn)用CSS技術(shù)顯示XML文檔文檔中引用的css文件mycss.cssname{background-color:#cccc99;font-size:22pt;width:100%;}sex{font-family:"Arial";font-size:16pt;color:blue;}birthday{font-family:"Arial";font-size:16pt;color:red;}skill{font-family:"Arial";font-size:14pt;color:green;}11xml-css.xml<?xmlversion="1.0"encoding="GB2312"?><?xml-stylesheettype="text/css"href="mycss.css"?><resume><name>MichaelGuo</name><sex>Male</sex><birthday>1966.7</birthday><skill>ComputerGraphics,Datamining,Teaching</skill></resume>12CSS5.1CSS簡(jiǎn)介5.1.1CSS作用

網(wǎng)頁(yè)展現(xiàn)的樣式從網(wǎng)頁(yè)中獨(dú)立出來(lái)集中管理,它通過(guò)設(shè)置CSS屬性元素獲得各種不同效果。13過(guò)程與步驟：1.通過(guò)依次單擊任務(wù)欄上的【開(kāi)始】→【程序】→【附件】→【記事本】菜單命令打開(kāi)記事本。2．在記事本的編輯面板中輸入以下代碼，創(chuàng)建了使用樣式的頁(yè)面css1.htm：

<html><head><title>樣式表舉例</title><styletype="text/css"><!--h1{ font-size:36px; font-family:"隸書";14

font-weight:bold; color:#993366;}--></style></head><body><pstyle="color:#ff0000">這段文字將顯示為紅色</p><pstyle="color:#000000;background-color:yellow;">這段文字的背景色為<I>黃色</I></p><pstyle="font-family:'華文彩云';font-size:24px">這段文字將以黑體顯示</p><p><h1align="center">今天學(xué)習(xí)樣式表的相關(guān)知識(shí)。</h1></p></body></html>css1.htm15什么是CSS

CSS(CascadingStyleSheet,層疊樣式表)技術(shù)上一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，它擴(kuò)展了HTML的功能，使網(wǎng)頁(yè)設(shè)計(jì)者能夠以更有效的方式設(shè)置網(wǎng)頁(yè)格式。特點(diǎn)：

可以實(shí)現(xiàn)網(wǎng)頁(yè)結(jié)構(gòu)與格式分離；對(duì)網(wǎng)頁(yè)布局、字體、背景和其它圖文效果實(shí)現(xiàn)更加精確的控制；更好的易用性和擴(kuò)展性，可以單獨(dú)以一個(gè)文件的形式出現(xiàn)。16CSS樣式表的使用結(jié)構(gòu)

多個(gè)網(wǎng)頁(yè)文件共享樣式文件

多個(gè)樣式文件套用在一個(gè)網(wǎng)頁(yè)文件上

HTML文件1HTML文件NCSS樣式文件HTMLCSS樣式文件NCSS樣式文件1172.CSS樣式表定義

CSS樣式表由樣式規(guī)則組成，告訴瀏覽器如何去顯示一個(gè)文檔。樣式規(guī)則一般由選擇符與屬性組成。常用的選擇符有HTML標(biāo)簽、用戶自定義類和用戶自定義ID等。18CSS樣式語(yǔ)法規(guī)則選擇符{規(guī)則}例如：h1{{color:blue;}選擇符（selector）：表示要定義樣式的類型，選擇符可以包括HTML標(biāo)簽符、用戶自主義類class或用戶自定義ID。規(guī)則（rule）：“屬性(attributes)”表示由CSS標(biāo)準(zhǔn)定義的樣式屬性，“屬性值(values)”為樣式屬性的值。19CSS樣式語(yǔ)法規(guī)則關(guān)于樣式表的語(yǔ)法，要注意以下幾個(gè)問(wèn)題。屬性必須要包含在{}號(hào)之中。屬性和屬性值之間用“:”分隔。當(dāng)有多個(gè)屬性時(shí)，用“;”進(jìn)行區(qū)分。在書寫屬性時(shí)屬性之間使用空格換行等，并不影響屬性的顯示。如果一個(gè)屬性有幾個(gè)值，則每個(gè)屬性值之間用空格分隔開(kāi)。2021用戶自定義類作為選擇符

定義格式：選擇符.類名selector.classname{attributes1:values1;attributes2:values2;…}，例：span.blue{color:#0000FF}span.red{color:red}應(yīng)用樣式時(shí)在對(duì)應(yīng)的HTML標(biāo)簽中加入class屬性，屬性值為樣式表的類名。例：<p>這是一個(gè)引用兩個(gè)不同span樣式的例子，<spanclass="blue">藍(lán)色span</span>與<spanclass="red">紅色span</span></p>22CSS樣式定義選擇符為HTML標(biāo)記利用用戶自定義類可以實(shí)現(xiàn)所有的HTML標(biāo)簽的樣式選擇，當(dāng)要達(dá)到復(fù)雜的樣式效果時(shí)（比如，你想讓主體文字的1段用綠色顯示，第2段用紫色顯示，而第3段用灰色顯示），可以采用樣式分類的方法實(shí)現(xiàn)。23CSS樣式定義選擇符為HTML標(biāo)記：示例P.first{color:green}P.second{color:purple}P.third{color:gray}

HTML代碼如下：<PCLASS="first">Thefirstparagraph,withaclassnameof"first."</P><PCLASS="second">Thesecondparagraph,withaclassnameof"second."</P><PCLASS="third">Thethirdparagraph,withaclassnameof"third."</P>24CSS樣式定義用戶自定義ID作為選擇符用戶自定義ID與用戶自定義類的功能相同，其區(qū)別僅為定義語(yǔ)法與引用方法不同。定義格式如下：#ID名{attributes1:values1;attributes2:values2;…}示例：id_selectors.html#yellow{color:yellow}其引用如下所示：<pID="yellow">本段為黃色</p>25CSS樣式定義ID樣式符與類樣式符對(duì)比：類選擇符可以重復(fù)使用，且可以用在任意元素上，使用任意次。HTML內(nèi)id屬性是唯一的，擁有id的元素才會(huì)應(yīng)用該樣式。ID選擇符的優(yōu)先權(quán)高于類選擇符。

提示：使用.classname和使用#IDname這兩種方式在效果上并沒(méi)有區(qū)別，但最好只使用其中之一，以免造成混淆。26CSS樣式定義CSS虛類選擇器：專用于控制鏈接的顯示效果，共4種選擇器：a:link（沒(méi)有接觸過(guò)的鏈接）,用于定義了鏈接的常規(guī)狀態(tài)。a:visited（訪問(wèn)過(guò)的鏈接）,用于閱讀文章，能清楚的判斷已經(jīng)訪問(wèn)過(guò)的鏈接。a:hover（鼠標(biāo)放在鏈接上的狀態(tài)）,用于產(chǎn)生視覺(jué)效果。a:active（在鏈接上按下鼠標(biāo)時(shí)的狀態(tài)）,用于表現(xiàn)鼠標(biāo)按下時(shí)的鏈接狀態(tài)。27CSS樣式定義CSS樣式選擇器：幾點(diǎn)說(shuō)明：a:link鏈接狀態(tài)是基本的，推薦至少要定義這種鏈接。推薦“a:hover”鏈接顏色使用紅色，能產(chǎn)生極好的視覺(jué)效果以上4種選擇器第4種較少使用，在定義選擇器時(shí)，必須嚴(yán)格按a:link、a:visited、a:hover、a:active順序定義，否則可能會(huì)無(wú)效。28CSS樣式引用

直接定義style屬性

內(nèi)聯(lián)式樣式

嵌入樣式表

外部樣式表29CSS1.直接定義style屬性html標(biāo)簽中以style屬性引用樣式

示例：<Pstyle="text-indent:1cm;background:yellow;font-family:courier">

這是一個(gè)直接書寫樣式的段落</p>。30例5.2<html><head><title>直接定義HTML標(biāo)記中的style屬性</title></head><body><h1style="color:green;text-align:center;font-style:italic;font-family:隸書;font-size:x-large;">

用四種方式將樣式表功能應(yīng)用到Web頁(yè)面中</h1></body></html>

ex5-231CSS2.定義內(nèi)部樣式表

頭部標(biāo)簽嵌套<style></style>引用網(wǎng)頁(yè)<head></head>之間插入樣式表代碼：<STYLETYPE="text/css"><!--H1{color:green;font-size:37px;font-family:impact}P{text-indent:1cm;background:yellow;font-family:courier}--></STYLE>32<html><head><title>定義內(nèi)部樣式表</title><styletype="text/css">/*定義樣式*/<!--h1{color:green;text-align:center;font-style:italic;font-family:隸書;font-size:x-large;}P{text-indent:1cm;background:yellow;font-family:courier}

--></style></head><body><h1>用四種方式將樣式表功能應(yīng)用到Web頁(yè)面中</h1><p>第一段文字默認(rèn)對(duì)齊</p><palign=center>第二段文字居中對(duì)齊</p></body></html>Ex5-333CSS3.嵌入外部樣式表

style1.css保存文字的其它樣式

h1{text-align:center;font-style:italic;font-family:隸書;font-size:x-large;}

style2.css保存文字的顏色

h1{color:green;}34CSS<html><head><title>嵌入外部樣式表</title><styletype="text/css">/*定義樣式*/<!--@importurl("style1.css");@importurl("style2.css");--></style></head><body><h1>用四種方式將樣式表功能應(yīng)用到Web頁(yè)面中</h1></body></html>例5.435CSS4.鏈接外部樣式表

<head></head>之間通過(guò)link引用外部文件：<head><title>文章標(biāo)題</title>

<linkhref="css/style.css"rel="stylesheet"type="text/css"/></head>36<html><head><title>鏈接外部樣式表</title><linkrel="stylesheet"type="text/css"href="style1.css"><linkrel="stylesheet"type="text/css"href="style2.css"></head><body><h1>用四種方式將樣式表功能應(yīng)用到Web頁(yè)面中</h1></body></html>例5.537綜合范例―――――――以下代碼是sheet1.css―――――――

/*CSSDocument*/

h1{ font-size:36px; font-family:"隸書"; font-weight:bold; color:#993366;}h2b{color:blue}.water{font-family:"隸書";font-size:24px;text-align:right}/*類選擇器*/h3.hello{font-family:"隸書";text-align:center;font-size:36px}/*指定的類選擇器*/38――――――以下代碼是sheet2.css―――――――/*CSSDocument*/

#danger{color:#990000;font-family:"華文彩云";font-size:24px}/*ID選擇器*//*以下是虛類的定義*/a:link{ color:red; text-decoration:none;}/*未訪問(wèn)的鏈接*/a:visited{ color:blue; text-decoration:none;}/*已訪問(wèn)的鏈接*/

39

a:hover{color:#990000;text-decoration:underline}/*鼠標(biāo)指針移到上面鏈接的顏色*/a:active{color:yellow; text-decoration:none;}/*活動(dòng)鏈接*/h2b{color:green}/*重新定義了上下文選擇器*/40――――――――以下代碼是ss4.htm―――――<html><head><title>導(dǎo)入外部樣式表</title><styletype="text/css"><!-- @importurl("sheet1.css");--></style> <linkrel="stylesheet"href="sheet2.css"type="text/css"></head>41<body><h1>標(biāo)題1的使用。</h1> <b>測(cè)試上下選擇器（沒(méi)有上下文）</b><br> <h2><b>測(cè)試上下選擇器（具有上下文）</b></h2> <pclass="water">這是黃河的水</p>

<preclass="water">黃河水天上來(lái)</pre> <pclass="hello">這句話沒(méi)有使用類“hello”的效果。</p> <h3class="hello">這句話才使用了類“hello”的效果。</h3> <pid="danger">這里危險(xiǎn)。</p> <ahref="css2.htm">測(cè)試鏈接的顏色，使用了虛類，實(shí)際做的過(guò)程中讀者自行體會(huì)。</a></body></html>ss4.htm42CSS屬性HTML元素中的屬性文本背景內(nèi)外填充屬性邊框?qū)傩远ㄎ慌c顯示屬性43CSS屬性屬性單位單位意義單位意義cm厘米In英寸，1in=2.54cmmm毫米Pt點(diǎn)，1pt=1/72in

px像素pc皮卡，1pc=12pt44文本屬性

文本屬性是CSS屬性中的一大類，用來(lái)設(shè)置文字的顯示效果。其中部分屬性設(shè)置效果可以通過(guò)文字的<font>標(biāo)記實(shí)現(xiàn)。

45CSS樣式文本屬性屬性名作用與含義取值font-family字體本機(jī)具有的字體font-size大小像素值（*px）font-weight粗細(xì)normalboldbolderlighterfont-style傾斜樣式normalitalicobliqueline-height行高normal或像素值text-decoration修飾blinkunderlineline-through（可多選）letter-spacing字母間隔像素值word-spacing單詞間隔像素值text-indent段落首行縮進(jìn)像素值text-align文字對(duì)齊leftrightcenter46<styletype="text/css">h3{font-family:times}p{font-family:courier}p.sansserif{font-family:sans-serif}</style><styletype="text/css">h1{font-style:italic}h2{font-style:normal}p{font-style:oblique}</style>47背景屬性

背景屬性設(shè)定對(duì)象的背景顏色或背景圖像。CSS樣式背景屬性

屬性名作用與含義取值background-color背景顏色顏色值background-image背景圖像URL(圖像地址)background-attachment背景是否隨頁(yè)面滾動(dòng)scrollfixedbackground-repeat是否重復(fù)repeatrepeat-xrepeat-yno-repeat48<styletype="text/css">body{background-image:url(images/eg_background3.jpg);background-repeat:repeat}</style>body{background:#00ff00url(images/eg_background3.jpg)no-repeatfixedcenter;}</style>49內(nèi)外填充屬性

一些Web元素如表格、圖像等可以看作是一個(gè)容器，容器中放置了呈現(xiàn)內(nèi)容。所謂的內(nèi)外填充，可以認(rèn)為是容器內(nèi)外側(cè)的襯墊。50CSS樣式填充屬性

屬性名作用與含義取值margin統(tǒng)一定義外部填充像素值margin-top分別定義外部各邊填充margin-bottommargin-leftmargin-rightpadding統(tǒng)一定義內(nèi)部填充像素值padding-top分別定義內(nèi)部各邊填充padding-bottompadding-leftpadding-right51<styletype="text/css">p.margin{margin:2cm4cm3cm4cm}</style><styletype="text/css">td.test1{padding:1.5cm}td.test2{padding:0.5cm2.5cm}</style>52邊框?qū)傩?/p>

邊框?qū)傩杂脕?lái)設(shè)置對(duì)象的邊框顏色、類型以及粗細(xì)。CSS樣式邊框?qū)傩詫傩悦饔门c含義取值border復(fù)合屬性border-color統(tǒng)一定義邊框顏色顏色值border-top-color分別定義各邊框顏色border-bottom-colorborder-left-colorborder-right-color53CSS樣式邊框?qū)傩?續(xù)表)屬性名作用與含義取值border-style統(tǒng)一定義邊框類型dotteddashedsoliddouble

grooveridgeinsetoutsetborder-top-style分別定義各邊框類型border-bottom-styleborder-left-styleborder-right-styleborder-width統(tǒng)一定義邊框粗細(xì)mediumthinthick或像素值border-top-width分別定義各邊框粗細(xì)border-bottom-widthborder-left-widthborder-right-width54定位與顯示屬性

內(nèi)外填充屬性站在容器的角度，設(shè)定了頁(yè)面的排版。從容器內(nèi)容的角度來(lái)說(shuō)，也可以設(shè)置內(nèi)容相對(duì)于容器的定位以及內(nèi)容的尺寸。55CSS樣式定位與顯示屬性

屬性名作用與含義取值position元素的定位方式staticabsolutefixedrelativetopbottomleftright距容器各邊緣距離像素值z(mì)-index顯示層次數(shù)值height元素高度像

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論