认识前端

前端包括html、css和javascript，分别代表网站的内容、修饰和行为。

html

网页的结构，包含各种标记以及相关的文字内容

css

网页的修饰， 指定字体的颜色、段落等相关内容

javascript

网页的交互和动画

html文件的内容

查看网页内容，常见的包括:

1. 文字 标题 段落 列表
2. 图象
3. 超链接
4. 表格
5. 表单
6. 动画

认识常见的html标记
标记格式

1. xxx => 标记
2. 每个标记都是成对出现， 有开始就有结束
3. 标记标签内，有时也需要使用属性 来更加突出的描述该标记标识的内容

常见的标记、标签:

html => 网页标记，网页的开始和结束，都需要使用该标记 head => 网页头部信息，用于描述网页的各种信息 body => 网页的正文，所有页面中的内容都是存放在body里面 title => 网页的标题，放置于head标签内部 h1 => 正文标题 h2 => 二号标题 h3 h4 h5 h6

p => 段落 ol => 有序列表 ul => 无序列表 li => 列表项目

network => 网络 img => 图像 是一个自闭合标签 src => 指定要显示的图象 alt => 图象注释，如果图象无法显示时，则显示该注释文字，可以是图象的描述 title => 鼠标移动到指定的图象，显示相关联的内容

./ => 当前目录 ../ => 上级目录 ../../ => 上两级目录

超链接

a => 超链接，显示指定的网页 href => 网址 target => 打开网址的方式（属性值可以为_blank和_self 表示空白页和当前页）

把超链接放置入列表标签，实现按列显示 li > a > img

表格

table => 指定为表格，是个双向标签 tr => 表示表格的行 td => 表示表格的单元格 thead => 表格头部 tbody => 表格正文 th => 内容加粗的单元格

其他标签

div => 块标签 ，标签本身无意义 span => 行内标签 标签本身无意义

表单 (form)

form => 表单，提交数据给服务器程序，进行信息的查找以及记录不同的操作 action => 表单的数据要提交到的位置和网页 method => 表单数据的提交方法（post、get） enctype => 表单数据的编码方式

表单项 输入项目

placeholder => 表单项中的提示 input => 输入框 type => 输入框的类型(text、password、email,number,date,checkbox、radio)

select => 下拉列表

textarea => 文本域（多文本） cols => 文本域的列框 rows => 文本域的行高

button => 按钮

表单的数据校验

文本输入框(input type=text) (required minlength maxlength)

数字输入框（input type=number/range/date） (min max)

html5常见的标记

IE9、谷歌浏览器、360浏览器

引入了一些语义标记

header nav aside section footer article

canvas video(视频) audio（音频）

html css js vue.js

APP 桌面应用

html5 html6 css2.1 css3 js（es3 es5 es6）

CSS

对网页内容进行修饰和布局

CSS的书写：

选择器 { 键： 值 ;

}

css和html文件结合使用的三种方式：

1、 直接在标签上使用style属性（优先级最高） 2、 在head标签里面插入style标签（次之） 3、 在head标签里面利用link标签插入单独的css文件（与style里面的优先级一样，主要看顺序）

css中的选择器：

1、标签选择器(html、body ) 2、ID选择器 id属性的值是唯一的，不能重复 3、class类选择器 class属性的值可以在一个页面中多次使用。 4、 属性选择器 选择具有某个属性的标签。 5、通用选择器（*） 6、 多选择器设置（选择器之间用,连接）
7、 限制选择 p.tips (p .tips)

CSS选择器中的层级管理

1、 上下级选择(p span) 2、 兄弟级别的选择 紧随（p + span） 3、 父子级选择(ul>li) 4、 兄弟选择器 同一个层次(p ~ span) 5、 子代选择器(:first-child :last-child :nth-child) css3 6、 对于超链接的伪类选择器(:link :visited :hover :active 一定要注意顺序 )

遇到多个选择器同时设置了相同的属性，这个时候，属性就会发生覆盖，会根据选择器的优先级和权重，来智能的选择使用的属性

1、属性的值之后加上!important标记，强制使用 2、标签的style属性里面的内容优先使用（行内属性） 3、id选择器(100) 4、类选择器(10) 5、标签选择器(1)

网页访问的流程:

1、 输入域名到地址栏之后按回车
2、浏览器会自动通过dns服务器找到域名的IP地址，然后去这个地址的80端口请求信息
3、远程的web服务器如果找到你所需要请求的地址，就会返回对应的文件 html
4、浏览器来解析文件，首先解析html代码，分析html代码的结构，父子关系d等。
5、对于html里面的元素标签来说，每一个标签其实在浏览器看来就是一个个盒子，这个盒子就是我们说的模型盒，通过css，我们可以设置标签的模型盒，从而设置标签的各种摆放。
6、html元素分析完毕以后，进行css代码的解析，最后需要结合在一起，然后按照规则插入到浏览器的页面上显示出来。

理解模型盒：

1、每个标签都是以模型盒的方式来存在的 2、模型盒由4部分构成，分别是内容、内边距、边框和外边距四部分构成 3、设置内容的时候，最主要是是看你的内容所占的空间，另外就是width和height这两个属性 4、设置内边距的时候，主要利用padding属性来设置，可以分别设置四个方向的大小，不能设置颜色 5、设置边框的时候，主要利用border属性来设置，可以分别设置四个方向的大小、线型和颜色。也可以单独去设置，如上边框(border-top:) 6、设置外边距与内边距属性同，不能设置颜色，只能设置大小。也可以分别设置4个方向。

模型盒用到的属性:

1、width height 2、padding padding-top padding-right padding-bottom padding-left 3、border border-top border-right border-bottom border-left border-color border-type border-width 4、margin margin-top margin-right margin-bottom margin-left

