Web開發中的基本概念和用到的技術簡介_HTML/Xhtml_網頁製作

今天，本文向初學者介紹一些 Web 開發中的基本概念和用到的技術，從A到Z總共26項，每項對應一個概念或技術。

A — AJAX

AJAX  全稱為「 Asynchronous  JavaScript  and XML 」（非同步 JavaScript 與 XML ），是一種建立互動式網頁應用程式的 網頁開發 技術。根據Ajax提出者Jesse James Garrett建議，AJAX：

使用XHTML CSS 來表示訊息；
使用JavaScript 操作DOM （Document Object Model）進行動態顯示及互動；
使用XML 與XSLT 進行資料交換及相關操作；
使用XMLHttpRequest 物件與Web伺服器進行非同步資料交換；
使用JavaScript 將所有的東西綁定在一起。
類似 DHTML 或 LAMP ，AJAX不是指單一的技術，而是有機地利用了一系列相關的技術。事實上，一些基於AJAX的「派生/合成」式（derivative/composite）的技術正在出現，如 AFLAX 。

B — Browser

網頁瀏覽器  是個​​顯示 網頁伺服器 或檔案系統內的文件，並讓使用者與此些文件互動的一種 軟體 。它用來顯示在 萬維網 或 區域網路 等內的文字、圖像及其他資訊。這些文字或圖像，可以是連接其他網址的超連結，使用者可快速且輕易地瀏覽各種資訊。網頁大部分為 HTML 格式，有些網頁需特定瀏覽器才能正確顯示。 個人電腦 上常見的網頁瀏覽器依照2010年1月的市場佔有率依序是 微軟 的 Internet Explorer 、 Mozilla 的 Firefox 、 Google 的 Google Chrome 、 蘋果公司 的 Safari 和 Opera軟體公司 的 Opera 。瀏覽器是最常用的 客戶端程式 。 Web開發人員應該確保其程式在各個主流瀏覽器中都能正常運作。

C —  CSS

層疊樣式表， 又稱： 串樣式列表，英文： Cascading Style Sheets ，簡稱為CSS ，由W3C 定義和維護的標準，一種用來為結構化文檔（如HTML 文件或XML 應用）添加樣式（字體、間距和顏色等）的電腦語言。目前最新版本是 CSS  2.1，為W3C的候選推薦標準。下一版CSS 3仍在開發過程中。

D — DOM

文件物件模型 （Document Object Model，簡稱DOM），是 W3C 組織推薦的處理 可擴充置標語言 的標準程式介面。 Document Object Model的歷史可以追溯至1990年代末期微軟與 Netscape 的「 瀏覽器大戰 」（browser wars），雙方為了在 JavaScript 與 JScript 一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，計有VBScript、ActiveX、以及微軟自家的D HTML 格式等，讓不少網頁使用非微軟平台及瀏覽器無法正常顯示。 DOM即是當時蘊釀出來的傑作。

E — Events

事件  是可以被控制識別的操作，例如按下確定按鈕，選擇某個 單選按鈕 或 複選框 。每一種控制項都有自己可以辨識的事件，如窗體的載入、點擊、雙擊等事件，編輯框(文字方塊)的文字改變事，等等，現代的Web應用程式很大程度上依靠事件驅動。

事件有系統事件和使用者事件。系統事件由系統激發，如時間每隔24小時，銀行儲戶的存款日期增加一天。使用者事件由使用者激發，如使用者點擊按鈕，在文字方塊中顯示特定的文字。 事件驅動 控制項執行某項功能。觸發事件的物件稱為事件傳送者；接收事件的物件稱為事件接收者。

使用事件機制可以實現：當類別物件的某個狀態發生變化時，系統將會透過某種途徑呼叫類別中的有關處理這個事件的方法或觸發控制項事件的物件就會呼叫該控制項所有已註冊的事件處理程序等。

F — Firebug

