前端起步 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第6天

这是青训营第一天的上课笔记，很多后面的笔记并没有同步到掘金上，后期有机会再上传吧。

1. 什么是前端？

1. 解决GUI（图形界面下的）人机交互问题
2. 跨终端
   1. PC/移动浏览器
   2. 客户端/小程序
   3. VR/AR等
3. Web技术栈（html、css、js、http网络协议）

2. 前端技术栈

3. 前端应该关注哪些方面

美观、功能、无障碍（accessibility所有人都可以用）、安全（用户数据的安全）、性能、兼容、体验

4. 前端的边界

1. Node.js
2. electron（客户端）
3. React native
4. Web rtc（多人会议）
   1. Web GL
   2. WebASSEMBLY

5. 开发环境：

浏览器+编辑器

6. HTML是什么

7. HTML语法

1. 标签和属性不区分大小写，推荐小写
2. 空标签可以不闭合，比如input，meta
3. 属性值推荐使用双引号包裹
4. 某些属性值客户以省略，比如required、readonly

8. 元素

1. 标题（h1~h6）
2. 列表（ul、ol、dl）
3. 链接（a[href=" ", target="_blank"]）
4. 多媒体（img[src="文件地址" , alt=" 替代性文本 "]、audio、video[controls(是否提供控件)]
5. 输入（input[type="range/number/date", min="最小值", max="最大值", placeholder="占位文字"]、  input[type="radio(单选，靠name属性来判断是否同组单选)"]、 select（与option搭配）、input[list="xxx"]+datalistid="xxx"  ）
6. 引用
   1. 块级引用：blockquote[cite="表来源链接"]
   2. cite标签：短引用（作品引用）
   3. q：前面已经引用过的短引用（具体内容）
7. 其它
   1. code：页面中引用了代码，用pre外包裹
   2. strong：非常重要非常紧急
   3. em：语气重读字节

9. 内容划分

10. 语义化是什么

1. HTML中的元素、属性及属性值都拥有某些含义
2. 开发者应该遵循语义来编写HTML
   1. 有序列表ol、无序列表ul
   2. lang属性表示页面使用的语言

11. 谁在使用我们写的HTML

1. 开发者-修改、维护页面
2. 浏览器-展示页面
3. 搜索引擎-提取关键字、排序
4. 屏幕阅读器-给盲人读页面内容（无障碍性）

12. 语义化的好处

1. 代码可读性
2. 可维护性
3. 搜索引擎优化
4. 提升无障碍性

13. 如何做到语义化

1. 了解每个标签的属性的含义【MDN、W3C】
2. 思考什么标签最适合描述这个内容
3. 不使用可视化工具生成代码