该文章为 菜鸟教程(runoob.com) 中关于HTML5部分的学习笔记。

HTML5简介

HTML5是下一代HTML标准，HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5绘制图形

HTML5 Canvas

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript) 来完成。

HTML5 内联 SVG

SVG：可伸缩矢量图形（Scalable Vector Graphics），在放大或改变尺寸的情况下其图像质量不会有损失。是万维网联盟的标准。使用 XML 格式定义图形。

Canvas与SVG的比较

HTML5多媒体

HTML5 Video(视频)

<video> 元素提供了播放、暂停和音量控件来控制视频。
提供了 width 和 height 属性控制视频的尺寸。如果没有设置这些属性，页面就会根据原始视频的大小而改变。
<video> 元素支持多个 <source> 元素。<source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
使用 DOM 进行控制：<video> 和 <audio> 元素的方法、属性和事件可以使用JavaScript进行控制。
control 属性供添加播放、暂停等控件。

视频格式：MP4,WebM, Ogg。

<!-- 示例 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

HTML5 Audio(音频)

和 video 大致相同。音频格式：MP3, Ogg, Wav。

HTML5表单

HTML5 新的 Input 类型

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

新的输入类型(type)：color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week。

HTML5 新的表单元素

<datalist>：规定输入域的选项列表。使用 <input> 元素的列表属性与 <datalist> 元素绑定。

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

<keygen>：提供一种验证用户的可靠方法，用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key） 存储于客户端，公钥（public key） 则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<output> ：用于不同类型的输出，比如计算或脚本输出。

HTML5表单属性

可能常用的属性如下：

<form> / <input> autocomplete 属性：自动完成功能。
<form> novalidate 属性：一个 boolean(布尔) 属性，规定在提交表单时不应该验证 form 或 input 域。
<input> formaction 属性：用于描述表单提交的URL地址，会覆盖元素中的action属性。用于 type=“submit” 和 type=“image”。
<input> list 属性：list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
<input> min, max和step 属性：min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
<input> multiple 属性：一个 boolean 属性，规定<input>元素中可选择多个值。适用于 email 和 file 类型。
<input> pattern 属性：描述一个正则表达式用于验证<input>元素的值。适用的标签：text, search, url, tel, email, 和 password。
<input> placeholder 属性：提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。
<input> required 属性：一个 boolean 属性，规定必须在提交之前填写输入域（不能为空）。