HTML5 新特性
新的语义和结构元素
| 标签 | 描述 |
|---|---|
| <article> | 定义页面独立的内容区域。 |
| <aside> | 定义页面的侧边栏内容。 |
| <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
| <details> | 用于描述文档或文档某个部分的细节 |
| <dialog> | 定义对话框，比如提示框 |
| <summary> | 标签包含 details 元素的标题 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <figcaption> | 定义 <figure> 元素的标题 |
| <footer> | 定义 section 或 document 的页脚。 |
| <header> | 定义了文档的头部区域 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav> | 定义导航链接的部分。 |
| <progress> | 定义任何类型的任务的进度。 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。 |
| <rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| <section> | 定义文档中的节（section、区段）。 |
| <time> | 定义日期或时间。 |
| <wbr> | 规定在文本中的何处适合添加换行符。 |
新表单元素
| 标签 | 描述 |
|---|---|
| <datalist> | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
| <keygen> | 规定用于表单的密钥对生成器字段。 |
| <output> | 定义不同类型的输出，比如脚本的输出。 |
新多媒体元素
| 标签 | 描述 |
|---|---|
| <audio> | 定义音频内容 |
| <video> | 定义视频（video 或者 movie） |
| <source> | 定义多媒体资源 <video> 和 <audio> |
| <embed> | 定义嵌入的内容，比如插件。 |
| <track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
新元素
| 标签 | 描述 |
|---|---|
| <canvas> | 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
此处说明：canvas也称画布，贝塞尔曲线就是在此作功。
CSS3 新特性
CSS3选择器
| element1~element2 | p~ul | 选择p元素之后的每一个ul元素 | |
| [attribute^=value] | a[src^="https"] | 选择每一个src属性的值以"https"开头的元素 | |
| [attribute$=value] | a[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 | |
| [attribute*=value] | a[src*="44lan"] | 选择每一个src属性的值包含子字符串"44lan"的元素 | |
| :first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | |
| :last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | |
| :only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | |
| :only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 | |
| :nth-child(n) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 | |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 | |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 | |
| :root | :root | 选择文档的根元素 | |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） | |
| :target | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） | |
| :enabled | input:enabled | 选择每一个已启用的输入元素 | |
| :disabled | input:disabled | 选择每一个禁用的输入元素 | |
| :checked | input:checked | 选择每个选中的输入元素 | |
| :not(selector) | :not(p) | 选择每个并非p元素的元素 | |
| ::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 | |
| :out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 | |
| :in-range | :in-range | 匹配值在指定区间之内的input元素 | |
| :read-write | :read-write | 用于匹配可读及可写的元素 | |
| :read-only | :read-only | 用于匹配设置 "readonly"（只读） 属性的元素 | |
| :optional | :optional | 用于匹配可选的输入元素 | |
| :required | :required | 用于匹配设置了 "required" 属性的元素 | |
| :valid | :valid | 用于匹配输入值为合法的元素 | |
| :invalid | :invalid | 用于匹配输入值为非法的元素 |
CSS3 边框（Borders）
用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序
| 属性 | 说明 | |
|---|---|---|
| border-image | 设置所有边框图像的速记属性。 | |
| border-radius | 一个用于设置所有四个边框- *-半径属性的速记属性 | |
| box-shadow | 附加一个或多个下拉框的阴影 |
div{border:2px solid;border-radius:25px;box-shadow: 10px 10px 5px #888888;border-image:url(border.png) 30 30 round;}
CSS3 背景
CSS3中包含几个新的背景属性，提供更大背景元素控制。
| 顺序 | 描述 | |
|---|---|---|
| background-clip | 规定背景的绘制区域。 | |
| background-origin | 规定背景图片的定位区域。 | |
| background-size | 规定背景图片的尺寸。 |
CSS3 渐变
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background: linear-gradient(direction, color-stop1, color-stop2, ...);- 径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(center, shape size, start-color, ..., last-color);
CSS3 文本效果
| 属性 | 描述 | |
|---|---|---|
| hanging-punctuation | 规定标点字符是否位于线框之外。 | |
| punctuation-trim | 规定是否对标点字符进行修剪。 | |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | |
| text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 | |
| text-outline | 规定文本的轮廓。 | |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 | |
| text-shadow | 向文本添加阴影。 | |
| text-wrap | 规定文本的换行规则。 | |
| word-break | 规定非中日韩文本的换行规则。 | |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 |
CSS3 转换和变形
2D新转换属性
以下列出了所有的转换属性:
| Property | 描述 | |
|---|---|---|
| transform | 适用于2D或3D转换的元素 | |
| transform-origin | 允许您更改转化元素位置 |
2D 转换方法
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
3D转换属性
下表列出了所有的转换属性：
| 属性 | 描述 | |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | |
| transform-origin | 允许你改变被转换元素的位置。 | |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | |
| perspective | 规定 3D 元素的透视效果。 | |
| perspective-origin | 规定 3D 元素的底部位置。 | |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 |
3D 转换方法
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
CSS3 过渡
过渡属性
下表列出了所有的过渡属性:
| 属性 | 描述 | |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
