这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
此次青训营学习的前两天我们学习了前端的语言基础，包括HTML、CSS、JavaScript，故此笔记对前两天课程的知识点进行简要记录，记录了学习的部分重点，帮助回顾学习时按照此重点来。
前端（HTML（内容）、CSS（样式）、JavaScript（行为））设计应关注：美观、安全、性能、无障碍、兼容、体验等。
DOM树结构样式简图：
前端页面内容划分简图：
我们在编写HTML时应遵循语义，语义化的好处：代码可读性、可维护性、搜索引擎优化、提升无障碍性。
在编写CSS时，重点关注选择器、样式设置、布局等，这也是我们学习阶段需要重点学习掌握的。如选择器的规则，有按照标签名、类名或id，按照属性，按照DOM树中的位置来进行选择，使用合适的方法可以便于我们选取我们所需要设置的内容。在布局的学习中，应重点关注块级、行级、盒子模型、浮动、position以及Flex Box与Grid布局这两个新的布局排版。
而写好JavaScript除了掌握其语法基础外，还要再掌握一些编写原则：各司其职，组件封装，过程抽象。
各司其职：让HTML、CSS和JavaScript职能分离； 应当避免不必要的由JS直接操作样式； 可以用class来表示状态； 纯展示类交互寻求零JS方案。
组件封装：好的UI组件具备封装性、正确性、扩展性、复用性 ；（组件是指Web页面上抽出来一个个包含模板（html）、样式（css）和功能（js）的单元。）实现组件的步骤：结构设计、展现效果、行为设计。插件化：将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系。模板化：将HTML模板化，更易于扩展。抽象化：将组件通用模板抽象出来。
过程抽象：应用函数式编程思想，用来处理局部细节控制的一些方法。
另外，写代码关注点：风格，效率，约定，使用场景，设计。最重要的是使用场景！然后多提高性能和可读性。
