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

時間 2019-11-29

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

原文原文鏈接

幾年前寫過一篇博文《新手理解HTML、CSS、javascript之間的關係》，沒想到網上出現了很多轉載，當時沒有太用心，裏面的不少內容有待商榷，這裏發佈從新發布一篇。javascript

網頁主要有三部分組成，結構(HTML)、表現(CSS)、行爲(Javascript)。css

1、HTML、CSS、JavaScript簡介和分工html

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

對於一個網頁，HTML定義網頁的結構，CSS描述網頁的樣子，JavaScript定義網頁的行爲，打個比喻，HTML就像一我的的骨骼、器官，而CSS就是人的皮膚，有了這兩樣也就構成了一個植物人了，加上javascript這個植物人就能夠對外界刺激作出反應，能夠思考、運動、能夠給本身整容化妝（改變CSS）等等，成爲一個活生生的人；若是說HTML是肉身、CSS就是皮相、Javascript就是靈魂。沒有Javascript,HTML+CSS是植物人，沒有Javascript和CSS是個毀容的植物人；若是說HTML是建築師，CSS就是幹裝修的，Javascript是魔術師。html5

怎麼把這三者聯繫在一塊兒呢，這是咱們前端的工做，假設咱們的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文件中，個人內容有一個段落，段落的內容是「這是一個段落」。web

到這裏，咱們不得不說說 瀏覽器了，前端不瞭解瀏覽器就好像農民不瞭解本身的地同樣，前端程序猿土地就是瀏覽器了。在瀏覽器能控制的領域，若是你只能完成頁面佈局的工做，而把事件綁定，前端驗證，數據交互交給後端，無異於割地求饒，因爲這是篇入門文章，這裏只講瀏覽器爲咱們能作些什麼，瀏覽器工做原理之後再說。編程

瀏覽器（web browser）後端

通俗的說瀏覽器用於經過網址（URL）來獲取並顯示Web網頁的一種軟件工具,最先的web瀏覽器是建立於1991年的WorldWideWeb，後來更名爲Nexus，以後出現了各種瀏覽器，直到1994年，網景公司（Netscape）發佈了Navigator瀏覽器0.9版，這是歷史上第一個比較成熟的網絡瀏覽器，隨後的1995年微軟推出了IE瀏覽器，今後掀起了瀏覽器大戰，微軟採起操做系統捆綁IE瀏覽器，最終得到壓倒性勝利，戰爭失利的Netscape在以後被收購、合併、解散。以後一段時間IE獨領風騷，以後被Opera，Safari，Firefox，Chrome陸續瓜分掉一些市場份額，改變了一家獨大的局面。瀏覽器

當一個用戶輸入一個正確的網址，按下回車鍵，盡忠職守的瀏覽器通過一系列的工做（DNS解析->創建TCP鏈接->發起HTTP請求->接受服務器響應，獲得html代碼），千辛萬苦地在互聯網的某一臺服務器上請求到了一個html文檔，並下載該文檔關聯的資源（如css文件，圖片，js文件），以後瀏覽器調動本身手下的一個部門：渲染引擎，把頁面繪製出來，讓另外一個部門：js引擎來解釋javascript代碼。

瀏覽器所渲染和解釋的代碼，html、css和javascript是由前端編寫的，換言以前端程序猿編寫的代碼最終是要交給瀏覽器執行；因爲瀏覽器的種類不少，前端要保證大部分主流瀏覽器對你的代碼都能按你的想法正確的解析和執行，這是個很繁瑣的工做，幸虧出現了一個W3C組織(萬維網聯盟,建立於1994年), 大部分現代瀏覽器都聽從W3C規定的標準解析網頁。

W3C標準規定了三個方面的標準：
一、結構化標準（HTML，XML）二、表現標準（CSS）三、行爲標準（ECMAScript）

大部分瀏覽器執行這些標準的時候比較寬容，寬容的程度又有所不一樣，因此前端在編寫網頁的過程當中要必定要聽從W3C標準。

2、HTML、CSS、JavaScript發展

一、HTML的版本歷史

超文本標記語言（初版）——在1993年6月做爲互聯網工程工做小組（IETF）工做草案發布（並不是標準）：
HTML 2.0——1995年11月做爲RFC 1866發佈，在RFC 2854於2000年6月發佈以後被宣佈已通過時
HTML 3.2——做爲 W3C 標準發佈於 1997 年 1 月 14 日
HTML 4.0——做爲一項 W3C 推薦，HTML 4.0 被髮佈於 1997 年 12 月 18 日
HTML 4.01（微小改進）——做爲一項 W3C 推薦，HTML 4.01 發佈於 1999 年 12 月 24 日
XHTML 1.0——做爲一項 W3C 推薦，XHTML 1.0 發佈於 2000 年 1 月 20 日，XHTML 1.0是一種在HTML 4.0基礎上優化和改進的的新語言，目的是基於XML應用。
HTML 5——W3C 於 2008 年 1 月 22 日發佈 HTML 5 工做草案，html5的最新草案2010 年 6 月 24 日發佈的，IE9以上Chrome,Firefox,Safari,Opera支持。
HTML6 展望,HTML6 規範還未正式發佈。

