web前端期末復習_第1頁
web前端期末復習_第2頁
web前端期末復習_第3頁
web前端期末復習_第4頁
web前端期末復習_第5頁
免費預覽已結(jié)束，剩余24頁可下載查看

付費下載

下載本文檔

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

文檔簡介

1、 互聯(lián)網(wǎng)/因特網(wǎng)/萬維網(wǎng)互聯(lián)網(wǎng)包含因特網(wǎng)，因特網(wǎng)包含萬維網(wǎng)互聯(lián)網(wǎng)：interneto凡是能彼此通信的設備組成的網(wǎng)絡就是互聯(lián)網(wǎng)，互聯(lián)網(wǎng)是一個廣泛的概念。因特網(wǎng)：Internet。是互聯(lián)網(wǎng)的一種，由成千上萬臺機器組成的互聯(lián)網(wǎng)，是互聯(lián)網(wǎng)中最大的一個。因特網(wǎng)提供的服務一般包括有：www（萬維網(wǎng)）服務、電子郵件服務（outlook）、遠程登錄（QQ）服務、文件傳輸（FTP）服務、網(wǎng)絡電話等等。萬維網(wǎng)：是因特網(wǎng)提供的服務之一，只要應用層使用的是Http協(xié)議，就是萬維網(wǎng) 統(tǒng)一資源定位符（UniformResourceLocator,URL.）也被稱為網(wǎng)頁地址，如同在網(wǎng)絡上的門牌，是因特網(wǎng)上標準的資源的地址（

2、Address）。序號服務（協(xié)議）類型含義1http超文本傳輸協(xié)議資源2https用加密傳送的超文本傳輸協(xié)議3ftp文件傳輸協(xié)議4mailto電子郵件地址5ldap輕型目錄訪問協(xié)議搜索6newsUsenet新聞組7file當?shù)仉娔X或網(wǎng)上分享的文件8gopherGopher協(xié)議 超鏈接（HyperLink）是指從一個網(wǎng)頁指向另一個目標的連接關(guān)系，這個目標可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片、一個電子郵件地址、一個文件，甚至是一個應用程序。超鏈接在本質(zhì)上屬于一個網(wǎng)頁的一部分，它是一種允許我們同其他網(wǎng)頁或站點之間進行連接的元素。 Web特點I.Web是易導航和圖形化2 .

3、Web是具有平臺無關(guān)性3 .Web是支持分布式結(jié)構(gòu)4 .Web是具有動態(tài)性5 .Web是具有交互性 HTML（HypertextTextMarkupLanguage）超文本標記語言是標準通用標記語言SGML（StandardGeneralizedMarkupLanguage是一種定義電子文檔結(jié)構(gòu)和描述其內(nèi)容的國際標準語言，是所有電子文檔標記語言的起源）下的一個應用，也是一種標準規(guī)范，它通過標記符號來標記要顯示的網(wǎng)頁中的各個部分。HTML是構(gòu)成Web頁面（Page）的基礎。層疊樣式表CSS（CascadingStyleSheet級聯(lián)樣式表 作用：可以有效地對頁面的布局、字體、顏色、背景和其它效果

4、實現(xiàn)更加精確的控制。JavaScript JavaScript最初由網(wǎng)景公司（Netscape）的BrendanEich設計，是一種由Netscape的LiveScript發(fā)展而來的客戶端腳本語言，主要目的是為了解決服務器端語言，提供數(shù)據(jù)驗證的基本功能。 一個完整的JavaScript實現(xiàn)是由3個不同部分組成的：核心（ECMAScript）、文檔對象模型（DOM）、瀏覽器對象模型(BOM)DOM結(jié)構(gòu) Ajax的核心是JavaScript對象XMLHttpRequest。該對象在InternetExplorer5中首次引入，它是一種支持異步請求的技術(shù)。簡而言之，XMLHttpRequest使您可

5、以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。 AJAX優(yōu)點：最大的一點是頁面無刷新，在頁面內(nèi)與服務器通信，給用戶的體驗非常好；使用異步方式與服務器通信，不需要打斷用戶的操作，具有更加迅速的響應能力；可以把服務器負擔的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節(jié)約空間和寬帶租用成本。AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請求、響應對服務器造成的負擔?；跇藴驶牟⒈粡V泛支持的技術(shù)，不需要下載插件或者小程序。 AJAX的缺點AJAX破壞瀏覽器的前進與后退功能，使得用戶的習慣得不到延續(xù)；安全問題；對搜索引擎的支持比較弱；破壞了程序的

6、異常機制；違背了URL和資源定位的初衷；一些手持設備(如手機、PDA等)現(xiàn)在還不能很好的支持AJAX,一門一花田工工麻一二二二就消行虹#土tr*品用*0人<stvletype二btx卻0歲u.OhiIa-iy：20p-k；'J&isr-ed；)-v次/24-pXsfcnT-'Se!boldttT：i：HUO口Qgq；)-EHC/slylegw/hgd"E10匍si拜默狂求第j12<pMHTWL</p>4<pp>山I14Scrip8;<Zp<h3>同搭手下選闔3M與hw，/六吧i-E.udl-fTi>H