理解块级元素和行内元素

块级元素的特征: 占一行，默认从上到下 默认的块级元素有(div h1-h6 p ul li header footer nav section article ) 行内元素特征: 宽度就是内容的宽度，默认从左到右显示

深入探讨模型盒

盒子(元素)的高度: content height + padding-top + pading-bottom + border-top + border-bottom + margin-top + margin-bottom 盒子的宽度: content width + .........

标准模型盒 浏览器默认的盒子计算方式就是标准模型盒 平时设置的width 就是内容的宽度

怪异模型盒 平时设置的 width（ 就是盒子的宽度） = 内容宽度 + 边框宽度 + 边距宽度
box-sizing: content-box; (标准盒子) box-sizing: border-box; (怪异盒子)

内边距(padding)和外边距(margin)的设置： padding: 10px 20px 30px 40px; padding: 10px 20px 30px; (上、右、下、左， 如果没有设置左内边距，默认与右内边距相同) padding: 10px 20px; ( 默认的下与上内边距相同、左与右内边距相同) pading: 10px; padding-bottom: 20px;

特殊情况下 模型盒的外边距等的计算

两个块级元素上下排列时候，他们之间的间隔，不是第一个元素的下外边距（margin-bottom）与第二个元素的上外边距(margin-top)的和,而是取其中的最大的一个值

一个块级元素包含另一个块级元素，如果两个元素都设置了上外边距，这个时候，两个上外边距就会合在一起，就会出现边距重叠的现象，然后取其中最大一个值为上边距，如果要排除这种现象，必须设置父元素的边框，或者设置子元素的外边距为内边距

网页 html+css+js html （内容 结构） css （样式 内容的修饰） js （动作 页面的行为）

每个元素的构成，是有内容和样式组成的，浏览器在解析元素的时候，把每一个元素都看成一个盒子，根据一定的规则对这些盒子进行各种排列后显示 元素盒子(内容+内边距+边框+外边距) （width、height） （padding-top、padding-right、padding-bottom、padding-left） （border-top、 border-right、border-bottom border-left） (margin-top margin-right margin-bottom ma)rgin-left)

画一个三角形
三角形主要利用模型盒里面的border属性
利用border属性，如果要设计三角形朝上，则我们需要设置边框底部（border-bottom），然后不能有对应边到边框，其他两边的大小一样，但颜色为透明

标准文档流

table 显示类似的数据
浮动 float（不是为了布局 图文混排） clear
定位 小范围内元素的调整
css3  flexbox（弹性盒布局）
      IE10 h5  
flexbox布局，
需要同时设置父容器和子元素，只是有的时候，我们可以使用它的默认值。
我们可以使用display属性来启动容器的弹性盒布局
如果使用了弹性盒布局，子元素的float属性和position属性不起作用

可以在容器上设置子元素的显示方向。利用flex-direction属性
可以利用 justify-content设置子元素在主轴上的显示方式
（显示方式有： 开始位置  居中  结束位置 空白均分 两侧空白取消space-between）
可以利用align-items设置子元素在辅助轴上的显示方式

flex布局主要包括弹性盒容器和子元素，
1、display: flex
2、flex-direction:row  row-revseve
3、justify-content:flex-start, flex-end, center,space-around,space-between
4、align-items: flex-start, flext-end, center
5、flex-wrap： nowrap wrap
备注:
可以把flex-wrap和flex-direction两个属性合并为flex,作用于容器，表示容器内的子元素方向和换行

flex布局中的子元素的属性
1、 子元素的顺序， order， 默认为0，
2. flex-grow 表示我们再遇到空白的情况下，如果分割空白的内容

​
flex-strink 空白的区域

200 3 200 2  200 1
第一个元素缩放：
(200*3)/(200*3 + 200*2 + 200 *1) * (600 - 500) = 缩放的尺寸
600/1200 * 100 = 50   200-50 = 150

（200*2）/ 1200 * 100 = 33.3 200-33.3 = 166.7
(200*1) / 1200 *  100 = 16.7 200 - 16.7 = 183.3

​
利用flex-grow和flex-strink可以控制子元素的收缩

使用align-self在子元素上进行设置时，    可以覆盖父元素上显示的交叉轴的对齐方式

css中的动画

变化、过渡与动画 变化(改变后的结果显示出来) transform：translation(平移)/rotate（旋转）/scale（缩放）/skew（拉伸） 1. 显示的内容是经过变化以后的结果 2. 二维的变化 3. 变化分为缩放、移动、旋转与平移 4、旋转(rorate(角度) 角度顺时针在0-360度 逆时针旋转在-1 至-360) 5、缩放（scale） 缩放时属性值为数值，一般连文字内容都同时进行缩放。 scale的属性值，书写格式分为两种，如果只有一个值，则表示横向和纵向同时缩放相同的倍数，如果两个值，则第一个值表示横向，第二个值表示纵向。 6、平移（translate） 平移指的是内容在原来的基础上移动到特定的位置，位置可以用像素，也可以用百分比来表示。 使用像素时，指定横向移动和纵向移动 ，可以是负值也可以是正值，可以理解为相对定位某个元素。 属性值如果使用百分比，百分比的大小取自于自身的大小。

过渡

简单的动画，可以从一个状态到另一个状态 transition: 属性 时间 过渡函数 过渡函数（linear ease ease-in ease-out）

关键帧动画

可以对某个内容设置多个动画时间点，然后根据需求，照着设置好的时间点进行显示 animation

1、创建动画的关键帧 2、将动画的关键帧应用到元素 3、调整动画转化的位置等，进行微调