HTML5:
【1】语义化标签的了解：
                  <header>  头部标签
                     <nav> 导航标签
                     <article> 内容标签
   <section> 块级标签
<aside> 侧边栏标签
  < footer> 尾部标签
有语义的块级标签。
【2】音频标签：
（1）语法：
<audio   src="文件路径"   controls="controls"></audio>
浏览器兼容性解决：
<audio   controls="controls">
<source   src="文件路径"    type="audio/mpeg>
<source   src="文件路径"    type="audio/ogg>
</  audio>
(2)常见属性：
autoplay;  音频添加后马上播放。
controls;         向用户显示控件，比如播放按钮。
loop;         音频播放一遍后重复播放。
常用在游戏背景音乐、宣传网页等....
【3】视频标签：
1）语法：
<video  src="文件路径"   controls="controls"></video>
浏览器兼容性解决：
<video   controls="controls"    width="300">
<source   src="文件路径"    type="video/mpeg>
<source   src="文件路径"    type="video/ogg>
</  video>
(2)常用属性：
autoplay;   视频添加后自动播放（谷歌浏览器需要添加muted来解决自动播放（muted)静音播放）。
conrols;  显示播放控件。
width、height； 设置播放宽度和高度。
loop；循环播放。
【4】新增input表单：
（1）限制输入内容的格式：type="number":限制用户输入内容必须为数字；type="tel":手机号码；type="search":搜索框；type="email":限制用户输入内容必须为Email邮件名等······
（2）提交表单时，校验内容并提示
【5】新增form表单属性：
（1）required;  表示其内容不能为空，必填。
placeholder: 提示内容文本，表示提示信息。
autofocus;自动聚焦属性，
autocomplete="off/on":  自动记录输入过的内容。
multiple;可以多选文件提交。
CSS3：
【1】属性选择器：
E[att]
选择的是：既是E又有att这个属性的元素。
属性选择器、类选择器、伪类选择器的权重为10.
【2】结构伪类选择器
        :first-child （第一个）
        :last-child （最后一个）
        :nth-child(n)
                n可以是数字、单词、公式（从0开始）
                不考虑元素的类型
                指定父元素
"of-type" 选择指定类型的元素。
        :first-of-type
        :last-of-type
        :nth-of-type()
                考虑元素的类型
【3】伪元素选择器
        ::before(在元素内部的前面插入内容）
        ::after （在元素内部的后面插入内容）
        必须有content属性  ，不能省略，可以设置为空
权重为1
【4】2D转换：
  （1）给元素添加转换属性(transform)
        （2）属性值为： transform:translate(x,y)
                x,y可以是具体的像素值，还可以是百分比（是自身宽度或高度的百分比）
（3）translate类似定位，不会影响其他元素的位置；对行内标签没有效果。



第二天
CSS3:
【5】2D转换之旋转(rotate)：
（1）语法：
translate:rotate(度数 deg)
（2）rotata里面跟度数，单位是deg；
（3）角度值为正值时，顺时针旋转；为负值时，逆时针旋转。
（4）旋转时默认的旋转中心点是元素的中心点。
【6】2D转换中心点（transform-origin）:
    (1) 语法：
translate-origin:X  Y;
  （2）里面的X和Y值是用空格隔开的；
   （3）X  Y默认的转换中心点是元素中心点的（50%  50%）
  （4）可以跟方位名词（left、bottom、right、top、center）;
    默认的50%  50% 相当于center   center;
    也可以跟px 像素。
【7】2D转换之缩放（scale）:
(1) 语法：
translate-scale(x , y);
(2)  里面的x,y值是用逗号隔开；
    （3）里面写的数字值是没有单位的，是倍数的意思，1就是1倍，2就是2倍的意思；
（4）transform:scale(1,1) 放大一倍 相对于没有放大
   transform:scale(2,2) 宽和高都放大了2倍
   transform:scale(2)  只写一个参数 第二个参数则和第一   个参数一样 相当于 scale(2,2)
   transform:scale(0.5,0.5)  缩小
   transform:scale(-2,-2) 反向放大2倍    很少用负数 容易让人产生误解
   scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
【8】CSS动画(animation)：
（1) 动画的属性（调动动画的执行）：
1.必须属性：
                      动画名称：animation-name:  ;
                       持续时间：animation-duration：；
2.可选属性：
                       速度曲线：animation-timing-function:
                                            linear： 匀速
                                            ease： 慢-快-慢  默认值
                                          ease-in：由慢逐渐到快。
                                            ease-out： 由快逐渐到慢。
                                            ease-in-out： 慢-快-慢
                         延迟时间：animation-delay:   ；
                             逆向播放：animation-direction:；
                                                           默认是normal、alternate逆向播放。
                              循环播放：animation-iteration-count:infinte;
                                 结束状态：一去不复返【注意：这个属性跟无限播放和逆向播放是冲突】:animation-fill-mode:forwards保持当前位置；animation-fill-mode:backwards回到起始位置；
以上属性都可以简写；
暂停和播放
                                     animation-play-state  控制 播放 还是 暂停
                                      running 播放   paused 暂停
