1. 程式人生 > 其它 >新手理解HTML、CSS、javascript之間的關係

新手理解HTML、CSS、javascript之間的關係

工作多年,一直忙忙碌碌的應用各種技術,現在不忙了,問問自己究竟在做什麼,究竟會什麼竟答不上來,回想起來工作中經常是被要求多快好省的去實現一個目標,用度娘解決問題,卻沒時間瞭解原因,今天就從巨集觀的角度入手來歸納總結一下。
最準確的網頁設計思路是把網頁分成三個層次,即:結構層(HTML)、表示層(CSS)、行為層(Javascript)。
一、HTML、CSS、JavaScript簡介及簡單分工

1、什麼是HTML(超文字標記語言 Hyper Text Markup Language),HTML 是用來描述網頁的一種語言。
2、CSS(層疊樣式表 Cascading Style Sheets),樣式定義如何顯示 HTML 元素,語法為:selector {property:value} (選擇符 {屬性:值})
3、JavaScript是一種指令碼語言,其原始碼在發往客戶端執行之前不需經過編譯,而是將文字格式的字元程式碼傳送給瀏覽器

由瀏覽器解釋執行

對於一個網頁,HTML定義網頁的結構,CSS描述網頁的樣子,JavaScript設定一個很經典的例子是說HTML就像 一個人的骨骼、器官,而CSS就是人的面板,有了這兩樣也就構成了一個植物人了,加上javascript這個植物人就可以對外界刺激做出反應,可以思 考、運動、可以給自己整容化妝(改變CSS)等等,成為一個活生生的人。


如果說HTML是肉身、CSS就是皮相、Javascript就是靈魂。沒有Javascript,HTML+CSS是植物人,沒有Javascript、CSS是個毀容的植物人。
如果說HTML是建築師,CSS就是幹裝修的,Javascript是魔術師。

怎麼把這三者聯絡在一起呢,當然得通過網頁的肉身HTML,HTML是一直描述語言,它是對著瀏覽器描述自己的,那麼它通常怎麼描述具體的這個網頁呢?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>網頁標題</title>
<link rel="stylesheet"
type="text/css" href="mycss.css" /> <script type="text/javascript" src="myjs.js"></script> </head> <body> <p>這是一個段落</p> </body> </html>

這是一個最簡單的HTML文件,文件說的是,瀏覽器啊,我是遵循W3C標準XHTML1.0過渡版本規範(檔案型別宣告),我採用的編碼是utf-8,我的標題是“網頁標題”,描述我的模樣的樣式表是我同目錄的mycss.css檔案,與我有關的javascript程式碼在我同級的myks.js檔案中,我的內容有一個段落,段落的內容是“這是一個段落”。

二、HTML、CSS、JavaScript發展
1、HTML的版本
超文字標記語言(第一版)——在1993年6月作為網際網路工程工作小組(IETF)工作草案發布(並非標準):
HTML 2.0——1995年11月作為RFC 1866釋出,在RFC 2854於2000年6月釋出之後被宣佈已經過時
HTML 3.2——1997年1月14日,W3C推薦標準
html 5
html 5
HTML 4.0——1997年12月18日,W3C推薦標準
HTML 4.01(微小改進)——1999年12月24日,W3C推薦標準
HTML 5——2014年10月28日,W3C推薦標準[4]  

現在我們只說HTML 4.01和HTML5,因為2000年國際全球資訊網聯盟(W3C)公佈發行了XHTML 1.0版本。XHTML 1.0是一種在HTML 4.0基礎上優化和改進的的新語言,目的是基於XML應用。而XHTML 與 HTML 4.01 幾乎是相同的,HTML從最初發展到XHTML的過程中變得更加的嚴謹,更加的靈活,與CSS結合的更好。原則上說現在能看到的大部分網頁是使用HTML4或者HTML5這兩個版本的。
HTML5
它是對HTML5的一次重大的修改,雖然HTML5 標準還在制定中,但不能阻礙其勢不可擋的腳步,不用HTML5你就OUT了,我們經常為HTML5而HTML5,其實對於比較低端的前端(我這樣的),特別是用div+CSS實現網頁來說,真的改變不大。
那麼,HTML5的精髓在哪呢?這個得單獨說一下,請見《HTML5的入門與深入理解