7、TML<1/*>>E17<scriip11ype="tewt；I”_-LH.一._哼！卜"i19即trwHalT遭肝玩工程岬軾止前景鼻PtiflAjeI30一下*E2L</MFipt>E3a HTML文檔結(jié)構(gòu)：一個完整的HTML文檔由頭部head和主體body兩個部分組成。在頭部<head>標記中，可定義標題、樣式等；在主體<body>標記中，可定義段落、標題字、超鏈接、腳本、表格、表單等元素，主體內(nèi)容是網(wǎng)頁要顯示的信息。頭部標記所包含的信息一般不會顯示在網(wǎng)頁上。META標記用來描述一個HTML網(wǎng)頁文檔的屬性，也稱

8、為元信息(meta-information),這些信息并不會顯示在瀏覽器的頁面中。設置body標記屬性可以改變Web頁面顯示效果。body標記主要屬性有text、bgcolor、background、link、alink、vlink、topmargin、leftmarginBody標記屬性值描述textrgb(R,G,B)grb(R%,G%,B%)#RRGGBBcolorname規(guī)定文檔中所有文本的顏色。不贊成使用。請使用樣式取代它。bgcolor同上規(guī)定文檔的背景顏色。不贊成使用。alink同上規(guī)定文檔中活動鏈接的顏色。link同上規(guī)定文檔中未訪問鏈接的默認顏色。vlink同上規(guī)定義檔中已被

9、訪1可鏈接的顏色。backgroundURL規(guī)定文檔的背景圖像。topmarginpixel規(guī)定文檔中上邊距的大小leftmarginpixel規(guī)定文檔中左邊距的大小最常用的單標記有br、hr。br、br/表示換行，hr、hr/表示水平分隔線。屬性應在開始標記（首標記）內(nèi)定義，并且和標記名之間有一個空格分隔。屬性值可以直接書寫，也可以使用雙引號“”括起來。添加注釋：!-注釋信息-comment注釋信息/comment HTML頁面編碼基本規(guī)范1 .所有標記均以“”開始、以“”結(jié)束。2 .根據(jù)標記類型，正確輸入標記，單標記最好在右尖括號前加1個斜杠“/"，如換行標記是單標記br/,雙標

10、記最好同時輸入起始標記和結(jié)束標記，以免忘記。3 .標記可以嵌套使用，但不能交叉使用。4 .在HTML代碼中不區(qū)分大小寫。6 .標記中可以設置各種屬性，屬性值建議用雙引號標注起來7 .書寫開始與結(jié)束標記時，在左尖括號與標記名或與斜杠“/”之間不能留有多余空格，否則瀏覽器標記不能識別，導致錯誤標記直接顯示在頁面上，影響頁面美觀效果。8 .編寫HTML代碼時，應該使用鋸齒結(jié)構(gòu)，即采用縮進風格，使代碼結(jié)構(gòu)清晰，便于理解和分析頁面的結(jié)構(gòu)，便于代碼后期閱讀和維護。HTML文件命名規(guī)則1 .文件的擴展名為html或者htm,建議統(tǒng)一用html作為文件名的后綴。2 .文件名中只可由英文字母、數(shù)字或下劃線組成，

11、建議以字母或下劃線開始。3 .文件名中不能包含特殊符號，如空格、$、&等。4 .文件名區(qū)分大小寫，特別在Unix、Linux系統(tǒng)中大小寫表示的文件是不同。5 .網(wǎng)站首頁文件名一般是index.html或default.html。三種DTD類型：嚴格Strict、過渡Transitional以及框架Frameset。1吱占#du_2_S_l.hlml“23 Yhgad%*4 <tide+后記遇法役事性弟法應用父乃閽史<51vieyDe='teXL>6dhifttxt-uJjgmEn的*8</head?-9<body陵空口1串6日村里>-10&l

12、t;h>3aign«rentier中學2。13年元旦寸113.)<hreied=2.匚du-'red-inidth='p.gn""Irv>Kn.bgqBu",；2bp.;酗b近品且(NewYmr、IKhNcmrtv).密一H開鑿的串衣T也樹'iFfr”，"舊巨城”，在古牝指陰，'濘正月初一.1更49.年W且；17，祟中國人民嘮治群商云世癢一屆金庫育謂正天串立公歷1淖1一日班兄d兄且是世晶上限去國京期岷的榭t惇日.用“13<dlvid-daw»H<innsrc=vundanl

13、jpghek?hl='165ibQrder='O'alE=>*<i_nig5LQ-I7：J"/J|"Tid"”=JUheijh'-'h.!border,»-nall">-16</diV174/bodyn;iX</html>-'Web頁面設計需要遵循設計的3c原則：簡潔、一致性、好的對比度標題是通過<h1>-<h6>等標記進行定義的。在HTML文件中，添加空格的方式與其他文檔添加空格的方式不同，網(wǎng)頁中通過代碼控制來添加空格，而在其他編輯器中

14、通過鍵盤空格鍵來輸入空格。顯示結(jié)果說明EntityNameEntityNumber顯k個空格&nbsp;&#160;<小于&lt;&#60;>&gt;&#62;&&化|勺&amp;&#38;"雙引號&quot;&#34;?版權(quán)&copy;&#169;?注冊商標&reg;&#174;X乘號&times;&#215;一除號&divide;&#247;標記說咧吃電肛和專業(yè)1v3拊休<i>就件工程中亞t<

15、i>料體V嶺軟件工程與業(yè)：<1>卜到戰(zhàn)於用:f；理專工崢珊1除慳9軟件工程營業(yè)！S1捌刪1除小1不枝或使用.dd代替）<snra11>軟件程專業(yè)！<rsatnll>安小字號e產(chǎn)軟件tMhklsp交大方片如p.-門：稔業(yè)】sup-上標,YubA軟件匚理專曲1<sub>卜標<«>軟件工程專業(yè)I<lt>打字機字體孫記：費用途<abbr>etc,<abbr>表示辨不Qddu*扛蘇省肅京市如舊»>J,示地址,<bl«kquo4e>fl公厚Lh<?bl

16、xkq»Mw、設置一K減用fl的文本-dtc"UlLfc.-c-dtc-'HK.再現(xiàn)名號的引用.斜住cock-,dimnasinteger吃f匚ode1才算機4不閭定挺度字j帛二dfti叫下:件(釬！<dfn-定又一個詞.通常為箱體j.mi里11<»cm'逋岡，利常為斛體4b#機樣壬短:<4bd>遣書好人.顯左上班式的血出匯因字體。什的/軟件<strong>強調(diào)，金小黑件字符變量，顯不制體字符<font>元素用來改變默認的字體、顏色、大小等屬性，這些更改分別通過不同的屬性定義完成。段落標記<p&

17、gt;</p>換行標記<br>單獨出現(xiàn)，表示換行符；水平分割線標記<hr>,顯示條細線以分割兩個區(qū)域。段落縮進標記<blockquote>tE血LhtElA!E2!卜It36*Ad*;:<tille<Ait'e>v/headA<Cent>1>9臂所siie-'i"cfiiw'roccWA«nt>5P；ftntsp;arbsp;dnfasp.SU#)A.處是地上盟>，&nb5P.&nb$p；&nbtp；CtMp帝*望明耳，起頭網(wǎng)推卡.

18、U<hr如drh=1。標""oqIot*DOGfff)1l品文寓析】xpXDlockqjoreWfiSJft®!加清求姜/，不聿半點修飾.完生是的手鉆親沒：:有任何卅射選柞”L正晏平平MEMI才是JUw/bk>也不由4>看4*1理厘集一|:k象地聶理了序人的心硬居瑞門if，一M髀朋的同在慝多圖生動她呈現(xiàn)it牧M而陰.</>1+卬>anb«p;Sntwp電孑.面阿埴的就月甚觸不»*納不St；:定第人呢？如山一個千人*、萬人喝的文超卻在這，評中拿眼編1舄*骸,二金千年以來照£人口，而：傳不錄用*-IS&

19、lt;hrwtdth-'100%"saze="i8|0<="口0肝'/Spyrqh舟mp.RO+waiz刁白至國挈冏量收序?qū)ふ鉏8備口01115卯號，rUbo力ar：-列表類型標記符號備注無序列表<ul></ul>常用菜單列表<menu></menu>不常用目錄列表<dir>3</dir>不常用有序列表<ol></ol>常用定義列表<dl></dl>常用<1->till無表七八<b9dy><h,

20、4?Dis.-地目符號列襄</hi4><ul.ivpw""jfg">4£與1"*播51>dXlmlf項目符號列表曰/d式><ulWgLc"口>葷1lyipo-sqjuQt。用杳j|(。11<h>HW'/ii><h4>Squftr*工防目"母何森小$><ul*>T?一”型型廿。工Ail</|>nEiy>E/MZA嵌套有序列表和無序列表Qmg仃EwSHf有序明青和訴P他5G會國計tfl等經(jīng)專戒通知他心<

21、i>Ltyi>mCIDI2flie-B，說期不干啰3f.</U>遂國*</ii>兄瘦童】口阮，ATL擠自時安開.bin城1</ii>Coltvp用CuiL*B<4ic>_一裹蟬隹陵寫一合凌考證號鵑不博3<Ai>41；收交小一寸郭丹</Li></ul></»!>1><M韁l|<4'h4></li>|-tnT.且右釬間和蛇占產(chǎn).舟甘蓬上所利.)<；p>5%|11411M.ML7_1JhEichurmix-1t3<head

22、>«-；審m網(wǎng)帕工,睥鵬和問酉*«R«>/5 c用。*dM6 <b<W31t,一OCHMfffv，備即¥即，*用凈目4/M>，耳3>>Q1。cli>7-I12cul>ii12Cfc>Os:M元*啟MI13d>隹率-t4<ul>-_154匕中967455元ie4上，聿辨=45就<&>17£心=ifl5"t19v/ui>at204A>*21K忙*4IK；1。元4曲4!22<A1>»!am4”，244鼻KKA：

23、“g;25團加壬仃dd»:6宜中五的如</<!>27<dd>4fldKdci>。德工山hfl碼yg-p29u曲的鐘79M仙Z|M3aI314口才京19必5,rthd4«Theight-*!»dbordsr-Cf>!32E/bQdv“超鏈接在本質(zhì)上屬于一個網(wǎng)頁的一部分，它是一種允許我們同其他網(wǎng)頁或站點之間進行連接的元素。各個網(wǎng)頁鏈接在一起后，才能真正構(gòu)成一個網(wǎng)站。超鏈接由目的地址、鏈接標簽、打開位置等三部分組成：l.href:鏈接指向的目標文件2 .name:創(chuàng)建文檔內(nèi)的標簽。3 .title:指向鏈接的提示信息4 .tar

24、get:指定打開的目標窗口在HTML文件中提供了三種路徑：絕對路徑、相對路徑、根路徑。絕對路徑指文件的完整路徑，包才文件傳輸?shù)膮f(xié)議http、即等，一般用于網(wǎng)站的外部鏈接,例如：。相對路徑是指相對于當前文件的路徑，它包含了從當前文件指向目地文件的路徑。(!-*k1lS_2_2.htni*-><htxl><htid>FtlM耀蒯外孤帽事2<body><h2玳部瞬<7h&網(wǎng)站蛇一幅面般<5X1hreHimteihET內(nèi)舒通亞人濯T慘才<p>tihrtkMtp力i艱必誨MgSHIS麗地同上的麗的醒如FTP服務器鏈接和網(wǎng)頁鏈

25、接區(qū)別在于所用協(xié)議不同,瀏覽網(wǎng)頁采用http協(xié)議，而FTP服務器采用FTP協(xié)議連接。圖片鏈接<imgsrc="url"width：alt：添加圖片的提示文字；width/height:設置圖片的寬度和高度(px,%)border：設置圖片邊框(px)align:設置圖片對齊方式(水平/垂直兩個方向)hspase/vspase:設置圖片的間距設置(px)IcljyLdLi_S_4_1.Herni!2chbno*!3i<偽小iS</hea<1>*-i；小<body>>；<pxahcfii-"httpr/Zww>

26、;*>*'后D-order*Osee-口wFu_mvkXJOl/></p>*,9aliQn"七電門!：*/*11IQ<atjcet1*httpi/./inews.baidu.cam"name*ti.JiaflSrI'j5h*Di詞£兒4114匕a河港(過1，>；?5c/b,/12<a-Idtp:/'：feba_baiduxcimrnarr>e-Lll匕hw；&/1b皿圮5>1；13<3tbCAt"h<tp："ztvdm*,bl皿r£OE&

