h5基础 - Sampwood的One Piece

html5的一些基础知识。（以下内容来自w3School，浏览器支持信息不是很准确）

来源

HTML5 是 W3C 与 WHATWG 合作的结果。

编者注：W3C 指 World Wide Web Consortium，万维网联盟。

编者注：WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

新特性

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 main、article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

视频

当前，video 元素支持三种视频格式：

格式	IE	Firefox	Opera	chrome	Safari
MPEG 4	9.0+	21+	25+	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No
Ogg	No	3.5+	10.5+	5.0+	No

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件（video/mp4）

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件（video/webm）

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件（video/ogg）

实例：

1
2
3

<video src="movie.ogg" controls="controls">
    你的浏览器不支持video标签
</video>

control属性供添加播放、暂停和音量控件。

或者如下：

<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    你的浏览器不支持video标签
</video>

如有多个源文件，使用第一个可识别的格式

重点来了，有时候我们使用的是MP4格式的视频，但是没有视频画面。

那是因为MP4也有很多编码格式，标签支持的格式如下：

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

如果MP4格式的视频没有画面，用网上的格式工厂转为avc(h264)，就可以了。MP4视频有很多编码格式比如：mpg4(xdiv),,mpg4(xvid)，avc(h264)等。

video标签的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

video标签的方法、属性和事件

方法	属性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType()	videoHeight	error
-	duration	timeupdate
-	ended	ended
-	error	abort
-	paused	empty
-	muted	emptied
-	seeking	waiting
-	volume	loadedmetadata
-	height
-	width

音频 audio

audio元素支持三种音频格式：

-	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	-	√	√	√
MP3	√			√	√
Wav		√	√		√

实例：

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  你的浏览器不支持audio标签
</audio>

属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

拖放（Drag和drop）

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。

实例

设置元素可为拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

1	<img draggable="true" />

拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么。

ondragstart 属性可调用一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的键和值：

<img id="drag1" draggable="true" ondragstart="drag(event)" />
<script>
    function drag(event) {
        event.dataTransfer.setData("Text", event.target.id);
    }
</script>

在这个例子中，键是 “Text”，值是可拖动元素的 id (“drag1”)，因此要设置<img>的id。

何处可放 - ondragover

ondragover事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用ondragover事件的event.preventDefault()方法：

<div id="div1" ondragover="allowDrop(event)"></div>
<script>
    function allowDrop(event) {
        event.preventDefault();
    }
</script>

如何放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

ondrop属性可调用一个函数，drop(event)：

