XXSS與插件如何使用插件_第1頁
XXSS與插件如何使用插件_第2頁
XXSS與插件如何使用插件_第3頁
XXSS與插件如何使用插件_第4頁
XXSS與插件如何使用插件_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、.第1章如何使用插件 由于CSS得到了所有主流瀏覽器的支持，因此，大家認(rèn)為使用它就像使用文本編輯器和Web瀏覽器一樣容易。雖然可以這樣想，但如果希望生成在所有主流瀏覽器上都能最佳顯示的頁面，實(shí)際上還要考慮很多事情。首先，盡管幾乎所有Web瀏覽器都支持CSS，但在實(shí)現(xiàn)特定功能的方式上它們之間還是有差異的，包括元素周圍的空間，甚至元素的大小。這意味著需要在所有主流瀏覽器上測試Web頁面，以確保它們在所有情況下都能很好地顯示。因此，如果使用Mac OS X或其他操作系統(tǒng)(如Linux)，那還需要能訪問Windows計(jì)算機(jī)，因?yàn)镮nternet Explorer目前的版本只支持Windows操作系統(tǒng)。

2、1.1 下載和安裝Web瀏覽器表1-1列出了5種主流Web瀏覽器及它們的Internet下載地址。盡管所有這些瀏覽器都可在Windows PC上安裝，但它們并不都支持OS X或Linux。這些URL處的網(wǎng)頁是智能的，會根據(jù)操作系統(tǒng)提供相應(yīng)的下載版本(如果支持)。在準(zhǔn)備學(xué)習(xí)本書之前，筆者建議你盡可能將這些瀏覽器都安裝到你的計(jì)算機(jī)上。如果運(yùn)行的是XP或以上版本的Windows系統(tǒng)，那就能夠安裝所有瀏覽器，但在其他操作系統(tǒng)上，想都安裝則不太容易。例如，在Mac OS X上(因?yàn)獒槍ac的IE只開發(fā)到了版本5，其后已就沒有開發(fā)了)，可以安裝除Microsoft Internet Explorer之外

3、的所有瀏覽器。盡管可以在Mac上安裝Wine軟件的執(zhí)行部分Windows應(yīng)用程序，如使用它運(yùn)行Internet Explorer，但筆者發(fā)現(xiàn)這一過程比較費(fèi)力且結(jié)果不一致。因此，筆者不建議采用這一方法。也不建議依賴那些在不同的瀏覽器中對Web頁面進(jìn)行屏幕截圖的網(wǎng)站，因?yàn)樗鼈儾荒芨嬖V你鼠標(biāo)、鍵盤和其他功能是否工作良好或者根本不工作。最好的選擇是進(jìn)行雙系統(tǒng)(Windows和Mac OS X)安裝，或是確保能訪問Windows PC。畢竟，除非特意針對Mac計(jì)算機(jī)開發(fā)，否則使用Windows操作系統(tǒng)的用戶還是占大多數(shù)。至于Linux，它不但不能訪問Internet Explorer，而且也沒有Safa

4、ri版本，不過所有其他的瀏覽器都支持Linux系統(tǒng)。和OS X一樣，盡管存在集成Wine來運(yùn)行Internet Explorer的各種解決方案，但它們只適用于部分發(fā)布版本，要想找到在Linux上運(yùn)行Windows瀏覽器的完美方法還是有點(diǎn)困難的。因此，如果你準(zhǔn)備在非Windows計(jì)算機(jī)上進(jìn)行開發(fā)，應(yīng)保證它能訪問Windows PC或者在安裝主操作系統(tǒng)的同時(shí)安裝Windows實(shí)現(xiàn)雙啟動(或作為虛擬機(jī))，這樣可以在將Web站點(diǎn)發(fā)布到Web之前對其進(jìn)行完全測試。表1-1 Web瀏覽器的下載URL以及支持的操作系統(tǒng)Web瀏覽器下載URLWindowsMacLinuxApple SafariGoogle

5、ChromeMicrosoft Internet ExplorerMozilla FirefoxOpera1.2 老版本的Microsoft Internet Explorer雖然Internet Explorer的最新版本(在寫本書時(shí)是IE8，不過IE9也在開發(fā)當(dāng)中)能與其他主流瀏覽器非常好地兼容，但仍有大量運(yùn)行IE7甚至IE6的用戶。據(jù)統(tǒng)計(jì)，截至2010年中，瀏覽器的使用率如圖1-1所示。圖1-1 截至2010年6月的瀏覽器市場份額由于Internet Explorer的每個(gè)版本的工作方式不盡相同(IE6和IE7約有超過25%的用戶)，因此除了在主流瀏覽器的最新版本中測試Web頁面外，還需