27、gt;a1舒.'M;.&nb理工<Jhrctf-hltp；/nniLJSie-rb.iiiclLJ.irnrH"rLami*-1"rEP%!如:樂</下.JI5<ditxM9e-4h-i門町寸MTfc-name冏；iiecaMtp:/video-biidu.cciri-rrurri*wg福ra粗；gAnbfip；17<atjcet*n-ane-famo罔“aa*16!>-""亡amJJ20制II"6QnriTfJi21onpiJt.tyD*bt/ttoin'rijme-Ibadu"

28、wakie-"S®ii22i:33vp葡Eg，center"><a；kbtuf-mjiltercomu山-t*卜.：*TA麓送*件</#%*v/bndyiI!25Ejhlml?3!Img標記的alt屬性用來添加圖片的提示文字，提示文字有兩個作用。首先當瀏覽網(wǎng)頁時，如果圖片下載完成，鼠標放在圖片上，鼠標旁邊會出現(xiàn)提示文字。也就是說，當鼠標指向圖片上方的時候，稍等片刻，可以出現(xiàn)圖片的提示性文字，用于說明或者描述圖片。其次，圖片沒有被下載的時候，在圖片的位置上會顯示提示文字，起到提醒的作用。<head>4 設置困特邊植<Altle&g

29、t;5 <styletype-*,text/.CS$K>6 ulOtetstvle-tvpe：none;lifloat;left;pfldding:O20px;B</st¥)e>9 </head>10 <body>11 <h2alton-'center12 <hrcolor-"ff6Cf9966'>13 <y|>14 3我，ma±sLlpg"alt="邊根亮度/Opx*X/H>15 <ll><lnitaar'lmaaes

