一、H5
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
1.语义化标签
HTML5新增语义化的标签主要有：
2.增强型表单
HTML5引入了一些新的表单元素和属性，如元素的新类型（如email、url、tel、search、number等）、
3.音频和视频
HTML5引入了
4.Canvas绘图
HTML5提供了
5.SVG绘图
HTML5提供了SVG（可缩放矢量图形）绘图，使得开发者可以在网页上创建更加复杂的矢量图形。
6.地理定位
HTML5引入了地理定位API，允许网页请求用户的地理位置信息。
7.拖放API
HTML5提供了拖放API，使得开发者可以轻松地实现网页元素的拖放功能。
8.WebStorage
HTML5提供了Web Storage API，包括sessionStorage（会话存储）和locaStorage（永久存储），用于在客户端（浏览器）中存储数据，而不需要与服务器进行通信。提供了比传统的cookie更大的存储空间和更高的安全性。
二、Css3
css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观,css3是css的最新标准，是向后兼容的，CSS1/2 的特性在 CSS3 里都是可以使用的，而 CSS3 也增加了很多新特性，为开发带来了更佳的开发体验
1.选择器
css3中新增了一些选择器，主要为如下图所示：
2.新样式
边框
css3新增了三个边框属性，分别是：
border-radius：创建圆角边框
box-shadow：为元素添加阴影
border-image：使用图片来绘制边框
背景
新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break
background-clip
用于确定背景画区，有以下几种可能的属性：
background-clip: border-box; 背景从border开始显示background-clip: padding-box; 背景从padding开始显示background-clip: content-box; 背景显content区域开始显示background-clip: no-clip; 默认属性，等同于border-box通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围
background-origin
当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的
background-origin: border-box; 从border开始计算background-positionbackground-origin: padding-box; 从padding开始计算background-positionbackground-origin: content-box; 从content开始计算background-position默认情况是padding-box，即以padding的左上角为原点
background-size
background-size属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：
background-size: contain; 缩小图片以适合元素（维持像素长宽比）background-size: cover; 扩展元素以填补元素（维持像素长宽比）background-size: 100px 100px; 缩小图片至指定的大小background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸background-break
元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示
background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）background-break: bounding-box; 把盒之间的距离计算在内；background-break: each-box; 为每个盒子单独重绘背景文字
word-wrap
语法：word-wrap: normal|break-word
normal：使用浏览器默认的换行break-all：允许在单词内换行text-overflow
text-overflow设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择：
clip：修剪文本ellipsis：显示省略符号来代表被修剪的文本text-shadow
text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
text-decoration
CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：
text-fill-color: 设置文字内部填充颜色
text-stroke-color: 设置文字边界填充颜色
text-stroke-width: 设置文字边界宽度
颜色
css3新增了新的颜色表示方式rgba与hsla
rgba分为两部分，rgb为颜色值，a为透明度hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度3.transition 过渡
transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：
过度效果持续时间语法如下：
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
上面为简写模式，也可以分开写各个属性
transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s;
4.transform 转换
transform属性允许你旋转，缩放，倾斜或平移给定元素
transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)
使用方式：
transform: translate(120px, 50%)：位移transform: scale(2, 0.5)：缩放transform: rotate(0.5turn)：旋转transform: skew(30deg, 20deg)：倾斜5.animation 动画
动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬
animation也有很多的属性
animation-name：动画名称animation-duration：动画持续时间animation-timing-function：动画时间函数animation-delay：动画延迟时间animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环animation-direction：动画执行方向animation-paly-state：动画播放状态animation-fill-mode：动画填充模式6.渐变
颜色渐变是指在两个颜色之间平稳的过渡，css3渐变包括
linear-gradient：线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
radial-gradient：径向渐变
linear-gradient(0deg, red, green);