这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
课堂笔记：
一、本堂课重点内容：
简单介绍了一下前端基础三件套（可能没有做到整体认知），HTML的部分重要标签和注意事项
二、详细知识点介绍：
什么是前端
使用web技术栈，解决多端图形用户界面交互问题
技术栈
HTML CSS JavaScript （与网络协议构成基础技术栈）
关注方面
美观，性能，功能，安全，无障碍，兼容，体验
前端的边界
node.js electron react Native webRTC webGL WebASSEMBLY
开发环境
（浏览器，编辑器）
HyperText Markup Language
DOM树查看结构
语法： 标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input menta
属性值推荐使用双引号包裹
某些属性值可以省略，比如required，readonly
标题标签h1-h6
列表标签
有序列表 无序列表 key-value列表
链接
a标签 多媒体标签（图片img，音频audio，视频video） 表单类标签 文本类标签
页面内容整体划分
- 页头header（导航/logo）
- 主体(main标签，其中的article用于正文)
- aside（非正文却需要出现）
- 页尾（footer，参考链接，版权备案信息）
语义化
- 开发者应该遵循HTML语义编写代码
- 优点：代码可读性，可维护性，搜索引擎优化，提升无障碍性
- 如何做到：了解每个标签和属性的含义，思考什么标签最适合描述这个内容，不使用可视化工具生成代码
三、实践练习例子：
可以通过“菜鸟教程”上面的演示来理解各个标签
四、课后个人总结：
语义化其实就是一个规范化的过程，毕竟代码不是给自己一个人看的
五、引用参考：
菜鸟教程 www.runoob.com/tags/ref-st…
HTML语义化 blog.csdn.net/sinat_36728…
node.js
blog.csdn.net/m0_51969330…
electron
aiguangyuan.blog.csdn.net/article/det…
react Native blog.csdn.net/qq_15041931…
webRTC blog.csdn.net/zego_0616/a…
webGL blog.csdn.net/terrychinaz…
WebASSEMBLY blog.csdn.net/fRF0lw4/art…