Firebug  是 網頁瀏覽器   Mozilla Firefox  的擴展，是一種除錯工具。使用者可以利用它來除錯、編輯、甚至刪除任何網站的  CSS 、 HTML 、 DOM 、與  JavaScript  程式碼。 Firebug 也有提供其他網頁開發工具，例如  Yahoo!  的網頁速度最佳化建議工具 YSlow 。 Firebug是哈維（ Joe Hewitt ）撰寫的。他是最初Firefox創始者之一。

G — Grid

網格 ，也稱為 柵格 ，不過從定義上說，柵格更為準確些。在網路上找一個對網頁柵格系統比較恰當的 定義 ：以規則的網格陣列來指導和規範網頁中的版面佈局以及資訊分佈。網頁柵格系統是從平面柵格系統發展而來。對於網頁設計來說，柵格系統的使用，不僅可以讓網頁的資訊呈現更加美觀易讀，更具可用性。而且，對於前端開發來說，網頁將更有彈性與規範的。如果有許多CSS框架支援柵格功能，可參考文章《 介紹27款經典的CSS框架 》。

H —  HTML

超文本置標語言 （ 英文 ： HyperText Markup Language ， HTML ）是為「 網頁 建立和其它可在 網頁瀏覽器 中看到的資訊」設計的 置標語言 。 HTML被用來結構化資訊－例如標題、段落和清單等等，也可用於在一定程度上描述文件的外觀和 語意 。由 蒂姆·伯納斯-李 給出原始定義，由 IETF 用簡化的 SGML （標準通用置標語言）語法進行進一步發展的HTML，後來成為國際標準，由 萬維網聯盟 （W3C）維護。

最新版本是 HTML5 它是HTML下一個的主要修訂版本，現在仍處於發展階段。目標是取代1999年訂定的 HTML  4.01和 XHTML  1.0 標準，以期能在網路應用快速發展的時候，使網路標準達到符合當代的網路需求。廣義論及HTML5時，實際指的是包括HTML、 CSS 和 JavaScript 在內的一套技術組合。

I — IE

Windows Internet Explorer （舊稱 Microsoft Internet Explorer ，簡稱 Internet Explorer ，縮寫 IE ），是 微軟公司 推出的一款 網頁瀏覽器 。截至2010年9月止，統計的數據顯示Internet Explorer的 市佔率 高達59.65%。雖然它仍然是使用最廣泛的網頁瀏覽器，但與 2003年 最高峰時相比，市場佔有率相差超過30%。

Internet Explorer對一些標準化技術都有一定程度上的支持，但亦有很多運行上的差距和兼容性的故障 ，這導致技術開發者的批評日益增加。批評增加的情況，在很大程度上是歸因於Internet Explorer的競爭對手相對地已提供完全的技術支持，標準規格（Standards-compliant）的應用亦越來越廣泛起來。因為Internet Explorer在全球廣為應用，網頁開發者在尋求 跨平台 的程式碼時常常會發現Internet Explorer的漏洞、私有的功能集合和對標準支援的不完善。

2011年3月14日發布的Internet Explorer 9瀏覽器大幅提高對CSS3和HTML5等W3C規範的支援程度，這個版本也是Internet Explorer瀏覽器第一個採用GPU加速的版本，正式版於Acid3測試中獲得95/100分，相比以往版本有很大進步。可以認為，從Internet Explorer 9開始，Internet Explorer瀏覽器對W3C規範的支援將不再是問題。

J —  JavaScript

JavaScript  是一種廣泛用於 用戶端 Web開發 的 腳本語言 ，常用來為HTML網頁新增動態功能，例如回應使用者的各種操作。它最初由 網景公司 的 Brendan Eich 設計，是一種動態、弱類型、基於原型的語言，內建支援類別。 JavaScript是 Sun公司 的註冊商標。 Ecma國際 以JavaScript為基礎制定了 ECMAScript 標準。 JavaScript也可以用於其他場合，如伺服器端程式設計。完整的JavaScript實作包含三個部分： ECMAScript ， 文檔物件模型 ， 位元組順序記號 。

