前端学习小记

一、HTML+CSS基础原理

1、浏览器

认识浏览器

2、HTML

2.1 认识HTML
2.2 认识元素
2.3 了解HTML结构
2.4 认识html元素
2.5 认识head元素
2.6 认识body元素
2.7 认识h元素
2.8 认识p元素
2.9 认识img元素
2.10 认识a元素
2.11 认识iframe元素
2.12 认识div、span元素
2.13 了解不常用元素
2.14 认识HTML全局属性

3、CSS

3.1 认识CSS

3.1.1 认识CSS
3.1.2 认识CSS属性 - background-color
3.1.3 认识CSS属性 - color

3.2 CSS文本的属性

3.2.3 认识CSS属性 – text-decoration
3.2.4 认识CSS属性 – text-transform
3.2.5 认识CSS属性 – text-indent
3.2.6 认识CSS属性 – text-align
3.2.7 认识CSS属性 – letter-spacing、word-spacing

3.3 CSS字体的属性

3.3.1 认识CSS属性 – font-size
3.3.2 认识CSS属性 – font-family
3.3.3 认识CSS属性 – font-weight
3.3.4 认识CSS属性 – font-style
3.3.5 认识CSS属性 – font-variant
3.3.6 认识CSS属性 – line-height
3.3.7 认识CSS属性 – font

3.4 CSS常见的选择器

3.4.1 认识CSS —— 选择器
3.4.2 认识通用选择器
3.4.3 认识简单选择器
3.4.4 认识属性选择器
3.4.5 认识后代选择器
3.4.6 认识兄弟选择器
3.4.7 认识选择器组 – 交集选择器
3.4.8 认识伪类选择器
3.4.9 认识伪元素

3.5 CSS属性的特性

3.5.1 认识CSS的属性继承
3.5.2 认识HTML元素的类型
3.5.3 认识CSS属性 - display
3.5.4 认识CSS属性 - overflow
3.5.5 了解CSS样式不生效技巧

3.6 CSS的盒子模型

3.6.1 认识CSS盒子模型
3.6.2 认识盒子模型 – 内容
3.6.3 认识盒子模型 – 内边距
3.6.4 认识盒子模型 – 边框
3.6.5 认识盒子模型 – 外边框
3.6.6 认识盒子模型 – 外轮廓
3.6.7 认识圆角
3.6.8 认识盒子阴影
3.6.9 认识文字阴影
3.6.10 认识CSS属性 - box-sizing

3.7 CSS的背景设置

3.7.1 认识CSS属性 - background-image
3.7.2 认识CSS属性 - background-repeat
3.7.3 认识CSS属性 - background-size
3.7.4 认识CSS属性 - background-position
3.7.5 认识CSS属性 - background-attachment
3.7.6 认识CSS属性 - background

3.8 高级元素的使用

3.8.1 认识列表元素
3.8.2 认识有序列表 – ol – li
3.8.3 认识无序列表 – ul - li
3.8.4 认识定义列表 – dl – dt - dd
3.8.5 认识表格元素 – table
3.8.6 认识表单元素 – form

3.9 Emmet语法

3.9.1 认识Emmet

3.10 CSS元素定位

3.10.1 认识标准流布局
3.10.2 认识元素的定位 – position
3.10.3 认识CSS属性 – z-index
3.10.4 认识浮动 – float
3.10.5 布局方案总结
3.10.6 认识flex布局

4、额外补充

4.1 了解字符实体
4.2 认识URL、URI
4.3 认识字符编码
4.4 认识link元素
4.5 认识进制
4.6 认识CSS颜色
4.7 了解使用边框 - border画图形
4.8 了解Web字体的使用方法
4.9 认识字体图标
4.10 认识精灵图
4.11 认识CSS属性 – cursor