HTML5和CSS3

一、HTML5

　　HTML5 是 HTML 标准的最新演进版本。 这个术语代表了两个不同的概念：它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。

l 语义：能够让你更恰当地描述你的内容是什么。

HTML5 中的节段和提纲

　　HTML5 中新的提纲和节段元素一览:

　　　<section >   ：定义区段，语义大于div,

　　　<article >    ：定义文章,

　　　<nav >       ：定义导航链接,

　　　<header>    ：定义 section 或 page 的页眉(头部),

　　　<footer>     ：定义 section 或 page 的页脚（尾部）,

　　　<aside >     ：定义页面内容之外的内容：侧边栏 ,

　　　<hgroup>    ：用于对网页或区段（section）的标题进行组合

使用 HTML5 的音频和视频

　　<audio>（音频） 和 <video>（视频） 元素嵌入和操作多媒体内容。

HTML5 的表单　　

1.<input> 元素

<input> 的 type 特性拥有更多的值。

　　search: 这个元素呈现为一个搜索框。换行符会从输入值中去掉，此外没有其他的语法增强了。

　　tel: 这个元素可现为一个编辑电话号码的输入控件。换行符会从输入值中去掉，此外没有其他的语法增强了，因为电话号码国际化差异非常明显。你可以使用如 pattern 与 maxlength 等属性来限制输入到控件中的值。

　　url: 这个元素呈现为一个编辑URL 的输入控件。换行符与首尾的空格将会被自动去除。

　　email: 这个元素呈现为一个邮件地址。换行符会被自动去除。可以设置一个无效的邮件地址，但若满足输入框的限制，必须遵守在扩展的巴科斯范式(ABNF)中的规范：1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) 其中atext 在规范RFC 5322 section 3.2.3 中被定义,而ldh-str在规范RFC 1034 section 3.5 中被定义。

<input> 元素也拥有一些新的特性。

　　list： <datalist> 元素的 ID，该元素的内容，<option> 元素被用作提示信息，会在 input 的建议区域作为提议显示出来。

　　pattern： 一个正则表达式，用于检查控件的值，能够作用于 type 值是 text， tel， search， url， 和 email 的 input 元素。

　　form： 一个字符串，用于表明该 input 属于哪个 <form> 元素。一个 input 只能存在于一个表单中。

　　formmethod：一个字符串，用于表明表单提交时会使用哪个 HTTP 方法 (GET 或 POST)；如果定义了它，则可以覆盖  <form> 元素上的 method 特性。只有当 type 值为 image 或 submit，并且 form 特性被设置的情况下， formmethod 才能生效。

2.<form> 和<datalist> 元素

　　<form> 元素有了一个新特性：novalidate：设置了该特性不会在表单提交之前对其进行验证。

　　<datalist> 元素会在填写 <input> 字段时，显示一列 <option> 作为提示。你可以使用 <input> 元素上的 list 特性来将一个特定的 input 与特定的 <datalist> 元素做关联。

3.<output> 元素

　　<output> 元素表示计算的结果。

你可以使用 for 特性来在 <output> 元素与文档内其他能够影响运算的元素(例如，input 或参数)建立关联。 for 特性的值是以空格做分隔的其他元素的 ID 列表。

4.placeholder 特性

　　placeholder 特性作用于 <input> 与 <textarea> 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。

5.autofocus 特性

　　autofocus 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 autofocus 特性，它是一个 Boolean 值。这个特性适用于 <input>， <button>， <select>，与 <textarea> 元素。例外情况是，如果一个 autofocus 元素的 type 特性值设置成了 hidden，则 autofocus 无法生效(就是说，你无法让一个隐藏控件自动获得焦点)。

6.label.control DOM 属性

　　HTMLLabelElement DOM 接口除了为 <label> 元素提供了对应的特性外，还提供了一个额外的属性。 control 属性返回被打上标签的控件，就是 label 适用的控件，由 for 特性(如果定义的话) 或是第一个后代元素控件来确定。

7.约束验证

　　1）、约束验证的 HTML 语法

　　　　<input>, <select>， 和 <textarea> 元素上的 required 特性，指定必须提供该元素的值。(在 <input> 元素上， required 只能与特定的 type 特性值结合起来生效。)

　　　　<input> 元素上的 pattern 特性用于限定元素值必须匹配一个特定的正则表达式。

　　　　<input> 元素上的 min 与 max 特性限定了能够输入元素的最大与最小值。