第三天
【1】3D转换(translate3d)：
（1）3D移动：
语法：
transform:translate3d(x,y,z)  其中 x y z 分别指要移动的轴的方向的距离
translform:translateX(100px)  仅仅是移动在x轴上移动
translform:translateY(100px)  仅仅是移动在Y轴上移动
translform:translateZ(100px)  沿z轴方向移动，
（2）透视（视距）perpective:
1.不设置视距，就没有3d视觉效果。
2.视距的值是像素px。
3.透视属性添加在被观察元素的父级盒子上。
   (3)   3D旋转（rotate3d）：
语法
transform:rotateX(45deg); 沿着x轴正方向旋转 45度
                     transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
ransform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度  了解即可
第四天
移动端页面布局：
1）浏览器兼容性
2）移动端屏幕大小和分辨率，差异化大。
视口（viewport）:是浏览器显示页面内容的屏幕区域。分为布局视口、视觉视口、理想视口。
物理像素：物理像素就是我们说的分辨率，
2倍图：
1）图片在高清的屏幕显示时，会被放大，图片放大后就会变模糊
2）解决：制作图片时制作倍图，布局显示的时候缩小显示。
3）插入图片（设置宽、高）；
      背景缩放（background-size）：
1.background-size:图片的宽度 图片的高度；只写一个参数，肯定是宽度，高度省略了就等比例缩放。
2.里面的单位可以跟%，相对于父级盒子来说。
3.cover等比例拉伸，要完全覆盖元素盒子   会有一部分背景图片显示高度不全。
4.cotain 高度和宽度等比例拉伸，当宽度
移动端开发技术选型：
1）单独制作移动端页面
一个项目开发两套页面（pc端一套、移动端一套）
注意点：浏览器兼容性问题（只考虑webkit内核，使用h5和c3）；、
样式初始化用第三方写好的；
移动元素，使用c3的新的盒子模型进行布局（padding和border不会撑开盒子）；手机浏览器中会有一些默认的样式，要清除。
   布局方式：1.流式布局（百分比布局）；
①通过盒子的宽度设置成百分比来根据屏幕显示的宽度进行伸缩，不受固定像素的限制，内容向两侧填充；
②布局的盒子会设置一个最大值（max-width）和最小值(min-width)。
    2.flex弹性布局；
    3.
2）做响应式开发（兼容pc端和移动端）
一个项目开发一套页面（根据屏幕大小进行自动适配显示）
缺点：工作量大，兼容性不好调  开发和维护成本高

HTML5:
【1】语义化标签的了解：
                  <header>  头部标签
                     <nav> 导航标签
                     <article> 内容标签
   <section> 块级标签
<aside> 侧边栏标签
  < footer> 尾部标签
有语义的块级标签。
【2】音频标签：
（1）语法：
<audio   src="文件路径"   controls="controls"></audio>
浏览器兼容性解决：
<audio   controls="controls">
<source   src="文件路径"    type="audio/mpeg>
<source   src="文件路径"    type="audio/ogg>
</  audio>
(2)常见属性：
autoplay;  音频添加后马上播放。
controls;         向用户显示控件，比如播放按钮。
loop;         音频播放一遍后重复播放。
常用在游戏背景音乐、宣传网页等....
【3】视频标签：
1）语法：
<video  src="文件路径"   controls="controls"></video>
浏览器兼容性解决：
<video   controls="controls"    width="300">
<source   src="文件路径"    type="video/mpeg>
<source   src="文件路径"    type="video/ogg>
</  video>
(2)常用属性：
autoplay;   视频添加后自动播放（谷歌浏览器需要添加muted来解决自动播放（muted)静音播放）。
conrols;  显示播放控件。
width、height； 设置播放宽度和高度。
loop；循环播放。
【4】新增input表单：
（1）限制输入内容的格式：type="number":限制用户输入内容必须为数字；type="tel":手机号码；type="search":搜索框；type="email":限制用户输入内容必须为Email邮件名等······
（2）提交表单时，校验内容并提示
【5】新增form表单属性：
（1）required;  表示其内容不能为空，必填。
placeholder: 提示内容文本，表示提示信息。
autofocus;自动聚焦属性，
autocomplete="off/on":  自动记录输入过的内容。
multiple;可以多选文件提交。
CSS3：
【1】属性选择器：
E[att]
选择的是：既是E又有att这个属性的元素。
属性选择器、类选择器、伪类选择器的权重为10.
【2】结构伪类选择器
        :first-child （第一个）
        :last-child （最后一个）
        :nth-child(n)
                n可以是数字、单词、公式（从0开始）
                不考虑元素的类型
                指定父元素
"of-type" 选择指定类型的元素。
        :first-of-type
        :last-of-type
        :nth-of-type()
                考虑元素的类型