目前咱們只須要學習XHTML和HTML5，由於如今能看到的大部分網頁是使用XHTML或者HTML5這兩個版本的， XHTML 與 HTML 4.01 幾乎是相同的，HTML從最初發展到XHTML的過程當中變得更加的嚴謹，更加的靈活，與CSS結合的更好。
HTML5
它是對HTML5的一次重大的修改，雖然HTML5 標準還在制定中，但不能阻礙其勢不可擋的腳步，特別是移動端開發的大量普及，相信html5很快就會取代xhtml,不論是移動端仍是pc端成爲html應用的主流版本。可是對於前端切圖狗來講，html5可能僅僅意味着更多的語義化標籤，更加精簡的代碼，更加嚴謹的結構與表現分離，HTML5的精髓在哪呢？這個得單獨說一下，請見《HTML5的入門與深刻理解》

二、CSS的版本（Level）

1996年W3C正式推出了CSS1；
1998年W3C正式推出了CSS2；
CSS2.1是W3C如今正在推薦使用的；
CSS3最新的 CSS 標準,IE9以上Chrome,Firefox,Safari,Opera支持。

若是說HTML的發展是一個不斷修改的過程，那麼CSS的發展就是一個不斷補充的過程，因此在使用CSS的時候，不須要像HTML那行申明使用的標準，高版本的瀏覽器認識高版本的CSS定義，低版本的瀏覽器略過不認識的CSS定義。無論什麼版本，CSS的語法很簡單，選擇器：{屬性：屬性值}，因此火爆的CSS3無外乎是擴展了選擇器和屬性。
CSS3新增的選擇器和屬性請見《CSS3新增的選擇器和屬性》

三、JavaScript的前世此生

JavaScript一種直譯式腳本語言，它的解釋器被稱爲JavaScript引擎，是瀏覽器的一部分，即：JavaScript是由客戶端的瀏覽器解釋執行的。

    遙想1994年網景公司（Netscape）在發佈了Navigator以後，急於解決瀏覽器與用戶交互這個問題，在1995年在網景公司高層的要求下，Javascript之父Brendan Eich只用了10天的時間發明了livescript, 因爲網景高層是java的粉絲，或者說爲了抱上當時熱炒的java的大腿，LiveScript改名爲javascript。
    Javascript1995年5月定稿，12月推向市場，馬上被普遍接受，全世界的用戶大量使用。不得不說，這是個奇蹟，奇蹟的產生的根源是Brendan Eich嗎？並非，Brendan Eich對本身的做品並不滿意，根源來自於迫切的需求，世界太須要用戶可以與瀏覽器互動了。可是，有過項目開發經驗的人都知道，對後期的維護來講將是災難性的，雪上加霜的是，1996年8月，微軟宣佈推出本身的腳本語言Jscript；11月，爲了壓制強勢的微軟，網景公司決定申請Javascript的國際標準；1997年6月，第一個國際標準ECMA-262正式頒佈。
    瀏覽器與用戶相互的迫切須要下，javascript發展的太快了，兩年的時間，從開發到固化，Javascript的規範還沒來及調整。相比之下，C語言問世將近20年以後，國際標準才頒佈。因爲這些歷史的緣由Javascript有不少缺陷，可是JavaScript在前端的地位已經無可替代。

一般說的JavaScript 由核心（ECMAScript）和瀏覽器給JS提供的API（Web API）構成，這些API中最基礎和著名的就是DOM（文檔對象模型）和BOM（瀏覽器對象模型）,直到如今還有人說JavaScript=ECMAScript+DOM+BOM，其實現代瀏覽器爲JS提供了不少API，除了DOM和BOM，還有用於從服務器獲取數據的API，如XHR，Fetch,用於客戶端存儲的API，如：cookie,localStorage,用戶數據管理的API，如IndexedDB，繪製和操做圖形的API，如Canvas,地理定位API,音頻和視頻API等等。

ECMAScript(JavaScript語言的標準)的版本

ECMAScript 1.0——1997年6月，第一個國際標準ECMA-262正式發佈 ECMAScript 2.0——1998年6月發佈 ECMAScript 3.0——1999年12月發佈，，成爲JavaScript的通行標準，獲得了普遍支持。標誌着 ECMAScript 成爲一種真正的編程語言。 ECMAScript 4.0—— 2008年7月，各方分歧太大，ECMA開會決定，停止ECMAScript 4.0的開發。 ECMAScript 3.1—— 2008年7月對ES3有些加強，沒有ES4那麼激進 ECMAScript 5.0—— 2009.12發佈，同時發佈JavaScript.next(ES 6.0)，瀏覽器支持：Internet Explorer 9*，Firefox 4，Chrome 13，Safari 5.1**，Opera 11.60 ECMAScript 5.1—— 2011.06發佈，成爲ISO國際標準，這個規範在全部現代瀏覽器中都至關徹底的實現了。 ECMAScript 6——2015年6月正式發佈，ECMAScript 6(ES6)的發展速度很是之快，但現代瀏覽器對ES6新特性支持度不高，因此要想在瀏覽器中直接使用ES6的新特性就得藉助別的工具來實現。可使用babelES6代碼完美地轉換爲ES5代碼，因此咱們不用等到瀏覽器的支持就能夠在項目中使用ES6的特性。