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

HTML

一种标记语言，常被用于设计网页结构，用户界面。

举个例子

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

浏览器会将html文件解析成一个dom树

HTML语法

标签和属性不区分大小写，推荐小写

媒体：

audio和video可以通过control属性展示默认的进度条

<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"
  width="400"
/>

<audio 
  src="/assets/music.ogg"
  controls
></audio>

<video
  src="/assets/video.mp4"
  controls
></video>

datalist：使用预制/用户自己输入

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

<q></q>表示引用前文内容
<pre></pre>表示预编译框其内部文字格式固定
<strong></strong>表示语意上的强调
<em></em>表示在一句话中突出重音

内容划分

header展示一些导航栏，或者其他头部信息。
一个页面有且仅有一个main标签，存放网站的正文。
aside

语义化

HTML中的元素，属性等都需要有特定的含义。（不要全使用div）
例如
- 无序列表就用ul，有序就用ol
- lang属性表示内容所使用的语言

考虑谁在使用我们写的html

开发者：便于开发者理解和修改html（代码可读性）
浏览器：便于浏览器解析，对不同标签做出不同处理（可维护性）
搜索引擎：便于搜索引擎提取文章关键词，更易被搜索（搜索引擎优化）
屏幕阅读器：便于一些无障碍阅读插件提取页面内容（提升无障碍性）

要传达内容而不是样式

如何做到语义化？

了解清楚每个属性的含义
思考最适合当前内容的标签
不要使用可视化工具生成前端代码

CSS基础

CSS是什么

Cascading Style Sheets

举个例子

h1 {

    color: white;

    font-size: 14px;

}

在页面中使用css的三种方法

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none; }
  p { margin: 1em 0; }
</style>

<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>

一般推荐使用外链形式

CSS的工作方法

选择器

通配选择器
```
* {
    color: red
}
```
所有元素都会被通配选择器选中

标签选择器（直接使用标签类型选择）

h1 {
    color: orange;
}

p {
    color: gray;
    font-size: 20px;
}

id选择器（使用元素id选择元素）
类选择器（通过class选择元素）

属性选择器：

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

a[href^="#"]：以"#"作为前缀的a标签
a[href$="#"]：以"#"作为后缀的a标签

伪类选择器：

不基于标签和属性定位元素
两种
- 状态伪类
- 结构性伪类
状态伪类
```
a:active {
  color: red;
}
```

结构性伪类

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

通过first-child表示选中li中的第一个
last-child选中li中的最后一个

组合选择器
- 将选择器简单的组合起来
```
<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {
    color: red;
  }
  
  input.error {
    border-color: red;
  }/*要求既是input又有error类*/
</style>
```
- 组合方式
  - 直接组合：AB 满足A同时满足B
  - 后代组合：A B 选中B，如果它是A的子孙
  - 亲子组合：A > B 选中B，如果他是A的直接子元素
  - 兄弟选择器：A ~ B 选中B，如果它在A的后面并且和A同级
  - 相邻选择器：A + B 选中B，如果它紧跟在A后面
- 选择器组：用逗号将选择器分隔开

颜色的表示

RGB
- #93ac12 或者 rgb(123, 231, 43)
HSL
- rgb不能与颜色的一些特性直接关联起来
- hsl(0~~360, 0~~100%, 0~100%)
  - h：色相，基础的颜色
  - s：饱和度，越高颜色越鲜艳
  - l：亮度，越高颜色越亮
alpha 透明度（在css里其实是不透明度）
rgba(255, 0, 0, 0.00~1.00)
hsla(0, 100%, 50%, 0.00~1.00)
#ff000078 78表示透明度范围00~ff

字体

font-family
todo

理解CSS

选择器的特异度

id优先级最高，然后是类选择器，最后是标签选择器

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

继承

有一些属性的值会自动继承父元素的属性值，称为继承。
继承的值是父元素的计算值！！！（计算值的概念在求值过程中）
除非显示的指定子元素的属性值。
与文字相关的属性是一般是可以继承的（font-size，font-family），和盒模型相关的属性一般不可继承（宽度，高度）。

显示继承

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

.some-widget {
  box-sizing: content-box;
}

初始值

css中每一个元素都有一个默认值
可以使用initial关键字表示设置为初始值

CSS求值过程

filtering：获取dom树和样式规则，通过选择器匹配，属性有效等将规则中适用本元素的筛选出来
- 声明值：对于一个元素所匹配到的样式规则，可能有0～多个
cascading：按照声明值中的来源，是否适用important，选择器特异性，顺序等选出优先级最高的一个属性值
- 层叠值：在cascading中最高优先级的值，比如2em，也可能为空
defaulting：如果层叠值为空，使用继承的或者初始值
- 指定值：通过了cascading和defaulting之后，指定值一定不为空
resolving：把一些相对值转换为绝对值，例如将em转换为px
- 计算值：在浏览器在不开始进行具体布局的情况下所能得到的最具体的值。例如定义body宽度为60%必须在布局时获取设备宽度才能计算出具体值。
formatting：将计算值的剩余部分继续转换，将某些关键字，百分数等都转化为具体值。
- 使用值：实际布局时候使用的值，不会再有相对值和关键字，例如400.2px
constraining：将使用值的小数转化成整数
- 实际值：渲染时实际生效的值，比如400px

布局(Layout)是什么

确定内容大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

常规流
- 行级
- 块级
- 表格布局
- FiexBox
- Grid布局
浮动
绝对定位
width：指定Content-box宽度；如果为百分数，其相对于容器的contentbox宽度
height：指定content-box高度；如果为百分数，其相对于容器的contentbox宽度；容器如果有指定的高度时，百分数才生效；