【3】伪元素选择器
        ::before(在元素内部的前面插入内容）
        ::after （在元素内部的后面插入内容）
        必须有content属性  ，不能省略，可以设置为空
权重为1
【4】2D转换：
  （1）给元素添加转换属性(transform)
        （2）属性值为： transform:translate(x,y)
                x,y可以是具体的像素值，还可以是百分比（是自身宽度或高度的百分比）
（3）translate类似定位，不会影响其他元素的位置；对行内标签没有效果。



第二天
CSS3:
【5】2D转换之旋转(rotate)：
（1）语法：
translate:rotate(度数 deg)
（2）rotata里面跟度数，单位是deg；
（3）角度值为正值时，顺时针旋转；为负值时，逆时针旋转。
（4）旋转时默认的旋转中心点是元素的中心点。
【6】2D转换中心点（transform-origin）:
    (1) 语法：
translate-origin:X  Y;
  （2）里面的X和Y值是用空格隔开的；
   （3）X  Y默认的转换中心点是元素中心点的（50%  50%）
  （4）可以跟方位名词（left、bottom、right、top、center）;
    默认的50%  50% 相当于center   center;
    也可以跟px 像素。
【7】2D转换之缩放（scale）:
(1) 语法：
translate-scale(x , y);
(2)  里面的x,y值是用逗号隔开；
    （3）里面写的数字值是没有单位的，是倍数的意思，1就是1倍，2就是2倍的意思；
（4）transform:scale(1,1) 放大一倍 相对于没有放大
   transform:scale(2,2) 宽和高都放大了2倍
   transform:scale(2)  只写一个参数 第二个参数则和第一   个参数一样 相当于 scale(2,2)
   transform:scale(0.5,0.5)  缩小
   transform:scale(-2,-2) 反向放大2倍    很少用负数 容易让人产生误解
   scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
【8】CSS动画(animation)：
（1) 动画的属性（调动动画的执行）：
1.必须属性：
                      动画名称：animation-name:  ;
                       持续时间：animation-duration：；
2.可选属性：
                       速度曲线：animation-timing-function:
                                            linear： 匀速
                                            ease： 慢-快-慢  默认值
                                          ease-in：由慢逐渐到快。
                                            ease-out： 由快逐渐到慢。
                                            ease-in-out： 慢-快-慢
                         延迟时间：animation-delay:   ；
                             逆向播放：animation-direction:；
                                                           默认是normal、alternate逆向播放。
                              循环播放：animation-iteration-count:infinte;
                                 结束状态：一去不复返【注意：这个属性跟无限播放和逆向播放是冲突】:animation-fill-mode:forwards保持当前位置；animation-fill-mode:backwards回到起始位置；
以上属性都可以简写；
暂停和播放
                                     animation-play-state  控制 播放 还是 暂停
                                      running 播放   paused 暂停
第三天
【1】3D转换(translate3d)：
（1）3D移动：
语法：
transform:translate3d(x,y,z)  其中 x y z 分别指要移动的轴的方向的距离
translform:translateX(100px)  仅仅是移动在x轴上移动
translform:translateY(100px)  仅仅是移动在Y轴上移动
translform:translateZ(100px)  沿z轴方向移动，
（2）透视（视距）perpective:
1.不设置视距，就没有3d视觉效果。
2.视距的值是像素px。
3.透视属性添加在被观察元素的父级盒子上。
   (3)   3D旋转（rotate3d）：
语法
transform:rotateX(45deg); 沿着x轴正方向旋转 45度
                     transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
ransform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度  了解即可
第四天
移动端页面布局：
1）浏览器兼容性
2）移动端屏幕大小和分辨率，差异化大。
视口（viewport）:是浏览器显示页面内容的屏幕区域。分为布局视口、视觉视口、理想视口。
物理像素：物理像素就是我们说的分辨率，
2倍图：
1）图片在高清的屏幕显示时，会被放大，图片放大后就会变模糊
2）解决：制作图片时制作倍图，布局显示的时候缩小显示。
3）插入图片（设置宽、高）；
      背景缩放（background-size）：
1.background-size:图片的宽度 图片的高度；只写一个参数，肯定是宽度，高度省略了就等比例缩放。
2.里面的单位可以跟%，相对于父级盒子来说。
3.cover等比例拉伸，要完全覆盖元素盒子   会有一部分背景图片显示高度不全。
4.cotain 高度和宽度等比例拉伸，当宽度
移动端开发技术选型：
1）单独制作移动端页面
一个项目开发两套页面（pc端一套、移动端一套）
注意点：浏览器兼容性问题（只考虑webkit内核，使用h5和c3）；、
样式初始化用第三方写好的；
移动元素，使用c3的新的盒子模型进行布局（padding和border不会撑开盒子）；手机浏览器中会有一些默认的样式，要清除。
   布局方式：1.流式布局（百分比布局）；
①通过盒子的宽度设置成百分比来根据屏幕显示的宽度进行伸缩，不受固定像素的限制，内容向两侧填充；
②布局的盒子会设置一个最大值（max-width）和最小值(min-width)。
    2.flex弹性布局；
    3.
2）做响应式开发（兼容pc端和移动端）
一个项目开发一套页面（根据屏幕大小进行自动适配显示）
缺点：工作量大，兼容性不好调  开发和维护成本高