这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天 本堂课的知识要点包括四个方面： 一. 前端工作的定义 1.解决GUI人机交互问题 2.跨终端 包括：【1】pc/移动浏览器 【2】客户端/小程序 【3】VR/AR等 3.web技术栈
二. 前端技术栈拆解与分析 前端的技术栈：主要由JavaScript，css，HTML三部分行为。 通过HTTP协议将代码在服务器端实现 前端应该注意哪些功能 美观，功能，无障碍，安全，性能，兼容性，用户体验等。前端技术在不断更新，发展迅速，入门门槛低，上手并不困难。
三.HTML 作用解析 HTML（Hyper Text Markup Language）： 所有文档储存在HTML标签中；body中储存需要呈现给用户的内容，例如文字或图片，head中储存需要但不需要直接呈现给用户的内容，比如页面的标题等。 浏览器会对接受的HTML代码产生一个dom树，包含文档的一些节点标签，节点称之为dom节点。 HTML语法： 1标签和属性不区分大小写，推荐小写，自定义的组件等用大写来表示，原生的小写表示，空的标签可以不写结束标签。属性值推荐使用双引号。 2.空标签可以不闭合，比如imput，meta 3.属性值推荐用双引号包裹； 4.某些属性值可以省略，比如required，readonly
四.HTML语义化 语义化就是根据具体内容，选择合适的标签进行代码的编写。便于开发者阅读和写出更优雅的代码，同时让搜索引擎的爬虫能更好的识别。 为什么要语义化： 1.有利于SEO:搜索引擎的爬虫是读不懂无语义的span和div的，因此语义化标签能使爬虫抓取更多的有效信息。 2.CSS文件读取失败的准备：万一CSS文件挂了，语义化的HTML也能呈现较好的内容结构与代码结构。 3.方便其它设备的解析(如屏幕阅读器、盲人阅读器、移动设备)。 4.便于团队开发和维护。
此外，在课程中还举例了许多的HTML标签，讲解了其作用格式等，更好的帮助新手入门HTML的使用和理解。 例如 1.body＆head
</style> </head> <body> </body> 这一串代码包含了body，head等重要标签，包含在body中的是需要直接呈现给用户的内容，head当中的内容是需要但不需要直接呈现给用户的内容，例如标题等等。2.img
img标签是引用图片标签，用于图片的引用。
3.内联样式
直接在标签里添加样式，但不推荐使用。诸如此类还有不少举例，第一天的课程偏向基础，虽然没有很多的内容，但是十分精炼，对整个HTML的学习有方向指导上的重要作用，收获良多，感受丰富。老师讲课有条不紊，逻辑清晰，能够十分容易感受得到重点和应该后续补充的地方
