從html到JavaScript網(wǎng)站建設(shè)時(shí)應(yīng)理清的三個(gè)層次

2022-05-18 分類(lèi)：網(wǎng)站建設(shè)

普通用戶看到的網(wǎng)站，實(shí)際上包含了前端表現(xiàn)頁(yè)面，和后端管理系統(tǒng)。諸如網(wǎng)站的設(shè)計(jì)、人機(jī)交互以及頁(yè)面內(nèi)容呈現(xiàn)等，都屬于前端頁(yè)面部分。而網(wǎng)站內(nèi)容管理則屬于后端，后端系統(tǒng)除去網(wǎng)站管理人員外，一般用戶無(wú)法瀏覽接觸，它包含了CMS系統(tǒng)和存放網(wǎng)站內(nèi)容的數(shù)據(jù)庫(kù)等。要系統(tǒng)討論網(wǎng)站建設(shè)和網(wǎng)站制作知識(shí)，自然是一件復(fù)雜且耗時(shí)的事情，所以本文嘗試從前端頁(yè)面談起，從html到JavaScript網(wǎng)站建設(shè)時(shí)應(yīng)理清的三個(gè)層次談起。那些在網(wǎng)站建設(shè)行業(yè)工作的人，把網(wǎng)站前端網(wǎng)站開(kāi)發(fā)比作三條腿的凳子，其分別是網(wǎng)站開(kāi)發(fā)的三個(gè)層次：包含了結(jié)構(gòu)、樣式和行為。

為什么要分隔這些層？

當(dāng)您創(chuàng)建網(wǎng)頁(yè)時(shí)，其結(jié)構(gòu)應(yīng)歸屬于HTML，視覺(jué)樣式應(yīng)歸屬于CSS，行為應(yīng)歸屬于JavaScript腳本。分層的一些好處包括：

共享資源：當(dāng)您編寫(xiě)外部CSS或JavaScript文件時(shí)，站點(diǎn)上的任何頁(yè)面都可以使用該文件。如果您需要對(duì)該文件進(jìn)行更改，可能是為了更新網(wǎng)站上的某些排版樣式，則使用該樣式表的每個(gè)頁(yè)面都將獲得更改。沒(méi)有必要單獨(dú)編輯網(wǎng)站的每一頁(yè)，這對(duì)一個(gè)大型網(wǎng)站來(lái)說(shuō)可能是一項(xiàng)艱巨的任務(wù)。

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

方便團(tuán)隊(duì)協(xié)作：如果您有多個(gè)人同時(shí)在一個(gè)網(wǎng)站上工作，您可以使用允許檢入和檢出文件的系統(tǒng)，以確保每個(gè)人都在使用最新版本。如果樣式和行為與結(jié)構(gòu)文檔交織在一起，則很難做到這一點(diǎn)。

搜索引擎優(yōu)化：對(duì)于搜索引擎來(lái)說(shuō)，具有清晰的風(fēng)格和結(jié)構(gòu)分離的站點(diǎn)可能會(huì)表現(xiàn)得更好，因?yàn)樗鼈兛梢愿行У刈ト?nèi)容并理解頁(yè)面，而不會(huì)陷入視覺(jué)樣式和行為信息的泥潭。

可訪問(wèn)性更強(qiáng)：外部樣式表和腳本文件更便于用戶和瀏覽器訪問(wèn)。諸如屏幕閱讀器之類(lèi)的軟件可以更輕松地處理來(lái)自結(jié)構(gòu)層的內(nèi)容，而無(wú)需處理他們無(wú)論如何都不能使用的樣式。

兼容性更好：使用單獨(dú)的開(kāi)發(fā)層設(shè)計(jì)的站點(diǎn)更有可能是向后兼容的，因?yàn)椴荒苁褂锰囟–SS樣式或禁用JavaScript的瀏覽器和設(shè)備仍然可以查看HTML。然后，您可以逐步增強(qiáng)您的網(wǎng)站與支持他們的瀏覽器的功能。

接下來(lái)，讓我們一起梳理下并回顧下三個(gè)層次的知識(shí)點(diǎn)：

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

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

結(jié)構(gòu)層是存儲(chǔ)客戶想要閱讀或查看的所有內(nèi)容的地方。HTML結(jié)構(gòu)可以由文本和圖像組成，它包括訪問(wèn)者將用于在網(wǎng)站上導(dǎo)航的超鏈接。這是用符合標(biāo)準(zhǔn)的HTML5編碼的，可以包括文本、圖像和多媒體(視頻、音頻等)。站點(diǎn)內(nèi)容的每個(gè)方面都應(yīng)該在結(jié)構(gòu)層中表示。這允許已關(guān)閉JavaScript或無(wú)法查看整個(gè)網(wǎng)站(如果不是全部功能)的CSS訪問(wèn)的客戶。

CSS：樣式圖層

這一層規(guī)定了結(jié)構(gòu)化HTML文檔對(duì)站點(diǎn)訪問(wèn)者的外觀，并由CSS(層疊樣式表)定義。這些文件包含有關(guān)如何在Web瀏覽器中顯示文檔的樣式說(shuō)明。樣式層通常包括根據(jù)屏幕大小和設(shè)備更改站點(diǎn)顯示的媒體查詢(xún)。網(wǎng)站的所有視覺(jué)樣式都應(yīng)位于外部樣式表中。您可以使用多個(gè)樣式表，但是請(qǐng)記住，每個(gè)CSS文件都需要一個(gè)HTTP請(qǐng)求來(lái)獲取它，這會(huì)影響站點(diǎn)性能。

JavaScript：行為層

行為層使網(wǎng)站具有交互性，允許頁(yè)面響應(yīng)用戶操作或根據(jù)一組條件進(jìn)行更改。JavaScript是行為層最常用的語(yǔ)言，但CGI和PHP也非常常用。當(dāng)開(kāi)發(fā)人員提到行為層時(shí)，大多數(shù)指的是直接在Web瀏覽器中激活的層。您可以使用該層直接與DOM(DocumentObjectModel，文檔對(duì)象模型)交互。在內(nèi)容層中編寫(xiě)有效的HTML對(duì)于行為層中的DOM交互非常重要。在行為層中構(gòu)建時(shí)，應(yīng)該使用外部腳本文件，就像使用CSS一樣，以?xún)?yōu)化速度和性能。

網(wǎng)站名稱(chēng)：從html到JavaScript網(wǎng)站建設(shè)時(shí)應(yīng)理清的三個(gè)層次
瀏覽路徑：http://www.bm7419.com/news/154701.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容