Netscape公司在最初將其腳本語言命名為LiveScript來Netscape在與Sun合作之後將其改名為JavaScript。 JavaScript最初受 Java 啟發而開始設計的，目的之一就是“看起來像Java”，因此語法上有類似之處，一些名稱和命名規格也藉自Java。但JavaScript的主要設計原則源自於 Self 和 Scheme .JavaScript與Java名稱上的近似，是當時網景為了行銷考量與Sun公司達成協議的結果。為了取得技術優勢， 微軟 推出了 JScript 來迎戰JavaScript的 腳本語言 。為了互用性， Ecma國際 （前身為 歐洲電腦製造商協會 ）創建了ECMA-262標準（ECMAScript）。現在兩者都屬於 ECMAScript 的實作。儘管JavaScript作為給非程式設計師的 腳本語言 ，而非作為給程式設計師的 程式語言 來推廣和宣傳，但是JavaScript具有非常豐富的特性。

K — Keyword Optimization

關鍵字優化 ，也稱為 搜尋引擎優化 （ Search Engine Optimization ，簡稱 SEO ）是一種利用 搜尋引擎 的搜尋規則來提高目的 網站 在有關搜尋引擎內的排名的方式。由於不少研究發現，搜尋引擎的使用者往往只會留意搜尋結果最前面的幾個條目，所以不少 網站 都希望透過各種形式來影響搜尋引擎的排序。當中尤以各種依賴廣告維生的網站為甚。

所謂“針對搜尋引擎進行優化的處理”，是指為了要讓網站更容易被搜尋引擎接受。搜尋引擎會將網站彼此間的內容做一些相關性的資料比對，然後再由 瀏覽器 將這些內容以最快速且接近最完整的方式，體現給搜尋者。

搜尋引擎優化對於任何網站來說，要想在網站推廣中取得成功，搜尋引擎優化都是至為關鍵的一項任務。同時，隨著搜尋引擎不斷變換它們的排名演算法規則，每次演算法上的改變都會讓一些排名很好的網站在一夜之間名落孫山，而失去排名的直接後果就是失去了網站固有的可觀訪問量。所以每次搜尋引擎演算法的改變都會在網站之中引起不小的騷動和焦慮。可以說，搜尋引擎優化是一項愈來愈來的任務。

L — Less

Less   最早是一個ruby的gem，讓CSS具有動態語言的特性，這些特性包括變量，操作符，嵌套規則。其實Less真正的作用是將使用高級特性的CSS轉換成標準的CSS。這些都是在Web客戶端發起請求時透過Http Handler來完成的。也可以是編輯時就完成的。此外，Less可以配置成自動最小化所產生的CSS文件，不僅節省了頻寬，並且使最終用戶體驗更上一層。另外有.Net版本的 Less 。

M — MVC

MVC模式 （Model-View-Controller）是 軟體工程 中的一種 軟體架構 模式，將軟體系統分成三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。 MVC模式最早由 Trygve Reenskaug 在1974年提出，是 施樂帕羅奧多研究中心 （Xerox PARC）在1980年代為程式語言 Smalltalk 發明的一種軟體設計模式。 MVC模式 的目的是實現一種動態的程式設計，使後續對程式的修改和擴展簡化，並且使程式某一部分的重複利用成為可能。除此之外，此模式透過對複雜度的簡化，使程式結構更加直觀。軟體系統透過對自身基本部份分離的同時也賦予了各個基本部分應有的功能。

N — Node.JS

