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

linht
208 阅读8分钟

这是我参与「第四届青训营 」笔记创作活动的第5天！

Web标准与前端开发（基础原理篇）

1.web前端的起源

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

  • HTML（超文本标记语言）
  • HTTP（超文本传输协议）
  • URL（统一资源定位符）

1990年，第一个web浏览器诞生，Tim 以超文本语言 HTML 为基础在 NeXT 电脑上发明了最原始的 Web 浏览器。

1991年，WWW诞生，这标志着前端技术的开始。

同时前端经历三个时代：

1659153436018.png

2.前端应用领域——浏览器

桌面浏览器包括：Chrome（谷歌）、IE、Firefox（火狐）、Opera、Safari，五个主流浏览器。

  • Chrome（谷歌）:Chrome浏览器是google旗下的浏览器。
             Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。
             最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。
             内核：Blink（Blink其实是Webkit 的分支）

  • IE：IE浏览器是微软公司旗下的浏览器，是目国内用户量最多的浏览器。
    现今，微软以IE浏览器和Windows捆绑的模式不断向市场扩展份额，使IE成为市场的绝对主流。
    现在装了Windows系统的电脑基本无法卸载IE浏览器。
    浏览器内核（渲染引擎）：负责读取网页内容，整理资讯，计算网页的显示方式并显示页面 
    内核：Trident

  • Firefox（火狐）:Firefox浏览器使Mozilla公司旗下浏览器，他们在2004年推出自己的浏览器Firefox。
             Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。
             内核：Gecko（火狐浏览器内核）

  • Opera: Opera是挪威Opera Software ASA公司旗下的浏览器。
     1995年，opera公司发布第一版Opera浏览器，使用自己研发的Presto内核。
     当时opera公司的开发团队不断完善Presto内核，使Opera浏览器一度成为顶级浏览器。
     直到2016年奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。
     后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。
     内核：Blink（Blink其实是Webkit的分支）

  • Safari:第二次浏览器大战是从苹果公司发布Safari浏览器开始的。
     2003年，苹果公司在苹果手机上开发Safari浏览器，利用自己得天独厚的手机市场份额使Safari浏览器迅速成为世界主流浏览器。
     Safari是最早使用webkit内核的浏览器也是现在苹果默认的浏览器。
     内核：Webkit（苹果浏览器内核）

原文链接：blog.csdn.net/qq_46703452…

移动浏览器：Chrome、Safari。

3.前端应用领域——服务器

服务器是构建云计算的最核心的基础设备，是指网络上提供各种服务的高性能计算机。作为网络的节点，存储、处理网络上80％的数据、信息，因此也被称为网络的灵魂。

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

4.前端应用的领域——终端和跨端

4.1-什么是终端？

网络终端是一种专用于网络计算环境下的终端设备，经由通信设施向计算机输入程序和数据或接收计算机输出处理结果的设备。

优势：易维护、低费用、强安全、便操作。

4.2-什么是跨端？

跨端其实就是一套代码落地到不同的native操作系统上，也就是常说的write once run anywhere。

优势：性能、稳定性、效能的统一性和延续性。

4.3-目前终端和跨端的常用工具

1659166900195.png

5.Web标准

Web标准（四种）：W3C、Ecma、WHATWG、IETF。

5.1-Web标准——W3C

W3C（World Wide Web Consortium）万维网联盟，W3C不是一个标准，而是万维网制定的一系列标准。

  • 网页主要由三部分组成：

    • 结构（Structure），结构化标准语言主要包括XHTML和XML。
    • 表现（Presentation），表现标准语言主要包括CSS。
    • 行为（Behavior），行为标准主要包括对象模型（如W3C DOM）、ECMAScript。

  • 规范：

      1. 需要声明（DOCTYPE）
      1. 需要定义语言编码
      1. JavaScript定义
      1. CSS定义
      1. 不要在注释内容中使用’’–’’
      1. 所有标签的元素和属性的名字都必须使用小写
      1. 所有的属性必须用引号""括起来
      1. 把所有<和&特殊符号用编码表示
      1. 所有属性必须有属性值
      1. 所有的标签都必须有相应的结束标签
      1. 所有的标签都必须合理嵌套
      1. 图片添加有意义的alt属性
      1. 在form表单中增加label，以增加用户友好度

