標籤：

如何通俗易懂地向初學者通解釋 jQuery、CSS3 和 HTML5 的關係？

01-14

  • HTML是由多種骨頭(標籤)組成的骨架。
  • HTML5是更多的新骨頭(標籤),同時去掉了以前覺得不好用的骨頭.
  • CSS是皮膚。CSS3是更美的皮膚

  • JS控制單個動作。(抬手,張嘴,放下手,抬腿,轉頭,握拳等)

  • jQuery是把一組常用動作編排成了一個招式。

(例如吃飯這個動作裡面編排了:拿起勺子,挖一勺飯,把勺子貼近嘴,張嘴,勺子送進嘴,勺子拿出嘴,咀嚼.)

-------------------------------------------------------------------------------------------------------

以下的東西等他學完JS後，

如果問 jQuery 和 JS 有什麼區別？，jQuery能不能取代JS？你再告訴他這個。

用招式(jQuery)跟電腦溝通更方便，不過招式(jQuery)是用單個動作(JS)組合而成的，

所以永遠不可能取代單個動作(JS)

招式(jQuery)編排了很多常用的動作(比如跑步，吃飯，跳躍，下蹲)。

但是如果需要某些高難度動作(比如 空中轉體720°用臉著地)，而招式(jQuery) 里還沒有編排。

那就需要自己用單個動作(JS)來組合一個。

----

Bootstrap 是推特出的一個前端框架，其實就是把 HTML,CSS,JS 都給你預先寫好一些。

你可以拿它預先寫好的這種界面風格直接拿來用。

按照上面的例子，就像是給你搭了一個簡單的機器人，這個機器人有特定的骨架和皮膚和一些預設動作。對界面要求暫時不高的地方可以拿來用用。比如一個小項目的第一版界面不用花特別多時間弄得多麼多麼漂亮。就可以拿 Bootstrap 先頂著（其實 Boostrap 挺漂亮的，也不差）

把整個過程比喻成組裝一個機器人的過程

HTML是這個機器人的支架 骨骼 關節 什麼的

CSS是這個機器人外部的塗裝 用什麼顏色 什麼主題（熒光白 鑽石紅）什麼的

JS是控制這個機器人行為的 讓他抬胳膊 開火 行走 跑步 等等

HTML5是一種新型材料 組成的支架 更耐用 更簡潔 更清晰 同時提供一些可以調用的新的牛逼的行為（JS API） 比如 獲得該機器人坐標 自動緩存數據 繪圖功能 等等

CSS3是一種改進版塗裝 更輕 渲染更快 顏色更加絢麗

Jquery是基於JS封裝好的控制行為的庫 用這種指令 就可以更快的寫出控制機器人行為的內容 用這種東西 寫出的指令 開發人員可以節省時間 提高效率 但是沒有原生的動作（JS） 他什麼都做不了

你完成的網站或者web APP就是組裝好的機器人 如果你用的是先進的HTML5和CSS3完成的機器人 有一個悲劇就是 只有在高級作戰環境下才能全部發揮作用（http://caniuse.com/） 如果是低級環境（牛逼哄哄的ie6等） 你的機器人就是一坨廢鐵

什麼是HTML與CSS

超文本標記語言（英文：HyperText Markup Language，HTML） 是為「網頁創建和其它可在網頁瀏覽器中看到的信息」設計的一種標記語言。HTML被用來結構化信息——例如標題、段落和列表等等，也可用來在一定程度上描述文檔的外觀和語義。1982年由蒂姆·伯納斯-李創建，由IETF用簡化的SGML（標準通用標記語言）語法進行進一步發展的HTML，後來成為國際標準，由萬維網聯盟（W3C）維護。

層疊樣式表（英語：Cascading Style Sheets，簡寫CSS） ，又稱串樣式列表，由W3C定義和維護的標準，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言。目前最新版本是CSS2.1，為W3C的候選推薦標準。CSS3現在已被大部分現代瀏覽器支持，而下一版的CSS4仍在開發過程中。

