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