關(guān)于HTML、CSS與JS
1 HTML、CSS與JS定義
HTML（Hyper Text Markup Language，HTML）超文本標(biāo)記語(yǔ)言，由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標(biāo)記語(yǔ)言。超文本是一種組織信息的方式，也是網(wǎng)頁(yè)的一種規(guī)范和標(biāo)準(zhǔn)。它通過(guò)特殊的標(biāo)簽語(yǔ)法將文字、圖形、視頻、聲音、動(dòng)畫(huà)、表格和鏈接等有序的組織起來(lái)，生成一個(gè)HTML文件，即網(wǎng)頁(yè)文件。文件名以.html或.htm結(jié)尾（.htm為了兼容過(guò)去DOS命名格式而存在）。
CSS（Cascading Style Sheets，CSS）層疊樣式表，是一種樣式修飾語(yǔ)言，用于改變網(wǎng)頁(yè)文件的顯示效果，包括內(nèi)容顏色、大小、動(dòng)畫(huà)以及排版等。CSS文件使用屬性選擇器作用于網(wǎng)頁(yè)文件中特定的區(qū)域，常用的屬性選擇器包括CLASS屬性選擇器和ID選擇器。文件名以.css結(jié)尾。
JS（JavaScript，JS）腳本語(yǔ)言，是一種解釋型編程語(yǔ)言，主要用來(lái)為網(wǎng)頁(yè)添加交互行為以及進(jìn)行邏輯運(yùn)算。由于JS不依賴操作系統(tǒng)僅需要瀏覽器的支持，因此JS腳本具有跨平臺(tái)性，只要瀏覽器支持便可以在任意機(jī)器上使用。與服務(wù)端腳本文件PHP和ASP不同，JS腳本文件主要用于客戶端。文件名以.js結(jié)尾。
2 HTML、CSS與JS的發(fā)展
| HTML 1.0 | 1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布 |
|:-:|:-:|:-:|
| HTML 1.0 | 1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布 |
| HTML 2.0 | 1995年11月作為RFC 1866發(fā)布，于2000年6月發(fā)布后被宣布過(guò)時(shí) |
| HTML 3.2 | 1997年1月14日，W3C推薦標(biāo)準(zhǔn) |
| HTML 4.0 | 1997年12月18日，W3C推薦標(biāo)準(zhǔn) |
| HTML4.01（微小改進(jìn)） | 1999年12月24日，W3C推薦標(biāo)準(zhǔn) |
| HTML 5| 公認(rèn)的下一代Web語(yǔ)言，極大地提升了Web在富媒體、富內(nèi)容和富應(yīng)用等方面的能力，被喻為終將改變移動(dòng)互聯(lián)網(wǎng)的重要推手 |
| CSS1.0(第一版)|1996年12月W3C推出CSS第一版 |
| CSS2.0(第二版)| 1998年5月W3C發(fā)布CSS第二版 |
| CSS3.0(第三版) | 2001年5月23日CSS3草案完成 |
優(yōu)缺點(diǎn)：
CSS1：初代table布局
優(yōu)點(diǎn)： 布局容易、快捷、兼容性好
缺點(diǎn)： 改動(dòng)不便、需要重新調(diào)整、工作量大
CSS2：CSS+div布局
優(yōu)點(diǎn)： 學(xué)習(xí)容易、方便快捷、代碼量少
缺點(diǎn)： 1.平臺(tái)兼容性不好，技能要求較高。
2.在移動(dòng)端布局有些力不從心，如未知寬高float內(nèi)部元素居中、 垂直水平布局、響應(yīng)式布局等方面略顯繁瑣。
CSS3：Flex布局
優(yōu)點(diǎn)： 可以在不使用其他框架的情況下，簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各 種頁(yè)面布局 、移動(dòng)端布局友好
缺點(diǎn)： 兼容性較差，IE瀏覽器版本在9.0以上，基本要10.0 對(duì)于其他 瀏覽器，要求兼容性寫(xiě)法
（注：CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的，把以前的規(guī)范分解為一些小的、相互獨(dú)立的模塊，更多新的模塊也被加入進(jìn)來(lái)。由于將新需求作為一個(gè)新模塊來(lái)立項(xiàng)并進(jìn)行標(biāo)準(zhǔn)化，后面不會(huì)再有CSS4、CSS5這種所謂大版本號(hào)的變更，而是CSS某個(gè)模塊級(jí)別的升級(jí)）
CSS3****兼容問(wèn)題：
CSS3還未成為真正的標(biāo)準(zhǔn)，但卻提供了針對(duì)瀏覽器的前綴：
Chrome（谷歌瀏覽器）：-webkit-
Safari（蘋(píng)果瀏覽器）：-webkit-
Firefox（火狐瀏覽器）：-moz-
lE（IE瀏覽器）：-ms-
Opera（歐朋瀏覽器）：-0-
JavaScript的語(yǔ)法標(biāo)準(zhǔn)為ECMAScript，其發(fā)展過(guò)程如下表[1]。
| 版本號(hào) | 發(fā)布時(shí)間 | 主要新增內(nèi)容 |
| ECMAScript1 | 1997-06 | |
| ECMAScript2 | 1998-06 | |
| ECMAScript3 | 1999-12 | 正則表達(dá)式 | switch | do-while | try-catch等 |
| ECMAScript4 | 2008-07 | 被廢棄 |
| ECMAScript5 | 2009-12 | 嚴(yán)格模式 | getters | setters | JSON的解析 等 |
| ECMAScript6 | 2015-06 | let 和const | 解構(gòu)賦值 | 擴(kuò)展運(yùn)算符 | 箭頭函數(shù) 等 |
| ECMAScript7（ECMAScript 2016） | 2016 | Array.prototype.includes() | 求冪運(yùn)算符 等|
| ECMAScript8（ECMAScript 2017） | 2017| 異步函數(shù) | 共享內(nèi)存 |?Atomics等 |
| ECMAScript9（ECMAScript 2018） | 2018 | 異步迭代 |?Rest/Spread?屬性 等 |
3 HTML、CSS與JS之間的關(guān)系
HTML、CSS與JS之間的關(guān)系可以簡(jiǎn)單的理解為HTML為網(wǎng)頁(yè)內(nèi)容，CSS給其添加樣式修飾，JS給其添加行為修飾。
3.1 HTML 中引入 CSS
1）內(nèi)聯(lián)方式
在 HTML 標(biāo)簽中的 style 屬性中添加CSS代碼
<div style="background: red"></div>
2）嵌入方式
在 HTML 頭部中的 <style> 標(biāo)簽下添加CSS代碼
<head>
<style>
.content {
background: red;
}
</style>
</head>
3）鏈接方式
在 HTML 頭部中的 <head> 標(biāo)簽下引入外部CSS 文件
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
4）導(dǎo)入方式
使用 CSS 規(guī)則引入外部 CSS 文件（受版本限制，@import 是 CSS2.1 才出現(xiàn)的概念）
<style>
@import url(style.css);
</style>
3.2 HTML 中引入 JS
1) 在head中添加js
<script type="text/javascript">
function onClick() {}
</script>
2)在body中添加js
function onClick () {}
</script>
3)引入外部JS文件
<script type="text/javascript" src="index.js" ></script>