注意：JQurry不符合W3C标准！

1659168878222.png

W3C制定流程： W3C规范的正式出台需要经过以下七个步骤：

  1. Submission：
 我们平常向会议或者杂志投递论文叫“paper submission"，
 这里也一样。submission指由W3C member向www consortium投递自己的一个建议。
 w3c有可能决定不接收这个建议。

  2. Notes：
 如果IBM向W3C提了一个submission，而且w3c没有拒绝这个submission，那么它就进入Note阶段。
 Note的内容由IBM进行编辑修改，W3C是不管的。
 发表Note的时候，表示W3C还没有开始和这个submission有关的任何工作。

  3. Working Groups：
 Notes被W3C认可后，W3C会成立一个Working Group。
 Group包括W3C member和有兴趣的外界团队和个人。

  4. Working Draft：
 Draft会在w3c的站点上公布，并邀请公共的评论和意见。
 Working Draft一般不应该作为参考的资料，因为它还会经过大量的修改/更新，而且可能随时被废弃。
 比如现在WSDL2.0就还在Working Draft阶段，还会经过大量的修改。

  5.  Candidate Recommendations：
 这个阶段是可选的，依据论题的复杂程度而定。
 它一般不应该作为参考的资料，因为它还会经过大量的修改/更新，而且可能随时被废弃。

  6.  Proposed Recommendations：
 Proposed Recommendations是Working Groups工作的最后一个阶段。
 它有被继续修改的可能，但一般情况下，它很可能马上不做改动地成为w3c的recommendation.

  7.  Recommendation
 Proposed Recommendations经过了w3c member的检查和w3c的主席的盖章后，成为 w3c recommendation。
 它一般是一个稳定的规范，可以作为参考资料进行学习。

1659169071616.png 原文链接：blog.csdn.net/scholar_ii/…

5.2-Web标准——Ecma

Ecma（European computer manufacturers association International）欧洲计算机制造联合会。 ECMA — 262脚本语言的规范：规范化脚本语言，叫ECMAScript=ES，目前版本ES6、ES5。

浏览器支持情况：Chrome 58、Edge14、Firefox 54、Safari10以及Opera55版本以及之后版本支持es5。
浏览器不兼容ES6：（ES2015）-IE10+、Chrome、FireFox、移动端、NodeJS
ES6 提供 let 和 const 来代替 var声明变量，新的声明方式支持用大括号表示的块级作用域。

1659168936028.png

Ecma TC39规范制度流程： 负责制定ECMAScript规范的是TC39，TC是Technial Committee，技术委员会的意思。

  • stage 0：strawman，稻草人，以任何形式提交的想法。
  • stage 1：proposal，提案，特性的正式建议。
  • stage 2：draft，草案，具有语法和语义的描述。
  • stage 3：cadidate，候选，规范文本完备，有了两个实现。
  • stage 4：finished，完成，可以成为标准，通过单元测试。 1659169770021.png

5.3-Web标准——WHATWG

WHATWG（Web Hypertext Application Technology Working Group）网页超文本应用技术工作小组。 是一个以推动网络HTML5标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成的。

1659168963483.png

5.4-Web标准——IETF

IETF（Internet Engineering Task Force）互联网工程任务组，IETF大量的技术性工作均由其内部的各类工作组协作完成。这些工作组按不同类别，如路由、传输、安全等专项课题而分别组建。IETF的交流工作主要是在各个工作组所设立的邮件组中进行，这也是IETF的主要工作方式。

1659168984974.png

6.个人总结

这是继HTML、CSS、JS和前端设计模式学习后的第5天，今天主要讲的是Web标准与前端开发，我主要学习了web的起源、web标准、工具、框架和应用领域。对于我来说，我的个人基础比较差，对Web的标准和应用领域都不是很清楚，所以我根据老师上课所讲的知识+课外查询的资料整理成了以上这篇文章，主要针对前端涉及到的一些Web标准的基本原理，希望我的文章能让大家了解到web基础知识，也希望能帮助到大家，谢谢!

avatar
文章
阅读
粉丝