HTML5+CSS3的新增常用标签及属性
一、HTM5
1、datalist 标签定义选项列表
2、fieldset 元素可将表单内的相关元素分组
3、新增的input type属性值
4、input常用新属性 占位符等
5、embed：标签定义嵌入的内容
6、 audio：播放音频
7、 video：播放视频
二、CSS3
1、结构(位置)伪类选择器
2、:target目标伪类选择器
3、【】属性选择器
4、::first-letter 伪元素选择器
5、E::before和E::after
6、background-size背景缩放
7、过渡（transition）
8、transform 2D、3D
9、动画 animation
一、HTML5
1、datalist 标签定义选项列表。与 input 元素配合使用该元素
```html
2、fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用
```HTML
3、新增的input type属性值：
| **类型****** | **使用示例****** | **含义****** |
| ---------------- | ----------------------- | ---------- |
| **email****** | | 输入邮箱格式 |
| **tel****** | | 输入手机号码格式 |
| **url****** | | 输入url格式 |
| **number****** | | 输入数字格式 |
| **search****** | | 搜索框（体现语义化） |
| **range****** | | 自由拖动滑块 |
| **time****** | | 小时分钟 |
| **date****** | | 年月日 |
| **datetime****** | | 时间 |
| **month****** | | 月年 |
| **week****** | | 星期 年 |
4、input常用新属性
| **属性****** | **用法****** | **含义****** |
| -------------------- | ---------------------------------------- | ---------------------------------------- |
| **placeholder****** | | 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回 |
| **autofocus****** | | 规定当页面加载时 input 元素应该自动获得焦点 |
| **multiple****** | | 多文件上传 |
| **autocomplete****** | | 规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off off:历史输入值不会显示提醒，反之。
1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字 |
| **required****** | | 必填项 内容不能为空 |
| **accesskey****** | | 规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式 |
5、embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
6、
7、
您的浏览器不支持 video 标签。
二、CSS3
1、结构(位置)伪类选择器（CSS3)
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式
2、:target目标伪类选择器 :
选择器可用于选取当前活动的目标元素
:target {
color: red;
font-size: 30px;
}
3、属性选择器
选取标签带有某些特殊属性的选择器 我们成为属性选择器
```css
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
4、::first-letter 伪元素选择器
1）. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
2）. E::first-line 文本第一行；
3）. E::selection 可改变选中文本的样式；
5、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下 E:after、 E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
":" 与 "::" 区别在于区分伪类和伪元素
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查
6、background-size背景缩放
设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) *设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。* 最多
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
7、过渡（transition）
| 属性 | 描述 | CSS |
| -------------------------- | ----------------------- | ---- |
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
8、transform
是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
8.1 移动 translate(x, y)
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
8.2 缩放 scale(x, y)
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
8.3 旋转 rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针；
8.4 transform-origin可以调整元素转换变形的原点
div{transform-origin: left top;transform: rotate(45deg); } /* 改变元素原点到左上角，然后进行顺时旋转45度 */
也可以加具体的 px坐标
8.5 倾斜 skew(deg, deg)
transform:skew(30deg,0deg);
该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
8.6 3D 的CSS3中的3D坐标系
x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的
8.7 3D rotateX() 沿着 x 立体旋转. rotateY() 沿着y轴进行旋转 rotateZ() 沿着z轴进行旋转 例子： transform:rotateX(180deg);
8.8 透视(perspective)
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
8.9 translate3d(x,y,z)
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
9、动画 animation
可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
div{
animation-name: 动画名称;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画"
}