6、要在這些較老版本中測試。我們知道這很痛苦，但又必須去做。幸運(yùn)的是，有使其變簡單的方法。1.2.1 模擬IE6和IE7為了幫助設(shè)計(jì)Web站點(diǎn)的開發(fā)人員專門針對較老版本做些工作，Internet Explorer的開發(fā)人員創(chuàng)建了元標(biāo)記，可將其添加到Web頁面的頭部，從而讓IE知道它是較老的版本。下面是兩個(gè)主要的元標(biāo)記。<meta http-equiv="X-UA-Compatible" content="IE=7" /><meta http-equiv="X-UA-Compatible" content="IE

7、=5" />下面是如何使用IE7標(biāo)記的例子：<html><head><meta http-equiv="X-UA-Compatible" content="IE=7" /><title>My Website</title></head><body>. Website Contents .沒有IE=6選項(xiàng)(可能因?yàn)镮E5和IE6的呈現(xiàn)引擎是類似的)，因此使用IE=5選項(xiàng)使Internet Explorer進(jìn)入所謂的特殊模式。在該模式下，其行為類似于IE5和I

8、E6。順便提一下，如果想強(qiáng)制Internet Explorer進(jìn)入完全標(biāo)準(zhǔn)模式(即盡可能與其他瀏覽器兼容)，可使用選項(xiàng)IE=8?；蛘?，沒有元標(biāo)記，Internet Explorer將使用其自己的、專有的優(yōu)化設(shè)置，即邊緣模式也可以選擇IE=edge。當(dāng)然，一旦完成測試，除非有特殊理由，應(yīng)刪除或注釋掉這些元標(biāo)記。另外，應(yīng)總是確保在每個(gè)文檔的開頭有一個(gè)合適的HTML文檔類型聲明。例如，最常見的文檔類型如下所示，它是經(jīng)過完全測試的，適用于本書中所有插件。<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"&qu

9、ot;/TR/html4/loose.dtd">提示：如果使用不同于此的文檔類型，特定的插件可能有不同的行為，因而必須對其稍作修改。筆者經(jīng)常使用前面所示的“松散”文檔類型和IE7元標(biāo)記獲得與其他主流瀏覽器最大的兼容。記住，如果你的Web頁面在所有其他瀏覽器中都正常工作但在IE中行為怪異，那么解決方案就是修改文檔類型和IE5/IE7元標(biāo)記。如果對瀏覽器兼容性和它們間各種細(xì)微差別感興趣，可訪問Quirks Mode網(wǎng)站()。1.3 配套網(wǎng)站為了省去輸入插件代碼的工作，可從本書的配套網(wǎng)站()下載插件，如圖1-2所示。單擊Do

10、wnload鏈接下載文件plug-ins.zip，這是個(gè)包含了所有插件的壓縮文件(在所有操作系統(tǒng)中都可解壓縮)。解壓縮之后，可看到所有插件按數(shù)字順序保存在PC.css文件中。還有一個(gè)名為ReadMe.txt的文件，該文件包含了有關(guān)插件的最新信息，包括自本書出版后所做的所有改進(jìn)或更新。另外，還包含有演示每個(gè)插件用法的各種示例文件，可將它們加載到瀏覽器中測試。同時(shí)還有兩個(gè)JavaScript文件PJ.js和PC.js，本章最后一節(jié)在介紹JavaScript時(shí)將對這兩個(gè)文件進(jìn)行說明，第12章中的插件將會使用它們。圖1-2 配套網(wǎng)站警告：默認(rèn)情況下，Windows計(jì)算機(jī)可能不顯示文件擴(kuò)展名，除非啟用這

11、一功能。在這種情況下，文件將顯示為index(而不是index.html)或PC(而不是PC.css)等。1.4 關(guān)于文檔對象模型當(dāng)HTML出現(xiàn)時(shí)，一個(gè)重要的設(shè)計(jì)決定是將其基于DOM(Document Object Model，文檔對象模型)。這是一種將Web頁面中的不同元素分成單獨(dú)對象的方法，每個(gè)對象有其自己的屬性和值。這是個(gè)明智的決定，因?yàn)檫@樣就引入了樣式表，使得Web頁面的內(nèi)容與其樣式完全分開，同時(shí)使HTML文檔易于用如JavaScript這樣的語言修改，從而提供動態(tài)用戶交互功能。當(dāng)將Web頁面放入DOM中時(shí)，用CSS樣式化其每個(gè)部分是很容易的。例如，每個(gè)標(biāo)題將位于像<h1>