30、!.ipo41Spx"hordei-"ipw16 <ll><lmoirc"lmMim"alt邊K1U(力10pm"border='1Or)x"></|j>17 </ui>18 </body>19 </hVrM>圖片和文字之間的對齊方式通過img標記中的align屬性來設置。圖片的絕對對齊方式和文字的對齊方式一樣，有居左、居右和居中；而相對文字的對齊方式則是指圖片與同行文字的相對位置。<imgsrc=圖片地址"hspace="水平間

31、距”><imgsrc=圖片地址"vspace="垂直間距”><marqueebgcolor顏色代碼”>滾動文字</marquee>文字背景顏色采用十六進制顏色代碼。Direction屬性表示滾動方向。屬性behavior用來設置滾動方式。1 率加0_7_，上版一>Jchhyil>3 <lhead>4 設四演動3t學片做邑內(nèi)網(wǎng)><曲6 <body>7 *lh3»hgn-"contera>1*P8 hr9 <marqueebgcolor="H&am

32、p;6H33>10 <fonthce»/肘一2二口、誠宜拿力動效聚”“51>11 </miirquee>12 </tody>13734hNead>&ifl貿(mào)動文字岬利用it5</bcKj>®<bcdy>1 <h3Mqn=YeC串動支字的率動力Ite曲B<hr9 <marqueeor"slide">IQ<fnntkE=一聚R_5izc=20"匚口1-=番用：丁去謫一錄11</mirquee><marqueebetavio

33、r""ailerinatf"><f&ht1-匚'Sfl"5”7口"color同步力YWxr>等曾果峭14 </mariqu«>15 <marQue«behAvior-'icrH，16 fontfatuFhfMcyze«"TO-cdar*a>Ji17 qmrqueeA18 </body>L94/hinil><marqueescrollamount="滾動速度”>滾動文字</marquee>滾

34、動速度實際上就是滾動文字每次移動的長度，這個長度用數(shù)字表示，單位為像素。<marqueescrolldelay='延遲時間">滾動文字</marquee>延遲時間以毫秒為單位，該延遲時間設置得越小滾動速度越快，延遲時間設置得越大即會出現(xiàn)走走停停的效果。 <marqueehspace4水平范圍"vspace='垂直范圍">滾動文字</marquee> <marqueeloop="循環(huán)次數(shù)”>滾動文字</marquee> <bgsoundsrc="背景音樂

35、地址"loop="播放次數(shù)”>src屬性用來指定背景音樂文件的地址或文件名稱，而且音樂文件要加上后綴；loop屬性用來指定背景音樂播放的次數(shù)，用數(shù)字表示。Infinite和-1表示播放無限次，直到關(guān)閉瀏覽器為止。<embedsrc="多媒體文件地址”width="播放界面的寬度”height="播放界面的高度”autostart="true|false"loop="循環(huán)次數(shù)"></embed>width和height一定要設置，單位為像素，否則無法正確顯示播放多媒體文件的軟件

36、；autostart的取值有兩個：一個是true,表示自動播放；另一個是false,表示不自動播放；100P表示循環(huán)的次數(shù)，用數(shù)字表示。值為true時，循環(huán)播放；值為false時，不循環(huán)播放。I<!64iJhtrrir23 <head>4 ctititeEH藤與身體文件應用</utle>5 <styl«tYoe2U電>6 h(float二Ie忙mamggni：Tbpxuifbst-styletypeinme;BmjrqpeKcteanboth；)911 妊9)0的螞第12 chJahgri'B'tenter3密僮與步體文件施用