上面這段引用自維基百科對 HTML 和 CSS 解釋，簡單地向我們闡述了什麼是HTML和CSS，但是如果你從來沒有接觸過它們，那請繼續往下看。

來觀察一下你在哪裡見過HTML和CSS

其實任何一個使用過電腦的人幾乎都經歷過 HTML 與 CSS，只是可能我們並不知道而已，看下面這些場景：

  • 胡總QQ收到新聞消息，說是XX藝人有OO緋聞，這正對胡總胃口，於是就點了一下那個消息窗口，這個時候就自動的彈出了IE瀏覽器（是的，胡總的電腦還是XP的默認配置），然後看到了一個網頁 A 。

  • 劉哥喜歡財付通，還我錢的時候習慣性的點一下QQ上面的那個我的錢包，然後打開一個對話框 B 。

  • 劉哥又沒錢了，我也沒錢，然後他打開它的QQ郵箱 C 給胡總發了一封郵件 D ，裡面用很紅的大號字寫著：借我十塊錢吃早飯。

看看上面的 A,B,C,D 四種情況，其實都和 HTML+CSS有關，怎麼知道它有關？很簡單，A會打開一個網頁，其實B也是一個網頁，只不過不是IE打開的而已，C一般也都是進郵箱的網頁界面，而D，看那個情景的最後面說的： 很紅的大號字 ，這也可以知道 HTML+CSS與這肯定有關，雖然你可能還沒有發現，但是很簡單，在上面的任何一種情景下點擊滑鼠後鍵，你肯定會看到一個 查看網頁源代碼 或者意思與之相近的選項，點擊它，你就會看到類似下面這樣的開頭的文字：

&
&
&
&
...
&

你現在所看到的就是HTML，它是一種超文本標記語言，它的文檔類型為HTML或者相似的如 XHTML 等，我們可以打開任何一個網頁（網頁都是由 HTML構成的），將它另存為，如果不你作任何修改的話，那麼你將會得到一個以 .html 結尾的文檔， .html 是最常見的 HTML 文檔後綴，同時使用的還有 .htm ，這是在 DOS 時代，系統最長只能接受三位的後綴，但是現在的你，應該使用 html 。

那CSS又在哪裡呢？你問對了，在上面的四個情景下，要說的話，最後那個 很紅的大號字 應該算是最容易說明 CSS 相關性的了，你可以試試，如果你也使用QQ郵箱（其實一般的情況都是可以的），先輸入「給我借十元錢吃早飯」這段文字，然後選擇它，再點擊上面的編輯工具條（這個和Word／WPS等編輯器是很相似的，只不過它是網頁版的），點擊 Tt 這個按鈕，選擇 最大 這個選項，這會把上面這段文字放得到大，然後點擊那個有一個顏色下邊框的大寫的 A 的按鈕，選擇大紅色，這個時候就成了：很大的大號字了。現在關鍵的地方來了，點擊那個工具條的 & 按鈕，可以查看到郵件的源代碼，可以看到（餓……）原來不是CSS：

&
給我借十元錢吃早飯
&

上面這個還是HTML，不過我們可以看到裡面有 color="#ff0000" 這樣的（本來還以為會使用標準的CSS呢），這個就表示，這個裡面的文字的顏色為 #ff0000，而 #ff0000 是什麼？這個以後會說，在這裡就直接告訴你，它表示紅色，雖然CSS沒看著，不過沒關係，把上面那三行刪除掉，然後把下面這三行複製到刪除的位置，再點一下編輯框的左上角的 返回編輯器 的按鈕，你會發現，字還更大了一點，顏色也是紅色：

&
給我借十元錢吃早飯
&

