HTML5 & CSS3常见新特性

HTML新特性

新增特性：

语义化标签：，如<header>、<footer>、<nav>、<article>、<section>等，能够更准确地描述网页结构
视频和音频：添加了<video>和<audio>标签，在网页上嵌入和播放视频、音频内容更加容易
Canvas：引入了<canvas>元素，提供了一个绘制图形和动画的API，使得在网页上创建复杂的图形和交互性更为方便
Web存储：增加了本地存储能力，包括localStorage和sessionStorage，可以在客户端存储数据，减少对服务器的依赖
- localStorage 长期存储数据，浏览器关闭后数据不丢失
- sessionStorage 的数据在浏览器关闭后自动删除
Web Workers：引入了Web Workers，允许在后台运行脚本，提高网页的性能和响应能力
- 基本原理：在当前主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口
表单增强：通过添加新的表单元素和输入类型，以及表单验证API
- calendar、date、time、email、url、search
地理定位：引入了Geolocation API，使得网页可以获取用户的地理位置信息
路由历史管理：提供了History API，允许网页动态修改浏览器的URL和历史记录，实现无刷新页面加载和前进/后退导航的功能
拖放API：当元素拖动时，可以查看拖动的数据
WebSockets：引入了WebSockets协议，提供了一种在客户端和服务器之间进行实时双向通信的方式
- 建立在TCP协议基础之上，和HTTP协议同属于应用层
- 可以发送文本，也可以发送二进制数据
- 没有同源限制，客户端可以与任意服务器通信

移除元素：

移除如<big>、<strike>等一些样式标签，应使用CSS来设置样式
不再推荐使用<applet>和<object>标签来嵌入Java小程序或其他外部插件，而是鼓励使用<embed>、<video>、<audio>等元素
不再支持<frame>和<frameset>标签，推荐使用<iframe>或其他技术来实现框架效果
不再推荐使用<menu>标签，推荐使用无序列表<ul>代替

CSS3新特性

1. 选择器

属性选择器：允许根据元素的属性值来选择元素
伪类选择器：允许根据元素的状态或位置来选择元素，例如 :hover、:focus、:nth-child()、:not() 等

2. 边框

border-radius：创建圆角边框
box-shadow：为元素添加阴影
- 水平阴影和垂直阴影是必须设置的
border-image：使用图片来绘制边框

3. 背景

background-clip用于背景的绘制区域，有以下几种内容：

background-clip: border-box：背景从border开始显示
background-clip: padding-box：背景从padding开始显示
background-clip: content-box：背景显content区域开始显示
background-clip: no-clip：默认属性，等同于border-box

4. transition 过渡

transition：可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔
持续时间及过渡效果必须要设置

5. transform 转换

transform：允许旋转、缩放、倾斜或平移给定元素，包括 2D 和 3D 变换
transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)

6. animation 动画

animation ：用于创建动画效果，可以实现更加复杂的动画
这个平常使用相对较多

animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction：动画执行方向
animation-paly-state：动画播放状态
animation-fill-mode：动画填充模式

7. linear-gradient 渐变色

颜色渐变是指在两个颜色之间平稳的过渡，css3渐变包括

linear-gradient：线性渐变
radial-gradient：径向渐变