h5和css3新特性

h5和css3新特性

H5 新特性

• 语义化标签：header、footer、section、nav、aside、article
• 增强型表单：input 的多个 type
• 新增表单元素：datalist、keygen、output
• 新增表单属性：placehoder、required、min 和 max
• 音频视频：audio、video
• canvas绘图
• 地理定位
• 拖放
• 本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
• 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

语义化标签

<header>      // 定义了文档的头部区域
<nav>         // 定义文档的导航
<section>     // 定义文档中的节（section、区段）
<article>     // 定义页面独立的内容区域
<aside>       // 定义页面的侧边栏内容
<figcaption>  // 标签定义 <figure> 元素的标题.
<figure>      // 标签规定独立的流内容（图像、图表、照片)
<footer>      // 定义了文档的尾部区域

增强型表单

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

type的属性值：

color	 主要用于选取颜色
date	 从一个日期选择器选择一个日期
datetime 选择一个日期（UTC 时间）
email	 包含 e-mail 地址的输入域
month	 选择一个月份
number	 数值的输入域
range	 一定范围内数字值的输入域
search	 用于搜索域
tel	     定义输入电话号码字段
time	 选择一个时间
url	URL  地址的输入域
week	 选择周和年

HTML5 有以下新的表单元素:

datalist 元素规定输入域的选项列表，使用 input 元素的 list 属性与 datalist 元素的 id 绑定
keygen	 提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段
output	 用于不同类型的输出，比如计算或脚本输出

表单属性

placehoder	简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失
required	是一个 boolean 属性。要求填写的输入域不能为空
pattern	    描述了一个正则表达式用于验证 input 元素的值
min 和 max	设置元素最小值与最大值
step	    为输入域规定合法的数字间隔
height 和 width	用于 image 类型的 input 标签的图像高度和宽度
autofocus	是一个 boolean 属性。规定在页面加载时，域自动地获得焦点
multiple	是一个 boolean 属性。规定 input 元素中可选择多个值

拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

事件

onresize	 当调整窗口大小时运行脚本
ondrag	     当拖动元素时运行脚本
onscroll	 当滚动元素滚动元素的滚动条时运行脚本
onmousewheel 当转动鼠标滚轮时运行脚本
onerror	     当错误发生时运行脚本
onplay	     当媒介数据将要开始播放时运行脚本
onpause	     当媒介数据暂停时运行脚本

CSS3 新特性

• 选择器
• 背景和边框
• 文本效果
• 2D/3D 转换
• 动画、过渡
• 多列布局
• 用户界面

选择器

:last-child      /* 选择元素最后一个孩子 */
:first-child     /* 选择元素第一个孩子 */
:nth-child(1)    /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd)  /* 按照奇数 */
:disabled        /* 选择每个禁用的E元素 */
:checked         /* 选择每个被选中的E元素 */
:not(selector)   /* 选择非 selector 元素的每个元素 */
::selection      /* 选择被用户选取的元素部分 */

背景和边框

背景：
background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin：规定背景图片的定位区域
对于 background-origin 属性，有如下属性
背景图片可以放置于 content-box、padding-box 或 border-box 区域

边框：
border-radius：圆角
box-shadow / text-shadow：阴影
border-image：边框图片

文本效果

text-shadow	    向文本添加阴影
text-justify	规定当 text-align 设置为 “justify” 时所使用的对齐方法
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色
text-outline	规定文本的轮廓
text-overflow	规定当文本溢出包含元素时发生的事情
text-wrap	    规定文本的换行规则
word-break	    规定非中日韩文本的换行规则
word-wrap	    允许对长的不可分割的单词进行分割并换行到下一行
text-decoration	文本修饰符：overline、line-through、underline 分别是上划线、中划线、下划线

2D/3D 转换

2D 转换（transform）
translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px, 100px);
rotate()：元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg);
scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4);
skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg);
matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

3D 转换
rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);
perspective：规定 3D 元素的透视效果

多列布局

通过CSS3，能够创建多个列来对文本进行布局
column-count: 规定元素应该被分隔的列数
column-gap: 规定列之间的间隔
column-rule: 设置列之间的宽度、样式和颜色规则