前端介绍-35
前端介紹-35 # 前端
## 一、什么是前端
前端即網(wǎng)站前臺部分，運行在PC端，移動端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，HTML5，CSS3，前端框架的應(yīng)用，跨平臺響應(yīng)式網(wǎng)頁設(shè)計能夠適應(yīng)各種屏幕分辨率，完美的動效設(shè)計，給用戶帶來極高的用戶體驗。
前端技術(shù)一般分為前端設(shè)計和前端開發(fā)，前端設(shè)計一般可以理解為網(wǎng)站的視覺設(shè)計，前端開發(fā)則是網(wǎng)站的前臺代碼實現(xiàn)，包括基本的HTML和CSS以及JavaScript
- 廣義前端：所有用戶可以直接看見并交互的界面
- 俠義前端：瀏覽器上運行的用戶交互界面
## 二、前端開發(fā)技術(shù)棧
### HTML
- 超文本標(biāo)記語言 Hyper Text Markup Language
- 負責(zé)完成頁面的結(jié)構(gòu)
- 文件后綴：.html .htm
###### v_hint：“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素
### CSS
- 級聯(lián)樣式表 Cascading Style Sheet
- 負責(zé)頁面的風(fēng)格設(shè)計，樣式、美觀
- 文件后綴：.css
### JavaScript
- 瀏覽器腳本語言，可以編寫運行在瀏覽器上的程序
- 負責(zé)編寫頁面特效、調(diào)用瀏覽器的API\(BOM\)、操作改變頁面內(nèi)容\(DOM\)，從后端獲取數(shù)據(jù)\(Ajax\)，渲染頁面等
- 文件后綴：.js
###### v_eg：big house、live perple # 前端三劍客
## 一、HTML
#### 1、標(biāo)記語言
```
標(biāo)記語言為非編程語言，不具備編程語言具備的程序邏輯
```
#### 2、html為前端頁面的主體，由標(biāo)簽、指令與轉(zhuǎn)義字符（實體）等組成
```
標(biāo)簽：被尖括號包裹，由字母開頭包含合法字符的，可以被瀏覽器解析的標(biāo)記。eg:系統(tǒng)標(biāo)簽，自定義標(biāo)簽
指令：被尖括號包裹，由!開頭的標(biāo)記。eg:<!doctype html> <!-- -->
轉(zhuǎn)義字符：被&與;包裹的特殊字母組合或#開頭的十進制數(shù)。eg:< >
```
###### v_hint：[轉(zhuǎn)義字符](http://tool.oschina.net/commons?type=2)
#### 3、html發(fā)展史代表版本
```
① html1：在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布（并非標(biāo)準(zhǔn)）
② html2：1995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時
③ html3.2：1997年1月14日，W3C推薦標(biāo)準(zhǔn)
④ html4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)
⑤ html4.01(微小改進)：1999年12月24日，W3C推薦標(biāo)準(zhǔn)
⑤ html5：2014年10月28日，W3C推薦標(biāo)準(zhǔn)(h5草案的前身名為Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團隊。在2008年1月22日，第一份正式草案發(fā)布。)
```
#### 4、文檔類型
```html
<!-- 標(biāo)簽語法規(guī)范 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
```
## 二、CSS
#### 1、標(biāo)記語言
```
標(biāo)記語言為非編程語言，不具備編程語言具備的程序邏輯
```
#### 2、css為前端頁面的樣式，由選擇器、作用域與樣式塊組成
```
選擇器：由標(biāo)簽、類、id單獨或組合出現(xiàn)
作用域：一組大括號包含的區(qū)域
樣式塊：滿足css連接語法的眾多樣式
```
#### 3、css發(fā)展史代表版本
```
① 1990年，Tim Berners-Lee和Robert Cailliau共同發(fā)明了Web。1994年，Web真正走出實驗室。
② 1994年哈坤·利提出了CSS的最初建議。而當(dāng)時伯特·波斯（Bert Bos）正在設(shè)計一個名為Argo的瀏覽器，于是他們決定一起設(shè)計CSS。
③ 哈坤于1994年在芝加哥的一次會議上第一次提出了CSS的建議，1995年的www網(wǎng)絡(luò)會議上CSS又一次被提出，博斯演示了Argo瀏覽器支持CSS的例子，哈肯也展示了支持CSS的Arena瀏覽器。
④ 1997年初，W3C組織負責(zé)CSS的工作組開始討論第一版中沒有涉及到的問題。其討論結(jié)果組成了1998年5月出版的CSS規(guī)范第二版。
⑤ CSS3是CSS（層疊樣式表）技術(shù)的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
```
## 三、JavaScript
#### 1、編程語言
```
實實在在的編程語言，完善的語法，可以完成復(fù)雜的程序邏輯
```
#### 2、js為前端頁面的腳步，由DOM、BOM與ES組成
```
DOM：文檔對象模型(Document Object Model)，是W3C組織推薦的處理可擴展標(biāo)志語言的標(biāo)準(zhǔn)編程接口。
BOM：瀏覽器對象模型(Browser Object Model)，是用于描述這種對象與對象之間層次關(guān)系的模型，瀏覽器對象模型提供了獨立于內(nèi)容的、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
ES：ES是一種開放的、國際上廣為接受的腳本語言規(guī)范(ECMAScript)，正式名稱為 ECMA 262 和 ISO/IEC 16262，是宿主環(huán)境中腳本語言的國際 Web 標(biāo)準(zhǔn)。
```
#### 3、js發(fā)展史
```
它最初由Netscape的Brendan Eich設(shè)計。JavaScript是甲骨文公司的注冊商標(biāo)。Ecma國際以JavaScript為基礎(chǔ)制定了ECMAScript標(biāo)準(zhǔn)。JavaScript也可以用于其他場合，如服務(wù)器端編程。完整的JavaScript實現(xiàn)包含三個部分：ECMAScript，文檔對象模型，瀏覽器對象模型。
Netscape在最初將其腳本語言命名為LiveScript，后來Netscape在與Sun合作之后將其改名為JavaScript。JavaScript最初受Java啟發(fā)而開始設(shè)計的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規(guī)范也借自Java。但JavaScript的主要設(shè)計原則源自Self和Scheme。JavaScript與Java名稱上的近似，是當(dāng)時Netscape為了營銷考慮與Sun微系統(tǒng)達成協(xié)議的結(jié)果。為了取得技術(shù)優(yōu)勢，微軟推出了JScript來迎戰(zhàn)JavaScript的腳本語言。為了互用性，Ecma國際（前身為歐洲計算機制造商協(xié)會）創(chuàng)建了ECMA-262標(biāo)準(zhǔn)（ECMAScript）。兩者都屬于ECMAScript的實現(xiàn)。盡管JavaScript作為給非程序人員的腳本語言，而非作為給程序人員的腳本語言來推廣和宣傳，但是JavaScript具有非常豐富的特性。
發(fā)展初期，JavaScript的標(biāo)準(zhǔn)并未確定，同期有Netscape的JavaScript，微軟的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（歐洲計算機制造商協(xié)會）的協(xié)調(diào)下，由Netscape、Sun、微軟、Borland組成的工作組確定統(tǒng)一標(biāo)準(zhǔn)：ECMA-262。
```
#### 4、js框架
```
Angular、React與Vue等均是JavaScript主流框架
```
###### v_test：熟悉前端三劍客 # 第一個頁面
## 一、基礎(chǔ)模板
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一個頁面</title>
</head>
<body>
</body>
</html>
```
## 二、模板解讀
- DOCTYPE：指定文檔類型，規(guī)定html標(biāo)簽語法
- html：文檔根標(biāo)簽，標(biāo)注著文檔(頁面)的開始與結(jié)束
- head：文檔頭標(biāo)簽，可以引用腳步文件、指定樣式表、書寫代碼邏輯塊、提供元信息
- body：文檔主體標(biāo)簽，包含文檔所有文本與超文本內(nèi)容
- title：文檔tag標(biāo)題標(biāo)簽，設(shè)置文檔tag的標(biāo)題內(nèi)容
###### v_hint：html標(biāo)簽的lang屬性值 en | zh（zh-cn）
## 三、其他核心模板標(biāo)簽
#### 1、meta（元標(biāo)簽）
```html
字符編碼
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
SEO
<meta name="keywords" content="8-12個以英文逗號隔開的單詞或詞語">
<meta name="description" content="80字以內(nèi)的一段話，與網(wǎng)站內(nèi)容相關(guān)">
移動適配
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
```
#### 2、link（鏈接標(biāo)簽）
```html
外聯(lián)樣式表
<link rel="stylesheet" type="text/css" href="style.css" />
文檔tag圖標(biāo)
<link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />
```
#### 3、style（樣式標(biāo)簽）
```html
內(nèi)聯(lián)樣式表
<style></style>
```
#### 4、script（腳步標(biāo)簽）
```html
<script type="text/javascript"></script>
```
###### v_test：設(shè)置簡單的新浪模板 # html常用標(biāo)簽
#### 1、無語義標(biāo)簽
```html
<div></div>
<span></span>
```
#### 2、常用語義標(biāo)簽
```html
<hn></hn> 標(biāo)題
<p></p> 段落
<pre></pre> 原文本
<br /> 換行
<hr /> 分割線
```
#### 3、文本標(biāo)簽
```html
<i></i> 斜體字
<em></em> 斜體字，表示強調(diào)
<b></b> 粗體字
<strong></strong> 粗體字，表示強調(diào)(語氣更強)
<del></del> 刪除的文本
<ins></ins> 插入的文本
<sub></sub> 下標(biāo)字
<sup></sup> 上標(biāo)字
<ruby>
拼音<rt>pinyin</rt>
</ruby> 中文注音，h5新增
```
#### 4、其他標(biāo)簽
```html
<section></section> 塊
<small></small> 小號字體
```
###### v_test：熟悉常用標(biāo)簽 # 樣式與長度顏色
#### 1、基本樣式
```html
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
```
#### 2、長度
- px：像素(pixel)，屏幕上顯示的最小單位，用于網(wǎng)頁設(shè)計，直觀方便
- mm：毫米
- cm：厘米
- in：英寸
- pt：點(point)，一個標(biāo)準(zhǔn)的長度單位，1pt＝1/72in，用于印刷業(yè)，非常簡單易用；
- em：相當(dāng)長度，通常1em=16px，應(yīng)用于流式布局
#### 3、顏色
- rgb()：三個值可為[0-255]數(shù)值或百分比，以,相隔（r:Red g:Green b:Blue）
- rgba()：前三個值可為像素或是百分比，最后一個為[0, 1]數(shù)值，以,相隔（r:Red g:Green b:Blue a:Alpha）
- hsl()：第一個值為[0,360]數(shù)值，后二個值可為百分比，以,相隔（h:Hue s:Saturation l:Lightness）
- hsla()：第一個值為[0,360]數(shù)值，中間二個值可為百分比，最后一個為[0, 1]數(shù)值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
- #AABBCC：六個十六進制位，每兩位一整體，分別代表Red、Green、Blue，可以簡寫#abc
###### v_test：熟悉所有的長度單位與顏色表示方式 # 常用樣式
#### 1、字體樣式
- font-family：字體族科，多值用于備用，以,隔開
```css
font-family: "STSong", "Arial";
```
- font-size：字體大小
- font-style： 字體風(fēng)格 normal \| italic \| oblique
- font-weight：字體重量 normal \| bold \| lighter \| 100~900
- line-height：行高
- font：字重 風(fēng)格 大小/行高 字族
#### 2、文本樣式
- color：文本顏色
- text-align：橫向排列
```css
left 居左 | center 居中 | right 居右
```
- vertical-align：縱向排列
```css
baseline：將支持valign特性的對象的內(nèi)容與基線對齊
sub：垂直對齊文本的下標(biāo)
super：垂直對齊文本的上標(biāo)
top：將支持valign特性的對象的內(nèi)容與對象頂端對齊
text-top：將支持valign特性的對象的文本與對象頂端對齊
middle：將支持valign特性的對象的內(nèi)容與對象中部對齊
bottom：將支持valign特性的對象的文本與對象底端對齊
text-bottom：將支持valign特性的對象的文本與對象頂端對齊
```
- text-indent：字體縮減
- text-decoration：字劃線
- letter-spacing：字間距
- word-spacing：詞間距
- word-break：自動換行
```css
normal：默認換行規(guī)則
break-all：允許在單詞內(nèi)換行
```
#### 3、背景樣式
- background-color：顏色
- background-image：圖片
```css
background-image: url(bg.png);
```
- background-repeat：重復(fù)
```css
repeat | no-repeat | repeat-x | repeat-y
```
- background-position：定位
```css
top | bottom | left | right | center
```
###### v_hint：定位值可為方位詞、百分比及固定值，值個數(shù)默認為兩位(水平/垂直)，一個值時垂直默認center
- background-attachment：滾動模式
```css
background-attachment: fixed;
```
###### v_eg：父級設(shè)置屬性，子集內(nèi)容超出父級范圍
###### v_hint：掌握基本屬性 # 標(biāo)簽分類
#### 1、單|雙標(biāo)簽
- 單標(biāo)簽：單標(biāo)簽在自身標(biāo)簽標(biāo)識結(jié)束，主要應(yīng)用場景為功能性標(biāo)簽
- 雙標(biāo)簽：雙標(biāo)簽有成對的結(jié)束標(biāo)識，主要應(yīng)用場景為內(nèi)容性標(biāo)簽
#### 2、行|塊標(biāo)簽
- 行標(biāo)簽：又名內(nèi)聯(lián)標(biāo)簽，內(nèi)聯(lián)標(biāo)簽自身不具備寬高，通常同行顯示
- 塊標(biāo)簽：又名塊級標(biāo)簽，塊標(biāo)簽擁有自身寬高，通常獨自占據(jù)一行
#### 3、單一|組合標(biāo)簽
- 單一標(biāo)簽：單獨出現(xiàn)，表示具體的功能或展示具體的內(nèi)容
- 組合標(biāo)簽：配合使用，才能產(chǎn)生相應(yīng)的內(nèi)容與效果
###### v_test：熟悉標(biāo)簽的分類 # CSS三種引入方式
## 一、三種方式的書寫規(guī)范
#### 1、行間式
```html
<div style="width: 100px; height: 100px; </div>
```
#### 2、內(nèi)聯(lián)式
```html
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
```
#### 3、外聯(lián)式
```css
file: zero.css
div {
width: 100px;
height: 100px;
background-color: red;
}
```
```css
file: zero.html
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
```
## 二、三種方式間的"優(yōu)先級"
- 與樣式表的解析順序有關(guān)
###### v_test：掌握三種CSS引入方式方式 posted on 2018-12-27 20:00 漫天飛雪世情難卻 閱讀(...) 評論(...) ?編輯 收藏
## 一、什么是前端
前端即網(wǎng)站前臺部分，運行在PC端，移動端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，HTML5，CSS3，前端框架的應(yīng)用，跨平臺響應(yīng)式網(wǎng)頁設(shè)計能夠適應(yīng)各種屏幕分辨率，完美的動效設(shè)計，給用戶帶來極高的用戶體驗。
前端技術(shù)一般分為前端設(shè)計和前端開發(fā)，前端設(shè)計一般可以理解為網(wǎng)站的視覺設(shè)計，前端開發(fā)則是網(wǎng)站的前臺代碼實現(xiàn)，包括基本的HTML和CSS以及JavaScript
- 廣義前端：所有用戶可以直接看見并交互的界面
- 俠義前端：瀏覽器上運行的用戶交互界面
## 二、前端開發(fā)技術(shù)棧
### HTML
- 超文本標(biāo)記語言 Hyper Text Markup Language
- 負責(zé)完成頁面的結(jié)構(gòu)
- 文件后綴：.html .htm
###### v_hint：“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素
### CSS
- 級聯(lián)樣式表 Cascading Style Sheet
- 負責(zé)頁面的風(fēng)格設(shè)計，樣式、美觀
- 文件后綴：.css
### JavaScript
- 瀏覽器腳本語言，可以編寫運行在瀏覽器上的程序
- 負責(zé)編寫頁面特效、調(diào)用瀏覽器的API\(BOM\)、操作改變頁面內(nèi)容\(DOM\)，從后端獲取數(shù)據(jù)\(Ajax\)，渲染頁面等
- 文件后綴：.js
###### v_eg：big house、live perple # 前端三劍客
## 一、HTML
#### 1、標(biāo)記語言
```
標(biāo)記語言為非編程語言，不具備編程語言具備的程序邏輯
```
#### 2、html為前端頁面的主體，由標(biāo)簽、指令與轉(zhuǎn)義字符（實體）等組成
```
標(biāo)簽：被尖括號包裹，由字母開頭包含合法字符的，可以被瀏覽器解析的標(biāo)記。eg:系統(tǒng)標(biāo)簽，自定義標(biāo)簽
指令：被尖括號包裹，由!開頭的標(biāo)記。eg:<!doctype html> <!-- -->
轉(zhuǎn)義字符：被&與;包裹的特殊字母組合或#開頭的十進制數(shù)。eg:< >
```
###### v_hint：[轉(zhuǎn)義字符](http://tool.oschina.net/commons?type=2)
#### 3、html發(fā)展史代表版本
```
① html1：在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布（并非標(biāo)準(zhǔn)）
② html2：1995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時
③ html3.2：1997年1月14日，W3C推薦標(biāo)準(zhǔn)
④ html4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)
⑤ html4.01(微小改進)：1999年12月24日，W3C推薦標(biāo)準(zhǔn)
⑤ html5：2014年10月28日，W3C推薦標(biāo)準(zhǔn)(h5草案的前身名為Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團隊。在2008年1月22日，第一份正式草案發(fā)布。)
```
#### 4、文檔類型
```html
<!-- 標(biāo)簽語法規(guī)范 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
```
## 二、CSS
#### 1、標(biāo)記語言
```
標(biāo)記語言為非編程語言，不具備編程語言具備的程序邏輯
```
#### 2、css為前端頁面的樣式，由選擇器、作用域與樣式塊組成
```
選擇器：由標(biāo)簽、類、id單獨或組合出現(xiàn)
作用域：一組大括號包含的區(qū)域
樣式塊：滿足css連接語法的眾多樣式
```
#### 3、css發(fā)展史代表版本
```
① 1990年，Tim Berners-Lee和Robert Cailliau共同發(fā)明了Web。1994年，Web真正走出實驗室。
② 1994年哈坤·利提出了CSS的最初建議。而當(dāng)時伯特·波斯（Bert Bos）正在設(shè)計一個名為Argo的瀏覽器，于是他們決定一起設(shè)計CSS。
③ 哈坤于1994年在芝加哥的一次會議上第一次提出了CSS的建議，1995年的www網(wǎng)絡(luò)會議上CSS又一次被提出，博斯演示了Argo瀏覽器支持CSS的例子，哈肯也展示了支持CSS的Arena瀏覽器。
④ 1997年初，W3C組織負責(zé)CSS的工作組開始討論第一版中沒有涉及到的問題。其討論結(jié)果組成了1998年5月出版的CSS規(guī)范第二版。
⑤ CSS3是CSS（層疊樣式表）技術(shù)的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
```
## 三、JavaScript
#### 1、編程語言
```
實實在在的編程語言，完善的語法，可以完成復(fù)雜的程序邏輯
```
#### 2、js為前端頁面的腳步，由DOM、BOM與ES組成
```
DOM：文檔對象模型(Document Object Model)，是W3C組織推薦的處理可擴展標(biāo)志語言的標(biāo)準(zhǔn)編程接口。
BOM：瀏覽器對象模型(Browser Object Model)，是用于描述這種對象與對象之間層次關(guān)系的模型，瀏覽器對象模型提供了獨立于內(nèi)容的、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
ES：ES是一種開放的、國際上廣為接受的腳本語言規(guī)范(ECMAScript)，正式名稱為 ECMA 262 和 ISO/IEC 16262，是宿主環(huán)境中腳本語言的國際 Web 標(biāo)準(zhǔn)。
```
#### 3、js發(fā)展史
```
它最初由Netscape的Brendan Eich設(shè)計。JavaScript是甲骨文公司的注冊商標(biāo)。Ecma國際以JavaScript為基礎(chǔ)制定了ECMAScript標(biāo)準(zhǔn)。JavaScript也可以用于其他場合，如服務(wù)器端編程。完整的JavaScript實現(xiàn)包含三個部分：ECMAScript，文檔對象模型，瀏覽器對象模型。
Netscape在最初將其腳本語言命名為LiveScript，后來Netscape在與Sun合作之后將其改名為JavaScript。JavaScript最初受Java啟發(fā)而開始設(shè)計的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規(guī)范也借自Java。但JavaScript的主要設(shè)計原則源自Self和Scheme。JavaScript與Java名稱上的近似，是當(dāng)時Netscape為了營銷考慮與Sun微系統(tǒng)達成協(xié)議的結(jié)果。為了取得技術(shù)優(yōu)勢，微軟推出了JScript來迎戰(zhàn)JavaScript的腳本語言。為了互用性，Ecma國際（前身為歐洲計算機制造商協(xié)會）創(chuàng)建了ECMA-262標(biāo)準(zhǔn)（ECMAScript）。兩者都屬于ECMAScript的實現(xiàn)。盡管JavaScript作為給非程序人員的腳本語言，而非作為給程序人員的腳本語言來推廣和宣傳，但是JavaScript具有非常豐富的特性。
發(fā)展初期，JavaScript的標(biāo)準(zhǔn)并未確定，同期有Netscape的JavaScript，微軟的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（歐洲計算機制造商協(xié)會）的協(xié)調(diào)下，由Netscape、Sun、微軟、Borland組成的工作組確定統(tǒng)一標(biāo)準(zhǔn)：ECMA-262。
```
#### 4、js框架
```
Angular、React與Vue等均是JavaScript主流框架
```
###### v_test：熟悉前端三劍客 # 第一個頁面
## 一、基礎(chǔ)模板
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一個頁面</title>
</head>
<body>
</body>
</html>
```
## 二、模板解讀
- DOCTYPE：指定文檔類型，規(guī)定html標(biāo)簽語法
- html：文檔根標(biāo)簽，標(biāo)注著文檔(頁面)的開始與結(jié)束
- head：文檔頭標(biāo)簽，可以引用腳步文件、指定樣式表、書寫代碼邏輯塊、提供元信息
- body：文檔主體標(biāo)簽，包含文檔所有文本與超文本內(nèi)容
- title：文檔tag標(biāo)題標(biāo)簽，設(shè)置文檔tag的標(biāo)題內(nèi)容
###### v_hint：html標(biāo)簽的lang屬性值 en | zh（zh-cn）
## 三、其他核心模板標(biāo)簽
#### 1、meta（元標(biāo)簽）
```html
字符編碼
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
SEO
<meta name="keywords" content="8-12個以英文逗號隔開的單詞或詞語">
<meta name="description" content="80字以內(nèi)的一段話，與網(wǎng)站內(nèi)容相關(guān)">
移動適配
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
```
#### 2、link（鏈接標(biāo)簽）
```html
外聯(lián)樣式表
<link rel="stylesheet" type="text/css" href="style.css" />
文檔tag圖標(biāo)
<link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />
```
#### 3、style（樣式標(biāo)簽）
```html
內(nèi)聯(lián)樣式表
<style></style>
```
#### 4、script（腳步標(biāo)簽）
```html
<script type="text/javascript"></script>
```
###### v_test：設(shè)置簡單的新浪模板 # html常用標(biāo)簽
#### 1、無語義標(biāo)簽
```html
<div></div>
<span></span>
```
#### 2、常用語義標(biāo)簽
```html
<hn></hn> 標(biāo)題
<p></p> 段落
<pre></pre> 原文本
<br /> 換行
<hr /> 分割線
```
#### 3、文本標(biāo)簽
```html
<i></i> 斜體字
<em></em> 斜體字，表示強調(diào)
<b></b> 粗體字
<strong></strong> 粗體字，表示強調(diào)(語氣更強)
<del></del> 刪除的文本
<ins></ins> 插入的文本
<sub></sub> 下標(biāo)字
<sup></sup> 上標(biāo)字
<ruby>
拼音<rt>pinyin</rt>
</ruby> 中文注音，h5新增
```
#### 4、其他標(biāo)簽
```html
<section></section> 塊
<small></small> 小號字體
```
###### v_test：熟悉常用標(biāo)簽 # 樣式與長度顏色
#### 1、基本樣式
```html
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
```
#### 2、長度
- px：像素(pixel)，屏幕上顯示的最小單位，用于網(wǎng)頁設(shè)計，直觀方便
- mm：毫米
- cm：厘米
- in：英寸
- pt：點(point)，一個標(biāo)準(zhǔn)的長度單位，1pt＝1/72in，用于印刷業(yè)，非常簡單易用；
- em：相當(dāng)長度，通常1em=16px，應(yīng)用于流式布局
#### 3、顏色
- rgb()：三個值可為[0-255]數(shù)值或百分比，以,相隔（r:Red g:Green b:Blue）
- rgba()：前三個值可為像素或是百分比，最后一個為[0, 1]數(shù)值，以,相隔（r:Red g:Green b:Blue a:Alpha）
- hsl()：第一個值為[0,360]數(shù)值，后二個值可為百分比，以,相隔（h:Hue s:Saturation l:Lightness）
- hsla()：第一個值為[0,360]數(shù)值，中間二個值可為百分比，最后一個為[0, 1]數(shù)值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
- #AABBCC：六個十六進制位，每兩位一整體，分別代表Red、Green、Blue，可以簡寫#abc
###### v_test：熟悉所有的長度單位與顏色表示方式 # 常用樣式
#### 1、字體樣式
- font-family：字體族科，多值用于備用，以,隔開
```css
font-family: "STSong", "Arial";
```
- font-size：字體大小
- font-style： 字體風(fēng)格 normal \| italic \| oblique
- font-weight：字體重量 normal \| bold \| lighter \| 100~900
- line-height：行高
- font：字重 風(fēng)格 大小/行高 字族
#### 2、文本樣式
- color：文本顏色
- text-align：橫向排列
```css
left 居左 | center 居中 | right 居右
```
- vertical-align：縱向排列
```css
baseline：將支持valign特性的對象的內(nèi)容與基線對齊
sub：垂直對齊文本的下標(biāo)
super：垂直對齊文本的上標(biāo)
top：將支持valign特性的對象的內(nèi)容與對象頂端對齊
text-top：將支持valign特性的對象的文本與對象頂端對齊
middle：將支持valign特性的對象的內(nèi)容與對象中部對齊
bottom：將支持valign特性的對象的文本與對象底端對齊
text-bottom：將支持valign特性的對象的文本與對象頂端對齊
```
- text-indent：字體縮減
- text-decoration：字劃線
- letter-spacing：字間距
- word-spacing：詞間距
- word-break：自動換行
```css
normal：默認換行規(guī)則
break-all：允許在單詞內(nèi)換行
```
#### 3、背景樣式
- background-color：顏色
- background-image：圖片
```css
background-image: url(bg.png);
```
- background-repeat：重復(fù)
```css
repeat | no-repeat | repeat-x | repeat-y
```
- background-position：定位
```css
top | bottom | left | right | center
```
###### v_hint：定位值可為方位詞、百分比及固定值，值個數(shù)默認為兩位(水平/垂直)，一個值時垂直默認center
- background-attachment：滾動模式
```css
background-attachment: fixed;
```
###### v_eg：父級設(shè)置屬性，子集內(nèi)容超出父級范圍
###### v_hint：掌握基本屬性 # 標(biāo)簽分類
#### 1、單|雙標(biāo)簽
- 單標(biāo)簽：單標(biāo)簽在自身標(biāo)簽標(biāo)識結(jié)束，主要應(yīng)用場景為功能性標(biāo)簽
- 雙標(biāo)簽：雙標(biāo)簽有成對的結(jié)束標(biāo)識，主要應(yīng)用場景為內(nèi)容性標(biāo)簽
#### 2、行|塊標(biāo)簽
- 行標(biāo)簽：又名內(nèi)聯(lián)標(biāo)簽，內(nèi)聯(lián)標(biāo)簽自身不具備寬高，通常同行顯示
- 塊標(biāo)簽：又名塊級標(biāo)簽，塊標(biāo)簽擁有自身寬高，通常獨自占據(jù)一行
#### 3、單一|組合標(biāo)簽
- 單一標(biāo)簽：單獨出現(xiàn)，表示具體的功能或展示具體的內(nèi)容
- 組合標(biāo)簽：配合使用，才能產(chǎn)生相應(yīng)的內(nèi)容與效果
###### v_test：熟悉標(biāo)簽的分類 # CSS三種引入方式
## 一、三種方式的書寫規(guī)范
#### 1、行間式
```html
<div style="width: 100px; height: 100px; </div>
```
#### 2、內(nèi)聯(lián)式
```html
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
```
#### 3、外聯(lián)式
```css
file: zero.css
div {
width: 100px;
height: 100px;
background-color: red;
}
```
```css
file: zero.html
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
```
## 二、三種方式間的"優(yōu)先級"
- 與樣式表的解析順序有關(guān)
###### v_test：掌握三種CSS引入方式方式 posted on 2018-12-27 20:00 漫天飛雪世情難卻 閱讀(...) 評論(...) ?編輯 收藏
轉(zhuǎn)載于:https://www.cnblogs.com/jokezl/articles/10187013.html
總結(jié)
- 上一篇： AutoScaling 与函数计算结合，
- 下一篇： 为什么会梦到别人