技術(shù)資訊

面向Web開發(fā)者和設(shè)計(jì)者的參考手冊

2009-03-23 09:29:00

FireScope - 面向Web開發(fā)者和設(shè)計(jì)者的參考手冊

Sitepoint有一個(gè)不錯(cuò)的針對Web開發(fā)者和設(shè)計(jì)者的參考手冊網(wǎng)站，可以查詢HTML、CSS和JavaScript的基本信息、兼容性和示例代碼等，同時(shí)這個(gè)網(wǎng)站也包含了一個(gè)Firefox擴(kuò)展，可以集成在Firebug中，可以顯示所有你看到的HTML元素、HTML屬性和CSS屬性的參考信息，目前還不支持JavaScript部分。

【擴(kuò)展名稱】FireScope
【擴(kuò)展作者】Sitepoint - James Edwards

FireScope是一個(gè)Firefox擴(kuò)展，同時(shí)也是一個(gè)Firebug擴(kuò)展，可以幫助用戶快速的搜索HTML元素、屬性以及CSS屬性的參考信息，具體的功能大家從下面的一系列截圖上就能體會(huì)了。目前版本為1.0.1，最低要求為Firefox 2和Firebug 1.2。大家可以直接點(diǎn)擊上面的鏈接下載，或者到AMO網(wǎng)站上下載。

以下部分內(nèi)容翻譯自該擴(kuò)展網(wǎng)站

功能列表：

你可以查找HTML元素和屬性，以及CSS屬性（或者進(jìn)行組合查詢）。搜索結(jié)果是根據(jù)輸入實(shí)時(shí)刷新的，通常你可能只需要書要查找內(nèi)容的第一個(gè)到第二個(gè)字母就可以，這樣可以幫助你更快的找到結(jié)果。

查找結(jié)果中會(huì)顯示和瀏覽器兼容性相關(guān)的信息，以及一個(gè)簡要的用法說明。當(dāng)然還提供了一個(gè)指向SitePoint Reference網(wǎng)站的鏈接，在那里會(huì)有更相信的參考信息。

鼠標(biāo)右鍵點(diǎn)擊搜索結(jié)果，在菜單中有兩個(gè)選項(xiàng)：一個(gè)是在線查詢詳細(xì)信息，另外一個(gè)是顯示選擇項(xiàng)的示例代碼。

#p#

示例代碼會(huì)在側(cè)欄打開，里面會(huì)包含有實(shí)用價(jià)值的例子，你可以根據(jù)例子很快掌握用法。同時(shí)這些示例代碼是可以編輯的，而且也很容易復(fù)制，在Firefox 3中直接雙擊就是全部選擇。

在HTML面板中，你可以在任意元素、屬性名稱或者屬性值上點(diǎn)擊鼠標(biāo)右鍵（編輯狀態(tài)也可以點(diǎn)），這時(shí)在快捷菜單中你可以進(jìn)行兩項(xiàng)選擇，查找你選擇的項(xiàng)目，或者顯示這個(gè)項(xiàng)目對應(yīng)的示例代碼。

類似的，在CSS面板中你也可以右鍵單擊任意屬性名稱或者屬性值，可以進(jìn)行的操作與HTML面板中的相同。

在HTML面板中，如果你右鍵點(diǎn)擊的標(biāo)記名稱是選擇狀態(tài)（就是通常深藍(lán)色背景高亮那種），在菜單中選擇“Look up selection”會(huì)執(zhí)行一個(gè)特殊搜索，所有選中的元素、屬性已經(jīng)應(yīng)用的CSS樣式都將被搜索。有時(shí)候這個(gè)特殊搜索是自動(dòng)進(jìn)行的，比如在你選擇元素后點(diǎn)擊“Reference”面板時(shí)，就會(huì)自動(dòng)搜索當(dāng)前選中元素相關(guān)的所有內(nèi)容。