这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
课堂笔记
本堂课重点内容
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML 作用解析
- HTML 语义化
详细知识点介绍
前端工作的定义
前端工程师是使用Web技术栈解决多端的图形界面交互问题的工程师。专注于人机交互,能够实现的跨终端有PC/移动浏览器、客户端/小程序、VR/AR等。
前端应该关注功能、美观、性能、安全、兼容、体验、无障碍。
前端技术栈
主要包含HTML(内容)、CSS(样式)、Javascript(行为)+网络协议(HTTP/Web Socket)
- 使用Node.js开发服务端;
- 使用Electron开发客户端;
- 使用WebRTC实现P2P在线传输(例:多人会议);
- 使用WebGL实现3D场景可视化;
- 使用WebAssembly使得C++编写的代码可以高效的运行在浏览器上。
开发环境
浏览器 + 编辑器
HTML
HyperText Markup Language
浏览器会对HTML进行解析生成DOM树
HTML 的主要工作之一就是给予文本意义(也被叫做语义,在编程中,语义指的是一段代码的含义),以让浏览器知道如何正确的显示文本。
语义化的好处
- 提高代码可读性、可维护性、无障碍性
- 优化搜索引擎
如何做到语义化?
- 了解每个标签和属性的含义
- 思考用什么标签对内容进行描述最合适
- 不使用直接生成代码的工具,而是自己的去写
课后个人总结
发现了自己以前没有注意到的地方
HTML是传达内容,而不是样式
<!--错误示范-->
<p style="font-size:32px">我在青训营学到了好多知识</p>
<!--正确示范-->
<h1>我在青训营学到了好多知识</h1>
这是第一节课,学到后面CSS的时候应该是可以加id或者类选择器进标签里的,而不是一味的把样式写进标签里,观感不好的同时会造成冗余。
语义化方面
我对语义化的了解停留在了浅层,之后需要加强对每个标签和属性的含义的认识,以及思考用什么标签对内容进行描述最合适。