前端星2020_4_8课程笔记

HTML部分

概述：

超文本标记语言 标记标签有开始结束 部分标签可以自闭和 标签可以使用属性和属性名进行描述
一个典型的html文档如下

    
    
        
            
                     
        
        
            
一级标题
            
段落内容
        
        

整体构建成dom树

语法：

• 标签和属性不区分大小写 推荐小写
• 空标签可以不闭合
• 属性值用双引号包裹
• 可以忽略某些属性值 比如 required readonly
• 标题 h1~h6
• 列表 ol无序 ul有序 dl定义列表
• 链接 a
• 媒体对象 img audio video
• 输入 input [ placeholder: "", type: [range, number, text, data]] textarea
• 选择 多选 单选 下拉列表 搜索提示（input list绑定）
• 文本标签 blockquote p cite q code pre em strong
• 根据语义做内容划分的标签 header nav main article aside footer

块级和行级标签

语义化

遵循语义来编写html 能使用语义表示内容的地方不用标签加样式的方法

---

CSS部分

Cascading Style Sheets 层叠样式表 定义页面元素的样式

css工作流程

浏览器在得到html css文件并将html解析成dom树之后 会将解析好的css添加样式到dom节点 形成展示页面

css的绑定过程如下：

选择器

• 按照标签名 类名 id

  • 通配选择器
  • 标签选择器
  • id选择器
  • 类选择器
• 属性选择器

• 伪类选择器

  • 状态伪类
  • 结构性伪类

组合器

名称	语法	说明
直接组合	AB	同时满足AB
后代组合	A B	选中B 如果B是A的子孙
亲子组合	Ａ>B	选中B如果B是A的子元素

多个相同的样式可以使用选择器组 来避免重复编码

优先级

排版样式（设置字体和颜色）

颜色

• RGB 模式
• USL 模式
• keywords 选择
• alpha通道 不透明度

字体

font-family
通用字体族 Sans-serif 等宽Monospace （中文一般都是等宽字体）
使用建议 加上通用字体族 英文字体族写在中文前
web Fonts url函数
font-size
font-weight

行高

每一行文本之间基线的高度差

文字排版

text-align 文字对齐
spacing 字母之前 词之间的空格数
text-indent 首行缩进
text-decoration 文字修饰
write-space 对待html原有空格的方式

布局样式（设置位置和大小）

可以通过display改变标签的表示方法（块级 行级 inline-block none）

常规流

盒子模型

border-box
padding margin 设置顺序 上右下左
利用border 画三角形
margin水平居中 实际上就是让左右margin相同 也就是设个auto
上下margin合并
overflow

| 排版上下文名称 | 产生条件 |
| - | - |
| Inline Formatting Context (IFC) | 只包含行级盒子的容器会创建一个IFC|
| Block Formatting Context (BFC) | 某些元素会创建BFC |

flex box
一维的布局方式 display：flex
flex盒子内指定流向 对齐 收缩 和 放大 折行 排序
grid
二维的布局方式 display：grid
划分网格 grid-template fr单位
指定子元素网格区域 用网格线开始结束的位置表示

浮动

定位

postion类型	规则
static	默认值 文档流
relative	原本位置偏移 不影响其他元素
absolute	最近非static祖先定位 其他元素布局当它不存在
fixed	相对于页面窗口

动画

#### 变形
transform 不会对其他元素布局有影响

| 方法 | 函数 |
| - | - |
| 平移 | translate |
| 旋转 | rorate |
| 缩放 | scale |
| 扭曲 | skew |
| 3D变形 | perspective （其实是设置人眼位置）|
同时写在transform时是有先后顺序的 而且变化的坐标系是元素坐标系

#### 变换
transition 一种状态到另一种状态的过渡效果
propty 监听的属性
duration 事件
time-function 快慢 匀速之类的
delay 延迟

#### animation
定义关键帧（@keyframes 名称{百分数 / from to}）绑定到元素上（给元素设置animation属性）

响应式

• viewport
• 图片适配 img max-width
• 背景图片适配 background-size contain cover
• @media 媒体查询
• 针对不同的大小 使用不同的图片（分辨率）
• rem单位