归纳一些H5和CSS3中的常用标签及功能

H5

<figure> 标签

使用 <figure> 元素标记文档中的一个图像：

<figure>  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"></figure>

<figcaption>标签

使用 <figure> 元素标记文档中的一个图像。<figure> 元素带有一个标题(自动对齐的，可上可下)：

<figure>  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">  <figcaption>title</figcaption></figure>

<a> 标签

这里主要讲的是a标签新增的属性:download
download属性表明该链接旨在下载，若包含了该属性，它的值定义了下载到本地的文件的名字，如:
(<a>标签中必须设置 href 属性)
<a href="/images/myw3schoolimage.jpg" download="w3logo">

<iframe> 标签

新增的seamless属性:
seamless 属性属于逻辑属性。
当设置该属性后，它规定了<iframe> 看上去像是包含文档的一部分（无边框或滚动条）。在支持的情况下，它可以允许CSS规则从包含它的文档级联到<iframe> 的内容，使链接能够导航到父级文档，并且在必要时能增长和收缩以适应父级大小，只能都位于同一个源

<video>和<audio>元素

H5以前不存在标准的在Web页面嵌入视频的方法，现在有了
<video>和<audio>的属性:
src:它的值为视频或音频文件的URL，它可以被多个<source> 子节点替代
autoplay:自动播放，布尔型属性
loop:循环播放,布尔型属性
controls:显示媒体控制栏(时间、播放，暂停),布尔型属性
perload:若被省略或设置为none，该媒体不会被预加载，若包含或设为auto，则该媒体将被下载

下列属性仅适用于<video>:
poster:值为一个图像的URL，用于视频开始播放前的预览图
width:视频容器的宽度(单位px)
height:视频高度(单位px)

示例:

<video autoplay controls loop poster="poster.jpg" src="video.mp4" height="360" width="480">you dont support H5,but you can still <a href="myVideo.ogv">download the vedio</a></video>

更详细的<video><audio> 介绍请看:

http://blog.csdn.net/qq_33535433/article/details/78119750

H5 Web表单

checked属性

<input type="checkbox" checked>
就相当于<input type="checkbox" checked="checked">

type属性

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
比如:

日期和时间

HTML5 拥有多个供选择日期和时间的新的输入类型：

• date - 选择日、月、年
• month - 选择月、年
• week - 选择周、年
• time - 选择时间（时、分）
• datetime - 选择时间、日期、月、年（UTC 时间）
• datetime-local - 选择时间、日期、月、年（本地时间）

实例:Date: <input type="date" name="user_date" />

email

email 输入类型用于应该包含电邮地址的输入字段。
当提交表单时，会自动地对 email 字段的值进行验证。
实例:E-mail: <input type="email" name="user_email" />

number

number 输入类型用于包含数字值的输入字段。
您可以设置可接受数字的限制。
实例:Points: <input type="number" name="points" min="1" max="10" />

url

url 输入类型用于应该包含 URL 地址的输入字段。
会在提交表单时对 url 字段的值自动进行验证。
实例:Homepage: <input type="url" name="user_url" />

file

<input type="file" /> 选择文件按钮
这个大家都很清楚
accept属性:它可以被用来指定一个逗号分隔的处理该表单的服务器能正确处理的内容类型清单
实例:
在文件上传中使用 accept 属性，本例中的输入字段可以接受 GIF 和 JPEG 两种图像：

    <form>      <input type="file" name="pic" id="pic" accept="image/gif,      image/jpeg" />    </form>

如果不限制图像的格式，可以写为：accept=”image/*”。
提示：请避免使用该属性。应该在服务器端验证文件上传。
在有些移动浏览器上，accept属性允许访问相机、麦克风和某些设备上的摄像机:
<input type="file" name="image" accept="image/*;capture=camera">
<input type="file" name="video" accept="video/*;capture=camcorder">
<input type="file" name="audio" accept="audio/*;capture=microphone">
capture表示，可以捕获到系统默认的设备，比如：camera–照相机；camcorder–摄像机；microphone–录音。
当然了，这些不是普遍支持的，某些浏览器上可以正常运行，包括:Android 3.0浏览器、Android版Chrome(0.16)、Firefox Mobile 10.0和Opera Mobile 14

对了，相关规范已经被修改了。过去是accept属性一部分的capture组件如今是一个单独的布尔属性。上面的代码已经变成了这样:
<input type="file" name="image" accept="image/*" capture>
<input type="file" name="video" accept="video/*" capture>
<input type="file" name="audio" accept="audio/*" capture>

滑动条

<input type="range">
range输入类型显示成一个滑动条，可以让用户沿着它的长度拖曳或轻触来选择一个值。与number类型一样，它的最小值和最大值也由min和max设置，它的步进用step属性设置
<input type="range" name="points" min="1" max="10" step="2"/>

如何让滑动条竖起来呢? 答:”在某些浏览器上可以”
在Webkit中这么做的方法如下:

    input[type=range]{       -webkit-appearance:slider-vertical;    }

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。
注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
<input type="text" name="usr_name" required/>

支持required属性的浏览器同时也支持:required和:invalid伪类。你可以通过使用视觉提示告知用户哪些字段是必须的，使用CSS标识成功的数据输入等:

input:focus:invalid{   background-color:#CCCCCC;}input:valid{   background-color:#00FF33;}input:required{   border:2px solid #0066FF;}

最小值和最大值:min和max属性

要设置一个允许值的范围，可以使用min和max属性
他们只能用于日期/时间输入，number和range。若浏览器为这些类型提供了对应的UI挂件，它会通过不显示低于或高于限定值的方式禁止选择一个在min/max之外的值

pattern属性

哪里允许placeholder属性，哪里就支持pattern属性，这是合理的。pattern属性包含了一个javascript风格的正则表达式，<input> 的值必须与之匹配才能提交表单。当包含了pattern时，同时包含一个用来描述该模式的title属性通常是一个好的做法

<datalist> 元素及list属性

首先说新增的list属性，它指向一个除了允许用户输入任意值之外，提供给用户的一个值的列表
该list属性的值和它相关联的<datalist> 的id相同。<datalist> 也是一个新的H5元素
<datalist> 元素代表的是一个<option> 元素的集合，这些<option> 元素为<input> 元素提供了预定义的选项
实例
下面是一个 input 元素，datalist 中描述了其可能的值：

<input id="myCar" list="cars" /><datalist id="cars">  <option value="BMW">  <option value="Ford">  <option value="Volvo"></datalist>

几个表单控件可以使用同一个<datalist> ，<datalist> 中的选项为用户提供了作者指定的自动完成值，但是用户仍然可以自主输入，提示项列表可以硬编码进去也可以动态生成

全局属性

data-xxx

当我们想给一个标签加上一个自定义属性，最好按照H5的规范:data-xxxx

hidden

代替了以前的display:none
<label hidden>看见了么</label>

contenteditable(很神奇)

<p contenteditable="true">可编辑</p>

CSS3

使用rgba添加透明度功能

RGBA与RGB类似，但添加了一个表示透明度的A
rgb(255,255,255,1)
1表示完全不透明，0表示完全透明，0.5就是50%的透明

CSS的角度度量

角度度量类型有很多，这里只介绍”度数”

度数的范围可以从0到360度，正的度数沿顺时针方向，负度数为逆时针方向。
示例:

.img{  -webkit-transform:rotate(-5deg);  或  transform:rotate(-5deg);}

动画时长

animation-duration:0.5s或500ms;

关于CSS3更详细的请看:
http://blog.csdn.net/qq_33535433/article/details/78150772