37、<加：1受13 <hfcofors14 <ctjQ5C|widsrCexarnQl-iTlpS">15 <3>16cihmarc""imaMsSipo'1widt1i»Hi7I-height"160"btxdffw"Ql*ilt=""></!ii>"174ft>cemnlbadsc="amb«d/03O3.swrloo尸七山9Utogtart=true11width®H400"lwght=

38、!3D0H>c/erfiwl>c/li>m一父怛上itcmarcfueelMhwior=aktrnte11drection="upH杵8“比="1gop復,專用淵史Qy="與曲產(chǎn)>“<p>SjTibp;SdTfcgjj8jnbsp;Sdnbsp;#i-flVG.Bf5EH的419*，IE長城望，島也前府清時門函1啦到長It文化的內(nèi)通讓修年的陽光灑在人翼的身上，讓市年的看風我捧在人們的歸上.在使里面又聾二單明辨衣品在長就匕一起力羯口梁來的巽好聽班播年第一天*ClTO-fe)艇長城的苒客可率麥iR總鐘優(yōu)亭</p>21&l

39、t;/krk)rqu«B>22chr<otor=,1rad->23</bod>24</bitnni>CSS(CascadingStyleSheet層疊樣式表，也稱為級聯(lián)樣式表，用來進行網(wǎng)頁風格設計。在網(wǎng)頁制作時采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的控制。只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者不同網(wǎng)頁的外觀和格式。傳統(tǒng)HTML的特點：1、維護困難：為了修改某個特殊標記的格式，需要花費很多時間，尤其對于整個網(wǎng)站而言，后期修改和維護的成本很高。2、標記不足：HTML自身的標記并

40、不豐富，很多標記都是為網(wǎng)頁內(nèi)容服務的，而關(guān)于美工的標記，比如文字間距、段落縮進等，這些HTML中都很難找到。3、網(wǎng)頁過“胖”：由于對風格樣式?jīng)]有統(tǒng)一進行控制，用HTML編寫的頁面往往是體積過大，占用了很多寶貴的帶寬。4、定位困難：在整個頁面布局時，HTML對于各個模塊的位置調(diào)整顯得捉襟見肘。-CSS通過定義標簽如何顯示，對頁面結(jié)構(gòu)風格進行控制，分離文檔的內(nèi)容和顯示，克服了傳統(tǒng)HTML的缺點。CSSa在頁面中，通過瀏覽器的解釋執(zhí)行，是完全的文本，只要懂得HTML者B可以掌握。CSS特點：1 .頁面的字體變得更漂亮，更容易編排。2 .可以輕松控制頁面的布局。3 .可以在幾乎所有的瀏覽器上使用。4

