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

一、重点内容：

简单介绍了HTML与HTML的一些标签

开发人员编写的HTML所遵循的原则

CSS中的选择器，特异度，求值过程，布局中的flex，grid，float与position

学习CSS的建议

二、详细知识点介绍：

HTML

前端工程师就是使用Web技术栈的工程师

HTML：HyperText Markup Language

浏览器会将HTML标签解析成DOM树

标签和属性使用小写

属性值使用双引号

标题：h1-h6

ol：顺序列表

ul：无序列表

dl：自定义列表

img图片，audio音频，video视频

input标签使用type属性更改输入类型

select与option实现多选一

blockquote，cite，q标签实现引用

strong，em实现有选择的强调

开发者应遵循语义编写HTML

为什么

代码可读性

可维护性

搜索引擎优化

提升无障碍性

怎么做

了解每个标签和属性的含义

思考什么标签最适合描述这个内容

不使用可视化工具生成代码

CSS

CSS：Cascading Style Sheets，用来定义页面元素的样式

外链，嵌入，内联三种方式引入CSS

CSS工作的方式

选择器类型

通配选择器

标签选择器，类名选择器，id选择器

属性选择器，可以和标签选择器组合使用；^符号匹配开头，$符号匹配结尾

伪类选择器
- 状态伪类：link,visited,hover,focus
- 结构伪类：first-child,last-child

组合方式

选择器组：使用逗号，分开

颜色

RGB

R：red

G：green

B：blue

HSL

H:Hue，色相，颜色的基本属性

S：Saturation饱和度，鲜艳度，越高越鲜艳

L：Lightness亮度，明亮程度，越高越亮；可以用于hover

字体：font-family

字体列表最后写上通用字体族

英文字体放在中文字体

font-size

长度
- px，em

Font-style

Font-weight:粗细

组合：font：style weight size/height family

text-align：文字对齐，left,center,right,justify（两端对齐）

spacing：空格

text-indent：首行文本的缩进

text-decoration：文字修饰，none，underlinne，line-through，overline

注意white-space属性

权重特异度

id>（伪）类>标签

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

inherit：显式继承

初始值

CSS的每个属性都有一个初始值

可以使用initia关键字显式重置为初始值

CSS求值过程

布局

确定内容的大小和位置的算法

依据元素、容器、兄弟节点和内容等信息来计算

盒模型

padding：内边距

1：全部；2：上下，左右；4：上右下左

border：边框

style，width，color

可以设置border的容器宽高为0，只有一边有颜色，三边透明获得一个三角形

margin：外边距

margin:auto实现水平居中

margin在垂直方向上不会相加，取最大

box-sizing:border-box

指定border范围内的宽高，比较符合直觉，使用*号通配符初始化

overflow:visible;hidden;scroll

块级与行级

块级：Block Level Box	行级：Inline Level Box
不和其它盒子并列摆放	不和其它盒子并列摆放
适用所有的盒模型属性	盒模型中的width、height不适用
生成块级盒子	- 生成行级盒子 - 内容分散在多个行盒 (line box) 中
body、article、div、main、section、h1-6、p、ul、li 等	span、em、strong、cite、code 等
display: block	display: inline

block	块级盒子
inline	行级盒子
inline-block	本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none	排版时完全被忽略

行级排版上下文

Inline Formatting Context (IFC)

只包含行级盒子的容器会创建一个IFC

IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*

块级排版上下文

Block Formatting Context (BFC)

某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display: flow-root;

不同BFC的垂直margin不会合并

BFC内的排版规则

盒子从上到下摆放

垂直 margin 合并

BFC 内盒子的 margin 不会与外面的合并

BFC 不会和浮动元素重叠

Flex BOX

单一方向上的布局

一种新的排版上下文

它可以控制子级盒子的：

摆放的流向 ( → ← ↑ ↓ )

摆放顺序

盒子宽度和高度

水平和垂直方向的对齐

是否允许折行

flex-direction:row;column;row-reverse;column-reverse

主轴与侧轴

主轴的对齐：justify-content

侧轴的对齐：align-items，stretch是默认值

align-self:设置自己的位置

Flexibility

可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。

flex-grow 有剩余空间时的伸展能力

flex-shrink 容器空间不足时收缩的能力

flex-basis 没有伸展或收缩时的基础长度

缩写

Grid

二维的布局方式

display: grid 使元素生成一个块级的 Grid 容器

使用 grid-template 相关属性将容器划分为网格

设置每一个子项占哪些行/列

划分网格

grid-template-columns: 100px 100px 200px;
grid-template-rows: 100px 100px

grid-template-columns: 30% 30% auto;
grid-template-rows: 100px auto

grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr

分配网格

.a {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 3;
}

.a {
   grid-area: 1/1/3/3;
}

.a {
    grid-area: 2/2/4/4;
}
.b {
    grid-area: 1/1/3/3;
}

Float 浮动

position属性

static	默认值，非定位元素
relative	相对自身本位置偏移，不脱离文档流
absolute	绝对定位，相对非static祖先元素定位
fixed	相对于视口绝对定位
sticky	黏性定位

建议

充分利用MDN和W3C CSS规范

保持好奇心，善用浏览器的开发者工具

持续学习，CSS新特性还在不断出现

三、课后个人总结：

HTML传达的是内容，而不是样式。页面上的视觉效果可以使用很多方法实现，但在开发中，尽量使用更加语义化的一种。前端是更新频繁的，需要保持对前端的好奇心，持续学习。

HTML与CSS | 青训营笔记

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