首頁 > web前端 > 前端問答 > web前端只是表示層嗎

web前端只是表示層嗎

青灯夜游
發布: 2023-02-02 10:01:45
原創
2132 人瀏覽過

不是。 web前端可分為三層:1、結構層,由HTML或XHTML之類的標記語言負責創建,用於儲存客戶想要閱讀或查看的所有內容,可以包含文字、圖像、超連結和多媒體。 2、表示層,由CSS負責創建,包含有​​關如何在網頁瀏覽器中顯示網頁文件的樣式說明。 3.行為層,是網頁的行為,由JS語言創建,可即時更新網頁中的內容,使網站具有互動性,允許頁面響應用戶操作或基於一組條件進行更改。

web前端只是表示層嗎

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

W3C是指萬維網聯盟(World Wide Web Consortium),創立於1994年10月。 W3C的出現是為了定製網頁開發的標準,讓使用相同的網頁能在不同的瀏覽器中有相同的效果,所以我們定制編寫的網頁都需要遵循W3C的規範。

Web前端開發想法是把網頁分成三個層次,分別是:結構層、表示(樣式)層、行為層。

HTML:結構層

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

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

CSS:樣式層

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

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

JavaScript:行為層

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

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

簡單來說,JavaScript 與HTML 和CSS 共同構成了我們所看到的網頁

  • HTML 用來定義網頁的內容,例如標題、正文、圖片等;

  • CSS 用來控制網頁的外觀,例如顏色、字體、背景等;

  • JavaScript 使用來即時更新網頁中的內容,例如從伺服器取得資料並更新到網頁中,修改某些標籤的樣式或其中的內容等,可以讓網頁更加生動。

HTML是超文本標記語言(HyperText Markup Language)是一種用來建立網頁的標準標記語言。 HTML負責網頁三個組成部分中的結構,HTML使用標籤的形式來識別網頁中的不同組成部分。所謂的超文本指的是超鏈接,使用超鏈接可以讓我們從一個頁面跳到另一個頁面。

CSS 是指層疊樣式表 (Cascading Style Sheets),樣式定義如何顯示HTML 元素,用於控制web頁面的外觀。 CSS負責網頁三個組成部分中的表現,樣式通常保存在外部的 .css 檔案中。我們只需要編輯一個簡單的 CSS 文件就可以改變所有頁面的佈局和外觀。

JavaScript 是腳本語言(簡稱"JS"),是一種輕量級的程式語言,用來控制網頁的行為。 JavaScript負責網頁三個組成部分中的行為,可插入 HTML 頁面的程式碼,JavaScript 插入 HTML 頁面後,可由所有的現代瀏覽器執行。

擴充知識:分層的好處

1、共享資源:

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

2、下載速度更快:

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

3、多人團隊:

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

4、搜尋引擎優化:

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

5、輔助功能:

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

6、向後相容性:

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

(學習影片分享:web前端入門

以上是web前端只是表示層嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板