這是為什麼呢？在這裡， style="font-size: 3em; color: #ff0000" 這一段就是CSS示例了，它的作用就是樣式化HTML元素，在上面的示例中，它樣式化了它所屬於的那一個 DIV 元素（什麼是HTML元素？後面慢慢地說，在這裡 DIV就是一個元素），讓它的文字大小為 3em （font-size: 3em），文字顏色為 紅色 (color: #ff0000) 。

到現在為止你應該明白一點了：HTML構成網頁，而CSS樣式化HTML元素，所以，CSS樣式化網頁，你現在也應該清楚的知道了，網頁都是由HTML構成的，然後，再想想，CSS是必須的嗎？

簡單的解釋一個網頁

我們現在先使用一個純文本編輯器（如果你使用的是Windows系統，那麼就打開記事本軟體）新建一個文件，另存為 demo.html ，然後將下面這一段代碼複製進該文件，再保存：

&
&
&
&
&示例網頁&
&
&
&示例網頁& &

這只是一個很簡單的示例網頁而已，它來自 &Matrix Stack&。& &
&

保存之後，再雙擊該文件看看。發現沒，雙擊它，並不會再打開記事本，而是打開了一個瀏覽器（你系統當前所設置的默認瀏覽器），瀏覽器裡面有兩行內容，一行是字體大一些的，內容為 "示例網頁" ，而下面的那一行則是字體小一些的一句話，類似下面這樣的效果

這只是一個很簡單的示例網頁而已，它來自 Matrix Stack 。

為什麼我們會看到這樣的內容，我們輸入的那些如 & 或者 & 這些內容都雲哪裡了呢？如果你發現他們不見了，那就像前面說的一樣，在現在的這個網頁裡面點一下滑鼠的右鍵，然後點擊查看源代碼，你會發現，源代碼就是你輸入的那一段字元。

在上面的這個示例中，那些在網頁裡面看不到的內容都是屬於 HTML 標籤，或者稱之為HTML元素，比如 & ，它就是一個HTML標籤，HTML有很多個不同的標籤，不同的標籤有著它存在的特殊意義，比如 & 表示「一級標題」，或者 Heading 1 ，在HTML中，標題有六級，分別為 h1 至 h6 ，同樣的在上面的示例中，那些 &

，*& 等等的也都是HTML標籤。

我們打開任何一個網址，其實就是瀏覽器在幫你向網路上的某一台伺服器請求數據，而一般情況下，如果請求到的數據瀏覽器直接為你顯示出來了，那麼請求到的數據一般就是HTML文檔（為什麼說一般就是HTML文檔，而不是說肯定就是HTML文檔？），就是上面這個示例中這樣的文字，如上面所說的，因為HTML標籤都是有特殊的意義的，瀏覽器會把每一個標籤按它所表示的 意義 展示 給瀏覽器使用者，這裡說的展示，並不表現在直接把那些文字顯示出來，比如，你可以做一個下面這樣的示例，在上面的那個 demo.html 文件中的示例網頁那一行下面，加上下面這一行：

&示例網頁& &示例網頁&

保存之後，再使用瀏覽器打開，你就會發現，同樣的文字，因為使用的HTML標籤不同，它的字體大小不同了，這種不同就是瀏覽器給這些標籤作出的解釋，當它遇到& 之後，就知道了，這裡面的內容是一個一級標題，我需要把這個文字加粗，並且以最大號兒的字體顯示，但是 &

那麼CSS在哪裡呢？再來修改一下 demo.html 這個文件，把 &

&

示例網頁&

再使用瀏覽器打開該文件，你會發現，示例網頁這四個字現在變成了紅色的了，在這裡，你輸入的 style="color: #ff0000; " 就是一行CSS代碼，從前面關於那個QQ郵箱的示例中你應該已經知道了，這表示這個HTML元素裡面的文字要以紅色顯示，看到沒，CSS樣式化了HTML元素，我們再來改一下這一行，改成下面這樣的：

&

示例網頁&

使用瀏覽器打開該文件，看到什麼效果了？是不是除了把這四個字改成紅色之後，字體還變得很小了？

稍稍深入理解一下HTML與CSS

在上面的這個示例中，我們創建了一個一級標題，一個二級標題，一個三級標題，以及一個段落（ &

創建的 ），最開始一級標題很大，還是加粗的，顏色為黑色，後來我們改成了紅色，最後連字體都改成了很小的，那麼在我們做這些修改之前，為什麼 h1 就比 h2 大呢？原因很簡單，還記得前面說過的瀏覽器看到HTML標籤之後，會根據它的意義展示出該標籤的內容，瀏覽器對於 h1 標籤，它把字體大小改大，再把文字加粗等等，其實就只是為 h1 指定了一個默認的CSS樣式，雖然你沒有明示，但是瀏覽器卻知道，現在開始，你需要安裝一個谷歌瀏覽器（如果不知道怎麼安裝，那你就別再繼續往下看了，學學電腦基礎知識要緊），然後使用谷歌瀏覽器打開 demo.html 這個文件（請先把該文件還原成為上面未修改過的那個版本，也就是最開始保存的那個版本，只有一個一級標題和一個段落），打開該文件之後，你也會看到和前面類似的網頁，現在在 示例網頁 四個大字上面點滑鼠後鍵，再點擊彈出菜單中的 審查元素 選項，這會在瀏覽器的最下方打開一個分為兩欄的子窗口，後邊的你應該一看就明白，那就是你的網頁源代碼，而右側，有很多選項，點擊第一項 Computed Style 這一項，你就會看到下面這樣的內容：

display: block;
font-size: 32px;
font-weight: bold;
height: 38px;
width: 935px;

上面這段內容中的 width: 935px 可能不一樣，為什麼不一樣？這一段代碼就是CSS樣式，但是我們並沒有指定過任何樣式，為什麼會有？這是因為瀏覽器會為每一個HTML標籤根據其意義添加默認的樣式，而上面這一段CSS樣式就是谷歌瀏覽器為 h1 標籤添加的默認樣式，這個時候你應該知道為什麼在上面我們能把它的字體改成很小了吧？還記得嗎？我們把 h1 的 font-size 設置為 12px 之後，字體就變小了，這是因為新的樣式會把舊的樣式覆蓋掉，所以，在上面的示例中，12px 會覆蓋掉32px，所以，字體會變小。

HTML與CSS的版本

HTML與CSS就像我們常常使用的軟體一樣，也是有它們自己的版本的（比如我們中國人用得最多的軟體QQ就有什麼2011版，2012版或者2013版等），對於HTML來說，不同的版本體現在它們有很一些特有的標籤，或者同一個標籤的意義不一樣，而對於CSS來說，不同的版本可能有它們各自特有的屬性，事物總是處於發展的過程中，而且一般都是向好的方向發展，HTML與CSS也一樣，新的版本總是提供了很多的功能與特性以滿足現代的需求，比如最開始網頁不能播放視頻，然後可以了，但是在網頁裡面加一個視頻很麻煩，而現在，不但可以播放視頻了，而且加入一個視頻也變得很簡單；以前我們如果想做一個美觀的網頁很麻煩，而現在，什麼3D技術，動畫等等都可以通過CSS很簡單的實現，所以，對於版本而言，如果你是一個新手，我建議你直接進入到最新版本中來，而我絕大多數情況下，也都是只講最新的版本，但是由於最新版本並不是任何一個瀏覽器都能很好的支持，所以，如果你將來以這些技術為職業，那可能還需要自己雲研究其它版本，或者兼容方案，比如在HTML5中，有一個& 標籤，它表示導航，這在HTML5以前是不存在的，所以不支持HTML5的瀏覽器看到這個標籤之後就不知道怎麼辦，那麼我們要麼改用其它替代標籤，要麼使用一些特殊的方法告訴老的瀏覽器應該怎麼辦。

如何查看以及如何定義一個HTML文檔的HTML版本

比如下面這個示例：

&
&
&
&
...
&

這個是某一個網站的HTML代碼片段，中間省略了很多，該網頁所使用的HTML版本可以從第一行查看到，即：

&

不過有一個好消息是你以後寫任何一個HTML文檔都不再需要在網頁裡面加入這麼長的一串了，只需要像下面這樣即可：

&

最新的HTML5隻要求你聲明該文檔的類型為HTML即可，不再需要指定HTML的確切版本，不用擔心老瀏覽器不兼容，它們都會知道這是什麼東西。

一點小小的擴展

在上面的所有這些示例中，我們都將CSS樣式寫在HTML標籤裡面，作為它們的一個屬性，該屬性名稱為 style ，但是，這僅僅只是示例，在以後的文章中，有可能還會出現這種方式，但是請記住，這並不是說我們就應該這麼寫，而正好相反，我們不應該這麼寫，原因在於：HTML是用來定義文檔結構的，我們不應該在文檔結構中寫入它的樣式，而應該將它們分開，我們稱之為結構與樣式分離，從而達到內容與樣式分離，簡單的實現方法就是把CSS樣式寫進一個單獨的以 .css 為後綴的文件中，然後在HTML文檔中使用一個 link 標籤將該CSS文檔引入到HTML文檔中來，這樣我們如果想修改HTML中元素的樣式就不需要修改HTML文檔了，而僅僅只需要修改它的樣式文件即可，這將在以後的文章中有更詳細的介紹。

我們看到的網頁是由3個部分組成的，html,js和css。木偶戲大家都看過吧，我們可以拿木偶戲類比。 html就是網頁的結構，類似於木偶的骨骼，或者說一個光禿禿的木偶。css是網頁的樣式，可以把它想像成木偶穿的衣服。同樣的木偶，穿上不同的衣服就有不同的樣子，類似的，同樣的html，有不同的css就可以顯示不同的樣式。js是控制交互的，可以通過js操作網頁的交互（比如點擊之後出彈窗之類的），可以把它想像成控制木偶的線，讓木偶做出各種動作。

下面看題主問的：jQuery,css3,html5。 jQuery你可以當成js的一種，css3就是新一代的css，html5就是新一代的html。

這樣跟初學者說應該能懂吧……

當然了，上面的比喻有不恰當的地方。不過對於初學者來說，應該夠了吧。初學者最重要的是不要困在某個細節里，而是能對自己要學的東西有個整體的印象，建立起大致的框架。所以js,html,css大概知道它們之間的關係就好了，至於具體的功能，學著學著就明白咯~

html是網頁基本元素，jquery就是對js的封裝 本質是一個東西，用來操空元素的各種動態的行為，css是設置元素樣式

庸俗的比喻：

HTML是身體

CSS是衣服

身體沒有衣服就是裸奔

HTML5是HTML的第五次重大修改，感興趣的同學可以看看我之前的回答：HTML5為什麼這麼火？ - 程序員

都說無圖無真相，我們不妨結合一張非常形象的解構圖來進行說明：

你沒有看錯。

此處引用的例子，正是人類歷史上最偉大的發明之一——女士內衣，aka. Bra。

對照此圖，相信能幫助大家更快理解我的意思。

假設我們現在用HTML、CSS3、jQuery設計一款Bra，那麼在製作初期，我需要用HTML來設定我要做什麼樣的衣服，大衣，T恤，牛仔褲，或者Bra。

如果我決定用HTML來設計一款Bra，那麼，在我需要定義的內容有這款Bra包括：肩帶、罩杯、鉤扣等部件，這種基礎信息。

接下來，我還需要加入更為細節的內容，我利用CSS進行定義Bra的顏色和款式等信息，如：掛脖式、全杯、半杯等等款式，或者蕾絲，無痕肉色等細節。

我們知道在製作靜態網頁時，使用HTML和CSS已經能夠為用戶呈現出絢麗的效果，但如果網頁需要和用戶有互動就會需要用到腳本語言，例如js，如果我們追求更好的用戶體驗，我們希望網頁在不刷新頁面的情況下就與伺服器端進行交互，那麼我們需要一個支持Ajax的js庫，目前使用比較多的是jQuery。

再回到Bra的話題上，如果我們需要一款Super Bra，希望女性朋友在使用它的時候，無需更換數個Bra，僅僅靠觸動Bra上某個按鈕後立刻具有聚攏效果或者提升效果，那就是我們這款使用HTML、CSS3、jQuery設計的Bra需要用到jQuery完成的部分。

總結一下，HTML、CSS、jQuery三者中，最基礎的是HTML，CSS和jQuery，三者都是作用於HTML上的技術，CSS擅長處理web應用種的頁面布局，或者說讓頁面更加好看，jQuery擅長處理交互，或者說讓web應用更加易用、人性化。

希望我這樣講你能夠明白。

假如你是陳真

html就是你的骨頭

css就是你訓練出那麼完美的肌肉

js 就是你打別人的基本招式 踢啊 什麼的

演電影是需要節省時間以及特效的 因此導演將常用的漂亮動作 弄成一套----- &<密宗拳&>

這就是jquery---僅僅是為了 少寫一點,效率高一點

那麼css3 html5 就是甄子丹版的陳真 畫面效果更逼真 更好看

肌肉內臟、皮膚和骨架的關係

把網頁比作房子，html就是房子的水泥架構，css就是裝潢，jquery就是電器等動態的東西

html5就是原本的你，而加上了css就像去了一趟韓國的你，連你的EX都認不出你了。而JQUERY則是你想讓自己變得更好，於是就去學了女僕舞、肚皮舞、鋼管舞、瑜伽、普拉提、插花、茶道、廚藝等等。

打開一個網頁，把css禁了就一目了然了。

html是女人,jquery是女人的修養,css是化妝品 :)

