深入学习HTML + CSS基础 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第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. 字体设置

① 字体列表最后写上通用字体族（并非某一特定字体）、

② 英文字体放在中文字体前面

1. 中文字体放前面，中文字体一般支持了英文字体，英文字体也按中文字体进行渲染了
2. 英文放在前面，那么渲染完英文字体后，中文字体找不到，再用中文字体

③ 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 ⇒ 连续的空白符保留，换行遇到换行符或者
才换

• pre-wrap ⇒ 连续的空白符保留，换行遇到换行符或者
，或者需要填充盒子

• pre-line ⇒ 连续的空白被合并，换行遇到换行符或者
，或者需要填充盒子

其他

PostCSS ⇒ 转化成比较低版本css，能够使用一些新的css的新特性，可以做一些优化

Less, Sass ⇒ CSS预处理器

CSS Module

使用link或者@import进来都将是全局的样式，CSS Module ⇒ 加祖先级选择器进行区分

Shadow DOM 做CSS隔离