12、</h1>這樣的標(biāo)記對中，單個(gè)CSS指令就可以設(shè)置文檔中所有這樣的標(biāo)記的樣式，如可以改變使用的字體、字體大小及任意字體修飾等。這樣就可以完全改變頁面設(shè)計(jì)而不修改HTML，正如在后面的一些插件中將看到的，一些樣式設(shè)置甚至可以使頁面元素在鼠標(biāo)劃過時(shí)有動態(tài)效果(例如，改變其顏色和其他屬性)或使用專門的瀏覽器擴(kuò)展創(chuàng)建漸變效果。1.4.1 DOM的工作原理DOM將HTML文檔的各個(gè)部分組成一個(gè)對象層次結(jié)構(gòu)，每個(gè)對象有其自己的屬性。術(shù)語“屬性”用于表示對象的特性，如對象包含的HTML、對象寬度和高度等。最外層的對象是window對象，它表示的是當(dāng)前瀏覽器窗口、tab、iframe或彈出式窗口。

13、在其下是document對象，可以有多個(gè)文檔(例如將幾個(gè)文檔加載到同一頁面的不同iframe中)。在文檔中有一些其他對象，如頁面頭部和主體等。在頁面頭部中，又有其他對象，如標(biāo)題和元對象，而主體對象可包含大量其他對象，包括標(biāo)題、錨、表單等的HTML標(biāo)記。圖1-3顯示了示例文檔的DOM表示，其頭部有一個(gè)標(biāo)題Hello和一個(gè)元標(biāo)記，其主體部分有3個(gè)HTML元素(鏈接、表單和圖像)。當(dāng)然，即使是最簡單的Web頁面，其結(jié)構(gòu)也比這里的復(fù)雜，這里只是用于演示DOM的工作原理。從最外部開始是窗口，其中有一個(gè)文檔，在該文檔中是各種元素或?qū)ο?，它們互相?lián)系。在圖1-3中，屬性用較黑的背景和斜體表示。例如，值rob

14、ots是name的屬性，name又是meta的屬性，依此類推。盡管圖中沒有顯示，元標(biāo)記應(yīng)還有另一個(gè)匹配的屬性content，該屬性包含一個(gè)字符串，指定哪個(gè)機(jī)器人可以訪問Web頁面的內(nèi)容。其他屬性包括(它是href標(biāo)記的屬性，href又是a的屬性，依此類推)和Hello(它是title的屬性)。所有其他項(xiàng)均是對象或?qū)ο髤?shù)名。如果將圖1-3向縱向和橫向擴(kuò)展，則將顯示出其他對象和屬性。圖中兩個(gè)這樣的地方用斷開的虛線表示。圖1-3 顯示頭部和主體部分的DOM示例如果將該DOM示例表示成HTML代碼，頭部的結(jié)構(gòu)如下所示：<head><meta name="robots&qu

15、ot; content="index, follow" /><title>Hello</title></head>HTML的主體部分如下所示：<body><img src="/images/welcome.jpg" /><a href="">Visit Google</a>or enter your username and password to continue.<form id="login" method=&qu

16、ot;post" action="login.php"><input type="text" name="name" /><input type="password" name="password" /><input type="submit" /></form></body>記住，HTML的這兩個(gè)部分是同一文檔的一部分，我們將它們放在<html>標(biāo)記中，如下所示：<html>

17、<head><meta name="robots" content="index, follow" /><title>Hello</title></head><body><img src="/images/welcome.jpg" /><a href="">Visit Google</a>,or enter your username and password to continue.<form id=

18、"login" method="post" action="login.php"><input type="text" name="name" /><input type="password" name="password" /><input type="submit" /></form></body></html>當(dāng)然，實(shí)際的Web頁面可能與此完全不同，但它

19、們常采用同樣的形式。盡管并不總是這樣，因?yàn)榇蟛糠譃g覽器比較寬容，允許省略一些內(nèi)容，如末尾的結(jié)束標(biāo)記及開始標(biāo)記等。不過，筆者不建議這樣做，因?yàn)楹竺婺氵€有可能將頁面轉(zhuǎn)換成XHTML，而后者要嚴(yán)格得多。因此，閉合每個(gè)標(biāo)記并確保順序正確是個(gè)好習(xí)慣。例如，不應(yīng)將</body>放在</html>后面來閉合文檔，因?yàn)檫@樣的標(biāo)記嵌套順序是不正確的。同理，應(yīng)有自關(guān)閉沒有結(jié)束標(biāo)記的標(biāo)記的習(xí)慣。如<img src=""/>，它沒有匹配的</img>標(biāo)記，因此，要求在最后的>符號之前有一個(gè)/字符以正確關(guān)閉它。同樣，<br>變成<

