前端语言串讲笔记|青训营

这是我参与青训营笔记创作活动的第1天

一、本堂课重点内容：

本堂课的知识要点有哪些？

• 前端语言的基本能力
• 前端语言的协作配合
• 你不知道的HTML
• 拓展分享

二、详细知识点介绍：

本堂课介绍了哪些知识点？

1.前端语言的基本能力

2.前端语言的协作配合

• css在HTML中的应用
• javascript在HTML中的应用
• CSS在javascript中的应用

3.你不知道的HTML

• 并非图灵完备，是标记语言
• 基本语法：
  • element
  • text
  • comment
  • DTD（document type defination）
  • processingInstruction（处理信息）
• 全部标签分类：
  • 文档型
  • 闭合型：闭合标签，空标签
  • 换行型：块级，行内
  • H5新元素：语义化标签，媒体标签（video、audio、embed），表单标签（），功能标签（canvas、progress）
• head标签：
  • title
  • base 向页面所有URL提供前缀，是一个过度耦合的设计，不建议使用
  • meta
  • link ：rel决定类型，href决定引入地址
  • script：type指定MIME类型 可内嵌代码，可外链文件
• ARIA（通过给标签添加额外的属性，使页面结构理解起来更容易）
• HTML5
  • html5新增很多内置表单
  • 提供额外存储能力

• indexDB

对比

• PWA&AMP

• audio
• video
• 二进制

• API
• Web Worker

• Web Socket

• Shadow DOM
• Web Component
• SVG&Canvas

• WebGL&WebGPU

着色器语言

• WebAssembly（WASM）：是一种新的编码方式，可以直接在浏览器中运行

4.拓展分享

• web的风靡原因
  • 对用户友好
  • 对开发者友好
• 领域成熟度
  • whatwg/w3c/ecma
  • 浏览器厂商整合
  • 各类web应用风靡
  • 商用平面设计标准化
  • 全面组件化
• 未来的方向
  • 效率工具（Rust）
  • JS 2 Anything
  • 服务器容器化
  • 低（无）代码站点
  • 大前端的统一
  • 三维可视化
• 关于大前端
• MVC&MVVM&MVP

三、实践练习例子：

• 有什么实践举例帮助理解知识点？

四、课后个人总结：

• 用对比不用好，不用比用错好
• 总结
• 本节课介绍了前端语言，基本的语法我是知道的，课程也并未做过多介绍。对于HTML5的介绍是本节课的最大收获，虽然我听得云里雾里。正所谓温故而知新。

五、引用参考：

• 我参考了哪些外部博客/笔记/文章？
• 前端语言串讲 - 掘金 (juejin.cn)
• 部分图片来自于 ⁣‍​​‍‌⁢​⁡‍‌⁣‬⁤‍‌​‬‬‍​‌​⁣⁡​⁣⁤‍⁡‍‌⁡‬⁡​​​⁣‬​⁡⁡‍‬字节前端训练营 - 前端语言串讲.pptx - 飞书云文档 (feishu.cn)