web前端三層結構為何

web前端的三層結構分別是：1、結構層，由HTML或XHTML之類的標記語言負責創建，用於儲存客戶想要閱讀或查看的所有內容，可以包含文字、圖像、超連結和多媒體（視訊、音訊等）。 2、表示層，由CSS負責創建，包含有​​關如何在網頁瀏覽器中顯示網頁文件的樣式說明。 3、行為層，負責回答「內容應該如何對事件做出反應」這個問題，使網站具有互動性，允許頁面響應用戶操作或基於一組條件進行更改。

本教學操作環境：windows7系統、Dell G3電腦。

Web前端是給使用者展示的網頁頁面，也就是網站的前台部分。

Web前端開發想法是把網頁分成三個層次，分別是：結構層、表示（樣式）層、行為層。

• 結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責建立。標籤，也就是那些出現在尖括號裡的單詞，對網頁內容的語義含義做出了描述，但這些標籤不包含任何關於如何顯示有關內容的資訊。例如，P 標籤表達了這樣一種語義：「這是一個文字段。」

• #表示層（presentation layer） 由 CSS 負責創建。 CSS 對「如何顯示有關內容」的問題做出了回答。

• 行為層（behavior layer）負責回答「內容應該如何對事件做出反應」這個問題。這是 Javascript 語言和 DOM 主宰的領域。

網頁的表示層和行為層總是存在的，即使我們未明確地給出任何具體的指令也是如此。此時， Web 瀏覽器將把它的預設樣式和預設事件處理函數施加在網頁的結構層上。例如，瀏覽器會在呈現「文字段」元素時留出頁邊距，有些瀏覽器會在使用者把滑鼠指標停留在某個元素的上方時彈出一個顯示著該元素的title 屬性值的提示框，等等。

HTML：結構層

網頁的結構或內容層是該頁面的基礎HTML程式碼。正如房屋的框架為房屋的其他部分構建了一個堅實的基礎，HTML的堅實基礎創建了一個可以在其上創建網站的平台。

結構層用於儲存客戶想要閱讀或查看的所有內容。 HTML結構可以包含文字和圖像，它包括訪客用於瀏覽網站的超連結。這是在符合標準的HTML5中編碼的，可以包括文本，圖像和多媒體（視頻，音頻等）。

CSS：樣式層

該層指示結構化HTML文件如何看待網站的訪客，並由CSS（層疊樣式表）定義。這些文件包含有關如何在網頁瀏覽器中顯示文件的樣式說明。樣式層通常包括基於螢幕大小和裝置更改網站顯示的媒體查詢。

網站的所有視覺樣式都應位於外部樣式表中。您可以使用多個樣式表，但請記住，每個CSS檔案都需要HTTP請求才能取得它，從而影響網站效能。 

JavaScript：行為層

#行為層讓網站具有互動性，允許頁面回應使用者操作或基於一組條件進行變更。 JavaScript是行為層最常用的語言，但CGI和PHP也常被使用。

當開發人員引用行為層時，大多數都是指在網頁瀏覽器中直接啟動的層。您可以使用此圖層直接與DOM（文件物件模型）進行互動。在內容層中編寫有效的HTML對於行為層中的DOM交互作用非常重要。在建構行為層時，應該像使用CSS一樣使用外部腳本檔案來優化速度和效能。

擴充知識：分層的好處

#1、共享資源：

當您編寫外部CSS或JavaScript檔案時，網站上的任何頁面都可以使用該檔案。如果您需要對該文件進行更改，也許更新網站上的某些排版樣式，則使用該樣式表的每個頁面都會更改。沒有必要單獨編輯網站的每個頁面，這對大型網站來說可能是一項艱苦的任務。

2、下載速度更快：

第一次由客戶下載腳本或樣式表後，網頁瀏覽器會對其進行快取。由於這些共享資源現在包含在瀏覽器的快取中，因此瀏覽器中請求的其他頁面載入速度更快，從而提高了整體頁面速度和效能。

3、多人團隊：

如果您有多個人同時在網站上工作，您可以使用允許文件簽入和簽出的系統，以確保每個人都使用最新版本。如果樣式和行為與結構文件交織在一起，那就更難了。

4、搜尋引擎優化：

一個明確分離風格和結構的網站可能會對搜尋引擎有更好的表現，因為它們可以更有效地抓取內容並理解頁面而不會陷入視覺風格和行為資訊。

5、輔助功能：

外部樣式表和腳本檔案更容易人們和瀏覽器存取。螢幕閱讀器等軟體可以更輕鬆地處理結構層中的內容，而無需處理無論如何都無法使用的樣式。

6、向後相容性：

使用單獨的開發層設計的網站更可能向後相容，因為無法使用某些CSS樣式或停用了JavaScript的瀏覽器和設備仍然可以查看HTML。然後，您可以使用支援它們的瀏覽器的功能逐步增強您的網站。

（學習影片分享：web前端入門）

以上是web前端三層結構為何的詳細內容。更多資訊請關注PHP中文網其他相關文章！