41、.以前一些必須通過圖片轉(zhuǎn)換實現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實現(xiàn)，從而更快地下載頁面。5 .可以將站點上所有網(wǎng)頁的風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的行，那么整個站點的所有頁面都會隨之發(fā)生變動。CSS優(yōu)點1 .表現(xiàn)和內(nèi)容相分離CSSS過定義HTML標簽如何顯示控制網(wǎng)頁的格式，使得頁面內(nèi)容和顯示相分離，簡化了網(wǎng)頁格式設計，也使得對網(wǎng)頁格式的修改更方便。2 .加強了網(wǎng)頁的表現(xiàn)力CSS羊式屬性提供了比HTML更多的格式設計功能。例如，可以通過CSS羊式去掉網(wǎng)頁中超級鏈接的下劃線，甚至可以為文字添加陰影，翻轉(zhuǎn)效果等。3 .增強了網(wǎng)站格式的一致性將CSS羊式定義到樣式表文

42、件中，然后在多個網(wǎng)頁中同時應用樣式表文件中的樣式，就確保了多個網(wǎng)頁具有一致的格式，并且可以隨時更新樣式表文件，以達到可以自動更新多個網(wǎng)頁的格式設置，從而大大降低了網(wǎng)站的開發(fā)與維護工作。 CSS編輯方式1、寫在HTML文件中的CSS規(guī)則根據(jù)其位置又可以分為兩種形式：一種是寫在某個元素的屬性部分，作為style屬性值；另一種是寫在head標記中，通過Style標記包含。2、將CSS規(guī)則寫在單獨的文件中該文件成為CSS文件，它是純文本文件，可以使用任何編輯器編輯，文件后綴名為.css。在需要應用CSS規(guī)則的多個HTML文件里面引用該CS成件，從而實現(xiàn)內(nèi)容和表現(xiàn)的分離，也提高了網(wǎng)站可維護性。CS砌則由

43、兩個主要的部分構(gòu)成：選擇器（Selector或稱選擇符）和聲明（Declaration）o選擇器通常是需要改變樣式的HTML元素。聲明由一個或多個屬性名稱與屬T值對組成。屬性名稱是CSS的關(guān)鍵字，如font-family（字體）、color（顏色）和border（邊框）等。屬性名稱用于指定選擇器某一方面的特性，而屬性值則用于指定選擇器特性的具體特征。/*css的注釋方法*/CSS選擇器：標記選擇器（或稱元素選擇器）、類選擇器、id選擇器、偽類選擇器。標記選擇器=元素選擇器。直接使用HTML標記作為選擇器，它定義的樣式作用于頁面中所有與選擇器同名的標記。類選擇器：任何合法的HTML標記都可以使用

44、class屬性。由點號“.”和類名稱直接相連構(gòu)成。標記選擇器和類選擇器可以聯(lián)合使用，使用方式是標記選擇器與類選擇器直接項鏈，成為聯(lián)合選擇器，可以用來設置特定類中的特定標記。ID選擇器前面有一個#號-也稱為棋盤號或井號。類選擇器還是ID選擇器？區(qū)別1:只能在文檔中使用一次：與類不同，在一個HTML文檔中，ID選擇器會使用一次，而且僅一次。區(qū)別2:不能使用ID詞列表：不同于類選擇器，ID選擇器不能結(jié)合使用，因為ID屬性不允許有以空格分隔的詞列表。偽類選擇器：標記：偽類名/*CSS規(guī)則*/在聲明各種CSS選擇器時，如果某些選擇器的風格是完全相同的，或者部分相同，都可以使用集體聲明用“，”將多個選擇器

45、隔開，對風格相同的CSS選擇器同時聲明。通配選擇器（universalselector）,顯示為一個星號（*）。該選擇器可以與任何元素匹配，就像是一個通配符。 CSS按其位置可以分為4種：內(nèi)聯(lián)樣式表（InlineStyleSheet）標記style="屬性1:屬性值1；屬性2：屬性值2；:'幾乎任何一個html標記都可以設置style屬性。慎用！內(nèi)部樣式表(InternalStyleSheet)內(nèi)部樣式表寫在HTML的<head></head>中，只對所在的網(wǎng)頁有效。使用<style></style>標記對來設置CSS規(guī)則。&l

46、t;!->隱藏標記，如果瀏覽器不支持CSS羊式，則會自動跳過此段代碼。鏈接外部樣式表(LinkExternalStyleSheet)導入外部樣式表(ImportExternalStyleSheet)1 外部樣式表是將CSS®1則寫在.css為后綴的CS成件中，需要用到此樣式的網(wǎng)頁里引用該CSS文件。2 一個CS成件可以供多個網(wǎng)頁引用，從而實現(xiàn)整體頁面風格統(tǒng)一設置。3 根據(jù)引用方式不同可以分為鏈接外部樣式表和導入外部樣式表，他們形式上的區(qū)別在于鏈接外部樣式表通過鏈接link標記，導入外部樣式表必須在內(nèi)部樣式表內(nèi)首行通過"importurl('外部樣式文件)”來定

