HTML5与CSS3的新增特性

语义化标签：header、footer、section、nav、aside、article

增强型表单：input 的多个 type

新增表单元素：datalist、keygen、output

output:

datalist:

keygen:

用户名:

加密:

新增表单属性：placehoder、min 和 max

音频视频：audio、video canvas

audio 属性

src:文件路径

autoplay:自动播放

loop:循环

controls:控制条

muted:静音

preload:预加载（当使用autoplay时，preload自动失效）

video 属性

src:文件路径

autoplay:自动播放

loop:循环

controls:控制条

muted:静音

preload:预加载（当使用autoplay时，preload自动失效）

width:宽度

height:高度

poster:海报

<videosrc="http://www.w3school.com.cn/example/html5/mov_bbb.ogg"controls>

</video>

拖拽

H5之前没有拖放API，可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。

H5之后专门提供了七个鼠标拖动相关事件句柄：

拖动的源对象(source)可能触发的事件： dragstart：拖动开始 drag：拖动中 dragend：拖动结束拖动的目标对象(target)可能触发的事件： dragenter：拖动进入 dragover：拖动悬停 drop：松手释放 dragleave：拖动离开注意：拖放API事件句柄中所有的事件对象都有一个dataTransfer属性（数据运输对象），用于在源对象和目标对象间传递数据。源对象：event.dataTransfer.setData(key,value)目标对象：varvalue=event.dataTransfer.getData(key)

本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

(1)window.sessionStorage：类数组对象，通过key=>value对存储字符串数据——会话级存储特点：一次性储存，数据在浏览器关闭后自动删除添加数据：sessionStorage['key']='value'修改数据：sessionStorage['key']='newValue'删除数据：delete sessionStorage['key']获得数据：varv=sessionStorage['key'](2)window.localStorage：类数组对象，通过key=>value对存储字符串数据——本地/跨会话级/永久存储长期存储数据，浏览器关闭后数据不丢失;特点:数据永久存储，没有时间限制；大小限制5M(够用了)；只存储字符串添加数据：localStorage['key']='value'修改数据：localStorage['key']='newValue'删除数据：delete localStorage['key']获得数据：varv=localStorage['key']

媒体查询：

响应式布局

