web前端三層結(jié)構(gòu)是什么

本篇內(nèi)容介紹了“web前端三層結(jié)構(gòu)是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

web前端的三層結(jié)構(gòu)分別是：1、結(jié)構(gòu)層，由HTML或XHTML之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建，用于存儲(chǔ)客戶想要閱讀或查看的所有內(nèi)容，可以包含文本、圖像、超鏈接和多媒體（視頻、音頻等）。2、表示層，由CSS負(fù)責(zé)創(chuàng)建，包含有關(guān)如何在Web瀏覽器中顯示網(wǎng)頁文檔的樣式說明。3、行為層，負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)”這一問題，使網(wǎng)站具有交互性，允許頁面響應(yīng)用戶操作或基于一組條件進(jìn)行更改。

Web前端是給用戶展示的網(wǎng)頁頁面，即網(wǎng)站的前臺(tái)部分。

Web前端開發(fā)思路是把網(wǎng)頁分成三個(gè)層次，即：結(jié)構(gòu)層、表示（樣式）層、行為層。

• 結(jié)構(gòu)層（structural layer）由 HTML 或 XHTML 之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁內(nèi)容的語義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P 標(biāo)簽表達(dá)了這樣一種語義：“這是一個(gè)文本段?！?/p>

• 表示層（presentation layer） 由 CSS 負(fù)責(zé)創(chuàng)建。 CSS 對(duì)“如何顯示有關(guān)內(nèi)容”的問題做出了回答。

• 行為層（behavior layer）負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)”這一問題。這是 Javascript 語言和 DOM 主宰的領(lǐng)域。

網(wǎng)頁的表示層和行為層總是存在的，即使我們未明確地給出任何具體的指令也是如此。此時(shí)， Web 瀏覽器將把它的默認(rèn)樣式和默認(rèn)事件處理函數(shù)施加在網(wǎng)頁的結(jié)構(gòu)層上。例如，瀏覽器會(huì)在呈現(xiàn)“文本段”元素時(shí)留出頁邊距，有些瀏覽器會(huì)在用戶把鼠標(biāo)指針懸停在 某個(gè)元素的上方時(shí)彈出一個(gè)顯示著該元素的 title 屬性值的提示框，等等。

HTML：結(jié)構(gòu)層

網(wǎng)頁的結(jié)構(gòu)或內(nèi)容層是該頁面的基礎(chǔ)HTML代碼。正如房屋的框架為房屋的其他部分構(gòu)建了一個(gè)堅(jiān)實(shí)的基礎(chǔ)，HTML的堅(jiān)實(shí)基礎(chǔ)創(chuàng)建了一個(gè)可以在其上創(chuàng)建網(wǎng)站的平臺(tái)。

結(jié)構(gòu)層用于存儲(chǔ)客戶想要閱讀或查看的所有內(nèi)容。HTML結(jié)構(gòu)可以包含文本和圖像，它包括訪問者用于瀏覽網(wǎng)站的超鏈接。這是在符合標(biāo)準(zhǔn)的HTML5中編碼的，可以包括文本，圖像和多媒體（視頻，音頻等）。

CSS：樣式層

該層指示結(jié)構(gòu)化HTML文檔如何看待網(wǎng)站的訪問者，并由CSS（層疊樣式表）定義。這些文件包含有關(guān)如何在Web瀏覽器中顯示文檔的樣式說明。樣式層通常包括基于屏幕大小和設(shè)備更改站點(diǎn)顯示的媒體查詢。

網(wǎng)站的所有視覺樣式都應(yīng)位于外部樣式表中。您可以使用多個(gè)樣式表，但請(qǐng)記住，每個(gè)CSS文件都需要HTTP請(qǐng)求才能獲取它，從而影響站點(diǎn)性能。

JavaScript：行為層

行為層使網(wǎng)站具有交互性，允許頁面響應(yīng)用戶操作或基于一組條件進(jìn)行更改。JavaScript是行為層最常用的語言，但CGI和PHP也經(jīng)常被使用。

當(dāng)開發(fā)人員引用行為層時(shí)，大多數(shù)都是指在Web瀏覽器中直接激活的層。您可以使用此圖層直接與DOM（文檔對(duì)象模型）進(jìn)行交互。在內(nèi)容層中編寫有效的HTML對(duì)于行為層中的DOM交互非常重要。在構(gòu)建行為層時(shí)，應(yīng)該像使用CSS一樣使用外部腳本文件來優(yōu)化速度和性能。

擴(kuò)展知識(shí)：分層的好處

1、共享資源：

當(dāng)您編寫外部CSS或JavaScript文件時(shí)，站點(diǎn)上的任何頁面都可以使用該文件。如果您需要對(duì)該文件進(jìn)行更改，也許更新網(wǎng)站上的某些排版樣式，則使用該樣式表的每個(gè)頁面都會(huì)得到更改。沒有必要單獨(dú)編輯網(wǎng)站的每個(gè)頁面，這對(duì)于大型網(wǎng)站來說可能是一項(xiàng)艱苦的任務(wù)。

2、下載速度更快：

首次由客戶下載腳本或樣式表后，Web瀏覽器會(huì)對(duì)其進(jìn)行緩存。由于這些共享資源現(xiàn)在包含在瀏覽器的緩存中，因此瀏覽器中請(qǐng)求的其他頁面加載速度更快，從而提高了整體頁面速度和性能。

3、多人團(tuán)隊(duì)：

如果您有多個(gè)人同時(shí)在網(wǎng)站上工作，您可以使用允許文件簽入和簽出的系統(tǒng)，以確保每個(gè)人都使用最新版本。如果樣式和行為與結(jié)構(gòu)文檔交織在一起，那就更難了。

4、搜索引擎優(yōu)化：

一個(gè)明確分離風(fēng)格和結(jié)構(gòu)的網(wǎng)站可能會(huì)對(duì)搜索引擎有更好的表現(xiàn)，因?yàn)樗鼈兛梢愿行У刈ト?nèi)容并理解頁面而不會(huì)陷入視覺風(fēng)格和行為信息。

5、輔助功能：

外部樣式表和腳本文件更易于人們和瀏覽器訪問。屏幕閱讀器等軟件可以更輕松地處理結(jié)構(gòu)層中的內(nèi)容，而無需處理無論如何都無法使用的樣式。

6、向后兼容性：

使用單獨(dú)的開發(fā)層設(shè)計(jì)的站點(diǎn)更可能向后兼容，因?yàn)闊o法使用某些CSS樣式或禁用了JavaScript的瀏覽器和設(shè)備仍然可以查看HTML。然后，您可以使用支持它們的瀏覽器的功能逐步增強(qiáng)您的網(wǎng)站。

“web前端三層結(jié)構(gòu)是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！