### html5和css3新增属性

1.html5表单类新增属性 input后的type属性值
文本域 <input type="text">
单选按钮 <input type="radio">
复选框 <input type="checkbox">
下拉列表 <select><option>
密码域 <input type="password">
提交按钮<input type="submit">
可单击按钮
图像按钮<input type="image">
隐藏域 <input type="hidden">
重置按钮 <input type="reset">
文件域<input type="file">
html5新增的input输入类型
email类型: 用于验证邮箱格式 当提交表单时，会自动验证email域的值
URL:用于验证URL地址值，当提交表单时，会自动验证url值
number:会根据你的设置，选择数字的功能，min属性设置最小值，max属性设置最大值，value属性设置当前值，step属性设置每次增长的值（步长值），某些浏览器不支持

<input type="number" name="num1" min="1" max="100"  step="2"/>

range:用于含有一定数字范围值的输入域，会以滑块的形式展现，没有的话就会采用默认的值,默认值的范围(1-100)

<input type="range" name= "range1" min="1" max="50"/>

.日期和时间类型
html5提供多个日期和时间类型的属性：
date: 选取日 月 年
month: 选取月 年
week: 选取周
time: 选取时，分，秒
datetime: 选取时间，日，月，年
datetime-local: 选取时间，日，月，年（本地）

search 类型：用于搜索域，为其添加result="s"会在搜索框前面加搜索图标

<input type="search" name="search1" >
input[type="search"]{  
"-webkite-appearance":asd;
}

tel:用于验证电话号码格式是否正确，
color: 提供一个颜色拾色器，供用户选择，并将用户选择的颜色填充到此元素中

html5新增表单元素
datalist: 规定输入域的选项列表
列表是通过datalist 中的option元素创建的
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：
keygen 提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

output:用于不同类型的输出。例如计算机脚本的输出

<output id="result" onforminput="resCalc()"></output>

##CSS3新增属性

各种内核浏览器都有自己的标准，为了不同浏览器不混淆，所以 各家都在各自的前面加了前缀
如：-moz- 主要是firefox火狐
-webkit-主要是chrome谷歌,
-o-主要是用于苹果机上的浏览器

css3新增属性
box-shadow:阴影效果

box-shadow: 20px 10px 0 #ccc;

border-colors:给边框渲染不同颜色
border-image:图片的边框

代码：
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
说明:
(1). 20 20 20 20 —> 边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果;
(2). 边框图片效果(目前仅实现了两种):
repeat — 边框图片会平铺, 类似于背景重复;
stretch — 边框图片会以拉伸的方式来铺满整个边框;
(3). 必须将元素的边框厚度设置为非0非auto值.

text-shadow:文本阴影
代码：
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
说明:
(1). 20 20 20 20 —> 边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果;
(2). 边框图片效果(目前仅实现了两种):
repeat — 边框图片会平铺, 类似于背景重复;
stretch — 边框图片会以拉伸的方式来铺满整个边框;
(3). 必须将元素的边框厚度设置为非0非auto值.

border-radius:圆角边框

<border-radius: 5px>

border-sizing: border-box
box-sizing: content-box | border-box;
说明:

1. content-box:
   使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border;
2. border-box:
   使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度也不会变).

opacity(不透明度)
这个值设在0-1之间