HTML：鋼筋混凝土

CSS：外牆玻璃、瓷磚、宣傳畫

JS：電梯、空調

HTML:搭建舞台的框架

CSS:舞台的裝飾

JS:導演

JQuery:導演設計好的一套動作

HTML就是他媽的米面蔬菜肉類

CSS就是他媽的大蒜食鹽和辣椒

還漏了一個Javascript，它就是你做飯用到的鍋碗瓢盆刀叉劍你得洗菜擇菜做東西非常麻煩。

Jquery就是他媽的自動微型做飯器，有了它你就不用自己動手了。直接把材料兌合兌合放進去出來就是想起噴噴的shit了~

HTML5就是高級肉類高級面進口蔬菜，國內吃到的單位不多。

CSS3就是他媽的進口香料，國內嘗試的飯店也不多。

沒那麼深奧，基本就是這麼點逼東西~

你可以按瀏覽器的工作原理來理解。

首先瀏覽器把html解釋成有層次關係的Dom對象，

然後把css解釋成Dom對象的屬性值。

JavaScript是一個可以操作任何Dom對象(包括設置對象的屬性值)的腳本語言。

jQuery是基於JavaScript的一個方法庫。

html 是戰士

css 是盾

jquery 是劍

問題應該是javascript、css、html的關係？一個是行為、表現、結構，也就是頭腦、皮膚、骨骼。

html就是房子，css就是裝修材料，jq就是裝修工具

推薦閱讀：

※請教下 autoprefixer 和 cssnext 分別有什麼用處？有什麼區別？
※CSS3 的動畫的意義何在？
※如何解決前端的flex流動布局中的單個子元素位置？
※如何通過html和css完成下拉菜單的製作？
※怎樣理解HTML5和CSS3的語義化標籤？

TAG:HTML5 | jQuery | CSS3 |