暢談HTML+CSS+JS（詳細解說）-js教程-PHP中文網

首頁

web前端

js教程

暢談HTML+CSS+JS（詳細解說）

亚连

May 18, 2018 pm 03:43 PM

cssjavascript

以下是我自己總結的一些想法以及一些收穫，由於個人學的淺，如果有說的不對或不準確的地方，還請大家批評指正。

前端開發三劍客HTML CSS JS之名是如雷貫耳，是前端入門的基礎之基礎，前端程式設計師們用這三個元件構成了數量眾多的網頁。然而在初學的時候，由於無法迅速了解全部知識點，所以在學習的時候往往會有盲人摸象的感覺——就是對於各個組件的功能和分工不甚了解，無法從整體上把握學習方向，因而較難構成完整的知識體系，這是比較頭痛的事。我這個人學習有個特點，我喜歡從底層知識學起，然後在這個基礎上一層層加上其他內容，最後構成一個完整的框架。這是我習慣的學習方式。

開始的時候，我還是有點頭暈的，知識點一個接一個，互相之間也有交叉，前面與後面聯繫起來，後面又與前面聯繫起來，搞懂還是要費勁。但還是整個內容過完兩三次之後，整個框架就清晰多了。簡單來說，HTML CSS JS的分工體現了軟體分層的概念。大體的功能分配是：HTML負責描述內容，CSS負責描述元素的樣式，JS則負責實現網頁的動作。這樣說，其實還不夠清晰，新手是看不太懂的，我想我們可以從網頁的發展歷程來理解為什麼會有這三種劃分。

早期的網頁是靜態網頁，網頁中的元素基本上都沒有動作，人們上網主要是瀏覽資訊，網頁的互動性要求也很低。我們可以看一下96年雅虎的網站（圖摘自網路），網頁上有圖片，超連結和搜尋框，大多都採用的預設樣式，這樣的網頁樣式與內容都混合在一起，如果要修改網頁的樣式，就需要挨個修改，這樣就會比較麻煩。那要怎麼解決這個問題呢？網頁開發的開拓者將樣式從內容中抽離出來，將所有描述網頁樣式的語句合併成一個文件，這個文件叫層疊樣式表，簡稱CSS。如果我們要修改樣式的話就從這個檔案修改，透過一些選擇器，我們可以快速地更改某一個或某一類元素的樣式，從而提高效率。

將樣式從網頁中抽離後，HTML語言只負責描述網頁內容，這是什麼意思呢？在HTML中，我們用

元素標記頭部文件，用元素標記網頁名稱，用元素標記網頁主體，用元素標記表格等等，透過向這些元素中填寫內容，我們就寫出了一個個有特定樣式的節點，所有的這些HTML節點就構成了網頁內容。這些標記大多是有預設樣式的，如果我們對預設樣式不滿意，我們也可以在CSS檔案中修改。

完成了內容與表示的分離後，我們要解釋網頁的動作了。靜態頁面有個問題是，網頁的內容在產生後就不會再改變了。而我們在瀏覽網頁的時候，需要進行交互，我們需要登陸微博來評論點贊轉發，我們需要在玩網頁遊戲的時候控制人物的動作，這部分功能都是由JavaScript(JS)承載的。

　　JavaScript是一種輕量級的程式語言，它不像C/C /JAVA等對資料類型作出嚴格規定，也沒有指針，操作符重載等等內容。說起來這名字很有迷惑性，名字裡有Java，大家卻都說跟Java沒有關係，這著實讓人頭痛。這好比說拍部電影叫《我叫潘金蓮》，卻說自己跟潘金蓮沒有關係。（笑）開個玩笑。不過相較起來，JavaScript與Java的語法有許多相似之處，但JavaScript相比Java簡單許多。 JS不像Java是平台型的語言，有各種各樣的元件、框架，JS是與web緊密連結起來的。 JS透過插入到HTML中執行的，透過JavaScript我們可以實現寫入HTML輸出，對事件作出反應，改變HTML內容、圖像、樣式，驗證輸入等功能。基本上網頁上所有的互動都是透過JS函數實現的。這部分也是三劍客中最難的部分，我現在掌握得也是馬馬虎虎。後面的文章會針對具體的知識點再展開說。

JS檔案和CSS檔案最終是要套用在HTML中的。在HTML中，我們可以透過<script>元素來插入JS程式碼，<script>元素可以放在<head>或<body>中。或在外部編寫JS文件，在HTML中引用。而CSS程式碼則稍有區別，我們可以透過<style>元素插入CSS程式碼，<style>元素必須放在<head>元素中。或在外部編寫CSS文件，在HTML中引用。也可以直接在某元素中規定CSS樣式，這種叫內聯樣式。 </script>

透過最後這部分內容，我們可以試著總結這三個部分的關係了。 HTML好比是房子的地基，CSS和JS是，這三個部分一起組成漂亮的房子。我們不能把他們分開說，某某部分是個房子，只有三個一起才能組成一個漂亮的房子。

上面是我整理給大家的，希望今後對大家有幫助。

p5.js 畢達哥拉斯樹的實作碼_javascript技巧

基於js中的儲存鍵值對以及注意事項介紹_javascript技巧

javascript深入理解js閉包

以上是暢談HTML+CSS+JS（詳細解說）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。

See all articles