2、CSS的版本(Level)
1996年W3C正式推出了CSS1;
1998年W3C正式推出了CSS2;
CSS2.1是W3C現在正在推薦使用的;
CSS3現在還處於開發中。
如果說HTML的發展是一個不斷修改的過程,那麼CSS的發展就是一個不斷補充的過程,所以在使用CSS的時候,不需要像HTML那行申明使用的標準,高版本的瀏覽器認識高版本的CSS定義,低版本的瀏覽器略過不認識的CSS定義。不管什麼版本,CSS的語法很簡單,選擇器:{屬性:屬性值},所以火爆的CSS3無外乎是擴充套件了選擇器和屬性。
CSS3新增的選擇器和屬性請見《CSS3新增的選擇器和屬性

3、JavaScript的前世今生

JavaScript一種直譯式指令碼語言,它的直譯器被稱為JavaScript引擎,是瀏覽器的一部分,即:JavaScript是由客戶端的瀏覽器解釋執行的,所以在談JavaScript的歷史之前我們要先說一下瀏覽器,最早的web瀏覽器是創建於1991年的WorldWideWeb,後來改名為Nexus,之後出現了各類瀏覽器,直到1994年,網景公司(Netscape)釋出了Navigator瀏覽器0.9版,這是歷史上第一個比較成熟的網路瀏覽器,隨後的1995年微軟推出了IE瀏覽器,從此掀起了瀏覽器大戰,微軟採取作業系統捆綁IE瀏覽器,最終獲得壓倒性勝利,戰爭失利的Netscape在之後被收購、合併、解散。之後一段時間IE獨領風騷,之後被Opera,Safari,Firefox,Chrome陸續瓜分掉一些市場份額,改變了一家獨大的局面。

但是談到JavaScript的歷史,必須提到一個公司和一個人,那就是Netscape公司及其員工Brendan Eich,網景公司在釋出了Navigator之後,急於解決瀏覽器與使用者互動這個問題,Javascript之父Brendan Eich只用了10天的時間發明了livescript(讓我輩情何以堪),由於網景高層是java的粉絲,或者說為了抱上當時熱炒的java的大腿,livascript更名為javascript,Brendan Eich他的思路是:
      (1)借鑑C語言的基本語法;

  (2)借鑑Java語言的資料型別和記憶體管理;

  (3)借鑑Scheme語言,將函式提升到"第一等公民"(first class)的地位;

  (4)借鑑Self語言,使用基於原型(prototype)的繼承機制。
所以,Javascript語言實際上是兩種語言風格的混合產物----(簡化的)函數語言程式設計+(簡化的)面向物件程式設計。
Javascript 1.0獲得了巨大的成功,Netscape隨後推出了1.1,之後作為競爭對手的微軟在自家的 IE3 中加入了名為 JScript (名稱不同是為了避免侵權)的JavaScript實現。由此JavaScript 的規範化被提上日程,1997年,以 JavaScript1.1 為藍本的建議被提交給了 歐洲計算機制造商協會 (ECMA),ECMA牽頭經過數月的努力完成了 ECMA-262 ——定義了一種名為 ECMAScript 的新指令碼語言的標準。

雖然 JavaScript 和 ECMAScript 通常被人用來表達相同的意思,但 JavaScript 的含義去比 ECMA-262 中規定的多得多。
一個完整的 JavaScript 實現應由三個部分組成:

(1)核心(ECMAScript), 描述了該語言的語法和基本物件。

(2)文件物件模型(DOM),描述處理網頁內容的方法和介面。

(3)瀏覽器物件模型(BOM),描述與瀏覽器進行互動的方法和介面。

1995年發明了Javascript,1997年就推出了國際標準,迫切需要瀏覽器與使用者相互的情況下,javascript發展的太快了,Javascript的規格還沒來及調整,就固化了。相比之下,C語言問世將近20年之後,國際標準才頒佈。
Javascript有很多缺陷,但是JavaScript 在前端地位無可替代,


連結:http://www.cnblogs.com/dreamingbaobei/p/5062901.html