<div id="div1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script>
    function allowDrop(event) {
        event.prevetnDefault();
    }
    function drop(event) {
        event.preventDefault();
        var data=event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
</script>

Note: 在W3School上这么说：调用preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）。但是没有看明白到底什么意思，不用好像也是可以的。

画布 canvas

TML5 的canvas元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

实例

<canvas id="myCanvas" width="200" height="100">
    你的浏览器不支持canvas标签
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
</script>

通过创建context对象来操作canvas画布，相当于画笔

具体API操作可以参考链接：Canvas教程

SVG

什么是SVG？

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

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。

实例

在 HTML5 中，可以把SVG元素直接嵌入 HTML 页面中：

<div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
      <polygon points="100,10 40,180 190,60 10,60 160,180"
      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>
</div>

Canvas vs. SVG

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

地理定位

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

浏览器支持

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

实例

在js中使用getCurrentPosition()方法来获得用户的位置。

下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。

var x=document.getElementById("demo");
function getLocation(){
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    }
    else{
        x.innerHTML="Geolocation is not supported by this browser.";
    }
}
function showPosition(position){
    x.innerHTML="Latitude: " + position.coords.latitude +
      "<br />Longitude: " + position.coords.longitude;
}
function showError(error){
    switch(error.code){
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
}

getCurrentPosition() 方法 - 返回数据

若成功，则 getCurrentPosition() 方法返回对象，包含其他下面的属性。

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

web存储

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

localStorage 方法

localStorage方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

实例

创建和访问localStorage

1 2	localStorage.lastname = "Smith"; document.write(localStorage.lastname);

sessionStorage方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

实例

创建和访问sessionStorage

1 2	sessionStorage.lastname = "Smith"; document.write(sessionStorage);

应用程序缓存

什么是应用程序缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

浏览器支持

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。

实例

通过创建 cache manifest 文件，创建 web 应用的离线版本。

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议的文件扩展名是：”.appcache”。

请注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

Manifest文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

NETWORK

下面的 NETWORK 小节规定文件 “login.asp” 永远不会被缓存，且离线时是不可用的

1 2	NETWORK: login.asp

可以使用星号来指示所有其他资源/文件都需要因特网连接：

1 2	NETWORK: *

FALLBACK

下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 “offline.html” 替代 /html5/ 目录中的所有文件：

1 2	FALLBACK: /html5/ /404.html

注释：第一个 URI 是资源，第二个是替补。

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存

重要的提示：以 “#” 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

web workers

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

浏览器支持

所有主流浏览器均支持 web worker，除了 Internet Explorer。

实例

web worker运行的是外部js，因此我们需要先创建一个脚本demo_work.js:

var i=0;
function timedCount(){
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

接下来在HTML页面中调用它

function startWorker() {
    if(typeof(Worker) !== undefined) {
        if(typeof(w)=== undefined) {
            w = new Workder("demo_workder.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "你的浏览器不支持web workers...";
    }
}
function stopWorker() {
    w.terminate();
}

通过onmessage事件监听器来接受消息。

当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。
如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法。

Web Workers 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

window 对象
document 对象
parent 对象

服务器发送事件

Server-Sent事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

浏览器支持

所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。

实例

创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 “demo_sse.php”）。每接收到一次更新，就会发生 onmessage 事件。当 onmessage 事件发生时，把已接收的数据推入 id 为 “result” 的元素中。

if(typeof(EventSource)!==undefined) {
    var source=new EventSource("demo_sse.php");
    source.onmessage=function(event){
        document.getElementById("result").innerHTML+=event.data + "<br />";
    };
} else {
    document.getElementById("result").innerHTML = "你的浏览器不支持EventSource"
}

注意：为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。服务器端事件流要把 “Content-Type” 报头设置为 “text/event-stream”

EventSource 对象

在上面的例子中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：

事件	描述
onopen	当通往服务器的连接被打开
onmessage	当接收到消息
onerror	当错误发生

Input 类型

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

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

浏览器支持

Inputtype	IE	Firefox	Opera	Chrome	Safari
email	No	4.0	9.0	10.0	No
url	No	4.0	9.0	10.0	No
number	No	No	9.0	7.0	No
range	No	No	9.0	4.0	4.0
Date pickers	No	No	9.0	10.0	No
search	No	4.0	11.0	10.0	No
color	No	No	11.0	No	No

在提交表单时，会自动验证input域的值。

类型的属性

number

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step=”3”，则合法的数是 -3,0,3,6 等）
value	number	规定默认值

range

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step=”3”，则合法的数是 -3,0,3,6 等）
value	number	规定默认值

date pickers(日期选择器)

HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

表单元素

HTML5 拥有若干涉及表单的元素和属性：

datalist
keygen
output

浏览器支持

Input type	IE	Firefox	Opera	Chrome	Safari
datalist	No	No	9.5	No	No
keygen	No	No	10.5	3.0	No
output	No	No	9.5	No	No

实例

datalist

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

提示：option 元素永远都要设置 value 属性。

kegen

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<form action="demo_form.asp" method="get">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security" />
    <input type="submit" />
</form>

ouput

output 元素用于不同类型的输出，比如计算或脚本输出：

1	<output id="result" onforminput="resCalc()"></output>

新的表单属性

新的 form 属性：

autocomplete
novalidate

新的 input 属性：

autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

浏览器支持

Input type	IE	Firefox	Opera	Chrome	Safari
autocomplete	8.0	3.5	9.5	3.0	4.0
autofocus	No	No	10.0	3.0	4.0
form	No	No	9.5	No	No
form overrides	No	No	10.5	No	No
height and width	8.0	3.5	9.5	3.0	4.0
list	No	No	9.5	No	No
min, max and step	No	No	9.5	3.0	No
multiple	No	3.5	No	3.0	4.0
novalidate	No	No	No	No	No
pattern	No	No	9.5	3.0	No
placeholder	No	No	No	3.0	3.0
required	No	No	9.5	3.0	No

属性

autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

注释：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

<form action="demo_form.asp" method="get" autocomplete="on">
    First name: <input type="text" name="fname" /><br />
    Last name: <input type="text" name="lname" /><br />
    E-mail: <input type="email" name="email" autocomplete="off" /><br />
    <input type="submit" />
</form>

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

注释：autofocus 属性适用于所有 <input> 标签的类型。

1	User name: <input type="text" name="user_name" autofocus="autofocus" />

form 属性

form 属性规定输入域所属的一个或多个表单。

注释：form 属性适用于所有 <input> 标签的类型。form 属性必须引用所属表单的 id：

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

注释：如需引用一个以上的表单，请使用空格分隔的列表。

表单重写属性

表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。

表单重写属性有：

formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性

注释：表单重写属性适用于以下类型的 <input> 标签：submit 和 image。

<form action="demo_form.asp" method="get" id="user_form">
    E-mail: <input type="email" name="userid" /><br />
    <input type="submit" value="Submit" />
    <br />
    <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
    <br />
    <input type="submit" formnovalidate="true" value="Submit without validation" />
    <br />
</form>

height 和 width 属性

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。

注释：height 和 width 属性只适用于 image 类型的 <input> 标签。

1	<input type="image" src="img_submit.gif" width="99" height="99" />

list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。

min、max 和 step 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

max 属性规定输入域所允许的最大值。

min 属性规定输入域所允许的最小值。

step 属性为输入域规定合法的数字间隔（如果 step=”3”，则合法的数是 -3,0,3,6 等）。

注释：min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。

1	Points: <input type="number" name="points" min="0" max="10" step="3" />

multiple 属性

multiple属性规定输入域中可选择多个值。

注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。

1	Select images: <input type="file" name="img" multiple="multiple" />

novalidate 属性

novalidate属性规定在提交表单时不应该验证 form 或 input 域。

注释：novalidate 属性适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.

<form action="demo_form.asp" method="get" novalidate="true">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" />
</form>

pattern 属性

pattern 属性规定用于验证 input 域的模式（pattern）。模式是正则表达式。

注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

1 2	Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

1	<input type="search" name="user_search" placeholder="Search W3School" />

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

1	Name: <input type="text" name="usr_name" required="required" />

文章目录

来源

新特性

视频

实例：

video标签的属性

video标签的方法、属性和事件

音频 audio

实例：

属性

拖放（Drag和drop）

浏览器支持

实例

设置元素可为拖放

拖动什么 - ondragstart 和 setData()

何处可放 - ondragover

如何放置 - ondrop

画布 canvas

实例

SVG

SVG 的优势

浏览器支持

实例

Canvas vs. SVG

SVG

Canvas

Canvas 与 SVG 的比较

Canvas

SVG

地理定位

浏览器支持

实例

getCurrentPosition() 方法 - 返回数据

Geolocation 对象 - 其他有趣的方法

web存储

localStorage 方法

实例

sessionStorage方法

实例

应用程序缓存

浏览器支持

实例

Manifest文件

CACHE MANIFEST

NETWORK

FALLBACK

更新缓存

web workers

浏览器支持

实例

Web Workers 和 DOM

服务器发送事件

浏览器支持

实例

EventSource 对象

Input 类型

浏览器支持

类型的属性

number

range

date pickers(日期选择器)

表单元素

浏览器支持

实例

datalist

kegen

ouput

新的表单属性

浏览器支持

属性

autocomplete 属性

autofocus 属性

form 属性

表单重写属性

height 和 width 属性

list 属性

min、max 和 step 属性

multiple 属性

novalidate 属性

pattern 属性