47、義。外部樣式表與內(nèi)聯(lián)，內(nèi)部樣式表相比，具有如下優(yōu)點：(1)便于重用。一個外部CS成件所定義的樣式，可以被多個網(wǎng)頁共用。(2)便于修改。修改樣式只需要修改CSSC件，無須修改每個網(wǎng)頁。(3)提高顯示速度。樣式寫在網(wǎng)頁里，網(wǎng)頁文件變“胖”，增加網(wǎng)頁傳輸?shù)呢摀?，降低網(wǎng)頁顯示速度。如果某CSS文件已被某網(wǎng)頁引用并加載，則其他需要引用該CS成件的網(wǎng)頁時可以從緩存中直接讀取該CSS文件，提高網(wǎng)頁顯示速度。CSS繼承即子標記會繼承父標記的所有樣式風格，并且可以在父標記樣式風格的基礎上再加以修改，產(chǎn)生新的樣式，而子標記的樣式風格完全不影響父標記。行內(nèi)樣式>id樣式>clasS羊式>元素樣式&

48、lt;div>是一個塊級元素，其前后均有換行符，可定義文檔中的分區(qū)或節(jié)。Style屬性：設置層的樣式，如果不定義層的樣式的話，在瀏覽器里什么都看不到。?<div>通常和id或class配合使用，把文檔分割為獨立的、不同的部分，對文檔進行布局。<div>是一個塊級元素。這意味著它的內(nèi)容自動地開始一個新行。實際上，換行是<div>固有的唯一格式表現(xiàn)?？梢酝ㄟ^<div>的class或id應用額外的樣式。?display屬性可以改變元素的常規(guī)CSS顯示類型，取值包括block、inline和none,即按塊元素顯示、以內(nèi)聯(lián)方式顯示和隱藏元素。?使用

49、多個<div>時，一方面它們可以將頁面分割成不同的塊，塊與塊之間沒有包含關(guān)系；另一方面又可以把功能相近的塊組織到一個更大的塊中，便于整體控制，這便是圖層嵌套。?多個<div>還可以層疊。<div>層疊必須首先將position屬性設置為absolute,然后利用z-index屬性控制層疊關(guān)系。-一一，碑事AtAtiC許”就4工凸同中報4堡同JKl1-EH*口Jtt帖便號史盥FIt忸-it過Linde"餐量此時用ft事目有Tliiu葉而Jihi毒t|>i亂EU現(xiàn)生不可電務何幅福meHdh一2，丹Un也工希.七日充申裝他存，wdth航G翱月hai

50、gihT糊層鼻金top*K耳苒西鵬loft左0距border靈泉5二植國式3置R格.腔量.栗性等,隹普囊和z-inOeM由懇層費.周亡不在上星丁£1于罌在工群土上tafllratie對*和*花Mft期量渾生酎*rigrhf君愛停息古叨ronebo<hhhr"上京/、”：比，喇t=JG4*，T.f+'*<div>和<span><div>和<span>共同的特點是默認都沒有對標記內(nèi)的對象進行任何格式化渲染，主要用于應用CSS羊式，對頁面進行分割、布局。不同的是，<div>是塊級元素，其前后均有換行符；而&

51、lt;span>是行內(nèi)元素，沒有固定的格式表現(xiàn)。但是塊元素和行元素不是絕對的，通過定義CSS的display屬性可以相互轉(zhuǎn)化。<dii¥iid1"wirv>唱divid"rvwft"></drv>cdivd-霞蕾也iMfi>，align.c«r*fir->dddas-s*d_npumctddWmjiFid«¥*'d_niUim<tdclass-drwtFirtr海18:e«er>ctd'd_r*u*b>5<Ad>Gd廿，&

52、#163;*-d_nmndddais-*'d_r»wri，-</kr>Ct7M*v£*iBit*r>dd'd_nuiFi>澗<tdd-iss*'_二師fidriiii.*d_num<fir>dr31即center>Ctd_>0</U>dddg超-Fwm<tdUjs軍dLiwrCddw.d.rwrn<Aji34e></cS*>CHM4CWE.&E¥w>dthL410pMPh«ght4?Opi;g北grg皿E5NM)孰洶JMJ

