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

時間 2019-11-29

標籤新手理解 html css javascript 之間關係欄目 HTML 简体版

原文原文鏈接

工做多年，一直忙忙碌碌的應用各類技術，如今不忙了，問問本身究竟在作什麼，究竟會什麼竟答不上來，回想起來工做中常常是被要求多快好省的去實現一個目標，用度娘解決問題，卻沒時間瞭解緣由，今天就從宏觀的角度入手來概括總結一下。
最準確的網頁設計思路是把網頁分紅三個層次，即：結構層(HTML)、表示層(CSS)、行爲層(Javascript)。
1、HTML、CSS、JavaScript簡介及簡單分工javascript

一、什麼是HTML（超文本標記語言 Hyper Text Markup Language），HTML 是用來描述網頁的一種語言。
二、CSS(層疊樣式表 Cascading Style Sheets),樣式定義如何顯示 HTML 元素，語法爲：selector {property：value} (選擇符 {屬性：值})
三、JavaScript是一種腳本語言，其源代碼在發往客戶端運行以前不需通過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行css

對於一個網頁，HTML定義網頁的結構，CSS描述網頁的樣子，JavaScript設置一個很經典的例子是說HTML就像一我的的骨骼、器官，而CSS就是人的皮膚，有了這兩樣也就構成了一個植物人了，加上javascript這個植物人就能夠對外界刺激作出反應，能夠思考、運動、能夠給本身整容化妝（改變CSS）等等，成爲一個活生生的人。html

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

怎麼把這三者聯繫在一塊兒呢，固然得經過網頁的肉身HTML,HTML是一直描述語言，它是對着瀏覽器描述本身的，那麼它一般怎麼描述具體的這個網頁呢？java

<!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文件中，個人內容有一個段落，段落的內容是「這是一個段落」。

2、HTML、CSS、JavaScript發展
一、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的入門與深刻理解》

二、CSS的版本（Level）
1996年W3C正式推出了CSS1；
1998年W3C正式推出了CSS2；
CSS2.1是W3C如今正在推薦使用的；
CSS3如今還處於開發中。
若是說HTML的發展是一個不斷修改的過程，那麼CSS的發展就是一個不斷補充的過程，因此在使用CSS的時候，不須要像HTML那行申明使用的標準，高版本的瀏覽器認識高版本的CSS定義，低版本的瀏覽器略過不認識的CSS定義。無論什麼版本，CSS的語法很簡單，選擇器：{屬性：屬性值}，因此火爆的CSS3無外乎是擴展了選擇器和屬性。
CSS3新增的選擇器和屬性請見《CSS3新增的選擇器和屬性》

三、JavaScript的前世此生web

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.zhihu.com/question/29898305/answer/45987802 來源：知乎在 Web 開發中，後端有不少編程語言能夠選擇，但前端只有 JavaScript，JavaScript是全部瀏覽器惟一都支持的編程語言。JavaScript如此強勢，儘可能再不喜歡，不論是前端仍是後端都要求有必定的javascript編程能力，可是有沒有什麼方法來簡化Javascript的開發呢？答案是有的，各類javascript程序庫應運而生，如jQuery、Prototype、MooTools。