第1章 前端三大标准：

1.1 三大标准介绍

1.2 html标签一览表

第2章 结构标准 html

2.1 html结构

2.2 html常用标签

2.2.1 h1-h6

2.2.2 span

2.2.3 span 高级用例

2.2.4 div

2.2.5 span

2.3 导入图片

2.3.1 显示超链接

第3章 style

3.1 margin

3.2 设置banner区域

3.3 外边距设置

3.4 设置板式style

3.5 设置边框样式

3.6 继承

第4章 仿照小米(练习)

4.1 设置外边框距离和字体

4.2 设置内边框距离及banner

4.3 设置导航栏的背景色

4.4 高级选择器

4.5 text-decoration

第5章 flot

5.1 浮动特性

5.2 浮动

5.3 导航栏左移

5.4 编辑购物车

5.5 导航栏调试

5.6 li元素横向排布

5.7 组合选择器

5.8 list-style：none;

第6章 浮动产生的问题

6.1 浮动问题1

6.2 浮动问题2

6.2.1 问题解释：

6.2.2 解决方案：

6.2.3 问题截图

6.2.4 解决方法四种:

6.3 修改盒模型

6.3.1 练习：

6.4 padding46

6.5 double/ solid

6.6 border-radius

6.7 margin-top

第7章 写表单交互

7.1 登录页面(练习)

脑图链接https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c

第1章 前端三大标准：

1.1 三大标准介绍

n  结构标准： html (没有逻辑)

n  样式标准： css (没有逻辑)

n  行为标准： javascript

1.2 html标签一览表

标准

作用位置

标签种类

用途

注释

html结构标签

head

title

显示网站的标题

meta

提供有关网页的原信息

style

定义内部样式表

link

链接css资源文件，网站图标

script

链接脚本js文件

body

h1-h6

标题标签

p

段落标签

ul

无序列表标签

ol

有序列表标签

div

盒子标签

teble

表格标签

from

表单标签

img

图片标签

br

换行标签

hr

分割线标签

空格字符

a

超链接标签

span

行内标签

button

概念

行内标签

apan,a

在一行内显示；不能设置宽高

行内块

img input

也属于行内标签，在一行内显示，可以设置宽高

块级标签

div h1-h6,ul,li

独占一行，可以设置宽高，不设置集成父亲100%

标准文档流

UI设计前端稿件，任意提地方来画，按照一定规则来作站

第2章 结构标准 html

主要是包含语义化的标签

标签均为闭合标签

标签样式:html + tab ctl+/ 注释

2.1 html结构

例：

è类型

è可翻译

è字符集

学习htmlè浏览器显示名称

è注释方式

开始前端第一课，不断学习，让自己优秀！è文本主体

输出：

2.2 html常用标签

参考：https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c

n  块及标签：独占一行的标签 h1-h6,div，display：block

独占一行的标签：h1-h6,div

可以设置宽高，默认它的宽度时父亲的100%

n  行内标签：一行内显示的标签 span a，display：inline;display:inline-block

在一行内显示的标签：span a

不能设置宽高，如果不设置默认是字体的大小

n  行内块标签

在一行内显示，可以设置宽高

2.2.1 h1-h6

解释：文本大小

特点：独占一行

代码：

学习html

开始前端第一课，不断学习，让自己优秀！

开始前端第一课，不断学习，让自己优秀！

开始前端第一课，不断学习，让自己优秀！

开始前端第一课，不断学习，让自己优秀！

开始前端第一课，不断学习，让自己优秀！

开始前端第一课，不断学习，让自己优秀！

开始前端第一课，不断学习，让自己优秀！

输出：

2.2.2 span

解释：小跨域的标签，在一行显示

开始前端第一课，不断学习，让自己优秀！

开始前端第一课，不断学习，让自己优秀！

开始前端第一课，不断学习，让自己优秀！

开始前端第一课，不断学习，让自己优秀！

开始前端第一课，不断学习，让自己优秀！

开始前端第一课，不断学习，让自己优秀！

开始前端第一课，不断学习，让自己优秀！

让自己优秀