这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天，今天主要学习了前端与HTML基础知识。
本堂课的重点内容：
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML 作用解析
- HTML 语义化
前端工作的定义
什么是前端？这是我们学习前端课程最需要搞清楚的问题了，很多时候我们忙着学习各种知识，各种语法，只知道各种各样的标签和用法，却对我们所要完成的事情浑然不知，只知道要这样做，却不知为什么要这样做。
前端工作的三个要点：
- 解决GUI人机交互问题：合理的设计交互方式，使使用者迅速明白我们要表达的事情。
- 跨终端：PC浏览器/移动浏览器/客户端/小程序/VR/AR等
- Web技术栈：就是我们学习的各种知识啦
总结一下：前端工程师就是利用Web技术栈解决多端图形用户界面交互的工程师！
前端技术栈拆解与分析
HTML主要用来呈现内容，也即页面所包含的文字啊，图片啊，链接啊之类的各种数据信息。
CSS主要用来呈现样式，就是说为我们的网页化个妆，让其变得更美观和漂亮~
JavaScript主要用来呈现行为，也就是我们所说的交互！
浏览器可以把前端的代码通过网络协议从服务器上拿到，拿到后渲染成我们看到的页面！
HTML 作用解析
HTML是什么？
HTML(HyperText Markup Language)是一种超文本标记语言。
浏览器拿到前端代码会进行解析，解析成一个DOM树。
DOM树：将html代码转化成一个对应的树形结构，每一个节点称之为DOM节点。
html语法
- 标签和属性不区分大小写，但是一般小写，用以区分和其他库的代码。
- 空标签可以不闭合，比如input、meta，在结尾直接 /> 即可。
- 属性值一般使用双引号包裹，这样看上去不会显得杂乱。
- 某些属性值可以省略，比如required、readonly。
无序列表Ordered Lists、有序列表Unordered Lists、自定义列表definition list，dt 定义标题，dd 定义描述。 多媒体标签下的alt标签，表示加载失败后显示的文字内容。
radio单选的原理：在多个name属性相同的标签中选择一个
引用：blockquote 长引用 cite属性可以放入引用的链接 cite短引用，引用的章节，名称 q引用的具体内容
HTML 语义化
什么是语义化？
HTML中的元素、属性、属性值都拥有某些含义，开发者应该遵循语义来编写HTML！
为什么要这样做？
因为使用我们所写的HTML的对象主要是开发者、浏览器、搜索引擎这样的。我们在编写代码时遵循语义编写。一方面可以让受众很快的看懂我们的代码，增加我们代码的可读性；另一方面也有助于浏览器的渲染和搜索引擎的识别，提升工作效率。
时刻谨记：传达内容，而不是样式！ 尽量不要把内容和样式混在一起进行编写！
说了这么多，那么如何做到语义化呢？
想要做到语义化，一定要了解每个标签和属性的含义，理解每一种标签的使用场景，思考什么标签最适合描述当前想要表达的内容信息。
今天是青训营开课的第一天，短短的课程收获了丰富的知识，虽然没有涉及太多的代码，但是却指明了方法，上完一整堂课有一种醍醐灌顶的感觉！
