这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天。
如题所示，本篇笔记是对今天的课程《前端与HTML》的归纳总结及个人感悟。
一、本堂课重点内容
1. 前端工作的定义
何为前端？
前端技术指利用web技术栈解决多端图形界面下的人机交互问题。
TIPS 一些名词解释：
web技术栈→下个问题有详细解答
多端→PC、移动浏览器、客户端和小程序都分属于不同的端
人机交互→小如手机的开关机按键，大至飞机上的仪表板都属于人机交互的过程
前端工程师关注什么？
-
功能：能够解决用户的需求
-
美观：网页呈现在用户面前，页面的美观度是用户的第一印象
-
安全：为了实现人机交互，用户需要在页面输入个人信息，安全是所关注的重点之一
-
性能：常常提到的防抖、节流是入门阶段的性能优化手段
-
兼容性：用户往往在不同端不同设备进行浏览
-
用户体验（包括无障碍）
2. 前端技术栈拆解与分析
基础前端技术栈：
-
HTML：内容，网页制作者想在网页上所呈现的内容，包括文字、图片、音频等等
-
CSS：样式，包括字体的大小、颜色的变化，是用来改变内容的外观，可以类比为我们穿的各式各样的衣服
-
JavaScript：行为，一般都为人机交互的过程。最常见的js行为，比如用户点击登录按钮跳转到登录页面
进阶前端技术栈（以下为不完全列举）
-
node.js：用来编写服务器端
-
electron：使用基础前端技术栈（html、css、js）搭建跨平台的桌面应用程序框架
-
webGl：提供3D渲染，可以在浏览器中展示3D场景和模型
3. HTML 作用解析
什么是HTML？
HTML→Hypertext Markup Language，翻译成中文就是：超文本标记语言
如何使用HTML？
借用课堂截图一目了然~
4. HTML 语义化
何为语义化？
HTML中的元素、属性、属性值都有某种特定的含义，例如标题（H1~H6）、列表（ui/ol）、强调（strong）等等
前端工程师应该选择合适的标签，即代码语义化，写出优雅的代码，便于其他开发者阅读
语义化有什么好处？
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化？
- 了解每个标签的属性和含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
二、课后个人总结
1. 前端之美：
前端之美，美在人文性：
不同于其他技术栈单纯强调技术性，前端同社科类一样强调人文性。
从美观需求和用户体验两个方面，我们不难看出前端作为人机交互的前沿阵地，以人为本的思想贯穿设计始终。前端工程师最为耳熟能详的作品便是网页，网页的美观与否，网页的无障碍、用户的人机交互体验为前端技术增添了几分人文色彩。
前端之美，美在规范性：
HTML的语义化，即代码的规范性，在编写程序中，是一件很重要的事情。代码规范可提高代码的可读性，让其他工程师更加快速透彻地理解原有代码和新代码。而在前端技术中，HTML的语义化便很好的培养了前端工程师代码规范性的意识，帮助工程师从初级开始编写符合规范的、可读性较高的简洁代码。