53、；i-mcli-cO:加tdm蜓金功方pcrsrticnrIM：我鬲baiJc9roLind-coior-hd:*.op(width:?9QpKri|>Qrd«r：IOM1叫Z-WMte-：1：toc：115pa;left:2Op-x:.dLrMumfsowiqw內(nèi)©:比3癡ra：Iwghr*;0rpmuop*.尸Erg千mtt,在a5css*ms<tiB'/oriorJ屬性描述font-style設置字體的風格font-variant設置小型的大寫字母字體font-weight設置字體的粗細font-size設置字體的大小font-family設置字體

54、名<>Ddy>font-style屬性：normal:表示不使用斜體，是font-style屬性的默認值Italic：表示使用斜體顯示文字oblique:表示使用傾斜字體顯示font-variant屬性：normal:表示正常的字體，是font-variant屬性的默認值small-caps：表示使用小型的大寫字母字體font-weight屬性normal:表示正常的字體，是font-weight屬性的默認值bold：表示標準的粗體bolder：表示特粗體（為相對參數(shù)）lighter：表示細體（為相對參數(shù)）整數(shù)：取值為100、200、300、400、500、600、700、8

55、00、900來表示粗細程度，100表示最細、400等價于normal、700等價于boldfont-family專門用于設置字體名稱。atrlvt1«r-«p«c：lFnQi事寺總?cè)∑猈KA一中R卜產(chǎn)事熱t(yī)tKBrr/微餐黑比”闊n由微小墨打*m四十下的工值tExt-aliiginllcftrbgiht«nf«irju血F,ptwri*元*.上修*土本第寸寄行式.。時*展中underlineline-throughov*rlin«Mm*安”，之事現(xiàn)去川里狀.除戰(zhàn)L卻鷺慢冉在何均注taxt-TransfainmupitaliizaEwr

56、u,曾rK>ric壬文本中字母又小巧.浦字大H用用字母犬與腦希學修小黑不用支才時的人小嚀橫點同廳bottomHU內(nèi)立拈宜川養(yǎng)為止.中¥時出 在HTML中段落的首行往往需要通過插入4個“&nbsp;”才能實現(xiàn)首行空2個字符的排版格式，而在CSS中可以使用text-indent屬性來設置首行縮進量。 字符裝飾屬性text-decoration主要用來完成文字加下劃線、頂線、刪除線及文字閃爍等效果。none：表示文字無裝飾。blink：表示文字閃爍。underline:表示文字加下劃線。line-through：表示文字加貫穿線。overline:表示文字加上劃線。 利用te

57、xt-transform屬性以轉(zhuǎn)換英文大小寫。capitalize：將每個單詞的第一個字母轉(zhuǎn)換成大寫，其余無轉(zhuǎn)換發(fā)生。uppercase：轉(zhuǎn)換成大寫。lowercase：轉(zhuǎn)換成小寫。none：無轉(zhuǎn)換發(fā)生。text-align屬性規(guī)定元素中的文本的水平對齊方式。left：表示左對齊，默認值。right:表示右對齊。enter：表示居中。justify:表示兩端對齊。vertical-align屬性以設置元素的垂直對齊方式。值說明baseline默認。元素放置在父元素的基線上。sub垂直對齊文本的下標。super垂直對齊文本的上標top把元素的頂端與行中最高元素的頂端對齊text-top把元素的頂

58、端與父元素字體的頂端對齊middle把此元素放置在父元素的中部。bottom把元素的頂端與行中最低的元素的頂端對齊。text-bottom把元素的底端與父元素字體的底端對齊。length指定長度值%使用"line-height"屬性的百分比值來排列此元素。允許使用負值。inherit規(guī)定應該從父元素繼承vertical-align屬性的值。line-height用于設置行與行之間的距離。IIIIINIIIIHIHII»c¥隹»ft«rcih*topcontentBlack#000000Gray#808080White#FFFFFFSi

59、lver#c0c0c0Red#FF0000Maroon#800000Yellow#FFFF00Olive#808000Lime#00FF00Green#008000Aqua#00FFFFTeal#008080Blue#0000FFNavy#000080Fuchsia#FF00FFPurple#800080盒子：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)niiiiiiiiiiiiiiiiiiiiiiafWhtt*IIIIIIIIIIIIIIIIIIIIIIH 邊界屬性是margin,也稱為外邊距，表示盒子邊框與頁面邊界或其他盒子之間的距離，屬性值為

60、長度值、百分數(shù)或auto,屬性效果是圍繞元素邊框的“空白”。 邊框?qū)傩允莃order,用于設置邊框：風格(border-style)、寬度(border-width)、顏色(border-color) 填充屬性是padding,也稱為內(nèi)邊距，表示元素內(nèi)容與邊框之間的距離，屬性值為長度值、百分數(shù)，屬性效果是包含在元素邊框里面并圍繞著元素內(nèi)容的“元素背景”。we-1"I1!«1Mie*0001<r«*>，_HUnliM02<htnil*0003Wi*aMir3018xW/gnA«O0M星Uti，制吐32DOW<s.pn>七F<J5p#fi>ocos"talkEY'guMeT"U影wr>0020</dhr>MMM21*c|N"P>g日Body*Mb«IW?*dhr«flrvkf-y&nrtaifflErmi<Ul>工的1吐0024fw0片*ChIjoixiinxrtl*WM<4mgbrt-HH*B4er.iMH<nmg>v»02&*W1仲<l|xipwix«hrH-C卓計0-YuanxM"«0O12Mpan>fPl*«

溫馨提示

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

最新文檔

評論

0/150

提交評論