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

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

web前端的起源、架构、变迁

起源：前端的起源可以追溯到欧洲的一个物理研究机构中的一篇论文中的一个(关于信息管理的)观点建议： “假设所有存储在各地的计算机上的信息都链接了。我可以编程我的计算机以创建一个可以将所有内容链接到所有内容的空间。” -蒂姆·贝默斯·李（Tim Bemers-Lee），万维网的发明者

• 架构：我们上网浏览网站时，就是打开一个浏览器通过HTTP协议与对应域名的Web服务器进行请求，服务器发送文档，浏览器解析呈现在屏幕上的过程。

• 变迁：

  • 只读时代

  • 体验时代

  • 敏捷时代。

前端应用的领域

前端应用的一些浏览器：

• desktop:chrome,microsoft edge，firfox等
• moblie:安卓和苹果两种不同的操作系统的浏览器不一样，因为两者的内核不一样。

前端应用的服务器：

• node.js
• express.js
• koa

前端应用的终端和跨端：

• 命令行/终端：Webpack CLI,Babel CLI,Vue CLI,React CLI
• 桌面跨端：Electron,NW.js
• 移动跨端：React Native,Flutter

Web标准

W3C

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

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

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

• 规范：

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

Ecma

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

-WHATWG

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

IETF

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

个人总结

通过本节课，我深入学习了前端开发的起源，架构，变迁；前端应用的领域；标准，丰富了我对前端的了解。