Web 标准与前端开发 | 青训营笔记

这是我参与「第四届青训营 - 前端场」笔记创作活动的第7天。

前端开发的起源

1969年，美国国防部的高级研究计划局（ARPA）建立了军用网叫“阿帕网”（ARPnet）。阿帕网就是互联网的前身。

1983年，APRA和美国国防部通信局研制了用于异构网络（本文不做讲解）的TCP/IP 协议，后该协议在社会上流行起来，因此诞生了真正的 Internet。

Internet 和计算机的诞生，为前端技术的开始奠定了基础。

1989年前端诞生，Web 由三种技术构成：

HTML

HTTP

1990年，第一个 Web 浏览器诞生，这是以 HTML 为基础在NeXT 电脑上发明的最原始的 Web 浏览器。

1991年，WWW（万维网）诞生，全称：World Wide Web。标志着前端技术的开始

前端经历了三个时代：

前端应用的领域

浏览器

桌面浏览器（主流）：Chrome、IE、Firefox、Opera、Safari。

Chrome 浏览器是一款由 Google 公司开发的网页浏览器，最开始 Chrome 采用webkit 作为浏览器内核，直到2013年，Google 宣布不再使用苹果的 webkit 内核，开始使用 webkit 的分支内核 Blink。它的特点是简洁、快速。它有IOS, Android, Windows等多个系统的浏览器。

IE 浏览器是微软公司为对抗网景公司于1994年夏天开始研发的一款浏览器，但微软并没有时间从零开始，而是微软和 Spyglass 合作，于是IE从早期一款商业性的专利网页浏览器 Spyglass Mosaic 派生出来的，最好的版本是IE6。目前微软已经放弃IE品牌，在 Windows10上用 Microsoft Edge 取代了 IE。并且停止对 IE11 以前版本的技术支持。

FirFox 浏览器它由 Mozilla 基金会与数百个志愿者所开发的，原名“Phoenix”（凤凰），之后改名“Mozilla Firebird”（火鸟）再改为现在的名字 Firefox。目前最新的正式版本为 Firefox 53.0.2。Firefox 采用 Gecko 作为内核。Gecko 是一个开源的项目，代码完全公开，因此受到很多人的青睐。火狐浏览器是可以自由定制的，一般电脑技术爱好者都喜欢用。它的插件又是世界上最丰富的，这点得到了网友公认。下载来的火狐一般是纯净版，功能比较少，要根据自己的喜好进行定制！最后，Firefox 的问世加快了第二次浏览器大战的开始。也自此打破了 IE 浏览器从98年网景被收购后独步浏览器市场的局面。

Opera 浏览器 Opera 是挪威 Opera Software ASA 公司旗下的浏览器。于1995年发布，当时使用的是自己研发的 Presto 内核。因为 Opera 公司的开发团队不断完善 Presto 内核，使 Opera 浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了 Oprea 浏览器，从此 Opera 也丢弃了强大的 Presto 内核，改用当时 Google 开源的 webkit 内核。后来 Opera 浏览器跟随 Google 将浏览器内核改为 Blink 内核。自此 Presto 内核也淡出了互联网市场。Opera 是跨平台浏览器可以在 Windows、Mac 和 Linux 三个操作系统平台上运行。

Safari 浏览器是苹果计算机的最新操作系统 Mac OS X 中的浏览器，使用了 KDE 的 KHTML 作为浏览器的运算核心。第二次浏览器大战也是从苹果公司发布 Safari 浏览器开始的，2003年苹果公司在手机上发布 Safari 浏览器，苹果公司利用其得天独厚的手机市场份额使 Safari 浏览器成为世界主流浏览器，Safari 是最早使用 webkit 内核的浏览器也是现在苹果默认的浏览器。

原文链接：blog.csdn.net/zyf_1998/ar…

服务器

服务器（sever）是计算机的一种，是网络中为客户端计算机提供各种服务的高性能的计算机，服务器在网络操作系统的控制下，将与其相连的硬盘、磁带、打印机及昂贵的专用通讯设备提供给网络上的客户站点共享，也能为网络用户提供集中计算、信息发布及数据管理等服务。

服务器按照应用功能可分为：Web 服务器、数据库服务器、文件服务器、中间件应用服务器、日志服务器、监控服务器、程序版本控制服务器、虚拟机服务器、邮件服务器、打印服务器、域控制服务器、多媒体服务器、通讯服务器、ERP 服务器等。

按照外形分为：塔式服务器、刀片式服务器、机架式服务器。

终端与跨端

什么是终端

经由通信设施向计算机输入程序和数据或接收计算机输出处理结果的设备。

终端 = 输入终端 + 输出终端

什么是跨端

Write once, run everywhere。

跨客户端运行，如：跨 PC 和无线端，跨多 Native 平台等等。

常用工具

Web 标准

Web 标准一共有四个：W3C、Ecma、WHATWG、IETF。

W3C

W3C 是对 Web 做出规范，使代码更严谨，做出来的网页更易使用，维护。

官网：www.w3.org/

Github：github.com/w3c

规范查询：www.w3.org/TR

什么是 W3C

W3 是指万维网（World Wide Web），W3C 是指万维网联盟（World Wide Web Consortium）。

万维网联盟创建于1994年，是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。

什么是 W3C 标准

W3C不是一个标准，而是万维网制定的一系列标准：

网页主要由三部分组成：
- 结构（Structure）
- 表现（Presentation）
- 行为（Behavior）

结构化标准语言主要包括 XHTML 和 XML。

表现标准语言主要包括 CSS。

行为标准主要包括对象模型（如 W3C DOM）、ECMAScript。

开发者使用 W3C 标准的规范

需要声明（DOCTYPE）

需要定义语言编码

JavaScript定义

CSS定义

不要在注释内容中使用’’–’’

所有标签的元素和属性的名字都必须使用小写

所有的属性必须用引号""括起来

把所有<和&特殊符号用编码表示

所有属性必须有属性值

所有的标签都必须有相应的结束标签

所有的标签都必须合理嵌套

图片添加有意义的alt属性

在form表单中增加label，以增加用户友好度

尽量使用外链 CSS 样式表和 JS 脚本

注意：JQurry 不符合 W3C 标准

Ecma

Ecma（European computer manufacturers association）欧洲计算机制造联合会。

ECMA：262脚本语言的规范：规范化脚本语言，叫 ECMAScript = ES，目前版本ES6、ES5。

官网：www.ecma-international.org

TC39：tc39.es

Github：github.com/tc39

Discourse：es.discourse.group

WHATWG

WHATWG（Web Hypertext Application Technology Working Group）网页超文本技术工作小组。是一个以推动网络 HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla 基金会和苹果这些浏览器厂商和一些相关团体形成的一个松散的、非正式的协作组织，这些团体希望发展一些新的技术，从而开发人员可以在互联网上编写并部署应用。

官网：whatwg.org/

Github：github.com/whatwg

规范查询：spec.whatwg.org/

IETF

IETF（The Internet Engineering Task Force）国际互联网工程工作组。IETF 是一个由为互联网技术工程及发展做出贡献的专家自发参与和管理的国际民间机构。它汇集了与互联网架构演化和互联网稳定运作等业务相关的网络设计者、运营者和研究人员，并向所有对该行业感兴趣的人士开放。任何人都可以注册参加 IETF 的会议。

官网：www.ietf.org/

Github：github.com/ietf

如有问题欢迎指正。