Node  是一個Javascript運行環境(runtime) ， 實際上它是對Google  V8 引擎（應用於Google Chrome瀏覽器)進行了封裝。 V8 引 擎執行Javascript的速度非常快，效能非常好。 Node對一些特殊用例進行了最佳化，提供了替代的API，使得V8在非瀏覽器環境下運作得更好。範例 如，在伺服器環境中，處理二進位資料通常是必不可少的，但Javascript對此支援不足，因此，V8.Node增加了Buffer類，方便且有效率地 處理二進位資料。因此，Node不僅簡單的使用了V8,還對其進行了優化，使其在各環境下更加給力。 Node.js 包羅萬象，但最主要的一點是，它提供了在網頁瀏覽器之外運行Javascript的途徑。 Javascript廣泛應用於網站的前端開發。 Node讓這種流行的程式語言能夠在更多環境下運行，甚至是網站的伺服器端。

O — Object

物件 （object），是 物件導向 (Object Oriented) 中的術語，既表示客觀世界 問題空間 (Namespace)中的某個具體的事物，又表示軟體系統 解空間 中的基本元素。在軟體系統中，物件具有唯一的 識別符 ，物件包括 屬性 (Properties)和 方法 (Methods)，屬性就是需要記憶的訊息，方法就是物件能夠提供的服務。在物件導向(Object Oriented) 的軟體中，物件(Object)是某一個 類別 (Class)的 實例 (Instance)。

P — PHP

PHP （ H ypertext  P reprocessor ）是一種在電腦上運行的腳本語言，主要用途是在於處理動態網頁，也包含了命令列運行介面（command line interface），或產生圖形使用者介面（GUI）程式. PHP最早由 Rasmus Lerdorf 在1995年發明，而現在PHP的標準則由PHP Group和開放原始碼社群維護。 PHP以PHP License作為授權協議，不過因為這個協議限制了PHP名稱的使用，所以和開放原始碼授權協議 GPL 不相容。

PHP的應用範圍相當廣泛，尤其是在網頁程式的開發上。一般來說PHP大多是運行在網頁伺服器上，透過執行PHP程式碼來產生使用者瀏覽的網頁。 PHP可以在多數的伺服器和作業系統上運行，而且使用PHP完全是免費的。根據2007年4月的統計數據，PHP已經安裝在超過2000萬個網站和100萬台伺服器上。

Q — Query

查詢 ，有很多種意思。例如查詢語言用來和儲存資料的擴展系統交互，一個很好的例子就是SQL用來操作關係資料庫。另一種意思是，一個查詢字串，作為URL的一部分用於Web應用程式中傳遞數據，查詢字串的格式一般是鍵值對形式。

R — Regular Expressions

正規表示式（ 英文：Regular Expression、regex或regexp，縮寫為RE），也譯為正規表示法、 常規表示法，在電腦科學中，是指一個用來描述或符合一系列符合某個句法規則的字串的單一字串。在許多 文字編輯器 或其他工具裡，正規表示式通常被用來檢索和/或取代那些符合某個模式的文字內容。許多 程式設計語言 都支援利用正規表示式進行字串操作。例如，在 Perl 中就內建了一個功能強大的正規表示式引擎。正規表示式這個概念最初是由 Unix 中的工具軟體（例如 sed 和 grep ）普及開的。

S — Source Control

原始碼管理 ，也稱為 版本控制 ，是一種 軟體工程 技巧，藉此能在軟體開發的過程中，確保由不同人所編輯的同一程式檔案都得到同步。 軟體設計師 常會利用版本控制來追蹤、維護 原始碼 、 文件 以及 設定檔 等等的更動，並且提供控制這些更動控制權的 程式 。在最簡單的情況下， 軟體設計師 可以自行保留一個程式的許多不同版本，並且為它們做適當的編號。這種簡單的方法已被用在許多大型的軟體專案中。這是一個可以達到目的的方法，但不夠有效率。除了要同時維護許多幾乎一樣的 程式碼 備份外；而且極度依賴 軟體設計師 的自我修養與開發紀律，但這卻常常是導致錯誤發生的原因。

