淺析html+css+javascript之間的關係與做用

時間 2020-05-01

標籤淺析 html+css+javascript html css javascript 之間關係欄目 JavaScript 简体版

原文原文鏈接

三者間的關係

一個基本的網站包含不少個網頁，一個網頁由html, css和javascript組成。javascript

html是主體，裝載各類dom元素；css用來裝飾dom元素；javascript控制dom元素。css

用一扇門比喻三者間的關係是：html是門的門板，css是門上的油漆或花紋，javascript是門的開關；html

html介紹

html是用來描述網頁的一種語言，它不是一種編程語言，而是一種標記語言（標記標籤），總的來講，html使用標記標籤來描述網頁，本文就用標籤來代替標記標籤進行說明。前端

標籤是指<html></html>，<div></div>。html5

標籤是有語義的：標題用<h1>，表格展現用<table>，連接用<a>，無序排列用<ul>等等。java

標籤裏可帶有各種屬性，最基本的就是class和id。class屬性的做用是引用css樣式；id的做用是配合javascript使用，具備惟一性。下面舉幾個例子說明程序員

l 圖片標籤<img>的主要屬性有src，alt。src是引用圖片的網絡地址（必要）；alt是對這張圖片的描述，若是圖片加載不成功，則會顯示alt的文字。web

l 超連接<a>的主要屬性有href，target。href是指連接要跳轉的網址（必要）；target是告訴瀏覽器點擊這個連接後要以哪一種形式找開窗口，target=」_blank」是指打開一個新窗口編程

若想了解更多關於html的資料，請點擊這裏。後端

css介紹

css的官方名字叫層疊樣式表，它的出現是爲了解決內容和表現分離的問題，通常存放在.css文件裏。

使用css。

可在html的頭元素<head>裏書寫，或者書寫在CSS文件並在html裏引用該文件。

css優先權。

多個css樣式可集中在單個html標籤裏，出現這種狀況時，通常按優先權劃分

瀏覽器默認設置 （最低）
外部樣式表
內部樣式表（寫在html的<head>標籤內部）
內聯樣式（寫在html的標籤裏，即style屬性）（最高）

css的語法。

css由兩個主要部分組成，選擇器，一條或多條聲明。

選擇器是指css樣式的名字「.seletor」，名字前面要帶上一點「.」。聲明是由屬性和值組成，給個例子「margin: 0 auto」，冒號前面是屬性，後面是值，該例子是定義元素居中顯示。

具體的屬性和值可點擊這裏。

javascript介紹

javascript是腳本語言，它是鏈接前臺（html）和後臺服務器的橋樑，它是操縱html的能手，本文用js代替javascript進行說明。

平時聽到原生js，js庫，js框架，js插件等等，下面簡單說明一下。

l 原生js，是指最基礎的js，沒有封裝過，但由於各瀏覽器對js的支持不一樣，就致使用基礎的js編程須要爲不一樣的瀏覽器寫兼容代碼。

l Js庫，js框架，是指集成一系列dom操做，API封裝，界面UI封裝的的庫類，常見的有jQuery，extjs等等，這方面的定義比較難區分，暫不誤導你們

l Js插件，就是集成了幫助程序員輕鬆完成功能的程序。Js插件用得比較多，網頁製做上隨處可見。如圖片輪換功能，導航製做，上傳圖片等等。

至於js語法介紹，則太過於瑣碎，詳情請點擊這裏

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

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

一、什麼是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是魔術師。

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

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

瀏覽器（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的特性。