20、;br />等。還應(yīng)記住，標(biāo)記中的參數(shù)必須由單引號或雙引號引起來，以實(shí)現(xiàn)與XHTML的兼容，盡管幾乎所有瀏覽器都允許省略它。注意：在Web早期，大部分用戶使用非常慢的撥號調(diào)制解調(diào)器，所以經(jīng)?？吹皆赪eb頁面中省略引號和各種標(biāo)記的現(xiàn)象。但如今，大部分用戶獲得了相當(dāng)不錯(cuò)的帶寬速度，因而也就不需要這樣做了。1.5 關(guān)于CSS使用CSS，可以按自己的意愿對Web頁面應(yīng)用樣式。這是可行的，因?yàn)镃SS是與DOM相聯(lián)系的，因此可以快速而容易地改變元素樣式。例如，如果不喜歡<h1>、<h2>等標(biāo)題標(biāo)記的默認(rèn)樣式，可以指派新樣式來覆蓋所使用的字體系列和大小的默認(rèn)設(shè)置，或決定是否設(shè)置

21、粗體或斜體及許多其他屬性。給Web頁面添加樣式的一種方式是將所需的語句插入到Web頁面的頭部中，即<head>和</head>標(biāo)記之間。因此，要改變<h1>標(biāo)記的樣式，可使用下列代碼：<style>h1 color:red; font-size:3em; font-family:Arial; </style>在HTML頁面中，結(jié)果如下所示(見圖1-4)：<html><head><style>h1 color:red; font-size:3em; font-family:Arial; </st

22、yle></head><title>Hello World</title><body><h1>Hello there</h1></body></html>圖1-4 樣式化<h1>標(biāo)記，小窗口中顯示的是原樣式1.5.1 導(dǎo)入樣式表當(dāng)希望樣式化整個(gè)站點(diǎn)而不是單個(gè)頁面時(shí)，較好的管理樣式表的方法是將它們完全從Web頁面中移除，放到單獨(dú)的文件中，然后導(dǎo)入需要的文件。這樣針對不同的布局(如Web布局和打印布局)就有了不同的樣式表，而不會改變HTML。可以通過兩種不同的方法達(dá)到此目的，一種是使用

23、CSS的import指令，如下所示：<style>import url("/css/styles.css");</style>這一語句告訴瀏覽器從/css文件夾中取出名為styles.css的樣式表。import命令是非常靈活的，如可以創(chuàng)建導(dǎo)入其他樣式表的樣式表等。但要確保在任何外部樣式表中沒有<style>或</style>標(biāo)記，否則就不行。1. 從HTML內(nèi)部導(dǎo)入CSS也可以用HTML<link>標(biāo)記包括進(jìn)樣式表，如下所示：<link rel="stylesheet" type=&qu

24、ot;text/css" href="/css/styles.css" />這與import指令的效果是一樣的，除了<link>是個(gè)HTML標(biāo)記，而不是個(gè)有效的樣式指令外。因此，它不能用于從一個(gè)樣式表中導(dǎo)入另一個(gè)樣式表，也不能放在<style></style>標(biāo)記對中。正如可以在CSS中使用多個(gè)import指令包括多個(gè)外部樣式表一樣，也可以在HTML中使用任意多條<link>語句。1.5.2 局部樣式設(shè)置也可以分情況單獨(dú)設(shè)置或覆蓋當(dāng)前頁面上的特定樣式，方法是直接在HTML中插入樣式語句，如下所示(該樣式語句使標(biāo)

25、記中的文本為藍(lán)色斜體)：<div style="font-style:italic; color:blue;">Hello</div>但這應(yīng)只限于最特殊的情況，因?yàn)樗茐牧藘?nèi)容和布局的分離性。1.5.3 ID和類設(shè)置元素樣式的更好方法是在HTML中給它賦一個(gè)ID，如下所示：<div id='iblue'>Hello</div>該語句聲明了ID為iblue的div元素的內(nèi)容應(yīng)采用在相應(yīng)#iblue樣式設(shè)置中定義的樣式。匹配的CSS語句如下所示：#iblue font-style:italic; color:blu