box-sizing: border-box;

<p class="a">
  This is the behavior of width and height as specified by CSS2.1. The
  specified width and height (and respective min/max properties) apply to
  the width and height respectively of the content box of the element.
</p>
<p class="b">
  Length and percentages values for width and height (and respective min/max
  properties) on this element determine the border box of the element.
</p>

<style>
  html {
    font-size: 24px;
  }

  .a {
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }

  .b {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }
</style>

块级 VS 行级

块级盒子（CSS）
- 不和其他盒子并列摆放
- 适用所有盒模型属性
行级盒子（CSS）
- 和其他行级盒子放在一起或者拆开成多行
- 盒模型中height，width不可用
块级元素
- 生成一个块级盒子
- body，article等
- display: block;
行级元素
- 生成行级盒子
- 内容分散在多个行盒（line box）中
- display: inline;

display属性

block 块级
inline 行级
inline-block 它本身是一个行级，可以放在行盒中；可以设置宽高；不会被拆开分成多行。
none 排版时完全忽略

常规流

根元素，浮动和绝对定位会脱离常规流，其他元素均在常规流之内
每个元素在一个排版上下文中参与布局
- 行级排版上下文
- 块级排版上下文
- Table排版上下文
- Flex排版上下文
- Grid排版上下文

行级排版上下文

Inline Formatting Context
如果一个盒子内部仅包含行级元素，则会创建一个IFC
IFC内部的排版规则：
- 盒子在行内水平摆放
- 一行放不下换行显示
- text-align表示一行内盒子的水平对齐
- vertical-align表示一个盒子在行内的垂直对齐
- 避开浮动元素
overflow-wrap: break-word;
- 行内排版时加上这句可以使得长单词能够换行

块级排版上下文

Block Formatting Context
某些容器会创建一个BFC：
- 根元素
- 浮动、绝对定位、inline-block
- Flex和Grid的子元素
- overflow不为visible的块盒
- display: flow-root;
BFC内部排版规则
- 盒子从上到下摆放
- 垂直的mergin会合并
- 盒子内部的mergin不和外部的mergin合并
- 避开浮动元素

举个例子

<span>
  This is a text and
  <div>block</div>
  and other text.
</span>

<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }

  div {
    line-height: 1.5;
    background: lime;
  }
</style>

在行级元素span内部放置了块级元素div
浏览器渲染时，会对div前边的半部分和后边的半部分分别创建两个匿名块，此时span创建了一个BFC，不存在行级元素
元素内部要么只有行级元素要么只有块级元素

Flex Box是什么

可以控制box中的
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许换行
在对齐时，使用主轴侧轴定位
flex-direction：设置flex的布局方向，从左到右从右到左从上到下从下到上四个方向
justify-content：主轴对齐方式
align-items：侧轴对齐方式
align-self：单独设置对齐
order：排序

Flexibility

可以设置盒子弹性，在有空余的时候，盒子可以伸展，空间不够也可以收缩。
flex-grow：伸展
flex-shrink：收缩
flex-basis：基础大小（没有伸展时候的大小，也可以用width）

flex-grow

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 100px;
  }

  .a {
    flex-grow: 2;
  }

  .b {
    flex-grow: 1;
  }
</style>

flex-shrink

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 400px;
  }

  .a {
    flex-shrink: 0;
  }
</style>

flex简写

flex: 1 <=> flex-grow: 1
flex: 100px <=> flex-basis: 100px
flex: 2 1 <=> flex-grow: 2; flex-shrink: 1
flex: 1 100px <=> flex-grow: 1; flex-basis: 100px
flex: 2 0 100px <=> flex-grow: 2; flex-shrink: 0; flex-basis: 100px
flex: auto <=> flex: 1 1 auto
flex: none <=> flex: 0 0 auto

Grid是什么

使用display: grid 生成一个块级的grid容器
使用grid-template相关属性将grid划分为网络
设置每一个子元素占哪些行，列
grid line网格线

grid area网格区域

grid-area: 1/1/3/3;将1，1，3，3围成的区域作为元素位置

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

position属性

static 默认属性
relative
- 在常规流内进行布局
- 相对于自己本来应该在的位置偏移
- 使用top，bottom，left，right定位
- 流内其他元素当他没有偏移一样布局
absolute
- 脱离常规流布局
- 相对于最近的非static的元素进行定位
- 不会对流内布局造成影响
fixed
- 脱离常规流布局，和absolute差不多
- 相对于窗口进行布局

总结

布局时在常规流中进行布局
脱离出常规流单独定位
在出现嵌套情况时，比如一个绝对定位的元素有一些子元素，那么会创建一个新的常规流对于这个元素的子元素进行渲染。

HTML&CSS｜青训营笔记

HTML

举个例子

HTML语法

内容划分

语义化

考虑谁在使用我们写的html

要传达内容而不是样式

如何做到语义化？

CSS基础

CSS是什么

举个例子

在页面中使用css的三种方法

CSS的工作方法

选择器

颜色的表示

字体

理解CSS

选择器的特异度

继承

显示继承

初始值

CSS求值过程

布局(Layout)是什么

布局相关技术

box-sizing: border-box;

块级 VS 行级

display属性

常规流

行级排版上下文

块级排版上下文

举个例子

Flex Box是什么

Flexibility

flex-grow

flex-shrink

flex简写

Grid是什么

position属性

总结