<head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="./css/567.css"media="screen and (max-width:567px)"><linkrel="stylesheet"href="./css/568.css"media="screen and (min-width:568px)"><linkrel="stylesheet"href="./css/768.css"media="screen and (min-width:768px)"><linkrel="stylesheet"href="./css/992.css"media="screen and (min-width:992px)"><linkrel="stylesheet"href="./css/1200.css"media="screen and (min-width:1200px)"><style>*{ margin: 0; padding: 0; } .container{ width: 100%; height: 300px; border: 1px solid #000; }</style></head><body><divclass="container"></div></body>

width = device-width：宽度等于当前设备的宽度

initial-scale：初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

超小屏幕（手机，小于 768px）

@media (max-width: 768px) { ... }

小屏幕（平板，大于等于 768px）

@media (min-width: 768px) and (max-width: 768px) { ... }

中等屏幕（桌面显示器，大于等于 992px）

@media (min-width: 992px) and (max-width: 992px) { ... }

大屏幕（大桌面显示器，大于等于 1200px）@media (max-width: 768px) {

//手机移动端分辨率

}

@media (min-width: 768px) and (max-width: 992px) {

//PAD中屏分辨率

}

CSS3选择器：

“:first-child” 选择器表示的是选择父元素的第一个子元素的元素E。

:last-child” 选择器选择的是元素的最后一个子元素

“:nth-child(n)” 选择器用来定位某个父元素的一个或多个特定的子元素。

“:nth-last-child(n)” 从某父元素的最后一个子元素开始计算，来选择特定的元素。

“:first-of-type” 选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

“:last-of-type” 选择器他选择是父元素下的某个类型的最后一个子元素

“:nth-of-type(n)” 选择器和“:它只计算父元素中指定的某种类型的子元素。

“:nth-last-of-type(n)” 选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始

“:only-child” 选择器匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

“:only-of-type” 选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。

:checked 选择器

圆角效果：

border-radius:10px; /* 所有角都使用半径为10px的圆角

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

阴影：

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

阴影颜色：默认黑色; 投影方式：inset时为内部阴影，省略为外部阴影

为边框应用图片：

border-image:url(borderimg.png) 70 repeat

rgba颜色：

background-color:rgba(100,120,60,0.5); 最后的0.5代码透明度

渐变色彩：

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。

线性渐变：linear-gradient(to left, red, orange); to left为渐变方向从右到左；to top;to right;to bottom;to top left;to top right 颜色可多个分别为从起始到终止的色彩。

溢出省略：

text-overflow:ellipsis; 溢出文字以省略号出现，需要下面三个属性同时使用

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

嵌入字体：

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

@font-face {

font-family : 字体名称;

src : 字体文件在服务器上的相对或绝对路径;

}

使用时：font-family:字体名称

文本阴影text-shadow：

text-shadow: X-Offset(水平偏移) Y-Offset(垂直偏移) blur（阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰） color;

background-origin设置元素背景图片的原始起始位置：

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。

background-size设置背景图片的大小

弹性布局：

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：

在不同方向排列元素

重新排列元素的显示顺序

更改元素的对齐方式

动态地将元素装入容器

display: flex; flex-direction: row; /*弹性盒方向：主轴方向X轴 */ flex-direction: column; /* 弹性盒方向：主轴Y轴方向 */ flex-direction: row-reverse; /* 弹性盒方向：主轴方向X轴倒叙 */ flex-direction: column-reverse; /* 弹性盒方向：主轴Y轴方向倒叙*/ flex-wrap: nowrap; /* 弹性盒换行：不换行默认的 */ flex-wrap: wrap; /* 弹性盒换行：换行 */ //设置主轴方向子元素排列顺序 justify-content: flex-start; /* 从左到右排列默认的 */ justify-content: flex-end; /* 从尾部开始排列不影响子元素排列顺序 */ justify-content: center; /* 从主轴居中对齐 */ justify-content: space-around; /* 平分主轴剩余空间 */ justify-content: space-between; /* 两边对齐，中间评分剩余空间 */ justify-content: space-evenly; /* 间距相同 */

动画CSS3动画

过渡、线性渐变、径向渐变动画

2D动画

3D动画

animation动画

一：animation是一个复合属性，一共有8个参数;

一般是由@keyframes先定义动画，然后animation使用动画。

1.animation-name:动画名称，由@keyframes定义的

2.animation-duration：动画的持续时间

3.animation-timing-function：动画的过渡类型

4.animation-delay：动画的延迟时间

5.animation-iteration-count：动画的循环次数

6.animation-direction：设置动画在循环中是否反向运动

7.animation-fill-mode：设置动画时间之外的状态

8.animattion-play-state:设置动画的状态。

[图片上传失败...(image-401d11-1618139092247)]

动画运动曲线：

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）

linear - 规定从开始到结束的速度相同的动画

ease-in - 规定慢速开始的动画

ease-out - 规定慢速结束的动画

ease-in-out - 指定开始和结束较慢的动画

代码如下：

#div1{animation-timing-function:linear;}#div2{animation-timing-function:ease;}#div3{animation-timing-function:ease-in;}#div4{animation-timing-function:ease-out;}#div5{animation-timing-function:ease-in-out;}

css2动画转换属性：

translate()

rotate()

scaleX()

scaleY()

scale()

skewX()

skewY()

skew()

matrix()

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

下面的例子把 <div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：

代码如下：

div{transform:translate(50px,100px);}

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。下面的例子把

元素顺时针旋转 20 度：

div{transform:rotate(20deg);}

scale() 方法

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

div{transform:scale(2,3);}

以下例子把 <div> 元素缩减为其原始宽度的一半：

div{transform:scaleX(0.5);}

scaleY() 方法

scaleY() 方法增加或减少元素的高度。

下面的例子把 <div> 元素增大到其原始高度的三倍：

div{transform:scaleY(3);}

下面的例子把 <div> 元素缩减为其原始高度的一半：

div{transform:scaleY(0.5);}

skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度。

下例把 <div> 元素沿X轴倾斜 20 度：

div{transform:skewX(20deg);}

skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度。

下例把 <div> 元素沿 Y 轴倾斜 20 度：

div{transform:skewY(20deg);}

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

下面的例子使 <div> 元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：

div{transform:skew(20deg,10deg);}

如果未指定第二个参数，则值为零。因此，下例使 <div> 元素沿 X 轴倾斜 20 度：

div{transform:skew(20deg);}

拖放是一种常见的特性，即捉取对象以后拖到另一个位置。

在html5中，拖放是标准的一部分，任何元素都能够拖放。

true是可以拖拽flase是不可以拖拽

当元素拖动时，我们可以检查其拖动的数据。

function drag(event) {

console.log(event);

}

drag(event)