① 语义特性
HTML5赋予网页更好的意义和结构。
HTML5 提供了定义页面不同部分的新语义元素： <article><aside><details><figcaption><figure><footer><header><main><mark><nav> <section>:定义大块的内容，如文章区块或者某个重要表单。区块可以有他们自己的标题、导航及页脚。 <summary> <time>可以快速把日期和时间按照自己选定的格式呈现。若设置了datetime属性，那么<time>元素内容就可以是任何想用的文本，如果没有设置datetime属性，<time>元素的日期和时间就必须采用有效的格式。 < title>简短、描述性、唯一（提升搜索引擎排名）。 搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。 <hn><header><nav> html5规范不推荐对辅助性页脚链接使用nav，除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。 <main><article><section><aside><footer><small> <strong><em><mark><b><figure><figcaption><cite> <blockquoto><q><time><abbr> abbr[title]{ border-bottom:1px dotted #000; } <dfn>定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。 <del>移除的内容。 <ins>添加的内容。少有的既可以包围块级，又可以包围短语内容的元素。 <code>标记代码。包含示例代码或者文件名 （< < > >） <pre>预格式化文本。保留文本固有的换行和空格。 <meter><progress>② 本地存储特性
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。 HTML5离线存储包含 应用程序缓存，本地存储，索引数据库，文件接口。
③ 设备访问特性
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
④ 连接特性
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
⑤ 网页多媒体特性
支持网页端的audio、video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
⑥ 三维、图形及特效特性
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
⑦ 性能与集成特性
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。
CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等。
tbody: nth-child(even), nth-child(odd) : not(.textinput)：这里即表示所有 class 不是“textinput”的节点。 div:first-child：这里表示所有 div 节点下面的第一个直接子节点。
:nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) :last-child :first-of-type :only-child :only-of-type :empty :checked :enabled :disabled ::selection :not(s)font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
@font-face { font-family: BorderWeb; src:url(BORDERW0.eot); } @font-face { font-family: Runic; src:url(RUNICMT0.eot); } .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }column-count：表示布局几列。 column-rule：表示列与列之间的间隔条的样式 column-gap：表示列于列之间的间隔
对于 border，CSS3 提供了圆角的支持：
border-radius: 15px;左上（0% 0%）到右上（0% 100%）即从左到右水平渐变：
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));复杂线性渐变
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE), color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));径向渐变
backgroud: -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));阴影
.class1{ text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); } .class2{ box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); }反射
.classReflect{ -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.51))); }首先：”background clip”，该属确定背景画区，有以下几种可能的属性： background-clip: border-box; 背景从 border 开始显示 ; background-clip: padding-box; 背景从 padding 开始显示 ; background-clip: content-box; 背景显 content 区域开始显示 ; background-clip: no-clip; 默认属性，等同于 border-box; 通常情况，我们的背景都是覆盖整个元素的，现在 CSS3 让您可以设置是否一定要这样做。这里您可以设定背景颜色或图片的覆盖范围。 其次：”background origin”，用于确定背景的位置，它通常与 background-position 联合使用，您可以从 border、padding、content 来计算 background-position（就像 background-clip）。 background-origin: border-box; 从 border. 开始计算 background-position; background-origin: padding-box; 从 padding. 开始计算 background-position; background-origin: content-box; 从 content. 开始计算 background-position; 还有，”background size”，常用来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身。有以下可能的属性： background-size: contain; 缩小图片以适合元素（维持像素长宽比） background-size: cover; 扩展元素以填补元素（维持像素长宽比） background-size: 100px 100px; 缩小图片至指定的大小 . background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸 . 最后，”background break”属性，CSS3 中，元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。 background-break: continuous; 默认值。忽略盒之间的距离（也就是像元 素没有分成多个盒子，依然是一个整体一 样） background-break: bounding-box; 把盒之间的距离计算在内； background-break: each-box; 为每个盒子单独重绘背景。 这种属性让您可以设定复杂元素的背景属性。 最为重要的一点，CSS3 中支持多背景图片，参考如下代码：
div { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 10px center repeat-x; }transition-property：用于指定过渡的性质，比如 transition-property:background 就是指 backgound 参与这个过渡 transition-duration：用于指定这个过渡的持续时间 transition-delay：用于制定延迟过渡的时间 transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
<div id="transDiv" class="transStart"> transition </div> .transStart { background-color: white; -webkit-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; transition: background-color 0.3s linear; } .transEnd { background-color: red; } .skew { -webkit-transform: skew(50deg); } .scale { -webkit-transform: scale(2, 0.5); } .rotate { -webkit-transform: rotate(30deg); } .translate { -webkit-transform: translate(50px, 50px); } .all_in_one_transform { -webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px); } @-webkit-keyframes anim1 { 0% { Opacity: 0; font-size: 12px; } 100% { Opacity: 1; font-size: 24px; } } .anim1Div { -webkit-animation-name: anim1 ; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 4; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; }CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪元素用于将特殊的效果添加到某些选择器。
伪类种类：
伪类作用:active将样式添加到被激活的元素:focus将样式添加到被选中的元素:hover当鼠标悬浮在元素上方时，向元素添加样式:link将特殊的样式添加到未被访问过的链接:visited将特殊的样式添加到被访问过的链接:first-child将特殊的样式添加到元素的第一个子元素:lang允许创作者定义指定的元素中使用的语言伪元素种类：
伪元素作用:first-letter将特殊的样式添加到文本的首字母:first-line将特殊样式添加到文本的首行:before在某元素之前插入某些内容:after在某元素之后插入某些内容伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