26、e; 注意符號#的使用，它指定只有名稱為iblue的ID用這一語句樣式化。如果想對多個(gè)元素應(yīng)用同一樣式，不必給每個(gè)元素都指定一個(gè)不同的ID，可指定一個(gè)類對它們一起進(jìn)行管理，如下所示：<div class="iblue">Hello</div>其聲明了這個(gè)元素(及其他使用該類的元素)的內(nèi)容應(yīng)采用在相應(yīng)iblue類中定義的樣式。如果應(yīng)用類，可在頁面頭部或在外部樣式表中使用下列樣式設(shè)置為類設(shè)置樣式：.iblue font-style:italic; color:blue; 類語句不使用#符號(這是為ID保留的)，而是以(.)符號開頭。注意：除了使用單個(gè)ID

27、或類外，還有很多對元素應(yīng)用樣式的方式。第2章有詳細(xì)介紹。1.6 CSS和分號當(dāng)CSS語句出現(xiàn)在同一行中時(shí)，為了分開它們，必須在每條語句后加分號。但如果一行上(或在HTML標(biāo)記內(nèi)部的內(nèi)聯(lián)樣式設(shè)置中)只有一條語句，則可以省略分號。為了避免導(dǎo)致難以發(fā)現(xiàn)的CSS錯(cuò)誤，在開發(fā)樣式表時(shí)，最好總是在每個(gè)CSS設(shè)置后使用分號。后面如果需要優(yōu)化樣式表以獲得最大的下載速度和最小的尺寸，僅刪除不需要的分號即可。1.7 在自己的網(wǎng)站中使用插件從網(wǎng)站下載了plug-ins.zip文件后(并作了解壓縮)，這里推薦的訪問方式是將存儲在PC.css文件中的整個(gè)插件集作為外部樣式表加載，使用的命令如下所示：<link r

28、el="stylesheet" type="text/css" href="css/PC.css" />這里，/css是保存文件的文件夾(相對于當(dāng)前文件夾)，PC.css是樣式表的文件名(P和C是Plug-in和CSS的縮寫)。這種包含方法確保了可以向需要額外插件的Web頁面中添加新元素，而不必單獨(dú)地進(jìn)行復(fù)制和粘貼。這個(gè)文件的大小與中等圖像相當(dāng)，下載速度和所需的帶寬也差不多，因此包括進(jìn)整個(gè)文件通常不是個(gè)問題。但如果只需要包括其中一些插件，則清楚地標(biāo)注它們，并輕松地將它們復(fù)制和粘貼到另一個(gè)樣式表或是Web頁面的<style&

29、gt;部分中。注意：有些JavaScript支持的插件需要幾行HTML代碼才能包含進(jìn)來。如果想使用它們，可以參考1.8節(jié)的內(nèi)容。1.7.1 類名沖突為了使插件易于訪問，筆者總是盡量使用簡短的、自說明的類名，甚至包括了大量單字母名的類，如i(對文本應(yīng)用斜體)。不過，如果你自己或第三方的樣式使用了任一相同的類名，那(根據(jù)第2章要介紹的規(guī)則)該類將獲得優(yōu)先權(quán)，其他樣式只能局部實(shí)現(xiàn)(如果有的話)。在這種情況下，不能同時(shí)使用兩者。1.8 JavaScript支持的插件本書中的一些插件完成的事情可能單用CSS不能完成，它們通過使用兩個(gè)JavaScript插件庫來完成。這兩個(gè)插件庫分別是來自配套書Plug-

30、in JavaScript中的PJ.js和專為本書而寫的PC.js。PJ.js中的函數(shù)提供了大量的定位、調(diào)整大小和轉(zhuǎn)換效果，然后由PC.js中的函數(shù)實(shí)現(xiàn)各種增強(qiáng)的CSS效果。使用這些庫非常容易，在相關(guān)小節(jié)中也有詳細(xì)解釋，也就是在Web頁面的頭部包含下列HTML代碼行：<script src="PJ.js"></script><script src="PC.js"></script>這行代碼從當(dāng)前文件夾(但也可從任何地方導(dǎo)入它們)加載庫并執(zhí)行基本的初始化。這些文件也包含在可通過網(wǎng)站下載的plug-ins.zip文件中。1.8.1 將JavaScript支持的CSS與純CSS同時(shí)引用為了使用本書中的所有插件(包括純CSS和JavaScript支持的CSS)，同時(shí)為了不必總是想著要導(dǎo)入它們，筆者建議將下列兩行

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論