-
准备工作
- 安装编辑器
- 编辑器的简单使用
- 安装浏览器
- 浏览器的简单使用
-
HTML简介
- 什么是HTML
- 常用浏览器
- 浏览器内核
- Web标准组成
-
HTML语法规则
- 标签的构成
- 标签的注释
- 标签的属性
- 网页的基本结构
-
常用标签
- 排版标签
- header、nav、main、aside、footer、section
- h1-h6
- p
- br
- 文本格式化标签
- b和strong
- i和em
- 排版标签
-
绝对路径和相对路径
- 绝对路径
- 相对路径
-
多媒体标签(图片、音频、视频)
- 图片标签(图片格式,应用场景,特点)
- 音频标签
- 视频标签
-
超链接标签(拨打电话 H5应用 、发送邮件)
-
列表标签
- 无序列表
- 有序列表
- 自定义列表
-
表格标签
- 表格大小
- 表格边框
- 表格对齐
- 表格合并
- 表格分组
-
表单标签
- 表单域(form标签)
- 输入框(input标签)
- 单选框
- 复选框
- 下拉框(select标签)
- 多行文本
- 按钮
- 其他标签(fieldset、legend)
-
HTML实体符号
- 双引号 "
- and符号 &
- 小于号 <
- 大于号 >
- 空格
-
CSS3简介
- 什么是CSS
- CSS的发展历程
- CSS语法介绍
- CSS的注释
-
CSS的基本选择器
- 标签选择器
- ID选择器
- 类选择器
- 通配符选择器
-
CSS的文字属性
- font-family属性
- font-size属性
- font-weight属性
- font-style属性
- font复合属性
-
字体类型-
衬线字体 -
非衬线字体
-
-
CSS的文本外观属性
- color属性
- text-decoration属性
- line-height属性
- letter-spacing属性
- word-spacing属性
- text-align属性
- text-indent属性
-
CSS的书写方式
- 行内样式
- 内嵌样式
- 外链样式
-
CSS的书写方式
- 行内样式
- 内嵌样式
- 外链样式
-
CSS复合选择器
- 后代选择器
- 并集选择器
- 交集选择器
- 兄弟选择器
- 子元素选择器
- 属性选择器
- 结构伪类选择器
- 状态伪类选择器
- 伪元素选择器(主要after before)
-
CSS显示模式
- 块级元素
- 行内元素
- 行内块元素
- 显示模式的转换
-
CSS背景属性
- 背景颜色background-color
- 背景图片background-image
- 背景平铺background-repeat
- 背景附着background-attachment
- 背景位置background-position
- 背景复合属性 background
- 背景尺寸background-size
-
CSS三大特性
- 继承性
- 层叠性
- 优先级
-
盒子模型
- 盒子模型的组成
- 盒子模型的计算
- margin属性
- border属性
- padding属性
- box-sizing属性
- 解决上下外边距合并
- 解决盒子塌陷(子盒子margin把父盒子拉下来)
-
CSS浮动
- 浮动的使用场景
- 浮动的特点
- 清除浮动的方式
- 额外标签法
- overflow属性法
- after伪元素法(主要)
-
切图基本功
- 基本切图
- PS插件cutterman切图
- 像素大厨标注工具的使用
- 蓝湖或摹客切图工具使用
-
CSS定位
- 定位方式
- 相对定位 relative
- 绝对定位 absolute
- 固定定位 fixed
- 粘性定位 sticky
- 定位层级 zIndex
- 定位方式
-
元素的显示和隐藏
- overflow
- display
- visibility
-
网络图片进阶
- 精灵图
- 网络字体
- 字体图标
-
伸缩布局
- display:flex || inline-flex
- flex-direction
- justify-content
- align-items
- flex-wrap
- align-content
- align-self
- order
- flex
-
变换
- 2D变换
- 平移变换
- 旋转变换
- 缩放变换
- 倾斜变换
- 3D变换
- 平移变换
- 旋转变换
- 缩放变换
- 2D变换
-
动效
- 过渡transition
- 动画animation