　　　　<input> 元素的 step 特性(与 min 与 max 特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符，则它无法通过验证。

　　　　<input> 与 <textarea> 元素的 maxlength 特性限制了用户能够输入的最大字符数(在 Unicode 代码点内)。

　　　　type 的 url 与 email 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。

　　2）、约束验证 API

　　　　HTMLFormElement 对象的 checkValidity() 方法，当表单的相关元素都通过了它们的约束验证时返回 true，否则返回 false。

　　在 表单相关元素上：

　　　　willValidate 属性，如果元素的约束没有被符合则值为 false。

　　　　validity 属性，是一个 ValidityState 对象，表示元素当前所处的验证状态(就是说约束成功或是失败)。

　　　　validationMessage 属性，用于描述与元素相关约束的失败信息。

　　　　checkValidity() 方法，如果元素没有满足它的任意约束，返回false，其他情况返回 true。

　　　　setCustomValidity() 方法，设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。

l 通信：能够让你和服务器之间通过创新的新技术方法进行通信。

Web Sockets

　　允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。

Server-sent events

　　允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。

WebRTC

　　这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。

l 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。

离线资源：应用程序缓存

　　火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。

在线和离线事件

　　Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。

WHATWG 客户端会话和持久化存储 (又名 DOM 存储)

　　客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。

IndexedDB

　　是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。

自 web 应用程序中使用文件

　　对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 type file 的 <input> 元素的新的 multiple 属性针对多文件选择的支持。 还有 FileReader。

l 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。

使用 HTML5 音视频

　　<audio> 和 <video> 元素嵌入并支持新的多媒体内容的操作。

WebRTC

　　这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，在浏览器中直接控制视频会议，而不需要一个插件或是外部的应用程序。

使用 Camera API

　　允许使用，操作计算机摄像头，并从中存储图像。

Track 和 WebVTT

　　<track> 元素支持字幕和章节。WebVTT 一个文本轨道格式。

l 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。

Canvas 

　　<canvas> 是 HTML5 新增的元素，可以说是H5中最为浓墨重彩的一笔，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。

　　HTML5 针对 <canvas> 元素的文本 API

　　HTML5 文本 API 现在由 <canvas> 元素支持。

WebGL

　　WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 <canvas> 元素中的 API 给 Web 带来了 3D 图像功能。

SVG

　　一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。

l 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。

Web Workers

　　能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。

XMLHttpRequest Level 2

　　允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 Ajax背后的技术。

即时编译的 JavaScript 引擎

　　新一代的 JavaScript 引擎功能更强大，性能更杰出。

History API

　　允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。

　　conentEditable 属性：把你的网站改变成 wiki !

　　HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。

拖放

　　HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。

HTML 中的焦点管理

　　支持新的 HTML5 activeElement 和 hasFocus 属性。

基于 Web 的协议处理程序

　　你现在可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。

requestAnimationFrame

　　允许控制动画渲染以获得更优性能。

全屏 API

　　为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。

指针锁定 API

　　允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。

在线和离线事件

　　为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。

l 设备访问 Device Access：能够处理各种输入和输出设备。

使用 Camera API

　　允许使用和操作计算机的摄像头，并从中存取照片。

触控事件

　　对用户按下触控屏的事件做出反应的处理程序。

　　使用地理位置定位

　　让浏览器使用地理位置服务定位用户的位置。

　　检测设备方向

　　让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。

二、CSS3

　　CSS 已经扩展到一个能够以更加灵活多样的方法给元素设置样式。这通常被称为 CSS3, CSS3中不同的模块并不全部位于 level 3：其中一些位于 level 1 而另一些位于 level 4，覆盖了所有中间的层次。

l 新的背景样式特性

　　现在可以使用 box-shadow 给逻辑框设置一个阴影，而且还可以设置多背景。

l 更精美的边框

　　现在不仅可以使用图像来格式化边框，使用 border-image 和它关联的普通属性，而且可以通过 border-radius 属性来支持圆角边框。

l 设置过渡和动画

过渡

　　transition 属性是一个简写属性，用于设置四个过渡属性：

　　　　transition-property：规定设置过渡效果的 CSS 属性的名称

　　　　transition-duration：规定完成过渡效果需要多少秒或毫秒

　　　　transition-timing-function：规定速度效果的速度曲线

　　　　transition-delay：定义过渡效果何时开始

1 transition: all 1s ease 0s;

动画

　　animation 属性是一个简写属性，用于设置六个动画属性：

　　　　animation-name：规定需要绑定到选择器的 keyframe 名称

　　　　animation-duration：规定完成动画所花费的时间，以秒或毫秒计

　　　　animation-timing-function：规定动画的速度曲线

　　　　animation-delay：规定在动画开始之前的延迟

　　　　animation-iteration-count：规定动画应该播放的次数

　　　　animation-direction：规定是否应该轮流反向播放动画

2 div{

3  width: 60px;

4  height: 60px;

5 

6  position: absolute;

7  top: 100px;

8  left: 100px;

9  animation: yundong 1s linear 0s 5 alternate forwards;

10  }

11 

12  /*定义动画*/

13  @-webkit-keyframes yundong{

14  0%{

15  left:100px;

16  }

17  100%{

18  left: 700px;

19  }

20  }

l 排版方面的改进

　　作者们如今有更强大的能力来使自己的网页文字达到更佳的排版。他们不但可以控制 text-overflow 和 hyphenation， 还可以给它设置一个阴影或者更精细地控制它的 decorations。感谢新的 @font-face 规则，现在我们可以下载并应用自定义的字体了。

l 新的展示性布局

　　为了提高设计的灵活性，已经有两种新的布局被添加了进来：CSS 多栏布局, 以及 CSS 灵活方框布局。

l 更加绚丽的2D和3D效果

　　通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。CSS3 允许您使用 3D 转换来对元素进行格式化。

2D 转换

　　translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数

　　rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

　　scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

　　skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

3D 转换

　　rotateX()：元素围绕其 X 轴以给定的度数进行旋转

　　rotateY()：元素围绕其 Y 轴以给定的度数进行旋转