前端三剑客

一 概念

# 前端三剑客

## 一、HTML

#### 1、标记语言

```
标记语言为非编程语言，不具备编程语言具备的程序逻辑
```

#### 2、html为前端页面的主体，由标签、指令与转义字符（实体）等组成

```
标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg:系统标签，自定义标签
指令：被尖括号包裹，由!开头的标记。eg:<!doctype html> <!-- -->
转义字符：被&与;包裹的特殊字母组合或#开头的十进制数。eg:&#60; &#62; &nbsp;
```

###### v_hint：[转义字符](http://tool.oschina.net/commons?type=2)

#### 3、html发展史代表版本

```
① html1：在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
② html2：1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
③ html3.2：1997年1月14日，W3C推荐标准
④ html4.0：1997年12月18日，W3C推荐标准
⑤ html4.01(微小改进)：1999年12月24日，W3C推荐标准
⑤ html5：2014年10月28日，W3C推荐标准(h5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。)
```

#### 4、文档类型

```html
<!-- 标签语法规范 -->
<!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、标记语言

```
标记语言为非编程语言，不具备编程语言具备的程序逻辑
```

#### 2、css为前端页面的样式，由选择器、作用域与样式块组成

```
选择器：由标签、类、id单独或组合出现
作用域：一组大括号包含的区域
样式块：满足css连接语法的众多样式
```

#### 3、css发展史代表版本

```
① 1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
② 1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。
③ 哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。
④ 1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。
⑤ CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
```

## 三、JavaScript

#### 1、编程语言

```
实实在在的编程语言，完善的语法，可以完成复杂的程序逻辑
```

#### 2、js为前端页面的脚本，由DOM、BOM与ES组成

```
DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。
BOM：浏览器对象模型(Browser Object Model)，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
ES：ES是一种开放的、国际上广为接受的脚本语言规范(ECMAScript)，正式名称为 ECMA 262 和 ISO/IEC 16262，是宿主环境中脚本语言的国际 Web 标准。
```

#### 3、js发展史

```
它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。
Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。
发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。
```

#### 4、js框架

```
Angular、React与Vue等均是JavaScript主流框架
```

###### v_test：熟悉前端三剑客

二 代码示范

html
1.为标记语言,是非编程语言
2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V)
3.组成:标签, 指令, 实体
标签:由<>包裹,以字母开头可以结合合法字符可以被浏览器解析的标记(纯字母或字母与数字组合)
<zero>小VV</zero>
探讨
<a_1>abc</a_1>
<a$1>def</a$1>
<1a>xyz</1a>
指令:被<>包裹,以!开头的可以被浏览器解析的标记
eg: <!dcotype> <!-- html的注释 -->
<!我也是注释>
实体:被&;包裹的#开头的十进制数或特殊字母组合
&#60;zero&gt;
文档类型:规定该页面的标签遵循的html语法(h5)
<!doctype html>

css
选择器:由标签/类/id单独或组合出现
作用域:{}内部区域
样式块:满足css链接语法的各种样式

<style>
/*选择器zero 作用域{} 样式块color: red;*/
zero {
color: red
/*css语法必须书写;最后一条样式可以省略*/
background-color: cyan;
font-size: 100px
}
a_1 {
color: blue;
}
/*css注释:不支持*/
a$1 {
color: green;
}
1a {
color: pink;
}
</style>

js
BOM:js操作浏览器
DOM:js操作页面文档
ES:js语法(ECAMScript)

LiveScript -> JavaScript

<script type="text/javascript">
// js注释: 可以省略;(不建议)
alert("你丫真帅");
</script>

posted @ 2018-09-23 23:19  不沉之月  阅读(720)  评论(0)  编辑  收藏  举报