為什麼所有網站都是以結構，風格和行為相結合的方式構建的
用來描述前端網站開發的一個常見類比是它就像一個三腳凳子。 這三條腿，也被稱為網頁開發的三層，是結構，風格和行為。
Web開發的三個層面
- 結構或內容層
- 網頁的結構或內容層是該頁面的底層HTML代碼。 就像房子的框架為房子的其他部分建立了一個堅實的基礎，HTML的堅實基礎創建了一個可以創建網站的平台。 HTML結構可以由文本或圖像組成，並且它包含訪問者用於瀏覽該網站的超鏈接。
- 樣式或表示層
- 行為
- 行為圖層是網頁的圖層，可以響應不同的用戶操作或根據一組條件對網頁進行更改。 對於大多數Web頁面，行為級別將是頁面上的JavaScript交互。
為什麼要分離圖層？
在創建網頁時，最好將圖層盡可能分開。 應將結構分配給您的HTML，CSS的可視樣式以及網站使用的任何腳本的行為。
分離圖層的一些好處是：
- 共享資源
- 當您編寫外部CSS文件或JavaScript文件時，您可以在網站上的任何頁面上使用該文件。 如果您需要對該文件進行更改（也許更新網站上的某些印刷樣式） ，那麼每個使用該樣式表的頁面都將獲得更改。 沒有必要單獨編輯網站的每個頁面，對於大型網站來說，這可能是一件艱苦的事情。
- 更快的下載
- 一旦您的客戶第一次下載了腳本或樣式表，它將通過網頁瀏覽器進行緩存。 由於這些共享資源現在包含在緩存中，因此瀏覽器中請求的其他頁面加載速度更快，從而提高整體頁面速度和性能。
- 多人團隊
- 如果您有多個人同時在網站上工作，則可以使用用於“檢入”和“檢出”文件的系統，以確保團隊中的每個人都能使用這些文件的最新版本。 如果風格和行為與結構文檔交織在一起，這就更難做了。
- SEO
- 一個風格和結構明確分離的網站可能對搜索引擎更好，因為這些網站可以更有效地抓取該內容並理解該網頁，而不會陷入視覺風格或行為信息之中。
- 無障礙
- 外部樣式表和腳本文件更容易被人們和瀏覽器訪問。 由於風格和結構的分離，像屏幕閱讀器這樣的軟件可以更輕鬆地處理來自結構層的內容，而不會因為無法使用的樣式而陷入困境。
- 向後兼容性
- 當您有一個設計了開發層的網站時，它將更向後兼容，因為無法使用某些CSS樣式或禁用JavaScript的瀏覽器或設備仍可以查看HTML。 然後，您的網站可以通過支持它們的瀏覽器功能逐步增強。
HTML - 結構層
結構層是您存儲客戶想要閱讀或查看的所有內容的地方。 這將用符合標準的HTML5編碼，它可以包括文本和圖像以及多媒體（視頻，音頻等）。 確保網站內容的每個方面都在結構圖層中進行表示是非常重要的。 這允許關閉JavaScript的任何客戶或者無法查看CSS仍然可以訪問整個網站的客戶，即使不是該網站的所有功能。
CSS - 樣式圖層
您將在外部樣式表中為您的網站創建所有視覺樣式。 您可以使用多個樣式表，但請記住，每個單獨的CSS文件都需要HTTP請求才能獲取，從而影響網站的性能。
JavaScript - 行為層
JavaScript是行為層最常用的語言，但正如我之前提到的，CGI和PHP也可以生成網頁行為。 也就是說，當大多數開發人員引用行為層時，他們指的是直接在Web瀏覽器中激活的圖層 - 所以JavaScript幾乎總是選擇的語言。 您可以使用此圖層直接與DOM或文檔對像模型進行交互。 在內容層中編寫有效的HTML對於行為層中的DOM交互也很重要。
在構建行為層時，應該像使用CSS一樣使用外部腳本文件。 您可以獲得使用外部樣式表的所有優點。