这是我参与「第四届青训营 」笔记创作活动的的第1天！
本期重新打卡学习HTML + CSS基础部分，进行查漏补缺
1. 前端的关注点
功能、美观、可用性(色盲、色弱)、安全性、性能方面（速度、流畅）、浏览器的兼容性、直观感受
2. 前端的边界
Nodejs来实现后端，原生应用（React Native、electron）、WebRTC（实现P2P，多人视频会议）、WebGL（3D）、WebSembly（能把其他编程语言的变成浏览器可以运行的代码）
3. HTML - 超文本标记语言 - Hyper Markup Text
HTML - 页面结构：
-
DOCTYPE - 浏览器的解析，告诉浏览器以什么样的形式执行，CSS1Compat（标准模式 => 最高标准呈现页面） + BackCompat（怪异模式）
-
head - body
-
HTML语法
- 对于标签推荐小写、有些标签可以不闭合、对于属性值使用双引号包裹为好、某些属性可省略值
- 标题：h1~h6
- 列表：ol有序列表、ul无序列表、定义列表（dl、dt、dd => dl包括dt，dd）
- 音频视频：source(指定多个来源)、controls控件
- 表单元素：input不同的type，比如date、month、year、range、number…
- a标签：_self、_parent、_top、_blank（新页面）
- 引用：cite名词引用、块引用blockquote、引用q（双引号）、code代码引用
- 强调：strong加粗、em斜体
-
HTML5语义化
- header、nav、main(一般只有一个)、article、aside(相关但不属于正文 ⇒ 导航、相关内容)、footer底部
- 用正确的标签做正确的事情、搜索引擎SEO优化、有利于浏览器优化、WebAccessible、对开发者友好
不熟悉的块级元素
dl、dt、dd、fieldset、hgroup、figure、pre、address、article、aside、blockquote、form
4. CSS - 层叠样式表 - Cascading Style Sheets
1. 伪元素： ⇒ ::before，::after，::first-letter，::first-line，::selection
2. 伪类： ⇒ :active, :hover, :visited, :first-child, :first-of-type，:read-only…
3. 颜色表示：
① RGB，十六进制
② 更符合人阅读的颜色表示方式：Hue - Saturation - Lightness — 色相 饱和度 亮度
③ 透明度 十六进制 #ff0000ff，rgba(255, 0, 0, 0.7)， hsla(0, 100%, 50%, 1)
4. 字体设置
① 字体列表最后写上通用字体族（并非某一特定字体）、
② 英文字体放在中文字体前面
- 中文字体放前面，中文字体一般支持了英文字体，英文字体也按中文字体进行渲染了
- 英文放在前面，那么渲染完英文字体后，中文字体找不到，再用中文字体
③ font: 斜体 粗细 大小/行高 字体族
5. 浏览器选择字重
选择比较低的时，如100,200,300 无差别，是因为字体本身就没做这种字体粗细的设置
6. line-height
没有单位时，会相对自身的倍数，如line-height: 1.6; 表示为行高为自身的1.6倍
7. text-align： left/right/center/justify; justify ⇒ 设置文字两端对齐，对最后一行不生效
8. spacing： letter-spacing， word-spacing 字面意思；text-indent： 首行缩进；
9. text-decoration： none，underline，line-through，overline(较为陌生)
10. white-space
-
normal ⇒ 连续的空白符会被合并，换行符会当作空白符处理，换行在需要填充盒子才换行
-
nowrap ⇒ 连续的空白符会被合并，换行无效
-
pre ⇒ 连续的空白符保留，换行遇到换行符或者
<br>才换 -
pre-wrap ⇒ 连续的空白符保留，换行遇到换行符或者
<br>，或者需要填充盒子 -
pre-line ⇒ 连续的空白被合并，换行遇到换行符或者
<br>，或者需要填充盒子
其他
PostCSS ⇒ 转化成比较低版本css，能够使用一些新的css的新特性，可以做一些优化
Less, Sass ⇒ CSS预处理器
CSS Module
使用link或者@import进来都将是全局的样式，CSS Module ⇒ 加祖先级选择器进行区分
Shadow DOM 做CSS隔离
