HTML5+CSS3

·········································## HTML5学习笔记

1.新增语义化标签：

1. header:头部标签
2. nav:导航栏标签
3. article:内容标签
4. aside:侧边栏标签
5. footer:尾部标签

新增的输入type类型：
email:邮箱
search:搜索
tel:电话
date:日期
number:数字
range:范围
color:颜色

datalist可输入表单：

表单的属性：

• placeholder：表单内的提示信息
• autofocus:自动获得焦点，（一般页面中放一个）
• autocomplete:自动完成(浏览器之前输入过的值，会显示在字段中)默认是打开的，打开:autocomplete=on 关闭:autocomplete=off.
• multiple：多文件上传
• required:必填验证
• novalidate:关闭验证
• pattern:自定义验证，通过正侧表达式自定义验证规则。

多媒体标签：
audio：音频标签

	<audio src=”测试.mpe” autoplay controls ></audio>

公共属性：

Video常用属性、方法、事件：

Duration：视频播放时长
Play:播放
Canplay：视频加载完毕，准备播放
currentTime：当前播放进度
Pause:暂停
Timeupdate 播放时-持续
Volume:音量大小

Source标签（主要用来浏览器兼容）:
可以通过多媒体标签内加入source标签，用来指定多个播放路径，当第一个source标签的路径出错时候，会自动切换到第二个source标签

<!-- 当1.MP4出错时，自动切换到2.mp4 -->
<video autoplay controls >
  <source src=”1.mp4”>
  <source src=”2.mp4”>
  <source src=”3.mp4”>
</video>

CSS3笔记

属性选择器：

伪类选择器(重点掌握)：

伪元素种类：

• 1.E:before 在E元素前插入一个元素
• 2.E：after 在E元素后插入一个元素
• 3.E:first-letter 选择到了E容器内的第一个字母
• 4.E:first-line 选择到了E容器内的第一行文本

伪元素的注意事项：

• 1.伪元素只能给双标签加，不能给单标签加

• 2.伪元素的冒号前不能有空格

• 3.伪元素里面必须写上属性content:””;

2D转换transform:
使用步骤：

• 1.给元素添加转换属性：transform
• 2.2.属性值为translate(x,y) 如transform:translate(50px,50px);

注意事项：

1.translate中的百分比单位是相对于自身元素的：translate(50%,50%);
2.translate类似定位，不会影响到其他元素的位置
3.对行内标签没有效果

2D转换之移动translate:
语法：

transform:translate(x,y);    或者分开写
transform:translateX();
transform:translateY();

让一个盒子水平垂直居中:

position:absout;
top:50%;
left:50%;
transform:translate(-50%,-50%)   //往回走自身宽高的一半

2D旋转之rotate:
语法： Transform:rotate(度数)

重点：

1.rotate里面跟着度数，单位是deg比如rotate（45deg）
2.角度为正时，顺时针，负时，为逆时针
3.默认旋转的中心是元素的中心点

2D转换之缩放：
**语法：**transform:scale(x,y);
注意：

1.注意其中的x和y用逗号分隔
2.Transform:scale(1,1):宽和高度都放大一倍，相对于没有放大
3.Transform:scale(2,2):宽和高都放大了2倍
4.Transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于（2,2）
5.Transform:scale(0.5,0.5):缩小
6.Sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

2D旋转综合写法：

• 1.同时使用多个转换，格式为：transform:translate() rotate() scale()等
• 2.其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
• 3.当我们有位移和其他属性的时候，记得要将位移放到最前

动画：animation

语法：
@keyframes  动画名称{
	       0%{   //里面还可以跟具体的百分比  20%  50%
	          width:100px;
	    }
	       100%{
	          width:200px;
	    }
}

动画常用的属性：

动画简写：
Animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态。

Animation: move 5s linear 2s infinite alternate;

运动速度曲线：

弹性盒子布局：
1.当我们为父盒子设为flex布局以，子元素的float、clear和vertical-align属性将失效。

常见父项常见属性：（重点）

• flex-direction:设置主轴的方向
• justify-content:设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content:设置侧轴上的子元素的排列方式（多行）
• align-items:设置侧轴上的子元素排列方式（单行）
• flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap