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

下載本文檔

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

文檔簡介

15.1XMLXML的產(chǎn)生

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

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

XML的開發(fā)并不是取代HTML的，而是彌補(bǔ)其不足的。具體有以下差異：1.XML文件可以自定義標(biāo)記和屬性，HTML則不能。2.XML是屬于一般用途的標(biāo)記語言，而HTML則是一種特殊用途的標(biāo)記語言。3.XML著重于文件的結(jié)構(gòu)，而HTML則擅長于文件的表現(xiàn)。4.XML文件可以有選擇地利用DTD或XML綱要（XMLSchema）來確認(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文檔都要有一個包含所有其他元素的根元素所有的元素必須有開始標(biāo)記和結(jié)束標(biāo)記標(biāo)記必須正確嵌套，不能交叉大小寫敏感空白不能隨便放置所有的屬性值必須用引號（英文狀態(tài)的半角字符）括起來更詳細(xì)的規(guī)則，可參考W3C網(wǎng)站或相關(guān)書籍6

有效的XML文檔有效的XML文檔是遵照XML語法規(guī)則和文檔類型定義（DTD)規(guī)則構(gòu)造的一種文檔。DTD（DocumentTypeDefinition）是一段關(guān)于該文檔中數(shù)據(jù)的組織存放結(jié)構(gòu)的說明。定義了某項(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簡介5.1.1CSS作用

網(wǎng)頁展現(xiàn)的樣式從網(wǎng)頁中獨(dú)立出來集中管理,它通過設(shè)置CSS屬性元素獲得各種不同效果。13過程與步驟：1.通過依次單擊任務(wù)欄上的【開始】→【程序】→【附件】→【記事本】菜單命令打開記事本。2．在記事本的編輯面板中輸入以下代碼，創(chuàng)建了使用樣式的頁面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)知識。</h1></p></body></html>css1.htm15什么是CSS

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

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

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

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

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

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

定義格式：選擇符.類名selector.classname{attributes1:values1;attributes2:values2;…}，例：span.blue{color:#0000FF}span.red{color:red}應(yīng)用樣式時在對應(yīng)的HTML標(biāo)簽中加入class屬性，屬性值為樣式表的類名。例：<p>這是一個引用兩個不同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ù)雜的樣式效果時（比如，你想讓主體文字的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ū)別僅為定義語法與引用方法不同。定義格式如下：#ID名{attributes1:values1;attributes2:values2;…}示例：id_selectors.html#yellow{color:yellow}其引用如下所示：<pID="yellow">本段為黃色</p>25CSS樣式定義ID樣式符與類樣式符對比：類選擇符可以重復(fù)使用，且可以用在任意元素上，使用任意次。HTML內(nèi)id屬性是唯一的，擁有id的元素才會應(yīng)用該樣式。ID選擇符的優(yōu)先權(quán)高于類選擇符。

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

直接定義style屬性

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

嵌入樣式表

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

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

這是一個直接書寫樣式的段落</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頁面中</h1></body></html>

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

頭部標(biāo)簽嵌套<style></style>引用網(wǎng)頁<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頁面中</h1><p>第一段文字默認(rèn)對齊</p><palign=center>第二段文字居中對齊</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頁面中</h1></body></html>例5.435CSS4.鏈接外部樣式表

<head></head>之間通過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頁面中</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;}/*未訪問的鏈接*/a:visited{ color:blue; text-decoration:none;}/*已訪問的鏈接*/

39

a:hover{color:#990000;text-decoration:underline}/*鼠標(biāo)指針移到上面鏈接的顏色*/a:active{color:yellow; text-decoration:none;}/*活動鏈接*/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>測試上下選擇器（沒有上下文）</b><br> <h2><b>測試上下選擇器（具有上下文）</b></h2> <pclass="water">這是黃河的水</p>

<preclass="water">黃河水天上來</pre> <pclass="hello">這句話沒有使用類“hello”的效果。</p> <h3class="hello">這句話才使用了類“hello”的效果。</h3> <pid="danger">這里危險。</p> <ahref="css2.htm">測試鏈接的顏色，使用了虛類，實(shí)際做的過程中讀者自行體會。</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屬性中的一大類，用來設(shè)置文字的顯示效果。其中部分屬性設(shè)置效果可以通過文字的<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文字對齊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è)定對象的背景顏色或背景圖像。CSS樣式背景屬性

屬性名作用與含義取值background-color背景顏色顏色值background-image背景圖像URL(圖像地址)background-attachment背景是否隨頁面滾動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元素如表格、圖像等可以看作是一個容器，容器中放置了呈現(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ū)傩杂脕碓O(shè)置對象的邊框顏色、類型以及粗細(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è)定了頁面的排版。從容器內(nèi)容的角度來說，也可以設(shè)置內(nèi)容相對于容器的定位以及內(nèi)容的尺寸。55CSS樣式定位與顯示屬性

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

溫馨提示

  • 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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論