有時候，一個程式同時存有兩個以上的版本也有其必要性，例如：在一個為了部署的版本中程式錯誤已經被修正、但沒有加入新功能；在另一個開發版本則有新的功能正在開發、也有新的錯誤待解決，這使得同時間需要不同的版本並修改。此外，為了找出只存在於某一特定版本中的 程式錯誤 、或找出 程式錯誤 出現的版本，軟體除錯者也必須藉由比對不同版本的程式碼以找出問題的位置。

T — TDD

測試驅動開發 （Test-driven development）是現代電腦 軟體開發 方法的一種。利用 測試 來驅動 軟體 程式的設計和實作。測試驅動開始流行於1990年代。測試驅動開發是 極限編程 中倡導的程序開發方法，方法主要是先寫測試程序，然後再編碼使其通過測試。測試驅動開發的目的是取得快速回饋並使用「illustrate the main line」方法來建立程式。

測試驅動開發的比喻。開發可以從兩個方面去看待：實現的功能和品質。測試驅動開發更像兩頂帽子思考法的開發方式，先戴上實現功能的帽子，在測試的輔助下，快速實現正確的功能；再戴上重構的帽子，在測試的保護下，通過去除冗餘和重複的程式碼，提高程式碼重用性，實現對品質的改進。可見測試在測試驅動開發中確實屬於核心地位，貫穿了開發的始終。

U — Unit Testing

單元測試 （又稱 模組測試 ）是針對 程式模組 ( 軟體設計 的最小單位)來進行正確性檢定的測試工作。程式單元是應用的最小可測試部件。在 過程化編程 中，一個單元就是單一程式、函數、過程等；對於物件導向編程，最小單元就是方法，包括基底類別（超類別）、抽象類別、或衍生類別（子類別）中的方法。

通常來說，程式設計師每修改一次程式就會進行最少一次單元測試，在編寫程式的過程中前後很可能要進行多次單元測試，以證實程式達到軟體規格書( en:Specification )要求的工作目標，沒有臭蟲；雖然單元測試不是什麼必須的，但也不壞，這牽涉到專案管理的政策決定。

V — VIM

Vim  是從 vi 發展出來的 文字編輯器 。程式碼補完、編譯及錯誤跳轉等方便程式設計的功能特別豐富，在程式設計師中被廣泛使用。和 Emacs 並列成為 類Unix系統 使用者最喜歡的編輯器。 Vim的第一個版本由 Bram Moolenaar 在1991年發布。最初的簡稱是 V i  IM itation，隨著功能的不斷增加，正式名稱改成了 V i  IM proved。現在是在 開放原始碼 方式下發行的 自由軟體 。

W — WordPress

WordPress  是一種使用 PHP 語言開發的 部落格 平台，使用者可以在支援 PHP 和 MySQL   資料庫 的伺服器上架設自己的網誌。也可以把 WordPress 當作一個 內容管理系統 （CMS）來使用。 WordPress 是一個免費的 開源 項目，在 GNU通用公共授權 下授權發布。目前最新版本為2011年2月24日發布的3.0.5官方簡體中文版，另外還有包括英文在內的多種語言可選。

X — XSS

跨網站指令碼（ Cross-site scripting ，通常簡稱為XSS ）是一種網站應用程式的安全漏洞攻擊，允許惡意使用者將程式碼注入到網頁上，其他使用者在觀看網頁時就會受到影響。這類攻擊通常包含了 HTML 以及使用者端 腳本語言 。

Y — YUI

Yahoo! UI Library  ( YUI ) 是一個開放原始碼的  JavaScript  函數庫，為了能建立一個高互動的網頁，它採用了 AJAX ， DHTML  和  DOM  等程式碼技術。它也包含了許多  CSS  資源。

Z — Z index

Z-Index
 是CSS屬性，設定元素的堆疊順序。擁有較高堆疊順序的元素總是會處於堆疊順序較低的元素的前方。此屬性設定一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離使用者更近，為負數則表示離使用者更遠。