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

前言：

这是我在青训营的第一篇笔记，可能有些地方写的并不全面，但我会尽量把重要的知识点记到这篇笔记中。

一、什么是前端

1.前端的定义

• 解决GUI人机交互问题
• 跨终端（PC/移动浏览器、客户端/小程序、VR/AR等）
• WEB技术栈

2.前端的技术栈

3.前端应该关注哪些方面

我认为一个前端不仅仅要把功能做出来，还应该要关注很多的方面，就像上图所说的这七大方面，每一个方面都需要考虑进去，前端不仅仅只是展示页面，他是与用户间接打交道的。

4.前端的边界？

在前端的边界中，有很多都是我们熟悉的框架。例如：react、node、webGL等等 这些语言和框架都是为了不同的场景而形成的，react可以编写网页，移动端等等都程序，而node可以成为一门后端语言，成为中间过渡的选择，webGL则可以实现一些3D的效果。

前端需要一些环境，无非就是一些浏览器以及语言编译工具。

二.HTML

1.什么是HTML？

所谓的HTML，全称是HyperText Markup Language，一种超文本的标记语言。

2.HTML语法

• 标签和属性不区分大小写，但推荐小写
• 空标签可以不闭合，比如input、meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，比如required、readonly

3.HTML的常用标签以及内容划分

blockquote标签：引用外部文献时使用，cite表示链接，长引用。

q标签：短引用。

em标签：强调的文本，具有强调语气。

......

三、标签的语义化

1.语义化是什么？

语义化，指的是HTML中的元素、属性及属性值都拥有某种含义。

通俗点来讲就是用什么标签干什么事。

2.谁在使用我们写的HTML

• 开发者-修改、维护界面
• 浏览器-展示页面
• 搜索引擎-提取关键词、排序
• 屏幕阅读器-给盲人读页面内容（无障碍）

知道了谁在使用我们的代码就能够做出更贴合用户体验的网页。

3.语义化的好处

• 代码的可读性。
• 可维护性。
• 搜索引擎优化（SEO）。
• 提升无障碍性。

4.如何做到语义化？

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码

四、总结

这节课内容比较简单，虽然笔记中有部分没有记录，但那些东西应该是深入我们前端工程师的脑海了吧。本节课是为了接下来的学习打好基础，语义化非常的重要，在日常编写代码中，一定不要乱用标签，这样才能使我们的代码更加规范，更容易读，好处非常多多。