HTML5 简介

HTML

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5简单易学。



什么是 HTML5?

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 受包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等国外主流浏览器的支持；国内的傲游浏览器（Maxthon）， 360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。

HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。。

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

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

  • 用于绘画的 canvas 元素

  • 用于媒介回放的 video 和 audio 元素

  • 对本地离线存储的更好的支持

  • 新的特殊内容元素，比如 article、footer、header、nav、section

  • 新的表单控件，比如 calendar、date、time、email、url、search

HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

<!DOCTYPE html>

最小的HTML5文档

下面是一个简单的HTML5文档：

<!DOCTYPE html>        <html>              <head>          <title>文档标题</title>            </head>           <body>            文档内容......         </body>                </html>

HTML5的改进

  • 新元素

  • 新属性

  • 完全支持 CSS3

  • Video 和 Audio

  • 2D/3D 制图

  • 本地存储

  • 本地 SQL 数据

  • Web 应用

HTML5 多媒体

使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。

HTML5 应用

使用 HTML5 你可以简单地开发应用

  • 本地数据存储

  • 访问本地文件

  • 本地 SQL 数据

  • 缓存引用

  • Javascript 工作者

  • XHTMLHttpRequest 2

HTML5 图形

使用 HTML5 你可以简单的绘制图形:

HTML5 使用 CSS3

  • 新选择器

  • 新属性

  • 动画

  • 2D/3D 转换

  • 圆角

  • 阴影效果

  • 可下载的字体

了解更多CSS3知识请查看本站的 CSS3 教程。

语义要素

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>规定在文本中的何处适合添加换行符。

HTML5 表单

新表单元素, 新属性，新输入类型，自动验证。

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>

每一章中的实例

通过我们的 HTML 编辑器，您能够编辑 HTML，然后点击按钮来查看结果。

实例

<!DOCTYPE HTML>
<html>
<body>

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

</body>
</html>

尝试一下 »

点击 "尝试一下" 按钮查看在线运行结果。

HTML5 - 新特性

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

  • 用于绘画的 canvas 元素

  • 用于媒介回放的 video 和 audio 元素

  • 对本地离线存储的更好的支持

  • 新的特殊内容元素，比如 article、footer、header、nav、section

  • 新的表单控件，比如 calendar、date、time、email、url、search

HTML5 浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。


IE9 以下版本浏览器兼容HTML5的方法，使用百度静态资源的html5shiv包：

<!--[if lt IE9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" rel="external nofollow" ></script><![endif]-->

载入后，初始化新标签的CSS：

/*html5*/article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

HTML5 参考手册

在本站中你可以找到关于HTML5 的标签及属性描述，详细请点击 HTML5参考手册。


HTML5 浏览器支持

目前市面上的浏览器有很多版本，你可以让一些较早的浏览器（不支持HTML5）支持 HTML5。

HTML5 浏览器支持

现代的浏览器都支持 HTML5。

此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。

正因为如此，你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。

Note甚至你可以教会 IE6  (Windows XP 2001) 浏览器处理未知的 HTML 元素。

将 HTML5 元素定义为块元素

HTML5 定了 8 个新的 HTML 语义（semantic）  元素。所有这些元素都是块级 元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

实例

header, section, footer, aside, nav, main, article, figure {
   display: block;
}

为 HTML 添加新元素

你可以为 HTML 添加新的元素。

该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <myHero> ：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  }
  </style>
</head>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

<myHero>我的第一个新元素</myHero>

</body>
</html>

尝试一下 »

JavaScript 语句 document.createElement("myHero") 是为了为 IE 浏览器添加新的元素。

Internet Explorer 浏览器问题

你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素，但是：

NoteInternet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" rel="external nofollow" ></script>
<![endif]-->

以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。

注意：国内用户请使用百度静态资源库（Google 资源库在国内不稳定）：

<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" rel="external nofollow" rel="external nofollow" ></script>
<![endif]-->

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

完美的 Shiv 解决方案

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Styling HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" rel="external nofollow" rel="external nofollow" ></script>
  <![endif]-->
</head>

<body>

<h1>我的第一篇文章</h1>

<article>
学技术，从W3Cschool开始！
</article>

</body>
</html>

尝试一下 »

html5shiv.js 引用代码必须放在  <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

关于HTML5的新元素，我们将会在“HTML 新元素”部分作出详细的介绍！

HTML5 新元素

随着HTML版本的更新迭代，有很多元素的使用也在不断的发生着变化，本节我们将介绍HTML5中的一些新的元素！

HTML5 新元素

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

<canvas> 新元素

标签 描述
<canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

标签 描述
<audio> 定义音频内容
<video> 定义视频（video 或者 movie）
<source> 定义多媒体资源 <video> 和 <audio>
<embed> 定义嵌入的内容，比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

新表单元素

标签 描述
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出，比如脚本的输出。

提示：你可以在本站的“HTML 表单”一节中查看完整的HTML使用的表单元素！


新的语义和结构元素

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> 规定在文本中的何处适合添加换行符。

已移除的元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

HTML5 Canvas

<canvas>元素是HTML5中的新元素，通过使用该元素，你可以在网页中绘制所需的图形。

标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

什么是 Canvas?

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

标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 元素.

注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 元素.

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。

<canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。

提示: 你可以在HTML页面中使用多个 <canvas> 元素.

使用 style 属性来添加边框:

实例

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

尝试一下 »


使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

实例

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script> 

尝试一下 »

实例解析:

首先，找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var ctx=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

坐标实例

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：

  • moveTo(x,y) 定义线条开始坐标

  • lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法，就像stroke().

实例

定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

尝试一下 »

在canvas中绘制圆形, 我们将使用以下方法:

  • arc(x,y,r,start,stop)

实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().

实例

使用 arc() 方法 绘制一个圆:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

尝试一下 »


Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

  • font - 定义字体

  • fillText(text,x,y) - 在 canvas 上绘制实心的文本

  • strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用 fillText():

实例

使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

尝试一下 »

使用 strokeText():

实例

使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

尝试一下 »


Canvas -  渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

  • createLinearGradient(x,y,x1,y1) - 创建线条渐变

  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

实例

创建一个线性渐变。使用渐变填充矩形:


JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

尝试一下 »

使用 createRadialGradient():

实例

创建一个径向/圆渐变。使用渐变填充矩形：


JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

尝试一下 »

提示：当使用<canvas>元素创建径向渐变的时候 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内的参数有如下的含义:

  •  x：表示渐变的开始圆的 x 坐标
  •  y：表示渐变的开始圆的 y 坐标
  •  r：表示开始圆的半径
  •  x1：表示渐变的结束圆的 x 坐标
  •  y1：表示渐变的结束圆的 y 坐标
  •  r1：表示结束圆的半径


Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

  • drawImage(image,x,y)

使用图像:

The Scream

实例

把一幅图像放置到画布上:


JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

尝试一下 »


HTML Canvas 参考手册

标签的完整属性可以参考Canvas 参考手册.

The HTML Tag

Tag描述
<canvas>HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

参考阅读

HTML DOM 参考手册：HTML DOM Canvas 对象


HTML5 内联 SVG

SVG表示可缩放矢量图形，是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式，它在2003年1月14日成为W3C推荐标准。

HTML5 支持内联 SVG。

什么是SVG？

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

  • SVG 用于定义用于网络的基于矢量的图形

  • SVG 使用 XML 格式定义图形

  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

  • SVG 是万维网联盟的标准

  • SVG 与 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG优势

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

  • SVG 图像可通过文本编辑器来创建和修改

  • SVG 图像可被搜索、索引、脚本化或压缩

  • SVG 是可伸缩的

  • SVG 图像可在任何的分辨率下被高质量地打印

  • SVG 可在图像质量不下降的情况下被放大

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持内联SVG。

把 SVG 直接嵌入 HTML 页面

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：

实例

<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>

尝试一下 »

学习更多关于 SVG 教程, 请访问 SVG 教程.

SVG 与 Canvas两者间的区别

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

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

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

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

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

Canvas 与 SVG 的比较

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

CanvasSVG

  • 依赖分辨率

  • 不支持事件处理器

  • 弱的文本渲染能力

  • 能够以 .png 或 .jpg 格式保存结果图像

  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

  • 不依赖分辨率

  • 支持事件处理器

  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）

  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

  • 不适合游戏应用

HTML5 MathML

MathML 与 HTML相似度很高，但是比较繁琐。它继承了角括号和双标签（<标签>内容</标签>）的用法。

HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

注意：大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可以使用最新版的 Firefox 或 Safari 浏览器查看。

MathML 实例

以下是一个简单的 MathML 实例： 

<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title>W3Cschool在线教程(51coolma.cn)</title>   </head>	   <body>	      <math xmlns="http://www.w3.org/1998/Math/MathML">		         <mrow>            <msup><mi>a</mi><mn>2</mn></msup>            <mo>+</mo>				            <msup><mi>b</mi><mn>2</mn></msup>            <mo>=</mo>				            <msup><mi>c</mi><mn>2</mn></msup>         </mrow>			      </math>		   </body>
</html>

尝试一下 »

运行结果图，如下所示：


以下实例添加了一些运算符： 

<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title>W3Cschool在线教程(51coolma.cn)</title>   </head>	   <body>	      <math xmlns="http://www.w3.org/1998/Math/MathML">		         <mrow>			            <mrow>				               <msup>                  <mi>x</mi>                  <mn>2</mn>               </msup>					               <mo>+</mo>					               <mrow>                  <mn>4</mn>                  <mo>⁢</mo>                  <mi>x</mi>               </mrow>					               <mo>+</mo>               <mn>4</mn>					            </mrow>				            <mo>=</mo>            <mn>0</mn>				          </mrow>      </math>		   </body></html>

尝试一下 »

运行结果图，如下所示：

1471599520581137

以下实例是一个 2×2 矩阵，可以在 Firefox 3.5 以上版本查看到效果： 

<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title>W3Cschool在线教程(51coolma.cn)</title>   </head>	   <body>      <math xmlns="http://www.w3.org/1998/Math/MathML">		         <mrow>            <mi>A</mi>            <mo>=</mo>			            <mfenced open="[" close="]">			               <mtable>                  <mtr>                     <mtd><mi>x</mi></mtd>                     <mtd><mi>y</mi></mtd>                  </mtr>					                  <mtr>                     <mtd><mi>z</mi></mtd>                     <mtd><mi>w</mi></mtd>                  </mtr>               </mtable>                           </mfenced>         </mrow>      </math>         </body></html>

尝试一下 »

运行结果图，如下所示：


HTML5 拖放（Drag 和 Drop）

拖放的目的是可以让你将某个对象放置到你想要放置的位置。

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

将51coolma图标拖动到矩形框中。

拖放

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

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

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。

注意:Safari 5.1.2不支持拖动.

HTML5 拖放实例

下面的例子是一个简单的拖放实例：

实例

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

尝试一下 »

它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。

设置元素为可拖放

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

<img draggable="true">

拖动什么 - ondragstart 和 setData()

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

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

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

function drag(ev)
{ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

提示：你可以在本站的“ondragstart 事件”部分了解到更多的有用信息！

放到何处 - ondragover

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

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

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

event.preventDefault()

进行放置 - ondrop

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

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

代码解释：

  • 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素（目标元素）中

Examples

更多实例

来回拖放图片
如何在两个 <div> 元素之间拖放图像。

相关文章

HTML DOM 参考手册：ondrop 事件

HTML5 Geolocation（地理定位）

HTML5 Geolocation（地理定位）用于定位用户的位置。

Geolocation 通过请求一个位置信息，用户同意后，浏览器会返回一个包含经度和维度的位置信息！

定位用户的位置

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

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

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）.

注意: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

HTML5 - 使用地理定位

请使用 getCurrentPosition() 方法来获得用户的位置。

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

实例

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
  }
</script>

尝试一下 »

实例解析:

  • 检测是否支持地理定位
  • 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
  • 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
  • showPosition() 函数获得并显示经度和纬度

上面的例子是一个非常基础的地理定位脚本，不含错误处理。

提示：geolocation的位置信息来源可以包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。

处理错误和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：

实例

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用户拒绝对获取地理位置的请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="请求用户地理位置超时。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知错误。"
      break;
    }
  }

尝试一下 »

错误代码：

  • Permission denied - 用户不允许地理定位
  • Position unavailable - 无法获取当前位置
  • Timeout - 操作超时

在地图中显示结果

如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：

实例

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

尝试一下 »

在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。

Google地图脚本
上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。

给定位置的信息

本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。

实例:

  • 更新本地信息
  • 显示用户周围的兴趣点
  • 交互式车载导航系统 (GPS)

getCurrentPosition() 方法 - 返回数据

T若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

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

Geolocation 对象 - 其他有趣的方法

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

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：

实例

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude +
  "<br>经度: " + position.coords.longitude;
  }
</script>

尝试一下 »

关于HTML5中地理定位的内容我们就介绍到这，在下一节的内容中，我们将学习有关HTML5视频的相关知识！

HTML5 Video(视频)

在本节内容中，你将了解到在HTML5中视频是如何工作的、主流浏览器支持的视频格式以及如何对网页中的视频进行控制。

很多站点都会使用到视频. HTML5 提供了展示视频的标准。

检测您的浏览器是否支持 HTML5 视频：


Web站点上的视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持该元素.

注意: Internet Explorer 8 或者更早的IE版本不支持 <video>  元素。

HTML5 (视频)- 如何工作

如需在 HTML5 中显示视频，您所有需要的是：

实例

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

尝试一下 »

<video> 元素提供了播放、暂停和音量控件来控制视频。

同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与 </video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <video>  元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

视频格式与浏览器的支持

当前，<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

浏览器 MP4 WebM Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES
  • MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

视频格式

格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML5 - 使用 DOM 进行控制

HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

<video> 和 <audio> 元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。

实例 1

为视频创建简单的播放/暂停以及调整尺寸控件：


   

上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。

尝试一下 »

HTML5 Video 标签

标签 描述
<video> 定义一个视频
<source> 定义多种媒体资源,比如<video> 和<audio>
<track> 定义在媒体播放器文本轨迹

相关文章

HTML DOM 参考手册：HTML DOM Video 对象


HTML5 Audio(音频)

HTML5 提供了播放音频文件的标准。

通过使用HTML5中的audio功能，你可以实现与flash相同的功能，即回放、跳转、缓冲等。

互联网上的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。

今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.

注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.

HTML5 Audio - 如何工作

如需在 HTML5 中播放音频，你需要使用以下代码：

实例

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

尝试一下 »

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

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

音频格式及浏览器支持

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

浏览器MP3WavOgg
Internet Explorer 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+NOYESYES
Safari 5+YESYESNO
Opera 10+NOYESYES

音频格式的MIME类型

FormatMIME-type
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav

HTML5 Audio 标签

标签描述
<audio>定义了声音内容
<source>规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用

相关文章

HTML DOM 参考手册：HTML DOM Audio 对象

HTML5 新的 Input 类型

在本站的HTML教程中，你应该已经了解过HTML表单输入类型了，而在本节的内容中，我们将介绍HTML5中新增的一些表单类型！

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

本章全面介绍这些新的输入类型：

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

Input 类型: color

color 类型用在input字段主要用于选取颜色，如下所示：

Opera Safari Chrome Firefox Internet Explorer

实例

从拾色器中选择一个颜色:

选择你喜欢的颜色: <input type="color" name="favcolor">

尝试一下 »

Input 类型: date

date 类型允许你从一个日期选择器选择一个日期。

Opera Safari Chrome Firefox Internet Explorer

实例

定义一个时间控制器:

生日: <input type="date" name="bday">

尝试一下 »

Input 类型: datetime

datetime 类型允许你选择一个日期（UTC 时间）。

OperaSafariChromeFirefoxInternet Explorer

实例

定义一个日期和时间控制器（本地时间）:

生日 (日期和时间): <input type="datetime" name="bdaytime">

尝试一下 »

Input 类型: datetime-local

datetime-local 类型允许你选择一个日期和时间 (无时区).

OperaSafariChromeFirefoxInternet Explorer

实例

定义一个日期和时间 (无时区):

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

尝试一下 »

Input 类型: email

email 类型用于应该包含 e-mail 地址的输入域。

OperaSafariChromeFirefoxInternet Explorer

实例

在提交表单时，会自动验证 email 域的值是否合法有效:

E-mail: <input type="email" name="email">

尝试一下 »

提示: iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。

Input 类型: month

month 类型允许你选择一个月份。

OperaSafariChromeFirefoxInternet Explorer

实例

定义月与年 (无时区):

生日 (月和年): <input type="month" name="bdaymonth">

尝试一下 »

Input 类型: number

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定：

OperaSafariChromeFirefoxInternet Explorer

实例

定义一个数值输入域(限定):

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

尝试一下 »

使用下面的属性来规定对数字类型的限定：

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

尝试一下带有所有限定属性的例子 尝试一下

Input 类型: range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

OperaSafariChromeFirefoxInternet Explorer

实例

定义一个不需要非常精确的数值（类似于滑块控制）:

<input type="range" name="points" min="1" max="10">

尝试一下 »

请使用下面的属性来规定对数字类型的限定：

  • max - 规定允许的最大值
  • min - 规定允许的最小值
  • step - 规定合法的数字间隔
  • value - 规定默认值

Input 类型: search

search 类型用于搜索域，比如站点搜索或 Google 搜索。

OperaSafariChromeFirefoxInternet Explorer

实例

定义一个搜索字段 (类似站点搜索或者Google搜索):

Search Google: <input type="search" name="googlesearch">

尝试一下 »

Input 类型: tel

OperaSafariChromeFirefoxInternet Explorer

实例

定义输入电话号码字段:

电话号码: <input type="tel" name="usrtel">

尝试一下 »

Input 类型: time

time 类型允许你选择一个时间。

OperaSafariChromeFirefoxInternet Explorer

实例

定义可输入时间控制器（无时区）：

选择时间: <input type="time" name="usr_time">

尝试一下 »

Input 类型: url

url 类型用于应该包含 URL 地址的输入域。

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

OperaSafariChromeFirefoxInternet Explorer

实例

定义输入URL字段:

添加您的主页: <input type="url" name="homepage">

尝试一下 »

提示: iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。

Input 类型: week

week 类型允许你选择周和年。

OperaSafariChromeFirefoxInternet Explorer

实例

定义周和年 (无时区):

选择周: <input type="week" name="week_year">

尝试一下 »

HTML5 <input> 标签

标签 描述
<input> 描述input输入器

扩展阅读

input杂谈：HTML5的Input类型

HTML5 表单元素

HTML5 新的表单元素

HTML5 有以下新的表单元素:

注意:不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。

HTML5 <datalist> 元素

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

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

OperaSafariChromeFirefoxInternet Explorer

实例

<input> 元素使用<datalist>预定义值:

<input list="browsers">

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

尝试一下 »

HTML5 <keygen> 元素

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

<keygen>标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

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

OperaSafariChromeFirefoxInternet Explorer

实例

带有keygen字段的表单:

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

尝试一下 »

HTML5 <output> 元素

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

OperaSafariChromeFirefoxInternet Explorer

实例

将计算结果显示在 <output> 元素:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

尝试一下 »

HTML5 新表单元素

标签 描述
<datalist> <input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> <keygen> 标签规定用于表单的密钥对生成器字段。
<output> <output> 标签定义不同类型的输出，比如脚本的输出。

你可以点击上述表格中的链接来学习更多与HTML5表单元素相关的知识点！

HTML5 表单属性

在之前的章节内容中，我们介绍了HTML5表单元素，进一步的，在本节内容中，你会了解到HTML5的表单属性。

HTML5 新的表单属性

HTML5 的 <form> 和 <input>标签添加了几个新属性.

<form>新属性：

  • autocomplete

  • novalidate

<input>新属性：

  • autocomplete

  • autofocus

  • form

  • formaction

  • formenctype

  • formmethod

  • formnovalidate

  • formtarget

  • height and width

  • list

  • min and max

  • multiple

  • pattern (regexp)

  • placeholder

  • required

  • step

<form> / <input> autocomplete 属性

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

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

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

OperaSafariChromeFirefoxInternet Explorer

实例

HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):

<form action="demo-form.php" 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>  

尝试一下 »

提示:某些浏览器中，您可能需要启用自动完成功能，以使该属性生效。

<form> novalidate 属性

novalidate 属性的一个boolean 属性.

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

OperaSafariChromeFirefoxInternet Explorer

实例

无需验证提交的表单数据

<form action="demo-form.php" novalidate>
 E-mail: <input type="email" name="user_email">
 <input type="submit">
</form>

尝试一下 »


<input> autofocus 属性

autofocus 属性是一个 boolean 属性.

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

OperaSafariChromeFirefoxInternet Explorer

实例

让 "First name" input 输入域在页面载入时自动聚焦：

First name:<input type="text" name="fname" autofocus>

尝试一下 »


<input> form 属性

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

提示:如需引用一个以上的表单，请使用空格分隔的列表。

OperaSafariChromeFirefoxInternet Explorer

实例

位于form表单外的input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):

<form action="demo-form.php" id="form1">
 First name: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

尝试一下 »


<input> formaction 属性

The formaction 属性用于描述表单提交的URL地址.

The formaction 属性会覆盖<form> 元素中的action属性.

注意: The formaction 属性用于 type="submit" 和 type="image".

OperaSafariChromeFirefoxInternet Explorer

实例

以下HTMLform表单包含了两个不同地址的提交按钮：

<form action="demo-form.php">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit" value="Submit"><br>
 <input type="submit" formaction="demo-admin.php"
  value="Submit as admin">
</form>

尝试一下 »


<input> formenctype 属性

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

formenctype 属性覆盖 form 元素的 enctype 属性。

注意: 该属性与 type="submit" 和 type="image" 配合使用。

OperaSafariChromeFirefoxInternet Explorer

实例

第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据:

<form action="demo-post_enctype.php" method="post">
 First name: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
 <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

尝试一下 »


<input> formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 <form> 元素的的method 属性。

注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

OperaSafariChromeFirefoxInternet Explorer

实例

重新定义表单提交方式实例:

<form action="demo-form.php" method="get">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit" value="Submit">
 <input type="submit" formmethod="post" formaction="demo-post.php"
  value="Submit using POST">
</form>

尝试一下 »


<input> formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 <input> 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

注意: formnovalidate 属性与type="submit"一起使用

OperaSafariChromeFirefoxInternet Explorer

实例

两个提交按钮的表单(使用与不适用验证 ):

<form action="demo-form.php">
 E-mail: <input type="email" name="userid"><br>
 <input type="submit" value="Submit"><br>
 <input type="submit" formnovalidate value="Submit without validation">
</form>  

尝试一下 »


<input> formtarget 属性

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

The formtarget 属性覆盖 <form>元素的target属性.

注意: formtarget 属性与type="submit" 和 type="image"配合使用.

OperaSafariChromeFirefoxInternet Explorer

实例

两个提交按钮的表单, 在不同窗口中显示:

<form action="demo-form.php">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

尝试一下 »


<input> height 和 width 属性

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

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

提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。

OperaSafariChromeFirefoxInternet Explorer

实例

定义了一个图像提交按钮, 使用了 height 和 width 属性:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

尝试一下 »


<input> list 属性

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

OperaSafariChromeFirefoxInternet Explorer

实例

在 <datalist>中预定义 <input> 值:

<input list="browsers">

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

尝试一下 »


<input> min 和 max 属性

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

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

OperaSafariChromeFirefoxInternet Explorer

实例

<input> 元素最小值与最大值设置:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

尝试一下 »


<input> multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定<input> 元素中可选择多个值。

注意: multiple 属性适用于以下类型的<input> 标签：email 和 file。: email, and file.

OperaSafariChromeFirefoxInternet Explorer

实例

上传多个文件:

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

尝试一下 »


<input> pattern 属性

pattern 属性描述了一个正则表达式用于验证<input> 元素的值。

注意:pattern 属性适用于以下类型的<input> 标签: text, search, url, tel, email, 和 password.

提示： 是用来全局 title 属性描述了模式.

提示： 您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容

OperaSafariChromeFirefoxInternet Explorer

实例

下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

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

尝试一下 »


<input> placeholder 属性

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

简短的提示在用户输入值前会显示在输入域上。

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

OperaSafariChromeFirefoxInternet Explorer

实例

input 字段提示文本t:

<input type="text" name="fname" placeholder="First name">

尝试一下 »


<input> required 属性

required 属性是一个 boolean 属性.

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

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

OperaSafariChromeFirefoxInternet Explorer

实例

不能为空的input字段:

Username: <input type="text" name="usrname" required>

尝试一下 »


<input> step 属性

step 属性为输入域规定合法的数字间隔。

如果 step="3"，则合法的数是 -3,0,3,6 等

提示： step 属性可以与 max 和 min 属性创建一个区域值.

注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

OperaSafariChromeFirefoxInternet Explorer

实例

规定input step步长为3:

<input type="number" name="points" step="3">

尝试一下 »


HTML5 <input> 标签

标签描述
<form>定义一个form表单
<input>定义一个 input 域

提示：你可以通过本站的编程实战部分来练习如何添加HTML表单！

HTML5 语义元素

语义= 意义.

语义元素 = 元素的意义.

什么是语义元素?

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。

注意: Internet Explorer 8及更早版本不支持该元素. 但是文章底部提供了兼容的解决方法.

HTML5中新的语义元素

许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.

HTML5提供了新的语义元素来明确一个Web页面的不同部分:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>











HTML5 <section> 元素

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

根据W3C HTML5文档: section 包含了一组内容及其标题。

实例

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

尝试一下 »

HTML5 <article> 元素

<article> 标签定义独立的内容。.

<article> 元素使用实例:

  • Forum post
  • Blog post
  • News story
  • Comment

实例

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

尝试一下 »

HTML5 <nav> 元素

<nav> 标签定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

实例

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

尝试一下 »

HTML5 <aside> 元素

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

aside 标签的内容应与主区域的内容相关.

实例

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

尝试一下 »

HTML5 <header> 元素

<header>元素描述了文档的头部区域

<header>元素注意用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

以下实例定义了文章的头部:

实例

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

尝试一下 »

HTML5 <footer> 元素

<footer> 元素描述了文档的底部区域.

<footer> 元素应该包含它的包含元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

文档中你可以使用多个 <footer>元素.

实例

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

尝试一下 »

HTML5 <figure> 和 <figcaption> 元素

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题.

<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

实例

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

尝试一下 »

我们可以开始使用这些语义元素吗?

以上的元素都是块元素(除了<figcaption>).

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

header, section, footer, aside, nav, article, figure
{
display: block;
}

Internet Explorer 8 及更早IE版本中的问题

IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.

解决办法:你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：http://code.google.com/p/html5shiv/

下载后，将以下代码放入的网页中：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head> 元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素。

注意：在上述内容中介绍的语义元素不会给页面内容造成任何视觉上的改变，它们只是提供HTML文档的结构，供计算机和开发者读取和阅读！

HTML5 Web 存储

在HTML5之前，主要是使用cookies存储，cookies的缺点有：需要在请求头上带着数据，存储大小不过，在4k之内。本节，

HTML5 web 存储，一个比cookie更好的本地存储方式。

什么是 HTML5 Web 存储?

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。

数据以键/值对存在, web网页的数据只允许该网页访问使用。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

注意: Internet Explorer 7 及更早IE版本不支持web 存储.

localStorage 和 sessionStorage 

客户端存储数据的两个对象为：

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

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
  {
  // 是的! 支持 localStorage sessionStorage 对象!
  // 一些代码.....
  }
else
  {
  // 抱歉! 不支持 web 存储。
  }

localStorage 对象

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

实例

localStorage.sitename="W3Cschool在线教程";
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;

尝试一下 »

实例解析：

  • 使用 key="sitename" 和 value="W3Cschool在线教程" 创建一个 localStorage 键/值对。
  • 检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。

以上实例也可以这么写：

// 存储localStorage.sitename = "W3Cschool在线教程";// 查找document.getElementById("result").innerHTML = localStorage.sitename;
移除 localStorage 中的 "lastname" :

localStorage.removeItem("lastname");
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

下面的实例展示了用户点击按钮的次数。

代码中的字符串值转换为数字类型:

实例

if (localStorage.clickcount)
{
  localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
  localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";

尝试一下 »

sessionStorage 对象

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

如何创建并访问一个 sessionStorage：:

实例

if (sessionStorage.clickcount)
  {
  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
  }
else
  {
  sessionStorage.clickcount=1;
  }
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

尝试一下 »

相关阅读

HTML5 最佳实践：使用web storage代替cookie

HTML5 Web SQL 数据库

Web SQL 是在浏览器上模拟数据库，可以使用 JS 来操作 SQL 完成对数据的读写。

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。

你也可以参考我们的 SQL 教程，了解更多数据库操作知识。

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

核心方法

以下是规范中定义的三个核心方法：

  1. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
  2. transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
  3. executeSql：这个方法用于执行实际的 SQL 查询。

打开数据库

我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase() 方法对应的五个参数说明：

  1. 数据库名称
  2. 版本号
  3. 描述文本
  4. 数据库大小
  5. 创建回调

第五个参数，创建回调会在创建数据库后被调用。

执行查询操作

执行操作使用 database.transaction() 函数：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {     tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');});

上面的语句执行后会在 'mydb' 数据库中创建一个名为 LOGS 的表。

插入数据

在执行上面的创建表语句后，我们可以插入一些数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "W3Cschool教程")');   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.51coolma.cn")');});

我们也可以使用动态值来插入数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);});

实例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"。

读取数据

以下实例演示了如何读取数据库中已经存在的数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "W3Cschool教程")');   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.51coolma.cn")');});db.transaction(function (tx) {   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {      var len = results.rows.length, i;      msg = "
查询记录条数: " + len + "
";      document.querySelector('#status').innerHTML +=  msg;	      for (i = 0; i < len; i++){         alert(results.rows.item(i).log );      }	   }, null);});

完整实例

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);var msg;
db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "W3Cschool教程")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.51coolma.cn")');
            msg = '<p>数据表已创建，且插入了两条数据。</p>';
            document.querySelector('#status').innerHTML =  msg;
         });
			
db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
               var len = results.rows.length, i;
               msg = "<p>查询记录条数: " + len + "</p>";
               document.querySelector('#status').innerHTML +=  msg;
               for (i = 0; i < len; i++){
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                  document.querySelector('#status').innerHTML +=  msg;
               }
            }, null);
         });

尝试一下 »

以上实例运行结果如下图所示：



删除记录

删除记录使用的格式如下：

db.transaction(function (tx) {    tx.executeSql('DELETE FROM LOGS  WHERE id=1');});

删除指定的数据 id 也可以是动态的：

db.transaction(function(tx) {    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);});

更新记录

更新记录使用的格式如下：

db.transaction(function (tx) {    tx.executeSql('UPDATE LOGS SET log='www.51coolma.cn' WHERE id=2');});

更新指定的数据 id 也可以是动态的：

db.transaction(function(tx) {    tx.executeSql('UPDATE LOGS SET log='www.51coolma.cn' WHERE id=?', [id]);});

完整实例 

<!DOCTYPE HTML><html>   <head>      <meta charset="UTF-8">        <script type="text/javascript">               var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);         var msg;                  db.transaction(function (tx) {            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "W3Cschool教程")');            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.51coolma.cn")');            msg = '<p>数据表已创建，且插入了两条数据。</p>';            document.querySelector('#status').innerHTML =  msg;         });         db.transaction(function (tx) {              tx.executeSql('DELETE FROM LOGS  WHERE id=1');              msg = '<p>删除 id 为 1 的记录。</p>';              document.querySelector('#status').innerHTML =  msg;         });         db.transaction(function (tx) {             tx.executeSql('UPDATE LOGS SET log='www.51coolma.cn' WHERE id=2');              msg = '<p>更新 id 为 2 的记录。</p>';              document.querySelector('#status').innerHTML =  msg;         });         db.transaction(function (tx) {            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {               var len = results.rows.length, i;               msg = "<p>查询记录条数: " + len + "</p>";               document.querySelector('#status').innerHTML +=  msg;                              for (i = 0; i < len; i++){                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";                  document.querySelector('#status').innerHTML +=  msg;               }            }, null);         });               </script>         </head>      <body>      <div id="status" name="status">状态信息</div>   </body>   </html>

尝试一下 »

以上实例运行结果如下图所示：


好了，学习完本节内容，你应该会对 HTML5 的 Web SQL 有不少的好感的，毕竟它拥有较大的存储空间（支持自定义），存储结构自由，并且你可以方便地使用 SQL 来进行读写！


HTML5 应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。这意味着，你可以在没有网络连接的情况下进行访问。

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

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

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

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

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 支持应用程序缓存.

HTML5 Cache Manifest 实例

下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：

实例

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

尝试一下 »

Cache Manifest 基础

如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

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

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

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

Manifest 文件

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

manifest 文件可分为三个部分：

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

CACHE MANIFEST

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

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

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

NETWORK

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

NETWORK:
login.php

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

NETWORK:
*

FALLBACK

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

FALLBACK:
/html/ /offline.html

注意: 第一个 URI 是资源，第二个是替补。

更新缓存

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

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

实例 - 完整的 Manifest 文件

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

FALLBACK:
/html/ /offline.html

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

关于应用程序缓存的说明

请留心缓存的内容。

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。

注意: 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

相关教程

CSS教程

HTML5 Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能，更好的解释是，你可以使用web worker提供的一种简单的方法来为web内容在后台线程中运行脚本，这些线程在执行任务的过程中并不会干扰用户界面！

什么是 Web Worker？

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

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

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 都支持Web workers.

HTML5 Web Workers 实例

下面的例子创建了一个简单的 web worker，在后台计数：

实例

计数: 307



尝试一下 »

demo_workers.js 文件代码：

var i=0;

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

timedCount();

检测浏览器是否支持 Web Worker

在创建 web worker 之前，请检测用户的浏览器是否支持它：

if(typeof(Worker)!=="undefined")
  {
  // 是的! Web worker 支持!
  // 一些代码.....
  }
else
  {
  // //抱歉! Web Worker 不支持
  }
提示：

这步的检测非常重要！你必须先检测才能保证接下来可以顺利操作 web worker！



创建 web worker 文件

现在，让我们在一个外部 JavaScript 中创建我们的 web worker。

在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：

var i=0;

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

timedCount();

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

注意: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。/p>

下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：/p>

if(typeof(w)=="undefined")
  {
  w=new Worker("demo_workers.js");
  }

然后我们就可以从 web worker 发送和接收消息了。

向 web worker 添加一个 "onmessage" 事件监听器：

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

<p当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

终止 Web Worker

当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：

实例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

尝试一下 »

Web Workers 和 DOM

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

相关教程

javascript教程

HTML5 服务器发送事件(Server-Sent Events)

服务器发送事件（Server-sent Events）是基于 WebSocket 协议的一种服务器向客户端发送事件和数据的单向通讯。

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

Server-Sent 事件 - 单向消息传递

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

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知：

实例

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "<br>";
  };

尝试一下 »

实例解析：

  • 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）

  • 每接收到一次更新，就会发生 onmessage 事件

  • 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

检测 Server-Sent 事件支持

以下实例，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况：

if(typeof(EventSource)!=="undefined")
  {
  // 浏览器支持 Server-Sent
  // 一些代码.....
  }
else
  {
  // 浏览器不支持 Server-Sent..
  }

服务器端代码实例

为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。

服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。

<pPHP 代码 (demo_sse.php)：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>

ASP 代码 (VB) (demo_sse.asp):

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

代码解释:

  • 把报头 "Content-Type" 设置为 "text/event-stream"

  • 规定不对页面进行缓存

  • 输出发送日期（始终以 "data: " 开头）

  • 向网页刷新输出数据

EventSource 对象

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

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

在本节的开头我们介绍过服务器发送事件（Server-sent Events）是基于 WebSocket 协议的，那么在本教程的下节内容中，我们将继续向你介绍 HTML WebSocket！

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocal] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

WebSocket 属性

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：

属性描述
Socket.readyState

只读属性 readyState 表示连接状态，可以是以下值：

  • 0 - 表示连接尚未建立。

  • 1 - 表示连接已建立，可以进行通信。

  • 2 - 表示连接正在进行关闭。

  • 3 - 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

事件事件处理程序描述
openSocket.onopen连接建立时触发
messageSocket.onmessage客户端接收服务端数据时触发
errorSocket.onerror通信发生错误时触发
closeSocket.onclose连接关闭时触发

WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：

方法描述
Socket.send()

使用连接发送数据

Socket.close()

关闭连接

WebSocket 实例

WebSocket 协议本质上是一个基于 TCP 的协议。

为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

客户端的 HTML 和 JavaScript

目前大部分浏览器支持 WebSocket() 接口，你可以在以下浏览器中尝试实例： Chrome, Mozilla, Opera 和 Safari。

51coolma_websocket.html 文件内容

<!DOCTYPE HTML><html>   <head>   <meta charset="utf-8">   <title>W3Cschool教程(51coolma.cn)</title>	      <script type="text/javascript">         function WebSocketTest()         {            if ("WebSocket" in window)            {               alert("您的浏览器支持 WebSocket!");                              // 打开一个 web socket               var ws = new WebSocket("ws://localhost:9998/echo");				               ws.onopen = function()               {                  // Web Socket 已连接上，使用 send() 方法发送数据                  ws.send("发送数据");                  alert("数据发送中...");               };				               ws.onmessage = function (evt)                {                   var received_msg = evt.data;                  alert("数据已接收...");               };				               ws.onclose = function()               {                   // 关闭 websocket                  alert("连接已关闭...");                };            }                        else            {               // 浏览器不支持 WebSocket               alert("您的浏览器不支持 WebSocket!");            }         }      </script>		   </head>   <body>         <div id="sse">         <a href="javascript:WebSocketTest()">运行 WebSocket</a>      </div>         </body></html>

安装 pywebsocket

在执行以上程序前，我们需要创建一个支持 WebSocket 的服务。从 pywebsocket 下载 mod_pywebsocket ,或者使用 git 命令下载：

git clone https://github.com/google/pywebsocket.git

mod_pywebsocket 需要 python 环境支持

mod_pywebsocket 是一个 Apache HTTP 的 Web Socket扩展，安装步骤如下：

  • 解压下载的文件。

  • 进入 pywebsocket 目录。

  • 执行命令：

    $ python setup.py build$ sudo python setup.py install

  • 查看文档说明:

    $ pydoc mod_pywebsocket

开启服务

在 pywebsocket/mod_pywebsocket 目录下执行以下命令：

$ sudo python standalone.py -p 9998 -w ../example/

以上命令会开启一个端口号为 9998 的服务，使用 -w 来设置处理程序 echo_wsh.py 所在的目录。

现在我们可以在 Chrome 浏览器打开前面创建的 51coolma_websocket.html 文件。如果你的浏览器支持 WebSocket(), 点击"运行 WebSocket"，你就可以看到整个流程各个步骤弹出的窗口，流程 Gif 演示：


在我们停止服务后，会弹出 "连接已关闭..."。

总之，使用WebSocket技术，后台可以随时向前端推送消息，以此保证前后台状态统一，这在传统的无状态HTTP协议中无法做到。


HTML5 代码规范

在使用HTML5的过程中，使用规范化的代码能够更加方便你的运用与阅读，本节我们将带领你了解如何能够使得HTML5中的代码变得更加规范！

HTML 代码约定

很多 Web 开发人员对 HTML 的代码规范知之甚少。

在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。

使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。

而针对于 HTML5 ，我们应该形成比较好的代码规范，以下提供了几种规范的建议。

使用正确的文档类型

文档类型声明位于HTML文档的第一行：

<!DOCTYPE html>

如果你想跟其他标签一样使用小写，可以使用以下代码：

<!doctype html>

使用小写元素名

HTML5 元素名可以使用大写和小写字母。

推荐使用小写字母：

  • 混合了大小写的风格是非常糟糕的。
  • 开发人员通常使用小写 (类似 XHTML)。
  • 小写风格看起来更加清爽。
  • 小写字母容易编写。

不推荐:

<SECTION>
  <p>这是一个段落。</p>
</SECTION>

非常糟糕:

<Section>
  <p>这是一个段落。</p>
</SECTION>

推荐:

<section>
  <p>这是一个段落。</p>
</section>

关闭所有 HTML 元素

在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素)，但我们建议每个元素都要添加关闭标签。

不推荐:

<section>
  <p>这是一个段落。
  <p>这是一个段落。
</section>

推荐:

<section>
  <p>这是一个段落。</p>
  <p>这是一个段落。</p>
</section>

关闭空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也不一定要关闭：

我们可以这么写：

<meta charset="utf-8">

也可以这么写：

<meta charset="utf-8" />

在 XHTML 和 XML 中斜线 (/) 是必须的。

如果你期望 XML 软件使用你的页面，使用这种风格是非常好的。

使用小写属性名

HTML5 属性名允许使用大写和小写字母。

我们推荐使用小写字母属性名:

  • 同时使用大写写是非常不好的习惯。
  • 开发人员通常使用小写 (类似 XHTML)。
  • 小写风格看起来更加清爽。
  • 小写字母容易编写。

不推荐：

<div CLASS="menu">

推荐：

<div class="menu">

属性值

HTML5 属性值可以不用引号。

属性值我们推荐使用引号:

  • 如果属性值含有空格需要使用引号。
  • 混合风格不推荐的，建议统一风格。
  • 属性值使用引号易于阅读。

以下实例属性值包含空格，没有使用引号，所以不能起作用：

<table class=table striped>

以下使用了双引号，是正确的：

<table class="table striped">

图片属性

图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

空格和等号

等号前后可以使用空格。

<link rel = "stylesheet" href = "styles.css">

但我们推荐少用空格:

<link rel="stylesheet" href="styles.css">

避免一行代码过长

使用 HTML 编辑器，左右滚动代码是不方便的。

每行代码尽量少于 80 个字符。

空行和缩进

不要无缘无故添加空行。

为每个逻辑功能块添加空行，这样更易于阅读。

缩进使用两个空格，不建议使用 TAB。

比较短的代码间不要使用不必要的空行和缩进。

不必要的空行和缩进:

<body>

  <h1>W3Cschool教程</h1>

  <h2>HTML</h2>

  <p>
    学技术，从W3Cschool开始。
    学技术，从W3Cschool开始。
   学技术，从W3Cschool开始。
    学技术，从W3Cschool开始。
  </p>

</body>

推荐:

<body>

<h1>W3Cschool教程</h1>

<h2></h2>
<p>学技术，从W3Cschool开始。
学技术，从W3Cschool开始。
学技术，从W3Cschool开始。
学技术，从W3Cschool开始。</p>

</body>

表格实例:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

列表实例:

<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

省略 <html> 和 <body>?

在标准 HTML5 中， <html> 和 <body> 标签是可以省略的。

以下 HTML5 文档是正确的:

实例:

<!DOCTYPE html>
<head>
  <title>页面标题</title>
</head>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

尝试一下 »

不推荐省略 <html> 和 <body> 标签。

<html> 元素是文档的根元素，用于描述页面的语言：

<!DOCTYPE html>
<html lang="zh">

声明语言是为了方便屏幕阅读器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃。

省略 <body> 在旧版浏览器 (IE9)会发生错误。

省略 <head>?

在标准 HTML5 中， <head>标签是可以省略的。

默认情况下，浏览器会将 <body> 之前的内容添加到一个默认的 <head> 元素上。

实例

<!DOCTYPE html>
<html>
<title>页面标题</title>

<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
</body>

</html>

尝试一下 »
Note现在省略 head 标签还不推荐使用。

元数据

HTML5 中 <title> 元素是必须的，标题名描述了页面的主题:

<title>W3Cschool教程</title>

标题和语言可以让搜索引擎很快了解你页面的主题:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>W3Cschool教程</title>
</head>

HTML 注释

注释可以写在 <!-- 和 --> 中:

<!-- 这是注释 -->

比较长的评论可以在 <!-- 和 --> 中分行写：

<!--
  这是一个较长评论。 这是 一个较长评论。这是一个较长评论。
  这是 一个较长评论 这是一个较长评论。 这是 一个较长评论。
-->

长评论第一个字符缩进两个空格，更易于阅读。

样式表

样式表使用简洁的语法格式 ( type 属性不是必须的):

<link rel="stylesheet" href="styles.css">

短的规则可以写成一行:

p.into {font-family: Verdana; font-size: 16em;}

长的规则可以写成多行:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • 将左花括号与选择器放在同一行。
  • 左花括号与选择器间添加以空格。
  • 使用两个空格来缩进。
  • 冒号与属性值之间添加已空格。
  • 逗号和符号之后使用一个空格。
  • 每个属性与值结尾都要使用符号。
  • 只有属性值包含空格时才使用引号。
  • 右花括号放在新的一行。
  • 每行最多 80 个字符。
Note在逗号和分号后添加空格是常用的一个规则。

在 HTML 中载入 JavaScript

使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):

<script src="myscript.js">

使用 JavaScript 访问 HTML 元素

一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

以下两个 JavaScript 语句会输出不同结果:

实例

var obj =getElementById("Demo")

var obj = getElementById("demo")

尝试一下 »

HTML 中 JavaScript 尽量使用相同的命名规则。

访问 JavaScript 代码规范。

使用小写文件名

大多 Web 服务器 (Apache, Unix) 对大小写敏感：london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感：london.jpg 可以通过 London.jpg 或 london.jpg 访问。

你必须保持统一的风格，我们建议统一使用小写的文件名。

文件扩展名

HTML 文件后缀可以是 .html (或r .htm)。

CSS 文件后缀是 .css 。

JavaScript 文件后缀是 .js 。

.htm 和 .html 的区别

.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。

区别在于：

.htm 应用在早期 DOS 系统，系统现在后缀只能有三个字符。

在 Unix 系统中后缀没有特别限制，一般用 .html。

技术上区别

如果一个 URL 没有指定文件名 (如 //www.51coolma.cn/css/), 服务器会返回默认的文件名。通常默认文件名为 index.html, index.htm, default.html, 和 default.htm。

如果服务器只配置了 "index.html" 作为默认文件，你必须将文件命名为 "index.html", 而不是 "index.htm"。

但是，通常服务器可以设置多个默认文件，你可以根据需要设置默认文件吗。

不管怎样，HTML 完整的后缀是 ".html"。

学完本教程之后，W3Cschool建议您进行HTML5实战练习来巩固您刚学到的新知识。

在接下来的章节中，我们将详细介绍HTML5中要使用的一些标签以及它们的用法，一起来学习吧！

很多初学 HTML5 的朋友们都在寻找一本叫《 HTML5 从入门到精通》的书，《 HTML5 从入门到精通》系统、全面地讲解了 HTML 语言及其最新版本 HTML5 的新功能与新特性，技术新颖实用。书中所有知识点均结合实例进行讲解，方便读者动手实践。同时在每章的最后还设置了习题，通过这些习题可以对本章学到的知识进行巩固。《 HTML5 从入门到精通》不仅能够使读者系统而全面地学习理论知识，还能满足读者充分实践的需求。


HTML 5


目 录

第1章 HTML 基础 ------ 3
教学录像：22分钟
1.1 HTML 的基本概念  ------ 4
1.2 HTML 发展史 ------ 4
1.3 HTML 的基本结构 ------ 5
1.3.1 HTML 文件的编写方法 ------ 5
1.3.2 文件开始标签 <html> -------  7
1.3.3 文件头部标签 <head> ------- 7
1.3.4 文件标题标签 <title> ------ 7
1.3.5 文件主体标签 <body> ------ 7
1.3.6 编写文件的注意事项 ------ 8
1.4 编写第一个 HTML 文件  ------  8
1.4.1 HTML 文件的编写方法 ------ 8
1.4.2 手工编写页面 ------ 9
1.4.3 使用可视化软件制作页面 ------ 10
1.4.4 使用浏览器浏览 HTML 文件 ------ 14
1.4.5 使用 HTML 开发的明日图书网 ------ 14
1.5 小结 ------ 15
1.6 习题 ------ 16
第2章 HTML 文件基本标记 ------ 17
2.1 HTML 头部标记 ------ 18
2.2 标题标记 <title> ------ 18
2.3 元信息标记 <meta> ------ 19
2.3.1 设置页面关键字 ------ 19
2.3.2 设置页面描述 ------ 20
2.3.3 设置编辑工具 ------ 20
2.3.4 设定作者信息 ------ 21
2.3.5 限制搜索方式 ------ 22
2.3.6 设置网页文字及语言 ------ 22
2.3.7 设置网页的定时跳转 ------ 23
2.3.8 设定有效期限 ------ 24
2.3.9 禁止从缓存中调用 ------ 24
2.3.10 删除过期的 cookie ------ 25
2.3.11 强制打开新窗口 ------ 25
2.3.12 设置网页的过渡效果 ------ 26
2.4 基底网址标记 <base> ------ 29
2.5 页面的主体标记 <body> ------ 30
2.5.1 设置文字颜色 —— text ------31
2.5.2 背景颜色属性 —— bgcolor ------ 32
2.5.3 背景图像属性 —— background ------ 32
2.5.4 设置链接文字属性 —— link ------ 35
2.5.5 设置边距 —— margin ------ 37
2.6 页面的注释标记 ------ 38
2.7 实例演练——创建基本的 HTML 网页 ------ 38
2.8 小结 ------ 39
2.9 习题 ------ 40
第3章 设计网页文本内容 ------ 41
教学录像：29分钟
3.1 标题文字的建立 ------ 42
3.1.1 标题文字标记 <h> ------ 42
3.1.2 标题文字的对齐方式——align ------ 43
3.2 设置文字格式 ------ 44
3.2.1 设置文字字体 —— face ------ 44
3.2.2 设置字号 —— size ------ 45
3.2.3 设置文字颜色 —— color ------ 46
3.2.4 粗体、斜体、下划线 —— strong、em、u ------ 46
3.2.5 上标与下标 —— sup、sub ------ 47
3.2.6 设置删除线 —— strike ------ 48
3.2.7 等宽文字标记 —— code ------ 49
3.2.8 空格 ——   ------ 49
3.2.9 其他特殊符号 ------ 50
3.3 设置段落格式 ------ 51
3.3.1 段落标记 —— p ------ 51
3.3.2 取消文字换行标记 —— nobr ------ 52
3.3.3 换行标记 —— br ------ 53
3.3.4 保留原始排版方式标记 —— pre ------ 53
3.3.5 居中对齐标记 —— center ------ 54
3.3.6 向右缩进标记 —— blockquote ------ 55
3.4 水平线标记 ------ 56
3.4.1 添加水平线 —— hr ------ 56
3.4.2 设置水平线的宽度与高度 —— width、height ------ 57
3.4.3 设置水平线的颜色 —— color ------ 58
3.4.4 设置水平线的对齐方式 —— align ------ 59
3.4.5 去掉水平线阴影 —— noshade ------ 60
3.5 其他文字标记 ------- 60
3.5.1 文字标注标记 —— ruby ------ 60
3.5.2 声明变量标记 —— var ------ 61
3.5.3 忽视 HTML 标记 —— plaintext、xmp ------ 62


如今，HTML5发展飞速，被看做是web开发者创建流行web应用的利器。用HTML5开发的优势主要是这个技术可以进行跨平台进行使用。例如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。而且随着各大浏览器对HTML5技术支持的不断完善以及 HTML5技术的不断成熟，未来 HTML5必将改变我们创建Web应用程序的方式。下面就向大家推荐多款优秀的HTML5开发工具，帮助你更高效的编写HTML5应用。


以下仅列出使用人群基数大、知名度高、易于查找和使用的开发工具。

1. Adobe Dreamweaver 

Dreamweaver 是世界顶级软件厂商 Adobe 推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。Dreamweaver 是集网页制作和管理网站于一身的所见即所得的网页代码编辑器，借助其经过简化的智能编码引擎，视觉辅助功能减少错误并提高网站开发速度，轻松创建、编码和管理动态网站。还能够通过访问代码提示，快速了解 HTML 、CSS 以及其他 Web 标准。（注：根据自身需求选择版本）


优点：                                                     

  • 制作效率。                                
  • 操控能力强。                  
  • 网站管理迅速简单。
  • 全面的 CSS 支持。
  • 学习资源多，如 DW 社区。

缺点：

  • 效果难以精确达到与浏览器一致的显示效果。
  • 不便监控生成干净准确的 HTML 代码。


官网地址链接：https://www.adobe.com/cn/products/dreamweaver.html


Adobe Dreamweaver CS6


2. DevExtreme

DevExtreme 是高性能的HTML5,CSS和Java移动开发框架，可以直接在Visual Studio集成开发环境，构建移动应用程序。从 Angular 和 React 到 ASP.NET MVC 或 Vue ，DevExtreme 包括一系列高性能和响应式 UI 小部件，用于传统的Web和下一代移动应用程序。目前，DevExtreme V19.1.6 全新发布，是Visual Studio开发人员开发跨平台移动产品的首选工具。（注：根据自身需求选择版本）


官方地址链接：https://js.devexpress.com/


DevExtreme


3. JetBrains WebStorm

WebStorm 是 jetbrains 公司旗下一款 JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaS IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

（注：根据自身需求选择版本）


优点：

  • 智能的代码补全，支持不同浏览器的提示。
  • 代码格式化，规则自定义。
  • HTML 智能提示。
  • 联想查询，查找高亮。
  • 代码重构。
  • 代码检查，快速修复。
  • 代码调试。
  • 代码结构快速浏览和定位。
  • 代码折叠。
  • 自动提示代码包裹或去除包裹。


官方地址链接：https://www.jetbrains.com/zh-cn/webstorm/?utm_source=baidu&utm_medium=cpc&utm_campaign=cn-bai-br-core-ex-pc&utm_content=brand-webstorm&utm_term=jetbrains%20webstorm


JetBrains WebStorm


4. Visual Studio Code

Vscode 是一款十分出色的 ide 开发工具，界面美观大方，功能强劲实用，软件支持中文，拥有丰富的插件，集成了所有一款现代编辑器所应该具备的特性，包括语法高亮(syntax high lighting)，可定制的热键绑定(customizable keyboard bindings)，括号匹配(bracket matching)以及代码片段收集(snippets)。支持 Windows，OS X 和 Linux 。内置 JavaScript、TypeScript 和 Node.js 支持。


优点：

  • 免费
  • 借助IntelliSense超越了语法突出显示和自动完成功能。
  • 直接从编辑器调试代码。
  • 内置 Git 命令。
  • 可扩展和可定制。
  • 以 Microsoft Azure 轻松部署和托管网站。


官方链接地址：https://code.visualstudio.com/#built-in-git


Snipaste_2020-07-07_12-11-56

5. Sencha Architect

Architect 在开发移动和桌面应用的工具中的定位是HTML5可视化应用开发。开发团队可以使用拖放功能来构建HTML5应用程序，因此您可以减少在手动编码上的时间，并且可以对应用程序代码进行优化以实现高性能。Architect 消除了键入大多数样板代码的需要，从而节省了开发人员的时间。自动代码生成可加速桌面和移动应用程序的开发。只需在 WYSIWYG 窗口中更改任何 Ext JS UI 组件的属性和配置，就可以消除手动编码时经常发生的人为错误。（注：根据自身需求选择版本）


优点：

  • 拖拽组件
  • 支持模型——视图——控制器模式。
  • 支持 Sencha Touch 和 Ext JS 4 构建移动和桌面 Web 应用。
  • 内置针对 IOS 与 Android 一键式原生打包功能。


官方地址链接：https://www.sencha.com/products/architect/


Sencha Architect

6. HTML5demos

想知道你的浏览器是否支持 HTML5 Canvas 吗？想知道 Safari 是否可以运行简单的 HTML5 聊天客户端吗？HTML5demos 会告诉你每一个HTML5特性在哪些浏览器中支持。


HTML5demos

7. HTML5 Tracker

想了解 HTML5的最新动向吗? 使用 HTML5 Tracker 吧，它可以跟踪 HTML5 最新修订信息。

HTML5 Tracker

8. HTML5 visual cheat sheet

想要快速超找一个标签或者属性吗？看看这个非常酷的速查手册吧，每个Web开发人员的必备。

非官方链接地址：https://download.csdn.net/download/vick1217/4414181

HTML5 visual cheat sheet

9. Switch To HTML5

Switch To HTML5 是一个基础而实用的模板生成工具。如果你开始一个新项目，可以到这里获取免费的 HTML5 网站模板。


Switch To HTML5


10. HTML5 Test

你浏览器准备好迎接 HTML5 革命了吗？HTML5 Test 将告诉你。这个网站会为你当前使用的浏览器生成一份对video、audio、canvas等等特性的支持情况的完整报告。


官方链接地址：http://html5test.com/


HTML5 Test


11. Lime JS

LimeJS 是一个 HTML5 游戏开发框架，用于为所有现代触摸屏和桌面浏览器构建快速的本机体验游戏。


官方链接地址：http://www.limejs.com/


Lime JS



HTML5因其跨平台性的特质已逐渐成为网络游戏开发的热门新技术。过去，flash多媒体应用可以用来构建线上游戏，也是小游戏的主流形态，但是随着HTML5的到来，改变了线上游戏的构建方法，用HTML5制作游戏相比flash更加灵活方便。你还记得水果忍者吗？尤其在iphone流畅的ios系统下运行起来非常能缓解压力，几乎每个上班族和手机控都装过这个游戏，现在已经将其改版成HTML5，并将其开源，下面就为大家奉上切水果和其他精选HTML5小游戏源码，enjoy！


1、切水果

自从iOS和Android兴起以来，水果忍者游戏一直是这两个平台上面相当热门的游戏，很多玩家都会在工作学习之余切切水果，打发时间。今天，HTML5网页版水果忍者游戏同样给大家带来了不同的感觉，赶紧来试试这款好玩的HTML5网页版水果忍者游戏吧。


切水果


2、中国象棋

棋类游戏在桌面游戏中已经非常成熟，中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色，我们不仅可以选择中国象棋的游戏难度，而且可以切换棋盘的样式。程序写累了，喝上一杯咖啡，和电脑对弈几把吧，相信这HTML5中国象棋游戏的实现算法你比较清楚，可以打开源码来研究一下这款HTML5中国象棋游戏。

中国象棋


3、奇葩版Flappy Bird,HTML5 Flappy Text游戏

前段时间Flappy Bird游戏那是相当的火，有无数年轻人为之疯狂，这里我们要分享一款奇葩版的Flappy Bird——HTML5 Flappy Text游戏，用若干个字母来代替bird，每触碰一个障碍，字母就会少一个。一起来玩玩吧。

Flappy Bird

4、吃豆人游戏

HTML5吃豆人游戏，画面上有一个吃豆人和一群怪物，你需要控制吃豆人移动吃掉路上的小豆子，一旦吃豆人遇到怪物被吃掉的时候，你就GAME OVER了。这款HTML5游戏还有一点没完善，就是吃豆人碰到怪物的时候不能被怪物吃掉，有兴趣的同学可以继续把它完善。HTML5游戏开发不仅需要技术，也需要创意。

吃豆人

5、太空战机游戏

这又是一款制作精良的HTML5游戏，该HTML5游戏的主角是一架英勇威武的太空战机，进入游戏后按”Z”键发射子弹，消灭敌机。该HTML5战机游戏的特点是：1、游戏画面非常华丽逼真，并且加入声音元素，让游戏更加迷人；2、游戏元素很多，敌机类型和发射子弹类型也很多，让玩家不会枯燥。

太空战机

6、超级玛丽游戏重体验

还记得小时候一起玩过的超级玛丽冒险游戏吗？是的，那是我们小时候很火的一款游戏，今天老外利用HTML5技术让超级玛丽可以在网页上跑了，HTML5版的超级玛丽虽然没有原版的功能强大，但是如果你有兴趣，完全可以把它写完善了。HTML5真的很强大，HTML5游戏方面更是犀利。

超级玛丽


7、城市消消乐

很不错的HTML5消除游戏，同样颜色的建筑相邻，可以将它们进行合成，建筑随之升级。必要的时候可以点击没有与之相邻的建筑物进行拆除。游戏结束后会有当前分数和历史最高分数，有预留的分享功能待开发，有需要的下手吧！

城市消消乐


8、打地鼠

游戏功能： 
1.帮助界面 
2.游戏预备开始 
3.5种不同地鼠的随机出现 
4.关卡设置，当然有计时条显示 
5.失败和通过关卡设置 
6.音效设置 该游戏兼容Chrome和FF（效果最不错），但IE有问题（声音也播不出）。。。

打地鼠


9、捕鱼达人

非常逼真的捕鱼达人网页游戏源码下载，基于HTML5和JS特效实现，游戏动画非常的炫，不卡顿，大家有时间的完全可以学习学习，HTML5做游戏跟客户端其实是各有各的优势，做到平衡就好。

捕鱼达人



怎么运行HTML 5游戏的源代码

HTML5游戏是通过html+javascript+css技术开发的游戏，属于网页游戏，可以运行在HTML5的网页浏览器中。

运行HTML5游戏，需要一个支持HTML5的网页浏览器，比如IE10或11，google的chrome浏览器，火狐firefox，百度浏览器，或者UC，QQ浏览器，猎豹浏览器。早期的IE9以前的版本是不行的。浏览器可以到百度搜索下载，然后安装。使用方法就是普通的上网。

下载的HTML5游戏文件解压后，文件夹中会有一个后缀为html的文件，应该是在根目录下。其他文件可能有js后缀，css后缀，或者图片，请保持相对位置不能动。

然后下面你就需要运行那个html文件了：

方法1：
你可以打开浏览器，将html文件拖拽到浏览器中。

方法2：
也可以在文件夹中选中html文件，点右键，在菜单选择“打开方式”，然后选择火狐或Chrome浏览器即可。

源代码


随着HTML5的火热发展，大家都在找精美的HTML5模板，且由于各种屏幕大小不一的移动设备的出现，Web开发者开始寻求跨设备的解决方案，于是响应式布局诞生了。响应式布局得益于最新的HTML5技术，会根据屏幕的大小来自动调整页面显示的内容，而无需为每种设备开发一个特定的版本。为了帮站长们节省时间，缩短开发进程，下面为大家提供响应式设计、扁平化设计风格的HTML5网站模板以供参考。


1、Legend 响应式单页面网站模板

Legend HTML5模板很漂亮，而且适合多用途网站，因为使用bootstrap框架搭建，所以支持bootstrap的插件，易于定制、扩展性灵活，是一个很不错的免费网站模板！

 Legend



2、Strongly Typed

Strongly Typed 是一个免费的响应式设计模板，使用HTML5/CSS3编写，包含基本的页面元素和页面。

Strongly Typed

 

3、Codester

Codester 这个HTML5模板使用了bootstrap构建，如果了解bootstrap的用户我想你一定会喜欢上它。

Codester



4、Euclid

Euclid是一个免费的响应HTML5模板完美的营销你的移动应用。利用Euclid开始移动应用展示网站，你可以把你的手机应用程序和提供有关您的应用程序的细节。

Euclid



5、zProgress

zprogress响应，HTML5，CSS3，网格系统模板（由zerotheme。COM zerogrid）。它是企业和企业类型模板。这是页面的网页，新闻网页，网页，接触页和产品页。

zProgress



6、Module

Module 是由w3layouts创建。由HTML5和CSS3组成的响应式模板。这是3的布局类型模板。

Module


7、Brushed Template

Brushed网站模板也是使用了Twitter Bootstrap框架搭建，并且对Retina显示屏优化 ( iPhone, iPad, iPod Touch and MacBook Pro Retina)，非常适合作品展示使用。

Brushed Template


8、Escape Velocity

Escape 是免费的响应式设计HTML5网站模板，并且使用了扁平化设计。

Escape Velocity



9、Parallelism

很明显这个Parallelism自适应网页模板适合相册、作品展示使用，还有一个强大之处就是网页图片的大小会自动适应，非常不错!

Parallelism



10、Dopetrope

Dopetrope使用了响应适+扁平化设计，整体风格简洁。





11、Escape Velocity

设计了一种新的具有平坦的（但不要太平）简约设计，宽敞的布局，和所有基本的网页元素的造型。功能演示图像真棒逃逸速度响应式HTML5模板的。

Escape Velocity



12、Overflow

上面这是Overflow的主页截图，单页网站模板的回应，AJ，对HTML5了。你可以看出这是一位不寻常的（它的灵感来自于一个流程图）。

Overflow

13、Miniport Template

Miniport是一个全屏的自适应的单页面网站模板，内容不多的用户可以选择这个模板。

Miniport Template


14、Obscura

这个适合用于个人博客主题，风格很不错。

Obscura



15、Liquid Gem

Liquid Gem是一个简约的响应性设计模板，另外还包含了works展示页和php联系我们页面。

Varna Template



16、Serendipity

Serendipity是一个简约的单页面模板，当然也是使用响应式设计了。适合于个人博客。

Varna Template



17、Varna Template

Varna 是一个免费的APP应用网站模板，这个风格用于搭建任何APP网站了。而且修改简单方便。

Varna Template



18、Striped

全屏式的响应式设计网站HTML模板：Striped，包含很多样式 (如：blockquotes, tables, lists, 等.)代码由 HTML5/CSS3 构建，容易算定义。

Striped



19、Mnml Lightweight Template

MNML是一个HMLT5/SCSS响应式网站模板。

Mnml Lightweight Template



20、Agency

Agency是一个简洁的HTML5响应式商业网站模板，并使用了 Twitter Bootstrap框架搭建。

Agency



21、Fashion Template

这个响应式设计的模板适用于时尚类、杂志类需求的用户或站长。

Fashion Template



22、Century

Century一个响应式网站模板，带有音频播放插件。

Century



23、Responsive Wedding

响应式设计的婚礼专用HTML5模板，喜庆模板。

Responsive Wedding



24、Mori

Mori为灰色风格的迷你HTML5模板，响应式设计，适合个人博客使用。

Mori


HTML5支持直接播放视频，而这背后涉及到复杂的视频格式之争，甚至还牵涉到所有的电子影像设备？在过去乃至现在，flash仍是网页上最好的解决视频的方法，诸如优酷、土豆之流的视频网站、还有像虾米那样的在线音乐网站，仍在使用flash提供播放服务。现在这种状况将会随着 HTML5 的发展而改变。HTML <video> 适用于HTML 5+，用于定义在线观看的视频流媒体。


HTML5 (视频)- 如何工作

如需在 HTML5 中显示视频，您所有需要的是：

实例

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

尝试一下 »

HTML video视频教程


在过去，音视频需要通过第三方插件来处理（这样引发的问题是：并不是所有操作系统或者设备都能使用）流览器与插件之间的通信被局限住了，而且多媒体就像一个黑盒子。HTML5出现之后，所有主流浏览器都可以支持本地音视频了（包括IE浏览器），虽然这个过程需要让您的媒体文件进行双份的编码（因为IE 和Safari只支持Royalty-encumbered标准的编码）。有了HTML5，突然之间，video可以跟CSS一起排样式了：您可以用半透 明的视频相互覆盖，设置边界与背景图片，旋转盘旋等变换，以及其他各种精彩的变形应用。


但是，有一个核心问题，却没有得到解决。HTML5没有规定，浏览器到底应该播放哪一种格式的视频。浏览器厂商可以自行选择支持的格式。


怎么让所有浏览器支持HTML5 video视频标签？

使用 HTML5 的video可以很方便的使用 JavaScript 对视频内容进行控制等等，功能十分强大，同时代码比较少加快加载速度。此外跨平台性比较好，特别是一些平板、手机等。例如苹果公司的产品不支持flash仅支持HTML5中的video功能。但是 HTML5 的兼容性问题是个硬伤，我们可以在网页中使用 video 来播放视频，但使用早期浏览器的访问者可能无法正常观看这个视频。此外，由于视频编码器的历史渊源导致各种浏览器支持的视频格式不同。应对这些问题，想在网页中使用 HTML5 video 功能，可以按照下面三个步骤操作。

1、提前准备好多格式视频文件

由于编码器的版权问题，导致不同浏览器对视频格式的兼容性不同。目前没有一个视频格式兼容所有浏览器，唯一的解决方法就是把视频转换成多种格式。


首先要准备一个 mp4 格式的视频，可以在苹果设备中使用；其次要准备 ogv 格式的视频，用在火狐浏览器中；最后要准备一下 webm 格式的视频，这个可以用在谷歌浏览器等。webm 是谷歌提出的，开源、免费，很有可能成为兼容所有浏览器的视频格式。


准备多格式浏览器的麻烦之处在于转换格式。视频转换工具国内的功能比较少，转换格式可能没有上面后两个，而且质量良莠不齐，往往需要注册才能使用。推荐一个国外的工具 Online converter ，在线免费视频转换工具。甚至不用安装软件，直接选择相应的目标格式，然后上传视频，配置一下参数就可以转换出来了。没有合适工具的朋友，可以尝试一下。


2、编写对应 HTML5 video 代码

HTML5 中的 video 实际上就是一个简单的标签，包含了一些视频相关信息等。下面直接给出具体代码，然后简单解释一下：


XML/HTML Code

<video width=”800” height=”374”>  
    <source src=”my_video.mp4” type=”video/mp4” />  
    <source src=”my_video.ogv” type=”video/ogg” />  
    <source src=”my_video.webm” type=”video/webm” />  
    你浏览器不支持 video 功能，点击这里下载视频： <a href=”video.webm”>下载视频</a>.   
</video>  

video 标签表示这里是一个视频，width、height 属性分别表示这个视频内容的宽高（单位像素）。video 标签中可以包含 source 标签，source 标签用来表示引用的视频和视频的格式、类型。为了保证向下的兼容性，我们还在 video 标签中加了一句提示，这句话在支持 video 标签的浏览器中是不会显示的，如果不支持就会显示出来。这里，还增加了一个视频的下载地址，如果浏览器不支持，可以让用户选择下载下来看。

特别需要注意一点，你的主机必须能正确的处理这事些视频请求。确保你的主机被请求这些视频的时候会在 Content-Type 头发送正确的 MIME 类型。如果你不清楚，可以咨询一下主机服务商，也可以自己添加。如果主机支持 .htaccess ，可以在 .htaccess 文件中增加下面语句：


代码如下:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm


大体就是这样，比较简单，更加具体的关于 video 的使用方法，可以搜索一下，在这里不再赘述。


3、为旧版浏览器做兼容

前面说过，如果浏览器不支持 video ，将会把 video 中的提示内容显示出来。那么对付老旧浏览器，我们可以用传统的 flash 来替换这个提示内容。这样，当浏览器不兼容 video 标签的时候，就会显示出 flash 版本的视频。例如：

XML/HTML Code


<video width=”800” height=”374”>  
    <source src=”my_video.mp4” type=”video/mp4” />  
    <source src=”my_video.ogv” type=”video/ogg” />  
<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">  
    <param name="movie" value="fallback.swf" />  
    <param name="flashvars" value="autostart=true&file=video.flv" />  
</object>  
</video>  


直接按照原来正常的 flash 引入方法写进 video 标签中即可。这样，我们就实现了跨浏览器兼容的 video 功能使用。


html5 video 试看怎么实现？

new个video，指定播放列表的第一个视频路径为src。监听end事件，回调里面把video的src改成列表的下一个，再play

代码示例：
var vList = ['视频地址url1', 'url2', '...']; // 初始化播放列表
var vLen = vList.length; // 播放列表的长度

var curr = 0; // 当前播放的视频
var video = new Video();
video.addEventListener('end', play);
play();

function play(e) {
   video.src = vList[curr];
   video.load(); // 如果短的话，可以加载完成之后再播放，监听 canplaythrough 事件即可
   video.play();

   curr++;
   if (curr >= vLen) curr = 0; // 播放完了，重新播放
   }

可以实现html5 播放多个视频。一个接一个的播放。

怎么实现 html5 video 视频暂停后加载指定的图片？

用户播放视频后，缓冲时间和用户点暂停后加载指定的图片必须带超链接功能怎么实现？

先用绝对定位创建一个广告图片的图层,监测video的暂停事件,将隐藏的广告图片显示出来出来就好了。

html5 video fullScreen全屏实现方式

fullScreen

在html5中，全屏方法可以适用于很多html元素，不仅仅是video

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>全屏问题</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}

body div.videobox{
width: 400px;
height: 320px;
margin: 100px auto;
background-color:#000;
}

body div.videobox video.video
{
width: 100%;
height: 100%;
}

:-webkit-full-screen {

}

:-moz-full-screen {

}

:-ms-fullscreen {

}

:-o-fullscreen {

}

:full-screen { 

}

:fullscreen {

}

:-webkit-full-screen video {
width: 100%;
height: 100%;
}
:-moz-full-screen video{
width: 100%;
height: 100%;
}
</style>
</head>
<body>


<div id="videobox">

<video controls="controls" preload="preload" id="video" poster="poster.jpg">
<source src="./movie.ogg" type="video/ogg" />
<source src="./movie.mp4" type="video/mp4" />
<source src="./movie.webm" type="video/webm" />
<object data="./movie.mp4" width="100%" height="100%">
<embed width="100%" height="100%" src="./movie.swf" />
</object>

</video>
<button id="fullScreenBtn">全屏</button>
</div>


<script type="text/javascript">

//反射調用
var invokeFieldOrMethod = function(element, method) 
{
var usablePrefixMethod;
["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
if (usablePrefixMethod) return;
if (prefix === "") {
// 无前缀，方法首字母小写
method = method.slice(0,1).toLowerCase() + method.slice(1); 
}
var typePrefixMethod = typeof element[prefix + method];
if (typePrefixMethod + "" !== "undefined") {
if (typePrefixMethod === "function") {
usablePrefixMethod = element[prefix + method]();
} else {
usablePrefixMethod = element[prefix + method];
}
}
});

return usablePrefixMethod;
};

//進入全屏
function launchFullscreen(element) 
{
//此方法不可以在異步任務中執行，否則火狐無法全屏
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen){ 
element.msRequestFullscreen(); 
} else if(element.oRequestFullscreen){
element.oRequestFullscreen();
}
else if(element.webkitRequestFullscreen)
{
element.webkitRequestFullScreen();
}else{

var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
var cssText = 'width:100%;height:100%;overflow:hidden;';
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
document.IsFullScreen = true;

}
}
//退出全屏
function exitFullscreen()
{
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.oRequestFullscreen){
document.oCancelFullScreen();
}else if (document.webkitExitFullscreen){
document.webkitExitFullscreen();
}else{
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
docHtml.style.cssText = "";
docBody.style.cssText = "";
videobox.style.cssText = "";
document.IsFullScreen = false;
}
}
document.getElementById('fullScreenBtn').addEventListener('click',function(){
launchFullscreen(document.getElementById('video')); 
window.setTimeout(function exit(){
//檢查瀏覽器是否處於全屏
if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen)
{
exitFullscreen();
}
},5*1000);
},false);

</script>
</body>

</html>

html5 video封面poster图片填充方法

html5的视频封面尺寸被强制缩小了，需要填充整个播放器的，应该怎么做？

图片填充


html5的video属性并没有支持处理poster的尺寸问题，有一个hacker的方法：The answer is actually quite simple. Instead of providing our poster image as a value to the poster attribute, we define it as a background image for our video element, and use the background-size property to tell the browser that the image is to cover the element in question:


将poster页面设置为一个透明的图片或者不存在的值，这样浏览器就会无法显示poster，然后通过设置播放器的css背景background，将我们需要的背景图放进去，并且填充背景，并且我们用background-size属性去告诉浏览器，这个播放器或者这个元素被这个图片覆盖。


video{
    width: 100%;
    height: 100%;
    background:transparent url('img/1.jpg') 50% 50% no-repeat;


    //下面就是background-size，每种浏览器都写一个配置
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}


详细代码：

< !DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        <style type="text/css">
        .video-container1{
            width: 400px;
            height: 400px;
            border: solid;
        }
        .video1{
            width: 100%;
            height: 100%;
        }
        .video-container2{
            width: 400px;
            height: 400px;
            border: solid;
        }
        .video2{
            width: 100%;
            height: 100%;
            background:transparent url('1.jpg') 50% 50% no-repeat;
            -webkit-background-size:cover;
            -moz-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
        }
        </style>
    </head>
    <body>
    <div class="video-container1">
        <video class="video1" src="oceans.mp4" poster="1.jpg" controls>

        </video>
    </div>
    <div class="video-container2">
        <video class="video2" src="oceans.mp4" poster="2.jpg" controls>

        </video>
    </div>
    </body>
</html>

HTML5 简介

HTML

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5简单易学。



什么是 HTML5?

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 受包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等国外主流浏览器的支持；国内的傲游浏览器（Maxthon）， 360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。

HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。。

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

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

  • 用于绘画的 canvas 元素

  • 用于媒介回放的 video 和 audio 元素

  • 对本地离线存储的更好的支持

  • 新的特殊内容元素，比如 article、footer、header、nav、section

  • 新的表单控件，比如 calendar、date、time、email、url、search

HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

<!DOCTYPE html>

最小的HTML5文档

下面是一个简单的HTML5文档：

<!DOCTYPE html>        <html>              <head>          <title>文档标题</title>            </head>           <body>            文档内容......         </body>                </html>

HTML5的改进

  • 新元素

  • 新属性

  • 完全支持 CSS3

  • Video 和 Audio

  • 2D/3D 制图

  • 本地存储

  • 本地 SQL 数据

  • Web 应用

HTML5 多媒体

使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。

HTML5 应用

使用 HTML5 你可以简单地开发应用

  • 本地数据存储

  • 访问本地文件

  • 本地 SQL 数据

  • 缓存引用

  • Javascript 工作者

  • XHTMLHttpRequest 2

HTML5 图形

使用 HTML5 你可以简单的绘制图形:

HTML5 使用 CSS3

  • 新选择器

  • 新属性

  • 动画

  • 2D/3D 转换

  • 圆角

  • 阴影效果

  • 可下载的字体

了解更多CSS3知识请查看本站的 CSS3 教程。

语义要素

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>规定在文本中的何处适合添加换行符。

HTML5 表单

新表单元素, 新属性，新输入类型，自动验证。

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>

每一章中的实例

通过我们的 HTML 编辑器，您能够编辑 HTML，然后点击按钮来查看结果。

实例

<!DOCTYPE HTML>
<html>
<body>

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

</body>
</html>

尝试一下 »

点击 "尝试一下" 按钮查看在线运行结果。

HTML5 - 新特性

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

  • 用于绘画的 canvas 元素

  • 用于媒介回放的 video 和 audio 元素

  • 对本地离线存储的更好的支持

  • 新的特殊内容元素，比如 article、footer、header、nav、section

  • 新的表单控件，比如 calendar、date、time、email、url、search

HTML5 浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。


IE9 以下版本浏览器兼容HTML5的方法，使用百度静态资源的html5shiv包：

<!--[if lt IE9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" rel="external nofollow" ></script><![endif]-->

载入后，初始化新标签的CSS：

/*html5*/article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

HTML5 参考手册

在本站中你可以找到关于HTML5 的标签及属性描述，详细请点击 HTML5参考手册。


HTML5 浏览器支持

目前市面上的浏览器有很多版本，你可以让一些较早的浏览器（不支持HTML5）支持 HTML5。

HTML5 浏览器支持

现代的浏览器都支持 HTML5。

此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。

正因为如此，你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。

Note甚至你可以教会 IE6  (Windows XP 2001) 浏览器处理未知的 HTML 元素。

将 HTML5 元素定义为块元素

HTML5 定了 8 个新的 HTML 语义（semantic）  元素。所有这些元素都是块级 元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

实例

header, section, footer, aside, nav, main, article, figure {
   display: block;
}

为 HTML 添加新元素

你可以为 HTML 添加新的元素。

该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <myHero> ：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  }
  </style>
</head>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

<myHero>我的第一个新元素</myHero>

</body>
</html>

尝试一下 »

JavaScript 语句 document.createElement("myHero") 是为了为 IE 浏览器添加新的元素。

Internet Explorer 浏览器问题

你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素，但是：

NoteInternet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" rel="external nofollow" ></script>
<![endif]-->

以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。

注意：国内用户请使用百度静态资源库（Google 资源库在国内不稳定）：

<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" rel="external nofollow" rel="external nofollow" ></script>
<![endif]-->

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

完美的 Shiv 解决方案

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Styling HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" rel="external nofollow" rel="external nofollow" ></script>
  <![endif]-->
</head>

<body>

<h1>我的第一篇文章</h1>

<article>
学技术，从W3Cschool开始！
</article>

</body>
</html>

尝试一下 »

html5shiv.js 引用代码必须放在  <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

关于HTML5的新元素，我们将会在“HTML 新元素”部分作出详细的介绍！

HTML5 新元素

随着HTML版本的更新迭代，有很多元素的使用也在不断的发生着变化，本节我们将介绍HTML5中的一些新的元素！

HTML5 新元素

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

<canvas> 新元素

标签 描述
<canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

标签 描述
<audio> 定义音频内容
<video> 定义视频（video 或者 movie）
<source> 定义多媒体资源 <video> 和 <audio>
<embed> 定义嵌入的内容，比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

新表单元素

标签 描述
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出，比如脚本的输出。

提示：你可以在本站的“HTML 表单”一节中查看完整的HTML使用的表单元素！


新的语义和结构元素

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> 规定在文本中的何处适合添加换行符。

已移除的元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

HTML5 Canvas

<canvas>元素是HTML5中的新元素，通过使用该元素，你可以在网页中绘制所需的图形。

标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

什么是 Canvas?

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

标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 元素.

注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 元素.

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。

<canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。

提示: 你可以在HTML页面中使用多个 <canvas> 元素.

使用 style 属性来添加边框:

实例

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

尝试一下 »


使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

实例

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script> 

尝试一下 »

实例解析:

首先，找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var ctx=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

坐标实例

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：

  • moveTo(x,y) 定义线条开始坐标

  • lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法，就像stroke().

实例

定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

尝试一下 »

在canvas中绘制圆形, 我们将使用以下方法:

  • arc(x,y,r,start,stop)

实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().

实例

使用 arc() 方法 绘制一个圆:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

尝试一下 »


Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

  • font - 定义字体

  • fillText(text,x,y) - 在 canvas 上绘制实心的文本

  • strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用 fillText():

实例

使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

尝试一下 »

使用 strokeText():

实例

使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

尝试一下 »


Canvas -  渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

  • createLinearGradient(x,y,x1,y1) - 创建线条渐变

  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

实例

创建一个线性渐变。使用渐变填充矩形:


JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

尝试一下 »

使用 createRadialGradient():

实例

创建一个径向/圆渐变。使用渐变填充矩形：


JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

尝试一下 »

提示：当使用<canvas>元素创建径向渐变的时候 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内的参数有如下的含义:

  •  x：表示渐变的开始圆的 x 坐标
  •  y：表示渐变的开始圆的 y 坐标
  •  r：表示开始圆的半径
  •  x1：表示渐变的结束圆的 x 坐标
  •  y1：表示渐变的结束圆的 y 坐标
  •  r1：表示结束圆的半径


Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

  • drawImage(image,x,y)

使用图像:

The Scream

实例

把一幅图像放置到画布上:


JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

尝试一下 »


HTML Canvas 参考手册

标签的完整属性可以参考Canvas 参考手册.

The HTML Tag

Tag描述
<canvas>HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

参考阅读

HTML DOM 参考手册：HTML DOM Canvas 对象


HTML5 内联 SVG

SVG表示可缩放矢量图形，是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式，它在2003年1月14日成为W3C推荐标准。

HTML5 支持内联 SVG。

什么是SVG？

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

  • SVG 用于定义用于网络的基于矢量的图形

  • SVG 使用 XML 格式定义图形

  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

  • SVG 是万维网联盟的标准

  • SVG 与 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG优势

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

  • SVG 图像可通过文本编辑器来创建和修改

  • SVG 图像可被搜索、索引、脚本化或压缩

  • SVG 是可伸缩的

  • SVG 图像可在任何的分辨率下被高质量地打印

  • SVG 可在图像质量不下降的情况下被放大

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持内联SVG。

把 SVG 直接嵌入 HTML 页面

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：

实例

<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>

尝试一下 »

学习更多关于 SVG 教程, 请访问 SVG 教程.

SVG 与 Canvas两者间的区别

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

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

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

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

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

Canvas 与 SVG 的比较

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

CanvasSVG

  • 依赖分辨率

  • 不支持事件处理器

  • 弱的文本渲染能力

  • 能够以 .png 或 .jpg 格式保存结果图像

  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

  • 不依赖分辨率

  • 支持事件处理器

  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）

  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

  • 不适合游戏应用

HTML5 MathML

MathML 与 HTML相似度很高，但是比较繁琐。它继承了角括号和双标签（<标签>内容</标签>）的用法。

HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

注意：大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可以使用最新版的 Firefox 或 Safari 浏览器查看。

MathML 实例

以下是一个简单的 MathML 实例： 

<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title>W3Cschool在线教程(51coolma.cn)</title>   </head>	   <body>	      <math xmlns="http://www.w3.org/1998/Math/MathML">		         <mrow>            <msup><mi>a</mi><mn>2</mn></msup>            <mo>+</mo>				            <msup><mi>b</mi><mn>2</mn></msup>            <mo>=</mo>				            <msup><mi>c</mi><mn>2</mn></msup>         </mrow>			      </math>		   </body>
</html>

尝试一下 »

运行结果图，如下所示：


以下实例添加了一些运算符： 

<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title>W3Cschool在线教程(51coolma.cn)</title>   </head>	   <body>	      <math xmlns="http://www.w3.org/1998/Math/MathML">		         <mrow>			            <mrow>				               <msup>                  <mi>x</mi>                  <mn>2</mn>               </msup>					               <mo>+</mo>					               <mrow>                  <mn>4</mn>                  <mo>⁢</mo>                  <mi>x</mi>               </mrow>					               <mo>+</mo>               <mn>4</mn>					            </mrow>				            <mo>=</mo>            <mn>0</mn>				          </mrow>      </math>		   </body></html>

尝试一下 »

运行结果图，如下所示：

1471599520581137

以下实例是一个 2×2 矩阵，可以在 Firefox 3.5 以上版本查看到效果： 

<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title>W3Cschool在线教程(51coolma.cn)</title>   </head>	   <body>      <math xmlns="http://www.w3.org/1998/Math/MathML">		         <mrow>            <mi>A</mi>            <mo>=</mo>			            <mfenced open="[" close="]">			               <mtable>                  <mtr>                     <mtd><mi>x</mi></mtd>                     <mtd><mi>y</mi></mtd>                  </mtr>					                  <mtr>                     <mtd><mi>z</mi></mtd>                     <mtd><mi>w</mi></mtd>                  </mtr>               </mtable>                           </mfenced>         </mrow>      </math>         </body></html>

尝试一下 »

运行结果图，如下所示：


HTML5 拖放（Drag 和 Drop）

拖放的目的是可以让你将某个对象放置到你想要放置的位置。

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

将51coolma图标拖动到矩形框中。

拖放

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

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

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。

注意:Safari 5.1.2不支持拖动.

HTML5 拖放实例

下面的例子是一个简单的拖放实例：

实例

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

尝试一下 »

它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。

设置元素为可拖放

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

<img draggable="true">

拖动什么 - ondragstart 和 setData()

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

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

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

function drag(ev)
{ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

提示：你可以在本站的“ondragstart 事件”部分了解到更多的有用信息！

放到何处 - ondragover

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

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

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

event.preventDefault()

进行放置 - ondrop

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

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

代码解释：

  • 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素（目标元素）中

Examples

更多实例

来回拖放图片
如何在两个 <div> 元素之间拖放图像。

相关文章

HTML DOM 参考手册：ondrop 事件

HTML5 Geolocation（地理定位）

HTML5 Geolocation（地理定位）用于定位用户的位置。

Geolocation 通过请求一个位置信息，用户同意后，浏览器会返回一个包含经度和维度的位置信息！

定位用户的位置

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

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

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）.

注意: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

HTML5 - 使用地理定位

请使用 getCurrentPosition() 方法来获得用户的位置。

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

实例

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
  }
</script>

尝试一下 »

实例解析:

  • 检测是否支持地理定位
  • 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
  • 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
  • showPosition() 函数获得并显示经度和纬度

上面的例子是一个非常基础的地理定位脚本，不含错误处理。

提示：geolocation的位置信息来源可以包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。

处理错误和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：

实例

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用户拒绝对获取地理位置的请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="请求用户地理位置超时。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知错误。"
      break;
    }
  }

尝试一下 »

错误代码：

  • Permission denied - 用户不允许地理定位
  • Position unavailable - 无法获取当前位置
  • Timeout - 操作超时

在地图中显示结果

如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：

实例

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

尝试一下 »

在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。

Google地图脚本
上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。

给定位置的信息

本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。

实例:

  • 更新本地信息
  • 显示用户周围的兴趣点
  • 交互式车载导航系统 (GPS)

getCurrentPosition() 方法 - 返回数据

T若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

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

Geolocation 对象 - 其他有趣的方法

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

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：

实例

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude +
  "<br>经度: " + position.coords.longitude;
  }
</script>

尝试一下 »

关于HTML5中地理定位的内容我们就介绍到这，在下一节的内容中，我们将学习有关HTML5视频的相关知识！

HTML5 Video(视频)

在本节内容中，你将了解到在HTML5中视频是如何工作的、主流浏览器支持的视频格式以及如何对网页中的视频进行控制。

很多站点都会使用到视频. HTML5 提供了展示视频的标准。

检测您的浏览器是否支持 HTML5 视频：


Web站点上的视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持该元素.

注意: Internet Explorer 8 或者更早的IE版本不支持 <video>  元素。

HTML5 (视频)- 如何工作

如需在 HTML5 中显示视频，您所有需要的是：

实例

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

尝试一下 »

<video> 元素提供了播放、暂停和音量控件来控制视频。

同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与 </video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <video>  元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

视频格式与浏览器的支持

当前，<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

浏览器 MP4 WebM Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES
  • MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

视频格式

格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML5 - 使用 DOM 进行控制

HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

<video> 和 <audio> 元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。

实例 1

为视频创建简单的播放/暂停以及调整尺寸控件：


   

上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。

尝试一下 »

HTML5 Video 标签

标签 描述
<video> 定义一个视频
<source> 定义多种媒体资源,比如<video> 和<audio>
<track> 定义在媒体播放器文本轨迹

相关文章

HTML DOM 参考手册：HTML DOM Video 对象


HTML5 Audio(音频)

HTML5 提供了播放音频文件的标准。

通过使用HTML5中的audio功能，你可以实现与flash相同的功能，即回放、跳转、缓冲等。

互联网上的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。

今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.

注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.

HTML5 Audio - 如何工作

如需在 HTML5 中播放音频，你需要使用以下代码：

实例

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

尝试一下 »

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

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

音频格式及浏览器支持

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

浏览器MP3WavOgg
Internet Explorer 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+NOYESYES
Safari 5+YESYESNO
Opera 10+NOYESYES

音频格式的MIME类型

FormatMIME-type
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav

HTML5 Audio 标签

标签描述
<audio>定义了声音内容
<source>规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用

相关文章

HTML DOM 参考手册：HTML DOM Audio 对象

HTML5 新的 Input 类型

在本站的HTML教程中，你应该已经了解过HTML表单输入类型了，而在本节的内容中，我们将介绍HTML5中新增的一些表单类型！

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

本章全面介绍这些新的输入类型：

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

Input 类型: color

color 类型用在input字段主要用于选取颜色，如下所示：

Opera Safari Chrome Firefox Internet Explorer

实例

从拾色器中选择一个颜色:

选择你喜欢的颜色: <input type="color" name="favcolor">

尝试一下 »

Input 类型: date

date 类型允许你从一个日期选择器选择一个日期。

Opera Safari Chrome Firefox Internet Explorer

实例

定义一个时间控制器:

生日: <input type="date" name="bday">

尝试一下 »

Input 类型: datetime

datetime 类型允许你选择一个日期（UTC 时间）。

OperaSafariChromeFirefoxInternet Explorer

实例

定义一个日期和时间控制器（本地时间）:

生日 (日期和时间): <input type="datetime" name="bdaytime">

尝试一下 »

Input 类型: datetime-local

datetime-local 类型允许你选择一个日期和时间 (无时区).

OperaSafariChromeFirefoxInternet Explorer

实例

定义一个日期和时间 (无时区):

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

尝试一下 »

Input 类型: email

email 类型用于应该包含 e-mail 地址的输入域。

OperaSafariChromeFirefoxInternet Explorer

实例

在提交表单时，会自动验证 email 域的值是否合法有效:

E-mail: <input type="email" name="email">

尝试一下 »

提示: iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。

Input 类型: month

month 类型允许你选择一个月份。

OperaSafariChromeFirefoxInternet Explorer

实例

定义月与年 (无时区):

生日 (月和年): <input type="month" name="bdaymonth">

尝试一下 »

Input 类型: number

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定：

OperaSafariChromeFirefoxInternet Explorer

实例

定义一个数值输入域(限定):

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

尝试一下 »

使用下面的属性来规定对数字类型的限定：

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

尝试一下带有所有限定属性的例子 尝试一下

Input 类型: range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

OperaSafariChromeFirefoxInternet Explorer

实例

定义一个不需要非常精确的数值（类似于滑块控制）:

<input type="range" name="points" min="1" max="10">

尝试一下 »

请使用下面的属性来规定对数字类型的限定：

  • max - 规定允许的最大值
  • min - 规定允许的最小值
  • step - 规定合法的数字间隔
  • value - 规定默认值

Input 类型: search

search 类型用于搜索域，比如站点搜索或 Google 搜索。

OperaSafariChromeFirefoxInternet Explorer

实例

定义一个搜索字段 (类似站点搜索或者Google搜索):

Search Google: <input type="search" name="googlesearch">

尝试一下 »

Input 类型: tel

OperaSafariChromeFirefoxInternet Explorer

实例

定义输入电话号码字段:

电话号码: <input type="tel" name="usrtel">

尝试一下 »

Input 类型: time

time 类型允许你选择一个时间。

OperaSafariChromeFirefoxInternet Explorer

实例

定义可输入时间控制器（无时区）：

选择时间: <input type="time" name="usr_time">

尝试一下 »

Input 类型: url

url 类型用于应该包含 URL 地址的输入域。

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

OperaSafariChromeFirefoxInternet Explorer

实例

定义输入URL字段:

添加您的主页: <input type="url" name="homepage">

尝试一下 »

提示: iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。

Input 类型: week

week 类型允许你选择周和年。

OperaSafariChromeFirefoxInternet Explorer

实例

定义周和年 (无时区):

选择周: <input type="week" name="week_year">

尝试一下 »

HTML5 <input> 标签

标签 描述
<input> 描述input输入器

扩展阅读

input杂谈：HTML5的Input类型

HTML5 表单元素

HTML5 新的表单元素

HTML5 有以下新的表单元素:

注意:不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。

HTML5 <datalist> 元素

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

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

OperaSafariChromeFirefoxInternet Explorer

实例

<input> 元素使用<datalist>预定义值:

<input list="browsers">

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

尝试一下 »

HTML5 <keygen> 元素

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

<keygen>标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

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

OperaSafariChromeFirefoxInternet Explorer

实例

带有keygen字段的表单:

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

尝试一下 »

HTML5 <output> 元素

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

OperaSafariChromeFirefoxInternet Explorer

实例

将计算结果显示在 <output> 元素:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

尝试一下 »

HTML5 新表单元素

标签 描述
<datalist> <input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> <keygen> 标签规定用于表单的密钥对生成器字段。
<output> <output> 标签定义不同类型的输出，比如脚本的输出。

你可以点击上述表格中的链接来学习更多与HTML5表单元素相关的知识点！

HTML5 表单属性

在之前的章节内容中，我们介绍了HTML5表单元素，进一步的，在本节内容中，你会了解到HTML5的表单属性。

HTML5 新的表单属性

HTML5 的 <form> 和 <input>标签添加了几个新属性.

<form>新属性：

  • autocomplete

  • novalidate

<input>新属性：

  • autocomplete

  • autofocus

  • form

  • formaction

  • formenctype

  • formmethod

  • formnovalidate

  • formtarget

  • height and width

  • list

  • min and max

  • multiple

  • pattern (regexp)

  • placeholder

  • required

  • step

<form> / <input> autocomplete 属性

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

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

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

OperaSafariChromeFirefoxInternet Explorer

实例

HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):

<form action="demo-form.php" 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>  

尝试一下 »

提示:某些浏览器中，您可能需要启用自动完成功能，以使该属性生效。

<form> novalidate 属性

novalidate 属性的一个boolean 属性.

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

OperaSafariChromeFirefoxInternet Explorer

实例

无需验证提交的表单数据

<form action="demo-form.php" novalidate>
 E-mail: <input type="email" name="user_email">
 <input type="submit">
</form>

尝试一下 »


<input> autofocus 属性

autofocus 属性是一个 boolean 属性.

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

OperaSafariChromeFirefoxInternet Explorer

实例

让 "First name" input 输入域在页面载入时自动聚焦：

First name:<input type="text" name="fname" autofocus>

尝试一下 »


<input> form 属性

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

提示:如需引用一个以上的表单，请使用空格分隔的列表。

OperaSafariChromeFirefoxInternet Explorer

实例

位于form表单外的input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):

<form action="demo-form.php" id="form1">
 First name: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

尝试一下 »


<input> formaction 属性

The formaction 属性用于描述表单提交的URL地址.

The formaction 属性会覆盖<form> 元素中的action属性.

注意: The formaction 属性用于 type="submit" 和 type="image".

OperaSafariChromeFirefoxInternet Explorer

实例

以下HTMLform表单包含了两个不同地址的提交按钮：

<form action="demo-form.php">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit" value="Submit"><br>
 <input type="submit" formaction="demo-admin.php"
  value="Submit as admin">
</form>

尝试一下 »


<input> formenctype 属性

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

formenctype 属性覆盖 form 元素的 enctype 属性。

注意: 该属性与 type="submit" 和 type="image" 配合使用。

OperaSafariChromeFirefoxInternet Explorer

实例

第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据:

<form action="demo-post_enctype.php" method="post">
 First name: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
 <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

尝试一下 »


<input> formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 <form> 元素的的method 属性。

注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

OperaSafariChromeFirefoxInternet Explorer

实例

重新定义表单提交方式实例:

<form action="demo-form.php" method="get">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit" value="Submit">
 <input type="submit" formmethod="post" formaction="demo-post.php"
  value="Submit using POST">
</form>

尝试一下 »


<input> formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 <input> 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

注意: formnovalidate 属性与type="submit"一起使用

OperaSafariChromeFirefoxInternet Explorer

实例

两个提交按钮的表单(使用与不适用验证 ):

<form action="demo-form.php">
 E-mail: <input type="email" name="userid"><br>
 <input type="submit" value="Submit"><br>
 <input type="submit" formnovalidate value="Submit without validation">
</form>  

尝试一下 »


<input> formtarget 属性

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

The formtarget 属性覆盖 <form>元素的target属性.

注意: formtarget 属性与type="submit" 和 type="image"配合使用.

OperaSafariChromeFirefoxInternet Explorer

实例

两个提交按钮的表单, 在不同窗口中显示:

<form action="demo-form.php">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

尝试一下 »


<input> height 和 width 属性

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

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

提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。

OperaSafariChromeFirefoxInternet Explorer

实例

定义了一个图像提交按钮, 使用了 height 和 width 属性:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

尝试一下 »


<input> list 属性

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

OperaSafariChromeFirefoxInternet Explorer

实例

在 <datalist>中预定义 <input> 值:

<input list="browsers">

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

尝试一下 »


<input> min 和 max 属性

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

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

OperaSafariChromeFirefoxInternet Explorer

实例

<input> 元素最小值与最大值设置:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

尝试一下 »


<input> multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定<input> 元素中可选择多个值。

注意: multiple 属性适用于以下类型的<input> 标签：email 和 file。: email, and file.

OperaSafariChromeFirefoxInternet Explorer

实例

上传多个文件:

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

尝试一下 »


<input> pattern 属性

pattern 属性描述了一个正则表达式用于验证<input> 元素的值。

注意:pattern 属性适用于以下类型的<input> 标签: text, search, url, tel, email, 和 password.

提示： 是用来全局 title 属性描述了模式.

提示： 您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容

OperaSafariChromeFirefoxInternet Explorer

实例

下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

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

尝试一下 »


<input> placeholder 属性

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

简短的提示在用户输入值前会显示在输入域上。

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

OperaSafariChromeFirefoxInternet Explorer

实例

input 字段提示文本t:

<input type="text" name="fname" placeholder="First name">

尝试一下 »


<input> required 属性

required 属性是一个 boolean 属性.

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

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

OperaSafariChromeFirefoxInternet Explorer

实例

不能为空的input字段:

Username: <input type="text" name="usrname" required>

尝试一下 »


<input> step 属性

step 属性为输入域规定合法的数字间隔。

如果 step="3"，则合法的数是 -3,0,3,6 等

提示： step 属性可以与 max 和 min 属性创建一个区域值.

注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

OperaSafariChromeFirefoxInternet Explorer

实例

规定input step步长为3:

<input type="number" name="points" step="3">

尝试一下 »


HTML5 <input> 标签

标签描述
<form>定义一个form表单
<input>定义一个 input 域

提示：你可以通过本站的编程实战部分来练习如何添加HTML表单！

HTML5 语义元素

语义= 意义.

语义元素 = 元素的意义.

什么是语义元素?

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。

注意: Internet Explorer 8及更早版本不支持该元素. 但是文章底部提供了兼容的解决方法.

HTML5中新的语义元素

许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.

HTML5提供了新的语义元素来明确一个Web页面的不同部分:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>











HTML5 <section> 元素

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

根据W3C HTML5文档: section 包含了一组内容及其标题。

实例

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

尝试一下 »

HTML5 <article> 元素

<article> 标签定义独立的内容。.

<article> 元素使用实例:

  • Forum post
  • Blog post
  • News story
  • Comment

实例

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

尝试一下 »

HTML5 <nav> 元素

<nav> 标签定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

实例

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

尝试一下 »

HTML5 <aside> 元素

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

aside 标签的内容应与主区域的内容相关.

实例

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

尝试一下 »

HTML5 <header> 元素

<header>元素描述了文档的头部区域

<header>元素注意用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

以下实例定义了文章的头部:

实例

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

尝试一下 »

HTML5 <footer> 元素

<footer> 元素描述了文档的底部区域.

<footer> 元素应该包含它的包含元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

文档中你可以使用多个 <footer>元素.

实例

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

尝试一下 »

HTML5 <figure> 和 <figcaption> 元素

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题.

<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

实例

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

尝试一下 »

我们可以开始使用这些语义元素吗?

以上的元素都是块元素(除了<figcaption>).

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

header, section, footer, aside, nav, article, figure
{
display: block;
}

Internet Explorer 8 及更早IE版本中的问题

IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.

解决办法:你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：http://code.google.com/p/html5shiv/

下载后，将以下代码放入的网页中：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head> 元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素。

注意：在上述内容中介绍的语义元素不会给页面内容造成任何视觉上的改变，它们只是提供HTML文档的结构，供计算机和开发者读取和阅读！

HTML5 Web 存储

在HTML5之前，主要是使用cookies存储，cookies的缺点有：需要在请求头上带着数据，存储大小不过，在4k之内。本节，

HTML5 web 存储，一个比cookie更好的本地存储方式。

什么是 HTML5 Web 存储?

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。

数据以键/值对存在, web网页的数据只允许该网页访问使用。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

注意: Internet Explorer 7 及更早IE版本不支持web 存储.

localStorage 和 sessionStorage 

客户端存储数据的两个对象为：

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

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
  {
  // 是的! 支持 localStorage sessionStorage 对象!
  // 一些代码.....
  }
else
  {
  // 抱歉! 不支持 web 存储。
  }

localStorage 对象

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

实例

localStorage.sitename="W3Cschool在线教程";
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;

尝试一下 »

实例解析：

  • 使用 key="sitename" 和 value="W3Cschool在线教程" 创建一个 localStorage 键/值对。
  • 检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。

以上实例也可以这么写：

// 存储localStorage.sitename = "W3Cschool在线教程";// 查找document.getElementById("result").innerHTML = localStorage.sitename;
移除 localStorage 中的 "lastname" :

localStorage.removeItem("lastname");
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

下面的实例展示了用户点击按钮的次数。

代码中的字符串值转换为数字类型:

实例

if (localStorage.clickcount)
{
  localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
  localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";

尝试一下 »

sessionStorage 对象

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

如何创建并访问一个 sessionStorage：:

实例

if (sessionStorage.clickcount)
  {
  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
  }
else
  {
  sessionStorage.clickcount=1;
  }
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

尝试一下 »

相关阅读

HTML5 最佳实践：使用web storage代替cookie

HTML5 Web SQL 数据库

Web SQL 是在浏览器上模拟数据库，可以使用 JS 来操作 SQL 完成对数据的读写。

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。

你也可以参考我们的 SQL 教程，了解更多数据库操作知识。

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

核心方法

以下是规范中定义的三个核心方法：

  1. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
  2. transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
  3. executeSql：这个方法用于执行实际的 SQL 查询。

打开数据库

我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase() 方法对应的五个参数说明：

  1. 数据库名称
  2. 版本号
  3. 描述文本
  4. 数据库大小
  5. 创建回调

第五个参数，创建回调会在创建数据库后被调用。

执行查询操作

执行操作使用 database.transaction() 函数：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {     tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');});

上面的语句执行后会在 'mydb' 数据库中创建一个名为 LOGS 的表。

插入数据

在执行上面的创建表语句后，我们可以插入一些数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "W3Cschool教程")');   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.51coolma.cn")');});

我们也可以使用动态值来插入数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);});

实例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"。

读取数据

以下实例演示了如何读取数据库中已经存在的数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "W3Cschool教程")');   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.51coolma.cn")');});db.transaction(function (tx) {   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {      var len = results.rows.length, i;      msg = "
查询记录条数: " + len + "
";      document.querySelector('#status').innerHTML +=  msg;	      for (i = 0; i < len; i++){         alert(results.rows.item(i).log );      }	   }, null);});

完整实例

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);var msg;
db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "W3Cschool教程")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.51coolma.cn")');
            msg = '<p>数据表已创建，且插入了两条数据。</p>';
            document.querySelector('#status').innerHTML =  msg;
         });
			
db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
               var len = results.rows.length, i;
               msg = "<p>查询记录条数: " + len + "</p>";
               document.querySelector('#status').innerHTML +=  msg;
               for (i = 0; i < len; i++){
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                  document.querySelector('#status').innerHTML +=  msg;
               }
            }, null);
         });

尝试一下 »

以上实例运行结果如下图所示：



删除记录

删除记录使用的格式如下：

db.transaction(function (tx) {    tx.executeSql('DELETE FROM LOGS  WHERE id=1');});

删除指定的数据 id 也可以是动态的：

db.transaction(function(tx) {    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);});

更新记录

更新记录使用的格式如下：

db.transaction(function (tx) {    tx.executeSql('UPDATE LOGS SET log='www.51coolma.cn' WHERE id=2');});

更新指定的数据 id 也可以是动态的：

db.transaction(function(tx) {    tx.executeSql('UPDATE LOGS SET log='www.51coolma.cn' WHERE id=?', [id]);});

完整实例 

<!DOCTYPE HTML><html>   <head>      <meta charset="UTF-8">        <script type="text/javascript">               var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);         var msg;                  db.transaction(function (tx) {            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "W3Cschool教程")');            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.51coolma.cn")');            msg = '<p>数据表已创建，且插入了两条数据。</p>';            document.querySelector('#status').innerHTML =  msg;         });         db.transaction(function (tx) {              tx.executeSql('DELETE FROM LOGS  WHERE id=1');              msg = '<p>删除 id 为 1 的记录。</p>';              document.querySelector('#status').innerHTML =  msg;         });         db.transaction(function (tx) {             tx.executeSql('UPDATE LOGS SET log='www.51coolma.cn' WHERE id=2');              msg = '<p>更新 id 为 2 的记录。</p>';              document.querySelector('#status').innerHTML =  msg;         });         db.transaction(function (tx) {            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {               var len = results.rows.length, i;               msg = "<p>查询记录条数: " + len + "</p>";               document.querySelector('#status').innerHTML +=  msg;                              for (i = 0; i < len; i++){                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";                  document.querySelector('#status').innerHTML +=  msg;               }            }, null);         });               </script>         </head>      <body>      <div id="status" name="status">状态信息</div>   </body>   </html>

尝试一下 »

以上实例运行结果如下图所示：


好了，学习完本节内容，你应该会对 HTML5 的 Web SQL 有不少的好感的，毕竟它拥有较大的存储空间（支持自定义），存储结构自由，并且你可以方便地使用 SQL 来进行读写！


HTML5 应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。这意味着，你可以在没有网络连接的情况下进行访问。

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

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

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

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

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 支持应用程序缓存.

HTML5 Cache Manifest 实例

下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：

实例

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

尝试一下 »

Cache Manifest 基础

如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

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

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

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

Manifest 文件

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

manifest 文件可分为三个部分：

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

CACHE MANIFEST

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

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

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

NETWORK

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

NETWORK:
login.php

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

NETWORK:
*

FALLBACK

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

FALLBACK:
/html/ /offline.html

注意: 第一个 URI 是资源，第二个是替补。

更新缓存

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

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

实例 - 完整的 Manifest 文件

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

FALLBACK:
/html/ /offline.html

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

关于应用程序缓存的说明

请留心缓存的内容。

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。

注意: 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

相关教程

CSS教程

HTML5 Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能，更好的解释是，你可以使用web worker提供的一种简单的方法来为web内容在后台线程中运行脚本，这些线程在执行任务的过程中并不会干扰用户界面！

什么是 Web Worker？

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

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

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 都支持Web workers.

HTML5 Web Workers 实例

下面的例子创建了一个简单的 web worker，在后台计数：

实例

计数: 307



尝试一下 »

demo_workers.js 文件代码：

var i=0;

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

timedCount();

检测浏览器是否支持 Web Worker

在创建 web worker 之前，请检测用户的浏览器是否支持它：

if(typeof(Worker)!=="undefined")
  {
  // 是的! Web worker 支持!
  // 一些代码.....
  }
else
  {
  // //抱歉! Web Worker 不支持
  }
提示：

这步的检测非常重要！你必须先检测才能保证接下来可以顺利操作 web worker！



创建 web worker 文件

现在，让我们在一个外部 JavaScript 中创建我们的 web worker。

在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：

var i=0;

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

timedCount();

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

注意: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。/p>

下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：/p>

if(typeof(w)=="undefined")
  {
  w=new Worker("demo_workers.js");
  }

然后我们就可以从 web worker 发送和接收消息了。

向 web worker 添加一个 "onmessage" 事件监听器：

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

<p当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

终止 Web Worker

当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：

实例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

尝试一下 »

Web Workers 和 DOM

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

相关教程

javascript教程

HTML5 服务器发送事件(Server-Sent Events)

服务器发送事件（Server-sent Events）是基于 WebSocket 协议的一种服务器向客户端发送事件和数据的单向通讯。

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

Server-Sent 事件 - 单向消息传递

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

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知：

实例

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "<br>";
  };

尝试一下 »

实例解析：

  • 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）

  • 每接收到一次更新，就会发生 onmessage 事件

  • 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

检测 Server-Sent 事件支持

以下实例，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况：

if(typeof(EventSource)!=="undefined")
  {
  // 浏览器支持 Server-Sent
  // 一些代码.....
  }
else
  {
  // 浏览器不支持 Server-Sent..
  }

服务器端代码实例

为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。

服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。

<pPHP 代码 (demo_sse.php)：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>

ASP 代码 (VB) (demo_sse.asp):

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

代码解释:

  • 把报头 "Content-Type" 设置为 "text/event-stream"

  • 规定不对页面进行缓存

  • 输出发送日期（始终以 "data: " 开头）

  • 向网页刷新输出数据

EventSource 对象

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

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

在本节的开头我们介绍过服务器发送事件（Server-sent Events）是基于 WebSocket 协议的，那么在本教程的下节内容中，我们将继续向你介绍 HTML WebSocket！

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocal] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

WebSocket 属性

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：

属性描述
Socket.readyState

只读属性 readyState 表示连接状态，可以是以下值：

  • 0 - 表示连接尚未建立。

  • 1 - 表示连接已建立，可以进行通信。

  • 2 - 表示连接正在进行关闭。

  • 3 - 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

事件事件处理程序描述
openSocket.onopen连接建立时触发
messageSocket.onmessage客户端接收服务端数据时触发
errorSocket.onerror通信发生错误时触发
closeSocket.onclose连接关闭时触发

WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：

方法描述
Socket.send()

使用连接发送数据

Socket.close()

关闭连接

WebSocket 实例

WebSocket 协议本质上是一个基于 TCP 的协议。

为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

客户端的 HTML 和 JavaScript

目前大部分浏览器支持 WebSocket() 接口，你可以在以下浏览器中尝试实例： Chrome, Mozilla, Opera 和 Safari。

51coolma_websocket.html 文件内容

<!DOCTYPE HTML><html>   <head>   <meta charset="utf-8">   <title>W3Cschool教程(51coolma.cn)</title>	      <script type="text/javascript">         function WebSocketTest()         {            if ("WebSocket" in window)            {               alert("您的浏览器支持 WebSocket!");                              // 打开一个 web socket               var ws = new WebSocket("ws://localhost:9998/echo");				               ws.onopen = function()               {                  // Web Socket 已连接上，使用 send() 方法发送数据                  ws.send("发送数据");                  alert("数据发送中...");               };				               ws.onmessage = function (evt)                {                   var received_msg = evt.data;                  alert("数据已接收...");               };				               ws.onclose = function()               {                   // 关闭 websocket                  alert("连接已关闭...");                };            }                        else            {               // 浏览器不支持 WebSocket               alert("您的浏览器不支持 WebSocket!");            }         }      </script>		   </head>   <body>         <div id="sse">         <a href="javascript:WebSocketTest()">运行 WebSocket</a>      </div>         </body></html>

安装 pywebsocket

在执行以上程序前，我们需要创建一个支持 WebSocket 的服务。从 pywebsocket 下载 mod_pywebsocket ,或者使用 git 命令下载：

git clone https://github.com/google/pywebsocket.git

mod_pywebsocket 需要 python 环境支持

mod_pywebsocket 是一个 Apache HTTP 的 Web Socket扩展，安装步骤如下：

  • 解压下载的文件。

  • 进入 pywebsocket 目录。

  • 执行命令：

    $ python setup.py build$ sudo python setup.py install

  • 查看文档说明:

    $ pydoc mod_pywebsocket

开启服务

在 pywebsocket/mod_pywebsocket 目录下执行以下命令：

$ sudo python standalone.py -p 9998 -w ../example/

以上命令会开启一个端口号为 9998 的服务，使用 -w 来设置处理程序 echo_wsh.py 所在的目录。

现在我们可以在 Chrome 浏览器打开前面创建的 51coolma_websocket.html 文件。如果你的浏览器支持 WebSocket(), 点击"运行 WebSocket"，你就可以看到整个流程各个步骤弹出的窗口，流程 Gif 演示：


在我们停止服务后，会弹出 "连接已关闭..."。

总之，使用WebSocket技术，后台可以随时向前端推送消息，以此保证前后台状态统一，这在传统的无状态HTTP协议中无法做到。


HTML5 代码规范

在使用HTML5的过程中，使用规范化的代码能够更加方便你的运用与阅读，本节我们将带领你了解如何能够使得HTML5中的代码变得更加规范！

HTML 代码约定

很多 Web 开发人员对 HTML 的代码规范知之甚少。

在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。

使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。

而针对于 HTML5 ，我们应该形成比较好的代码规范，以下提供了几种规范的建议。

使用正确的文档类型

文档类型声明位于HTML文档的第一行：

<!DOCTYPE html>

如果你想跟其他标签一样使用小写，可以使用以下代码：

<!doctype html>

使用小写元素名

HTML5 元素名可以使用大写和小写字母。

推荐使用小写字母：

  • 混合了大小写的风格是非常糟糕的。
  • 开发人员通常使用小写 (类似 XHTML)。
  • 小写风格看起来更加清爽。
  • 小写字母容易编写。

不推荐:

<SECTION>
  <p>这是一个段落。</p>
</SECTION>

非常糟糕:

<Section>
  <p>这是一个段落。</p>
</SECTION>

推荐:

<section>
  <p>这是一个段落。</p>
</section>

关闭所有 HTML 元素

在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素)，但我们建议每个元素都要添加关闭标签。

不推荐:

<section>
  <p>这是一个段落。
  <p>这是一个段落。
</section>

推荐:

<section>
  <p>这是一个段落。</p>
  <p>这是一个段落。</p>
</section>

关闭空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也不一定要关闭：

我们可以这么写：

<meta charset="utf-8">

也可以这么写：

<meta charset="utf-8" />

在 XHTML 和 XML 中斜线 (/) 是必须的。

如果你期望 XML 软件使用你的页面，使用这种风格是非常好的。

使用小写属性名

HTML5 属性名允许使用大写和小写字母。

我们推荐使用小写字母属性名:

  • 同时使用大写写是非常不好的习惯。
  • 开发人员通常使用小写 (类似 XHTML)。
  • 小写风格看起来更加清爽。
  • 小写字母容易编写。

不推荐：

<div CLASS="menu">

推荐：

<div class="menu">

属性值

HTML5 属性值可以不用引号。

属性值我们推荐使用引号:

  • 如果属性值含有空格需要使用引号。
  • 混合风格不推荐的，建议统一风格。
  • 属性值使用引号易于阅读。

以下实例属性值包含空格，没有使用引号，所以不能起作用：

<table class=table striped>

以下使用了双引号，是正确的：

<table class="table striped">

图片属性

图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

空格和等号

等号前后可以使用空格。

<link rel = "stylesheet" href = "styles.css">

但我们推荐少用空格:

<link rel="stylesheet" href="styles.css">

避免一行代码过长

使用 HTML 编辑器，左右滚动代码是不方便的。

每行代码尽量少于 80 个字符。

空行和缩进

不要无缘无故添加空行。

为每个逻辑功能块添加空行，这样更易于阅读。

缩进使用两个空格，不建议使用 TAB。

比较短的代码间不要使用不必要的空行和缩进。

不必要的空行和缩进:

<body>

  <h1>W3Cschool教程</h1>

  <h2>HTML</h2>

  <p>
    学技术，从W3Cschool开始。
    学技术，从W3Cschool开始。
   学技术，从W3Cschool开始。
    学技术，从W3Cschool开始。
  </p>

</body>

推荐:

<body>

<h1>W3Cschool教程</h1>

<h2></h2>
<p>学技术，从W3Cschool开始。
学技术，从W3Cschool开始。
学技术，从W3Cschool开始。
学技术，从W3Cschool开始。</p>

</body>

表格实例:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

列表实例:

<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

省略 <html> 和 <body>?

在标准 HTML5 中， <html> 和 <body> 标签是可以省略的。

以下 HTML5 文档是正确的:

实例:

<!DOCTYPE html>
<head>
  <title>页面标题</title>
</head>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

尝试一下 »

不推荐省略 <html> 和 <body> 标签。

<html> 元素是文档的根元素，用于描述页面的语言：

<!DOCTYPE html>
<html lang="zh">

声明语言是为了方便屏幕阅读器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃。

省略 <body> 在旧版浏览器 (IE9)会发生错误。

省略 <head>?

在标准 HTML5 中， <head>标签是可以省略的。

默认情况下，浏览器会将 <body> 之前的内容添加到一个默认的 <head> 元素上。

实例

<!DOCTYPE html>
<html>
<title>页面标题</title>

<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
</body>

</html>

尝试一下 »
Note现在省略 head 标签还不推荐使用。

元数据

HTML5 中 <title> 元素是必须的，标题名描述了页面的主题:

<title>W3Cschool教程</title>

标题和语言可以让搜索引擎很快了解你页面的主题:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>W3Cschool教程</title>
</head>

HTML 注释

注释可以写在 <!-- 和 --> 中:

<!-- 这是注释 -->

比较长的评论可以在 <!-- 和 --> 中分行写：

<!--
  这是一个较长评论。 这是 一个较长评论。这是一个较长评论。
  这是 一个较长评论 这是一个较长评论。 这是 一个较长评论。
-->

长评论第一个字符缩进两个空格，更易于阅读。

样式表

样式表使用简洁的语法格式 ( type 属性不是必须的):

<link rel="stylesheet" href="styles.css">

短的规则可以写成一行:

p.into {font-family: Verdana; font-size: 16em;}

长的规则可以写成多行:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • 将左花括号与选择器放在同一行。
  • 左花括号与选择器间添加以空格。
  • 使用两个空格来缩进。
  • 冒号与属性值之间添加已空格。
  • 逗号和符号之后使用一个空格。
  • 每个属性与值结尾都要使用符号。
  • 只有属性值包含空格时才使用引号。
  • 右花括号放在新的一行。
  • 每行最多 80 个字符。
Note在逗号和分号后添加空格是常用的一个规则。

在 HTML 中载入 JavaScript

使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):

<script src="myscript.js">

使用 JavaScript 访问 HTML 元素

一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

以下两个 JavaScript 语句会输出不同结果:

实例

var obj =getElementById("Demo")

var obj = getElementById("demo")

尝试一下 »

HTML 中 JavaScript 尽量使用相同的命名规则。

访问 JavaScript 代码规范。

使用小写文件名

大多 Web 服务器 (Apache, Unix) 对大小写敏感：london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感：london.jpg 可以通过 London.jpg 或 london.jpg 访问。

你必须保持统一的风格，我们建议统一使用小写的文件名。

文件扩展名

HTML 文件后缀可以是 .html (或r .htm)。

CSS 文件后缀是 .css 。

JavaScript 文件后缀是 .js 。

.htm 和 .html 的区别

.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。

区别在于：

.htm 应用在早期 DOS 系统，系统现在后缀只能有三个字符。

在 Unix 系统中后缀没有特别限制，一般用 .html。

技术上区别

如果一个 URL 没有指定文件名 (如 //www.51coolma.cn/css/), 服务器会返回默认的文件名。通常默认文件名为 index.html, index.htm, default.html, 和 default.htm。

如果服务器只配置了 "index.html" 作为默认文件，你必须将文件命名为 "index.html", 而不是 "index.htm"。

但是，通常服务器可以设置多个默认文件，你可以根据需要设置默认文件吗。

不管怎样，HTML 完整的后缀是 ".html"。

学完本教程之后，W3Cschool建议您进行HTML5实战练习来巩固您刚学到的新知识。

在接下来的章节中，我们将详细介绍HTML5中要使用的一些标签以及它们的用法，一起来学习吧！

很多初学 HTML5 的朋友们都在寻找一本叫《 HTML5 从入门到精通》的书，《 HTML5 从入门到精通》系统、全面地讲解了 HTML 语言及其最新版本 HTML5 的新功能与新特性，技术新颖实用。书中所有知识点均结合实例进行讲解，方便读者动手实践。同时在每章的最后还设置了习题，通过这些习题可以对本章学到的知识进行巩固。《 HTML5 从入门到精通》不仅能够使读者系统而全面地学习理论知识，还能满足读者充分实践的需求。


HTML 5


目 录

第1章 HTML 基础 ------ 3
教学录像：22分钟
1.1 HTML 的基本概念  ------ 4
1.2 HTML 发展史 ------ 4
1.3 HTML 的基本结构 ------ 5
1.3.1 HTML 文件的编写方法 ------ 5
1.3.2 文件开始标签 <html> -------  7
1.3.3 文件头部标签 <head> ------- 7
1.3.4 文件标题标签 <title> ------ 7
1.3.5 文件主体标签 <body> ------ 7
1.3.6 编写文件的注意事项 ------ 8
1.4 编写第一个 HTML 文件  ------  8
1.4.1 HTML 文件的编写方法 ------ 8
1.4.2 手工编写页面 ------ 9
1.4.3 使用可视化软件制作页面 ------ 10
1.4.4 使用浏览器浏览 HTML 文件 ------ 14
1.4.5 使用 HTML 开发的明日图书网 ------ 14
1.5 小结 ------ 15
1.6 习题 ------ 16
第2章 HTML 文件基本标记 ------ 17
2.1 HTML 头部标记 ------ 18
2.2 标题标记 <title> ------ 18
2.3 元信息标记 <meta> ------ 19
2.3.1 设置页面关键字 ------ 19
2.3.2 设置页面描述 ------ 20
2.3.3 设置编辑工具 ------ 20
2.3.4 设定作者信息 ------ 21
2.3.5 限制搜索方式 ------ 22
2.3.6 设置网页文字及语言 ------ 22
2.3.7 设置网页的定时跳转 ------ 23
2.3.8 设定有效期限 ------ 24
2.3.9 禁止从缓存中调用 ------ 24
2.3.10 删除过期的 cookie ------ 25
2.3.11 强制打开新窗口 ------ 25
2.3.12 设置网页的过渡效果 ------ 26
2.4 基底网址标记 <base> ------ 29
2.5 页面的主体标记 <body> ------ 30
2.5.1 设置文字颜色 —— text ------31
2.5.2 背景颜色属性 —— bgcolor ------ 32
2.5.3 背景图像属性 —— background ------ 32
2.5.4 设置链接文字属性 —— link ------ 35
2.5.5 设置边距 —— margin ------ 37
2.6 页面的注释标记 ------ 38
2.7 实例演练——创建基本的 HTML 网页 ------ 38
2.8 小结 ------ 39
2.9 习题 ------ 40
第3章 设计网页文本内容 ------ 41
教学录像：29分钟
3.1 标题文字的建立 ------ 42
3.1.1 标题文字标记 <h> ------ 42
3.1.2 标题文字的对齐方式——align ------ 43
3.2 设置文字格式 ------ 44
3.2.1 设置文字字体 —— face ------ 44
3.2.2 设置字号 —— size ------ 45
3.2.3 设置文字颜色 —— color ------ 46
3.2.4 粗体、斜体、下划线 —— strong、em、u ------ 46
3.2.5 上标与下标 —— sup、sub ------ 47
3.2.6 设置删除线 —— strike ------ 48
3.2.7 等宽文字标记 —— code ------ 49
3.2.8 空格 ——   ------ 49
3.2.9 其他特殊符号 ------ 50
3.3 设置段落格式 ------ 51
3.3.1 段落标记 —— p ------ 51
3.3.2 取消文字换行标记 —— nobr ------ 52
3.3.3 换行标记 —— br ------ 53
3.3.4 保留原始排版方式标记 —— pre ------ 53
3.3.5 居中对齐标记 —— center ------ 54
3.3.6 向右缩进标记 —— blockquote ------ 55
3.4 水平线标记 ------ 56
3.4.1 添加水平线 —— hr ------ 56
3.4.2 设置水平线的宽度与高度 —— width、height ------ 57
3.4.3 设置水平线的颜色 —— color ------ 58
3.4.4 设置水平线的对齐方式 —— align ------ 59
3.4.5 去掉水平线阴影 —— noshade ------ 60
3.5 其他文字标记 ------- 60
3.5.1 文字标注标记 —— ruby ------ 60
3.5.2 声明变量标记 —— var ------ 61
3.5.3 忽视 HTML 标记 —— plaintext、xmp ------ 62


如今，HTML5发展飞速，被看做是web开发者创建流行web应用的利器。用HTML5开发的优势主要是这个技术可以进行跨平台进行使用。例如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。而且随着各大浏览器对HTML5技术支持的不断完善以及 HTML5技术的不断成熟，未来 HTML5必将改变我们创建Web应用程序的方式。下面就向大家推荐多款优秀的HTML5开发工具，帮助你更高效的编写HTML5应用。


以下仅列出使用人群基数大、知名度高、易于查找和使用的开发工具。

1. Adobe Dreamweaver 

Dreamweaver 是世界顶级软件厂商 Adobe 推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。Dreamweaver 是集网页制作和管理网站于一身的所见即所得的网页代码编辑器，借助其经过简化的智能编码引擎，视觉辅助功能减少错误并提高网站开发速度，轻松创建、编码和管理动态网站。还能够通过访问代码提示，快速了解 HTML 、CSS 以及其他 Web 标准。（注：根据自身需求选择版本）


优点：                                                     

  • 制作效率。                                
  • 操控能力强。                  
  • 网站管理迅速简单。
  • 全面的 CSS 支持。
  • 学习资源多，如 DW 社区。

缺点：

  • 效果难以精确达到与浏览器一致的显示效果。
  • 不便监控生成干净准确的 HTML 代码。


官网地址链接：https://www.adobe.com/cn/products/dreamweaver.html


Adobe Dreamweaver CS6


2. DevExtreme

DevExtreme 是高性能的HTML5,CSS和Java移动开发框架，可以直接在Visual Studio集成开发环境，构建移动应用程序。从 Angular 和 React 到 ASP.NET MVC 或 Vue ，DevExtreme 包括一系列高性能和响应式 UI 小部件，用于传统的Web和下一代移动应用程序。目前，DevExtreme V19.1.6 全新发布，是Visual Studio开发人员开发跨平台移动产品的首选工具。（注：根据自身需求选择版本）


官方地址链接：https://js.devexpress.com/


DevExtreme


3. JetBrains WebStorm

WebStorm 是 jetbrains 公司旗下一款 JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaS IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

（注：根据自身需求选择版本）


优点：

  • 智能的代码补全，支持不同浏览器的提示。
  • 代码格式化，规则自定义。
  • HTML 智能提示。
  • 联想查询，查找高亮。
  • 代码重构。
  • 代码检查，快速修复。
  • 代码调试。
  • 代码结构快速浏览和定位。
  • 代码折叠。
  • 自动提示代码包裹或去除包裹。


官方地址链接：https://www.jetbrains.com/zh-cn/webstorm/?utm_source=baidu&utm_medium=cpc&utm_campaign=cn-bai-br-core-ex-pc&utm_content=brand-webstorm&utm_term=jetbrains%20webstorm


JetBrains WebStorm


4. Visual Studio Code

Vscode 是一款十分出色的 ide 开发工具，界面美观大方，功能强劲实用，软件支持中文，拥有丰富的插件，集成了所有一款现代编辑器所应该具备的特性，包括语法高亮(syntax high lighting)，可定制的热键绑定(customizable keyboard bindings)，括号匹配(bracket matching)以及代码片段收集(snippets)。支持 Windows，OS X 和 Linux 。内置 JavaScript、TypeScript 和 Node.js 支持。


优点：

  • 免费
  • 借助IntelliSense超越了语法突出显示和自动完成功能。
  • 直接从编辑器调试代码。
  • 内置 Git 命令。
  • 可扩展和可定制。
  • 以 Microsoft Azure 轻松部署和托管网站。


官方链接地址：https://code.visualstudio.com/#built-in-git


Snipaste_2020-07-07_12-11-56

5. Sencha Architect

Architect 在开发移动和桌面应用的工具中的定位是HTML5可视化应用开发。开发团队可以使用拖放功能来构建HTML5应用程序，因此您可以减少在手动编码上的时间，并且可以对应用程序代码进行优化以实现高性能。Architect 消除了键入大多数样板代码的需要，从而节省了开发人员的时间。自动代码生成可加速桌面和移动应用程序的开发。只需在 WYSIWYG 窗口中更改任何 Ext JS UI 组件的属性和配置，就可以消除手动编码时经常发生的人为错误。（注：根据自身需求选择版本）


优点：

  • 拖拽组件
  • 支持模型——视图——控制器模式。
  • 支持 Sencha Touch 和 Ext JS 4 构建移动和桌面 Web 应用。
  • 内置针对 IOS 与 Android 一键式原生打包功能。


官方地址链接：https://www.sencha.com/products/architect/


Sencha Architect

6. HTML5demos

想知道你的浏览器是否支持 HTML5 Canvas 吗？想知道 Safari 是否可以运行简单的 HTML5 聊天客户端吗？HTML5demos 会告诉你每一个HTML5特性在哪些浏览器中支持。


HTML5demos

7. HTML5 Tracker

想了解 HTML5的最新动向吗? 使用 HTML5 Tracker 吧，它可以跟踪 HTML5 最新修订信息。

HTML5 Tracker

8. HTML5 visual cheat sheet

想要快速超找一个标签或者属性吗？看看这个非常酷的速查手册吧，每个Web开发人员的必备。

非官方链接地址：https://download.csdn.net/download/vick1217/4414181

HTML5 visual cheat sheet

9. Switch To HTML5

Switch To HTML5 是一个基础而实用的模板生成工具。如果你开始一个新项目，可以到这里获取免费的 HTML5 网站模板。


Switch To HTML5


10. HTML5 Test

你浏览器准备好迎接 HTML5 革命了吗？HTML5 Test 将告诉你。这个网站会为你当前使用的浏览器生成一份对video、audio、canvas等等特性的支持情况的完整报告。


官方链接地址：http://html5test.com/


HTML5 Test


11. Lime JS

LimeJS 是一个 HTML5 游戏开发框架，用于为所有现代触摸屏和桌面浏览器构建快速的本机体验游戏。


官方链接地址：http://www.limejs.com/


Lime JS



HTML5因其跨平台性的特质已逐渐成为网络游戏开发的热门新技术。过去，flash多媒体应用可以用来构建线上游戏，也是小游戏的主流形态，但是随着HTML5的到来，改变了线上游戏的构建方法，用HTML5制作游戏相比flash更加灵活方便。你还记得水果忍者吗？尤其在iphone流畅的ios系统下运行起来非常能缓解压力，几乎每个上班族和手机控都装过这个游戏，现在已经将其改版成HTML5，并将其开源，下面就为大家奉上切水果和其他精选HTML5小游戏源码，enjoy！


1、切水果

自从iOS和Android兴起以来，水果忍者游戏一直是这两个平台上面相当热门的游戏，很多玩家都会在工作学习之余切切水果，打发时间。今天，HTML5网页版水果忍者游戏同样给大家带来了不同的感觉，赶紧来试试这款好玩的HTML5网页版水果忍者游戏吧。


切水果


2、中国象棋

棋类游戏在桌面游戏中已经非常成熟，中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色，我们不仅可以选择中国象棋的游戏难度，而且可以切换棋盘的样式。程序写累了，喝上一杯咖啡，和电脑对弈几把吧，相信这HTML5中国象棋游戏的实现算法你比较清楚，可以打开源码来研究一下这款HTML5中国象棋游戏。

中国象棋


3、奇葩版Flappy Bird,HTML5 Flappy Text游戏

前段时间Flappy Bird游戏那是相当的火，有无数年轻人为之疯狂，这里我们要分享一款奇葩版的Flappy Bird——HTML5 Flappy Text游戏，用若干个字母来代替bird，每触碰一个障碍，字母就会少一个。一起来玩玩吧。

Flappy Bird

4、吃豆人游戏

HTML5吃豆人游戏，画面上有一个吃豆人和一群怪物，你需要控制吃豆人移动吃掉路上的小豆子，一旦吃豆人遇到怪物被吃掉的时候，你就GAME OVER了。这款HTML5游戏还有一点没完善，就是吃豆人碰到怪物的时候不能被怪物吃掉，有兴趣的同学可以继续把它完善。HTML5游戏开发不仅需要技术，也需要创意。

吃豆人

5、太空战机游戏

这又是一款制作精良的HTML5游戏，该HTML5游戏的主角是一架英勇威武的太空战机，进入游戏后按”Z”键发射子弹，消灭敌机。该HTML5战机游戏的特点是：1、游戏画面非常华丽逼真，并且加入声音元素，让游戏更加迷人；2、游戏元素很多，敌机类型和发射子弹类型也很多，让玩家不会枯燥。

太空战机

6、超级玛丽游戏重体验

还记得小时候一起玩过的超级玛丽冒险游戏吗？是的，那是我们小时候很火的一款游戏，今天老外利用HTML5技术让超级玛丽可以在网页上跑了，HTML5版的超级玛丽虽然没有原版的功能强大，但是如果你有兴趣，完全可以把它写完善了。HTML5真的很强大，HTML5游戏方面更是犀利。

超级玛丽


7、城市消消乐

很不错的HTML5消除游戏，同样颜色的建筑相邻，可以将它们进行合成，建筑随之升级。必要的时候可以点击没有与之相邻的建筑物进行拆除。游戏结束后会有当前分数和历史最高分数，有预留的分享功能待开发，有需要的下手吧！

城市消消乐


8、打地鼠

游戏功能： 
1.帮助界面 
2.游戏预备开始 
3.5种不同地鼠的随机出现 
4.关卡设置，当然有计时条显示 
5.失败和通过关卡设置 
6.音效设置 该游戏兼容Chrome和FF（效果最不错），但IE有问题（声音也播不出）。。。

打地鼠


9、捕鱼达人

非常逼真的捕鱼达人网页游戏源码下载，基于HTML5和JS特效实现，游戏动画非常的炫，不卡顿，大家有时间的完全可以学习学习，HTML5做游戏跟客户端其实是各有各的优势，做到平衡就好。

捕鱼达人



怎么运行HTML 5游戏的源代码

HTML5游戏是通过html+javascript+css技术开发的游戏，属于网页游戏，可以运行在HTML5的网页浏览器中。

运行HTML5游戏，需要一个支持HTML5的网页浏览器，比如IE10或11，google的chrome浏览器，火狐firefox，百度浏览器，或者UC，QQ浏览器，猎豹浏览器。早期的IE9以前的版本是不行的。浏览器可以到百度搜索下载，然后安装。使用方法就是普通的上网。

下载的HTML5游戏文件解压后，文件夹中会有一个后缀为html的文件，应该是在根目录下。其他文件可能有js后缀，css后缀，或者图片，请保持相对位置不能动。

然后下面你就需要运行那个html文件了：

方法1：
你可以打开浏览器，将html文件拖拽到浏览器中。

方法2：
也可以在文件夹中选中html文件，点右键，在菜单选择“打开方式”，然后选择火狐或Chrome浏览器即可。

源代码


随着HTML5的火热发展，大家都在找精美的HTML5模板，且由于各种屏幕大小不一的移动设备的出现，Web开发者开始寻求跨设备的解决方案，于是响应式布局诞生了。响应式布局得益于最新的HTML5技术，会根据屏幕的大小来自动调整页面显示的内容，而无需为每种设备开发一个特定的版本。为了帮站长们节省时间，缩短开发进程，下面为大家提供响应式设计、扁平化设计风格的HTML5网站模板以供参考。


1、Legend 响应式单页面网站模板

Legend HTML5模板很漂亮，而且适合多用途网站，因为使用bootstrap框架搭建，所以支持bootstrap的插件，易于定制、扩展性灵活，是一个很不错的免费网站模板！

 Legend



2、Strongly Typed

Strongly Typed 是一个免费的响应式设计模板，使用HTML5/CSS3编写，包含基本的页面元素和页面。

Strongly Typed

 

3、Codester

Codester 这个HTML5模板使用了bootstrap构建，如果了解bootstrap的用户我想你一定会喜欢上它。

Codester



4、Euclid

Euclid是一个免费的响应HTML5模板完美的营销你的移动应用。利用Euclid开始移动应用展示网站，你可以把你的手机应用程序和提供有关您的应用程序的细节。

Euclid



5、zProgress

zprogress响应，HTML5，CSS3，网格系统模板（由zerotheme。COM zerogrid）。它是企业和企业类型模板。这是页面的网页，新闻网页，网页，接触页和产品页。

zProgress



6、Module

Module 是由w3layouts创建。由HTML5和CSS3组成的响应式模板。这是3的布局类型模板。

Module


7、Brushed Template

Brushed网站模板也是使用了Twitter Bootstrap框架搭建，并且对Retina显示屏优化 ( iPhone, iPad, iPod Touch and MacBook Pro Retina)，非常适合作品展示使用。

Brushed Template


8、Escape Velocity

Escape 是免费的响应式设计HTML5网站模板，并且使用了扁平化设计。

Escape Velocity



9、Parallelism

很明显这个Parallelism自适应网页模板适合相册、作品展示使用，还有一个强大之处就是网页图片的大小会自动适应，非常不错!

Parallelism



10、Dopetrope

Dopetrope使用了响应适+扁平化设计，整体风格简洁。





11、Escape Velocity

设计了一种新的具有平坦的（但不要太平）简约设计，宽敞的布局，和所有基本的网页元素的造型。功能演示图像真棒逃逸速度响应式HTML5模板的。

Escape Velocity



12、Overflow

上面这是Overflow的主页截图，单页网站模板的回应，AJ，对HTML5了。你可以看出这是一位不寻常的（它的灵感来自于一个流程图）。

Overflow

13、Miniport Template

Miniport是一个全屏的自适应的单页面网站模板，内容不多的用户可以选择这个模板。

Miniport Template


14、Obscura

这个适合用于个人博客主题，风格很不错。

Obscura



15、Liquid Gem

Liquid Gem是一个简约的响应性设计模板，另外还包含了works展示页和php联系我们页面。

Varna Template



16、Serendipity

Serendipity是一个简约的单页面模板，当然也是使用响应式设计了。适合于个人博客。

Varna Template



17、Varna Template

Varna 是一个免费的APP应用网站模板，这个风格用于搭建任何APP网站了。而且修改简单方便。

Varna Template



18、Striped

全屏式的响应式设计网站HTML模板：Striped，包含很多样式 (如：blockquotes, tables, lists, 等.)代码由 HTML5/CSS3 构建，容易算定义。

Striped



19、Mnml Lightweight Template

MNML是一个HMLT5/SCSS响应式网站模板。

Mnml Lightweight Template



20、Agency

Agency是一个简洁的HTML5响应式商业网站模板，并使用了 Twitter Bootstrap框架搭建。

Agency



21、Fashion Template

这个响应式设计的模板适用于时尚类、杂志类需求的用户或站长。

Fashion Template



22、Century

Century一个响应式网站模板，带有音频播放插件。

Century



23、Responsive Wedding

响应式设计的婚礼专用HTML5模板，喜庆模板。

Responsive Wedding



24、Mori

Mori为灰色风格的迷你HTML5模板，响应式设计，适合个人博客使用。

Mori


HTML5支持直接播放视频，而这背后涉及到复杂的视频格式之争，甚至还牵涉到所有的电子影像设备？在过去乃至现在，flash仍是网页上最好的解决视频的方法，诸如优酷、土豆之流的视频网站、还有像虾米那样的在线音乐网站，仍在使用flash提供播放服务。现在这种状况将会随着 HTML5 的发展而改变。HTML <video> 适用于HTML 5+，用于定义在线观看的视频流媒体。


HTML5 (视频)- 如何工作

如需在 HTML5 中显示视频，您所有需要的是：

实例

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

尝试一下 »

HTML video视频教程


在过去，音视频需要通过第三方插件来处理（这样引发的问题是：并不是所有操作系统或者设备都能使用）流览器与插件之间的通信被局限住了，而且多媒体就像一个黑盒子。HTML5出现之后，所有主流浏览器都可以支持本地音视频了（包括IE浏览器），虽然这个过程需要让您的媒体文件进行双份的编码（因为IE 和Safari只支持Royalty-encumbered标准的编码）。有了HTML5，突然之间，video可以跟CSS一起排样式了：您可以用半透 明的视频相互覆盖，设置边界与背景图片，旋转盘旋等变换，以及其他各种精彩的变形应用。


但是，有一个核心问题，却没有得到解决。HTML5没有规定，浏览器到底应该播放哪一种格式的视频。浏览器厂商可以自行选择支持的格式。


怎么让所有浏览器支持HTML5 video视频标签？

使用 HTML5 的video可以很方便的使用 JavaScript 对视频内容进行控制等等，功能十分强大，同时代码比较少加快加载速度。此外跨平台性比较好，特别是一些平板、手机等。例如苹果公司的产品不支持flash仅支持HTML5中的video功能。但是 HTML5 的兼容性问题是个硬伤，我们可以在网页中使用 video 来播放视频，但使用早期浏览器的访问者可能无法正常观看这个视频。此外，由于视频编码器的历史渊源导致各种浏览器支持的视频格式不同。应对这些问题，想在网页中使用 HTML5 video 功能，可以按照下面三个步骤操作。

1、提前准备好多格式视频文件

由于编码器的版权问题，导致不同浏览器对视频格式的兼容性不同。目前没有一个视频格式兼容所有浏览器，唯一的解决方法就是把视频转换成多种格式。


首先要准备一个 mp4 格式的视频，可以在苹果设备中使用；其次要准备 ogv 格式的视频，用在火狐浏览器中；最后要准备一下 webm 格式的视频，这个可以用在谷歌浏览器等。webm 是谷歌提出的，开源、免费，很有可能成为兼容所有浏览器的视频格式。


准备多格式浏览器的麻烦之处在于转换格式。视频转换工具国内的功能比较少，转换格式可能没有上面后两个，而且质量良莠不齐，往往需要注册才能使用。推荐一个国外的工具 Online converter ，在线免费视频转换工具。甚至不用安装软件，直接选择相应的目标格式，然后上传视频，配置一下参数就可以转换出来了。没有合适工具的朋友，可以尝试一下。


2、编写对应 HTML5 video 代码

HTML5 中的 video 实际上就是一个简单的标签，包含了一些视频相关信息等。下面直接给出具体代码，然后简单解释一下：


XML/HTML Code

<video width=”800” height=”374”>  
    <source src=”my_video.mp4” type=”video/mp4” />  
    <source src=”my_video.ogv” type=”video/ogg” />  
    <source src=”my_video.webm” type=”video/webm” />  
    你浏览器不支持 video 功能，点击这里下载视频： <a href=”video.webm”>下载视频</a>.   
</video>  

video 标签表示这里是一个视频，width、height 属性分别表示这个视频内容的宽高（单位像素）。video 标签中可以包含 source 标签，source 标签用来表示引用的视频和视频的格式、类型。为了保证向下的兼容性，我们还在 video 标签中加了一句提示，这句话在支持 video 标签的浏览器中是不会显示的，如果不支持就会显示出来。这里，还增加了一个视频的下载地址，如果浏览器不支持，可以让用户选择下载下来看。

特别需要注意一点，你的主机必须能正确的处理这事些视频请求。确保你的主机被请求这些视频的时候会在 Content-Type 头发送正确的 MIME 类型。如果你不清楚，可以咨询一下主机服务商，也可以自己添加。如果主机支持 .htaccess ，可以在 .htaccess 文件中增加下面语句：


代码如下:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm


大体就是这样，比较简单，更加具体的关于 video 的使用方法，可以搜索一下，在这里不再赘述。


3、为旧版浏览器做兼容

前面说过，如果浏览器不支持 video ，将会把 video 中的提示内容显示出来。那么对付老旧浏览器，我们可以用传统的 flash 来替换这个提示内容。这样，当浏览器不兼容 video 标签的时候，就会显示出 flash 版本的视频。例如：

XML/HTML Code


<video width=”800” height=”374”>  
    <source src=”my_video.mp4” type=”video/mp4” />  
    <source src=”my_video.ogv” type=”video/ogg” />  
<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">  
    <param name="movie" value="fallback.swf" />  
    <param name="flashvars" value="autostart=true&file=video.flv" />  
</object>  
</video>  


直接按照原来正常的 flash 引入方法写进 video 标签中即可。这样，我们就实现了跨浏览器兼容的 video 功能使用。


html5 video 试看怎么实现？

new个video，指定播放列表的第一个视频路径为src。监听end事件，回调里面把video的src改成列表的下一个，再play

代码示例：
var vList = ['视频地址url1', 'url2', '...']; // 初始化播放列表
var vLen = vList.length; // 播放列表的长度

var curr = 0; // 当前播放的视频
var video = new Video();
video.addEventListener('end', play);
play();

function play(e) {
   video.src = vList[curr];
   video.load(); // 如果短的话，可以加载完成之后再播放，监听 canplaythrough 事件即可
   video.play();

   curr++;
   if (curr >= vLen) curr = 0; // 播放完了，重新播放
   }

可以实现html5 播放多个视频。一个接一个的播放。

怎么实现 html5 video 视频暂停后加载指定的图片？

用户播放视频后，缓冲时间和用户点暂停后加载指定的图片必须带超链接功能怎么实现？

先用绝对定位创建一个广告图片的图层,监测video的暂停事件,将隐藏的广告图片显示出来出来就好了。

html5 video fullScreen全屏实现方式

fullScreen

在html5中，全屏方法可以适用于很多html元素，不仅仅是video

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>全屏问题</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}

body div.videobox{
width: 400px;
height: 320px;
margin: 100px auto;
background-color:#000;
}

body div.videobox video.video
{
width: 100%;
height: 100%;
}

:-webkit-full-screen {

}

:-moz-full-screen {

}

:-ms-fullscreen {

}

:-o-fullscreen {

}

:full-screen { 

}

:fullscreen {

}

:-webkit-full-screen video {
width: 100%;
height: 100%;
}
:-moz-full-screen video{
width: 100%;
height: 100%;
}
</style>
</head>
<body>


<div id="videobox">

<video controls="controls" preload="preload" id="video" poster="poster.jpg">
<source src="./movie.ogg" type="video/ogg" />
<source src="./movie.mp4" type="video/mp4" />
<source src="./movie.webm" type="video/webm" />
<object data="./movie.mp4" width="100%" height="100%">
<embed width="100%" height="100%" src="./movie.swf" />
</object>

</video>
<button id="fullScreenBtn">全屏</button>
</div>


<script type="text/javascript">

//反射調用
var invokeFieldOrMethod = function(element, method) 
{
var usablePrefixMethod;
["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
if (usablePrefixMethod) return;
if (prefix === "") {
// 无前缀，方法首字母小写
method = method.slice(0,1).toLowerCase() + method.slice(1); 
}
var typePrefixMethod = typeof element[prefix + method];
if (typePrefixMethod + "" !== "undefined") {
if (typePrefixMethod === "function") {
usablePrefixMethod = element[prefix + method]();
} else {
usablePrefixMethod = element[prefix + method];
}
}
});

return usablePrefixMethod;
};

//進入全屏
function launchFullscreen(element) 
{
//此方法不可以在異步任務中執行，否則火狐無法全屏
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen){ 
element.msRequestFullscreen(); 
} else if(element.oRequestFullscreen){
element.oRequestFullscreen();
}
else if(element.webkitRequestFullscreen)
{
element.webkitRequestFullScreen();
}else{

var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
var cssText = 'width:100%;height:100%;overflow:hidden;';
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
document.IsFullScreen = true;

}
}
//退出全屏
function exitFullscreen()
{
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.oRequestFullscreen){
document.oCancelFullScreen();
}else if (document.webkitExitFullscreen){
document.webkitExitFullscreen();
}else{
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
docHtml.style.cssText = "";
docBody.style.cssText = "";
videobox.style.cssText = "";
document.IsFullScreen = false;
}
}
document.getElementById('fullScreenBtn').addEventListener('click',function(){
launchFullscreen(document.getElementById('video')); 
window.setTimeout(function exit(){
//檢查瀏覽器是否處於全屏
if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen)
{
exitFullscreen();
}
},5*1000);
},false);

</script>
</body>

</html>

html5 video封面poster图片填充方法

html5的视频封面尺寸被强制缩小了，需要填充整个播放器的，应该怎么做？

图片填充


html5的video属性并没有支持处理poster的尺寸问题，有一个hacker的方法：The answer is actually quite simple. Instead of providing our poster image as a value to the poster attribute, we define it as a background image for our video element, and use the background-size property to tell the browser that the image is to cover the element in question:


将poster页面设置为一个透明的图片或者不存在的值，这样浏览器就会无法显示poster，然后通过设置播放器的css背景background，将我们需要的背景图放进去，并且填充背景，并且我们用background-size属性去告诉浏览器，这个播放器或者这个元素被这个图片覆盖。


video{
    width: 100%;
    height: 100%;
    background:transparent url('img/1.jpg') 50% 50% no-repeat;


    //下面就是background-size，每种浏览器都写一个配置
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}


详细代码：

< !DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        <style type="text/css">
        .video-container1{
            width: 400px;
            height: 400px;
            border: solid;
        }
        .video1{
            width: 100%;
            height: 100%;
        }
        .video-container2{
            width: 400px;
            height: 400px;
            border: solid;
        }
        .video2{
            width: 100%;
            height: 100%;
            background:transparent url('1.jpg') 50% 50% no-repeat;
            -webkit-background-size:cover;
            -moz-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
        }
        </style>
    </head>
    <body>
    <div class="video-container1">
        <video class="video1" src="oceans.mp4" poster="1.jpg" controls>

        </video>
    </div>
    <div class="video-container2">
        <video class="video2" src="oceans.mp4" poster="2.jpg" controls>

        </video>
    </div>
    </body>
</html>

实例

HTML5 <textarea>标签用于创建一个可以输入多行的文本框。请参考下述示例：

一个 HTML 文本区域：

<textarea rows="10" cols="30">我是一个文本框。 </textarea>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <textarea> 标签。

标签定义及使用说明

<textarea> 标签定义一个多行的文本输入控件。

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

HTML 4.01 与 HTML5之间的差异

HTML5 增加了一些新的属性。

属性

New ：HTML5 中的新属性。

属性 值 描述
autofocusNew autofocus 规定当页面加载时，文本区域自动获得焦点。
cols number 规定文本区域内可见的列数。
disabled disabled 规定禁用文本区域。
formNew form_id 定义文本区域所属的一个或多个表单。
maxlengthNew number 规定文本区域允许的最大字符数。
name text 规定文本区域的名称。
placeholderNew text 规定一个简短的提示，描述文本区域期望的输入值。
readonly readonly 规定文本区域为只读。
requiredNew required 规定文本区域是必需的/必填的。
rows number 规定文本区域内可见的行数。
wrapNew hard
soft		 规定当提交表单时，文本区域中的文本应该怎样换行。

全局属性

<textarea> 标签支持 HTML 的全局属性。

事件属性

<textarea> 标签支持 HTML 的事件属性。

相关文章

HTML DOM 参考手册：Textarea 对象

实例

HTML5 <tbody>标签用于组合表格中的主体内容。请参考下述示例：

带有 <thead>、<tfoot> 和 <tbody> 元素的 HTML 表格：

<table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody></table>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <tbody> 标签。

标签定义及使用说明

<tbody> 标签用于组合 HTML 表格的主体内容。

<tbody> 元素应该与 <thead> and <tfoot> 元素结合起来使用，用来规定表格的各个部分（主体、表头、页脚）。

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<tbody> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后。

提示和注释

注释：<tbody> 元素内部必须包含一个或者多个 <tr> 标签。

提示：<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

HTML 4.01 与 HTML5之间的差异

在 HTML 5 中，不再支持 HTML 4.01 中 <tbody> 标签的任何属性。

属性

属性 值 描述
align right
left
center
justify
char		 HTML5 不支持。定义 <tbody> 元素中内容的对齐方式。
char character HTML5 不支持。规定 <tbody> 元素中内容根据哪个字符来对进行文本对齐。
charoff number HTML5 不支持。规定 <tbody> 元素中内容的第一个对齐字符的偏移量。
valign top
middle
bottom
baseline		 HTML5 不支持。规定 <tbody> 元素中内容的垂直对齐方式。

全局属性

<tbody> 标签支持 HTML 的全局属性。

事件属性

<tbody> 标签支持 HTML 的事件属性。

实例

HTML5 <time>标签用于标注日期、时间或日期与时间的组合（日期格式是YYYY-MM-DD）。请参考下述示例：

如何定义时间和日期：

<p>我们在每天早上 <time>9:00</time> 开始营业。</p> <p>我在 <time datetime="2017-02-14">情人节</time> 有个约会。</p>
尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

元素          
<time> 6.0 9.0 4.0 5.0 11.1

标签定义及使用说明

<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

HTML 4.01 与 HTML5之间的差异

<time> 标签是 HTML5 中的新标签。

属性

New：HTML5 中的新属性。

属性 值 描述
datetimeNew datetime 规定日期/时间。另一种方式，则是由元素的内容给定日期/时间。

全局属性

<time> 标签支持 HTML 的全局属性。

事件属性

<time> 标签支持 HTML 的事件属性。

实例

HTML5 <thead>标签用于将表格中的表头组合起来。请参考下述示例：

带有 <thead>、<tfoot> 和 <tbody> 元素的 HTML 表格：

<table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody></table>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <thead> 标签。

标签定义及使用说明

<thead> 标签用于组合 HTML 表格的表头内容。

<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、<tfoot> 和 <tr> 元素之前。

提示和注释

注释：<thead> 元素内部必须包含一个或者多个 <tr> 标签。

提示：<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

HTML 4.01 与 HTML5之间的差异

在 HTML 5 中，不再支持 HTML 4.01 中 <thead> 标签的任何属性。

属性

属性 值 描述
align right
left
center
justify
char		 HTML5 不支持。定义 <thead> 元素中内容的对齐方式。
char character HTML5 不支持。规定 <thead> 元素中内容根据哪个字符来对进行文本对齐。
charoff number HTML5 不支持。规定 <thead> 元素中内容的第一个对齐字符的偏移量。
valign top
middle
bottom
baseline		 HTML5 不支持。规定 <thead> 元素中内容的垂直对齐方式。

全局属性

<thead> 标签支持 HTML 的全局属性。

事件属性

<thead> 标签支持 HTML 的事件属性。

实例

HTML5 <tfoot>标签用于表示一个表格中的页脚。请参考下述示例：

带有 <thead>、<tfoot> 和 <tbody> 元素的 HTML 表格：

<table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody></table>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <tfoot> 标签。

标签定义及使用说明

<tfoot> 标签用于组合 HTML 表格的页脚内容。

<tfoot> 元素应该与 <thead> 和 <tbody> 元素结合起来使用，用来规定表格的各个部分（页脚、表头、主体）。

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<tfoot> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后，<tbody> 和 <tr> 元素之前。

提示和注释

注释：<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。

提示：<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

HTML 4.01 与 HTML5之间的差异

在 HTML 5 中，不再支持 HTML 4.01 中 <tfoot> 标签的任何属性。

属性

属性 值 描述
align right
left
center
justify
char		 HTML5 不支持。定义 <tfoot> 元素中内容的对齐方式。
char character HTML5 不支持。规定 <tfoot> 元素中内容根据哪个字符来对进行文本对齐。
charoff number HTML5 不支持。规定 <tfoot> 元素中内容的第一个对齐字符的偏移量。
valign top
middle
bottom
baseline		 HTML5 不支持。规定 <tfoot> 元素中内容的垂直对齐方式。

全局属性

<tfoot> 标签支持 HTML 的全局属性。

事件属性

<tfoot> 标签支持 HTML 的事件属性。

实例

HTML5 <table>标签用于定义文档中的表格。请参考下述示例：

一个简单的 HTML 表格，包含两列两行：

<table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table>
尝试一下 »
（更多实例见页面底部）

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <table> 标签。

标签定义及使用说明

<table> 标签定义 HTML 表格

一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。

<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，仅支持 "border" 属性，并且只允许使用值 "1" 或 ""。

属性

属性 值 描述
align left
center
right		 HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。
border 1
""		 规定表格单元是否拥有边框。
cellpadding pixels HTML5 不支持。规定单元边沿与其内容之间的空白。
cellspacing pixels HTML5 不支持。规定单元格之间的空白。
frame void
above
below
hsides
lhs
rhs
vsides
box
border		 HTML5 不支持。规定外侧边框的哪个部分是可见的。
rules none
groups
rows
cols
all		 HTML5 不支持。规定内侧边框的哪个部分是可见的。
summary text HTML5 不支持。规定表格的摘要。
width pixels
%		 HTML5 不支持。规定表格的宽度。

全局属性

<table> 标签支持 HTML 的全局属性。

事件属性

<table> 标签支持 HTML 的事件属性。

Examples

尝试一下 - 实例

表格中的标题
本例演示如何显示表格标题。

空单元格
本例演示如何使用 " " 处理没有内容的单元格。

带有标题的表格
本例演示一个带标题(caption)的表格。

表格内的标签
本例演示如何在其他的元素内显示元素。

跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。

相关文章

HTML 教程：HTML 表格

HTML DOM 参考手册：Table 对象

实例

HTML5 <tr>标签用于表示一个表格中的行。请参考下述示例：

一个简单的 HTML 表格，包含两列两行：

<table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table>
尝试一下 »
（更多实例见页面底部）

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <tr> 标签。

标签定义及使用说明

<tr> 标签定义 HTML 表格中的行。

一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。

HTML 4.01 与 HTML5之间的差异

在 HTML 5 中，不支持 <tr> 标签在 HTML 4.01 中的任何属性。

属性

属性 值 描述
align right
left
center
justify
char		 HTML5 不支持。定义表格行的内容对齐方式。
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 HTML5 不支持。HTML 4.01 已废弃。规定表格行的背景颜色。
char character HTML5 不支持。规定根据哪个字符来进行文本对齐。
charoff number HTML5 不支持。规定第一个对齐字符的偏移量。
valign top
middle
bottom
baseline		 HTML5 不支持。规定表格行中内容的垂直对齐方式。

全局属性

<tr> 标签支持 HTML 的全局属性。

事件属性

<tr> 标签支持 HTML 的事件属性。

Examples

尝试一下 - 实例

表格中的标题
本例演示如何显示表格标题。

空单元格
本例演示如何使用 " " 处理没有内容的单元格。

带有标题的表格
本例演示一个带标题(caption)的表格。

表格内的标签
本例演示如何在其他的元素内显示元素。

跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。

相关文章

HTML 教程：HTML 表格

HTML DOM 参考手册： Tr 对象

实例

HTML5 <th>标签用于表示一个表格的表头。请参考下述示例：

一个简单的 HTML 表格，带有两个表头单元格和两个数据单元格：

<table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table>
尝试一下 »
（更多实例见页面底部）

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <th> 标签。

标签定义及使用说明

<th> 标签定义 HTML 表格中的表头单元格。

HTML 表格有两种单元格类型：

  • 表头单元格 - 包含头部信息（由 <th> 元素创建）
  • 标准单元格 - 包含数据（由 <td> 元素创建）

<th> 元素中的文本通常呈现为粗体并且居中。

<td> 元素中的文本通常是普通的左对齐文本。

提示和注释

提示：如果需要将内容横跨多个行或列，请使用 colspan 和 rowspan 属性！

HTML 4.01 与 HTML5之间的差异

HTML 5 中不再支持 HTML 4.01 中的某些属性。

属性

属性 值 描述
abbr text HTML5 不支持。 规定表头单元格中内容的缩写版本。
align left
right
center
justify
char		 HTML5 不支持。 规定表头单元格内容的水平对齐方式。
axis category_name HTML5 不支持。 对表头单元格进行分类。
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的背景颜色。
char character HTML5 不支持。 规定根据哪个字符来进行内容的对齐。
charoff number HTML5 不支持。 规定对齐字符的偏移量。
colspan number 规定表头单元格可横跨的列数。
headers header_id 规定与表头单元格相关联的一个或多个表头单元格。
height pixels
%		 HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的高度。
nowrap nowrap HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格中的内容是否折行。
rowspan number 规定表头单元格可横跨的行数。
scope col
colgroup
row
rowgroup		 规定表头单元格是否是行、列、行组或列组的头部。
valign top
middle
bottom
baseline		 HTML5 不支持。 规定表头单元格内容的垂直排列方式。
width pixels
%		 HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的宽度。

全局属性

<th> 标签支持 HTML 的全局属性。

事件属性

<th> 标签支持所有 HTML 的事件属性。

Examples

尝试一下 - 实例

表格中的标题
本例演示如何显示表格标题。

空单元格
本例演示如何使用 " " 处理没有内容的单元格。

带有标题的表格
本例演示一个带标题(caption)的表格。

表格内的标签
本例演示如何在其他的元素内显示元素。

跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。

相关文章

HTML 教程：HTML 表格

HTML DOM 参考手册：Th 对象

实例

HTML5 <td>标签用于表示一个表格中的单元格。请参考下述示例：

一个简单的 HTML 表格，带有两个单元格：

<table border="1"><tr><td>Cell A</td><td>Cell B</td></tr></table>
尝试一下 »
（更多实例见页面底部）

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <td> 标签。

标签定义及使用说明

<td> 标签定义 HTML 表格中的标准单元格。

HTML 表格有两种单元格类型：

  • 表头单元格 - 包含头部信息（由 <th> 元素创建）
  • 标准单元格 - 包含数据（由 <td> 元素创建）

<th> 元素中的文本通常呈现为粗体并且居中。

<td> 元素中的文本通常是普通的左对齐文本。

提示和注释

提示：如果需要将内容横跨多个行或列，请使用 colspan 和 rowspan 属性！

HTML 4.01 与 HTML5之间的差异

HTML 5 中不再支持 HTML 4.01 中的某些属性。

属性

属性 值 描述
abbr text HTML5 不支持。规定单元格中内容的缩写版本。
align left
right
center
justify
char		 HTML5 不支持。规定单元格内容的水平对齐方式。
axis category_name HTML5 不支持。对单元格进行分类。
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 HTML5 不支持。HTML 4.01 已废弃。 规定单元格的背景颜色。
char character HTML5 不支持。规定根据哪个字符来进行内容的对齐。
charoff number HTML5 不支持。规定对齐字符的偏移量。
colspan number 规定单元格可横跨的列数。
headers header_id 规定与单元格相关联的一个或多个表头单元格。
height pixels
%		 HTML5 不支持。HTML 4.01 已废弃。
设置单元格的高度。
nowrap nowrap HTML5 不支持。HTML 4.01 已废弃。
规定单元格中的内容是否折行。
rowspan number 设置单元格可横跨的行数。
scope col
colgroup
row
rowgroup		 HTML5 不支持。定义将表头单元格与数据单元格相关联的方法。
valign top
middle
bottom
baseline		 HTML5 不支持。规定单元格内容的垂直排列方式。
width pixels
%		 HTML5 不支持。HTML 4.01 已废弃。 规定单元格的宽度。

全局属性

<td> 标签支持 HTML 的全局属性。

事件属性

<td> 标签支持 HTML 的事件属性。

Examples

尝试一下 - 实例

表格中的标题
本例演示如何显示表格标题。

空单元格
本例演示如何使用 " " 处理没有内容的单元格。

带有标题的表格
本例演示一个带标题(caption)的表格。

表格内的标签
本例演示如何在其他的元素内显示元素。

跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。

相关文章

HTML 教程：HTML 表格

HTML DOM 参考手册： Td 对象

实例

HTML5 <source>标签用于为媒体元素定义媒体资源。请参考下述示例：

带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件（如果都支持则任选一个）：

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。</audio>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <source> 标签。

注释：IE 8 或更早版本的 IE 浏览器都不支持 <source> 标签。

标签定义及使用说明

<source> 标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源。

<source> 标签允许您规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。

HTML 4.01 与 HTML5之间的差异

<source> 标签是 HTML5 中的新标签。

属性

New ：HTML5 中的新属性。

属性 值 描述
mediaNew media_query 规定媒体资源的类型，供浏览器决定是否下载。
srcNew URL 规定媒体文件的 URL。
typeNew MIME_type 规定媒体资源的 MIME 类型。

全局属性

<source> 标签支持 HTML 的全局属性。

事件属性

<source> 标签支持 HTML 的事件属性。

实例

HTML5 <select>标签用于实现下拉列表。请参考下面的示例：

创建带有 4 个选项的选择列表：

<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <select> 标签。

标签定义及使用说明

<select> 元素用来创建下拉列表。

<select> 元素中的 <option> 标签定义了列表中的可用选项。

提示和注释

提示：<select> 元素是一种表单控件，可用于在表单中接受用户输入。

HTML 4.01 与 HTML5之间的差异

HTML5 增加了一些新的属性。

属性

New ：HTML5 中的新属性。

属性 值 描述
autofocusNew autofocus 规定在页面加载时下拉列表自动获得焦点。
disabled disabled 当该属性为 true 时，会禁用下拉列表。
formNew form_id 定义 select 字段所属的一个或多个表单。
multiple multiple 当该属性为 true 时，可选择多个选项。
name name 定义下拉列表的名称。
requiredNew required 规定用户在提交表单前必须选择一个下拉列表中的选项。
size number 规定下拉列表中可见选项的数目。

全局属性

<select> 标签支持 HTML 的全局属性。

事件属性

<select> 标签支持 HTML 的事件属性。

相关文章

HTML DOM 参考手册： Select 对象

HTML 参考手册：超详细的HTML <select> 标签用法及技巧介绍

实例

HTML5 <style>标签用于表示文档所使用的样式。请参考下述示例：

在 HTML 文档中使用 <style> 元素：

<html><head><style type="text/css">h1 {color:red;}p {color:blue;}</style></head><body><h1>这是一个标题</h1><p>这是一个段落。</p></body></html>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <style> 标签。

标签定义及使用说明

<style> 标签定义 HTML 文档的样式信息。

在 <style> 元素中，您可以规定在浏览器中如何呈现 HTML 文档。

每个 HTML 文档能包含多个 <style> 标签。

提示和注释

提示：如需链接外部样式表，请使用 <link> 标签。

提示：如需学习更多有关样式表的知识，请阅读我们的 CSS 教程。

注释：如果没有使用 "scoped" 属性，则每一个 <style> 标签必须位于 head 头部区域。

HTML 4.01 与 HTML5之间的差异

"scoped" 属性是 HTML 5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。
如果使用 "scoped" 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。

属性

New ：HTML5 中的新属性。

属性 值 描述
media media_query 为样式表规定不同的媒体类型。
scoped scoped 如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。
type text/css 规定样式表的 MIME 类型。

全局属性

<style> 标签支持 HTML 的全局属性。

事件属性

<style> 标签支持 HTML 的事件属性。

相关文章

HTML 教程：HTML CSS

HTML DOM 参考手册：Style 对象


实例

HTML5 <q>标签用于定义一个短引用。请参考一下内容：

标记一个短的引用：

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q>We hope they succeed.</p>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <q> 标签。

标签定义及使用说明

<q> 标签定义一个短的引用。

浏览器经常会在这种引用的周围插入引号。

提示和注释

提示：请使用 <blockquote> 来标记摘自另一个源的块引用。

HTML 4.01 与 HTML5之间的差异

无。

属性

属性值描述
citeURL规定引用的源 URL。

全局属性

<q> 标签支持 HTML 的全局属性。

事件属性

<q> 标签支持 HTML 的事件属性。

实例

HTML5 <progress>标签用于定义文档中的进度条。请参考下述示例：

标记“下载进度”：

<progress value="22" max="100"></progress>
尝试一下»

浏览器支持

IE浏览器火狐歌剧谷歌浏览器苹果浏览器

IE 10，Firefox，Opera，Chrome和Safari 6支持<progress>标签。

注释： IE 9或者更早版本的IE浏览器不支持<progress>标签。点击打开链接

标签定义及使用说明

<progress>标签定义运行中的任务进度（progress）。

HTML 4.01与HTML5之间的差异

<progress>标签是HTML5中的新标签。

提示和注释

提示：请将<progress>标签与JavaScript的一起使用来显示任务的进度。

注释： <progress>标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）表示度量衡，请使用。<meter>标签代替。

属性

新：HTML5中的新属性。

属性值描述
max
数值规定需要完成的值。
value
数值
规定进程的当前值。

全局属性

<progress>标签支持HTML的全局属性。

事件属性

<progress>标签支持HTML的事件属性。

参考文章

如果你想要获得更多进度条的样式信息，请参考：HTML5 SVG轻量级jQuery进度条插件。

实例

HTML5 <param>标签为<object>标签提供嵌入内容的运行时参数的name与value对。请参考下述示例：

设置参数 "autoplay" 为 "true"，音频载入后会自动播放：

<object data="horse.wav">  <param name="autoplay" value="true"></object>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

<param> 标签支持大部分主流浏览器。但是 <object> 定义的文件格式不是所有的浏览器都支持。

标签定义及使用说明

<param>元素允许您为插入 XHTML 文档的对象规定 run-time 设置，也就是说，此标签可为包含它的 <object> 或者 <applet> 标签提供参数。

在HTML 4.01 与 HTML5 之间的差异

HTML 4.01 属性： "type" 和 "valuetype"，在 HTML5 中不支持。

Differences Between HTML and XHTML

在 HTML 中，<param> 标签没有结束标签。

在 XHTML 中，<param> 标签必须被正确地关闭。

属性

属性 值 描述
name name 定义参数的名称（用在脚本中）。
type MIME_type HTML5不支持。定义 MIME 类型参数。
value value 描述参数值。
valuetype data
ref
object		 HTML5 不支持。描述值的类型。

全局属性

<param> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<param> 标签支持所有 HTML事件属性。

实例

HTML5 <pre>标签可以对文档中的文本进行预格式化。请参考下述示例：

预格式化的文本:

<pre>此例演示如何使用 pre 标签对空行和 空格进行控制</pre>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前大多数浏览器支持 <pre> 标签。

标签定义及使用说明

<pre> 标签可定义预格式化的文本。

被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

提示和注释

提示: <pre> 标签的一个常见应用就是用来表示计算机的源代码。

在HTML 4.01 与 HTML5中的差异

在 HTML 4.01 中，"width" 属性已废弃，不可使用。 HTML5 不支持"width"属性。

属性

属性 值 描述
width number HTML5 不支持该属性。HTML 4.01 已废弃该属性。定义每行的最大字符数（通常是 40、80 或 132）。

全局属性

<pre> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<pre> 标签支持所有 HTML事件属性。

实例

HTML5 <p>标签用于定义一个段落。请参考下述示例：

以下代码标记了一个段落：

<p>这是一个段落。</p>
尝试一下 »
(在页面下部，您可以找到更多实例)

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前大多数浏览器支持 <p>标签。

标签定义及使用说明

<p> 标签定义段落。

<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

提示：在本站的HTML5编程实战中，你可以练习使用<p>标签！

在HTML 4.01 与 HTML5中的差异

HTML 4.01中标签的 align 属性已经废弃，HTML5不支持该属性。

属性

属性 值 描述
align left
right
center
justify		 HTML5不支持。 HTML 4.01已废弃。 不赞成使用。请使用样式取代它。规定段落中文本的对齐方式。

全局属性

<p> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<p> 标签支持所有 HTML事件属性。

相关文章

HTML 教程：HTML 段落

实例

HTML5 <optgroup>标签用来定义一个选项组，即，可以将文档中的选项进行组合。请参考下面的这个示例：

通过 <optgroup> 标签把相关的选项组合在一起：

<select>  <optgroup label="Swedish Cars">    <option value="volvo">Volvo</option>    <option value="saab">Saab</option>  </optgroup>  <optgroup label="German Cars">    <option value="mercedes">Mercedes</option>    <option value="audi">Audi</option>  </optgroup></select>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

大多数主流浏览器支持 <optgroup>标签。

标签定义及使用说明

<optgroup> 标签经常用于把相关的选项组合在一起。

如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。

HTML 4.01 与 HTML5中的差异

无。

属性

属性 值 描述
disabled disabled 规定禁用该选项组。
label text 为选项组规定描述。

全局属性

<optgroup> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<optgroup> 标签支持所有 HTML事件属性。

实例

HTML5 <output>标签用来定义不同类型的输出。请参考下述示例：

将计算结果显示在 <output> 元素中：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0  <input type="range" id="a" value="50">100  +<input type="number" id="b" value="50">  =<output name="x" for="a b"></output></form>

尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Firefox、Opera、Chrome 和 Safari 浏览器都支持 <output> 标签。

注意:Internet Explorer 浏览器不支持 <output> 标签。

标签定义及使用说明

<output> 标签作为计算结果输出显示(比如执行脚本的输出)。

在HTML 4.01 与 HTML5中的差异

<output> 标签是 HTML 5 中的新标签。

属性

New：HTML5 新属性。

属性 值 描述
forNew element_id 描述计算中使用的元素与计算结果之间的关系。
formNew form_id 定义输入字段所属的一个或多个表单。
nameNew name 定义对象的唯一名称（表单提交时使用）。

全局属性

<output> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<output> 标签支持所有 HTML事件属性。

以上就对HTML5 <output>标签的介绍了，请通过本文介绍的<ouput>标签属性以熟悉该标签的使用！

定义和用法

HTML5 <option> 标签定义下拉列表中的一个选项。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 5 中，<option> 标签也用于新元素 <datalist> 中。

提示和注释

注释：<option> 标签能够在不带任何属性的情况下使用，但是通常需要 value 属性，该属性定义了发送到服务器的数据。

注释：请与 <select> 或 <datalist> 标签结合使用。在其他地方，<option> 标签是无意义的。

例子

<select>  <option value="volvo">Volvo</option>  <option value="saab">Saab</option>  <option value="opel" selected="selected">Opel</option>  <option value="audi">Audi</option></select>

属性

属性 值 描述 4 5
disabled disabled 规定此选项应在首次加载时被禁用。 4 5
label text 定义当使用 <optgroup> 时所使用的标注。 4 5
selected selected 规定选项（在首次显示在列表中时）表现为选中状态。 4 5
value text 定义送往服务器的选项值。 4 5

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title

如需完整的描述，请访问 HTML 5 中标准属性。

事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

如需完整的描述，请访问 HTML 5 中事件属性。

定义和用法

HTML5 <object>标签定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素运行您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。

HTML 4.01 与 HTML 5 之间的差异

不再支持 HTML 4.01 中的一些属性。

在 HTML5 中，objects 可以在form表单中提交。

在 HTML5 中，objects 不再出现在 <head> 元素区域内。

提示和注释

注释：object 元素可位于在 head 元素或 body 元素内部。<object> 与 </object> 之间的文本是替换文本，针对不支持此标签的浏览器。<param> 标签可定义用于对象的 run-time 设置。

提示：至于图像，请使用 <img> 标签代替 <object> 标签。

提示：至少必须定义 "data" 和 "type" 属性之一。

属性

属性值描述45
align 
  • left
  • right
  • top
  • bottom
定义围绕该对象的文本对齐方式。不支持。使用 CSS 代替。4 
archive (已废弃)URL一个空格分隔的指向档案文件的 URL 列表。这些档案文件包含了与对象相关的资源。不支持。4 
border (已废弃)pixels定义对象周围的边框。不支持。使用 CSS 代替。4 
classidclass ID用于指定浏览器中包含的对象的位置。不支持。4 
codebase (已废弃)URL定义在何处可找到对象所需的代码。不支持。4 
codetype (已废弃)MIME type通过 classid 属性所引用的代码的 MIME 类型。不支持。4 
dataURL定义引用对象数据的 URL。45
declare (已废弃)
  • true
  • false
可定义此对象仅可被声明，但不能被创建或例示，直到此对象得到应用为止。不支持。4 
heightpixels定义对象的高度。45
hspacepixels定义对象周围水平方向的空白。不支持。使用 CSS 代替。4 
name unique_name为对象定义唯一的名称（以便在脚本中使用）。不支持。使用 id 代替。4 
standby (已废弃)text定义当对象正在加载时所显示的文本。不支持。4 
typeMIME_type定义被规定在 data 属性中指定的文件中出现的数据的 MIME 类型。45
usemapURL规定与对象一同使用的客户端图像映射的 URL。45
vspacepixels定义对象的垂直方向的空白。不支持。使用 CSS 代替。4 
widthpixels定义对象的宽度。45

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title

如需完整的描述，请访问 HTML 5 中标准属性。

事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

如需完整的描述，请访问 HTML 5 中事件属性。

通过使用<object>标签，你可以嵌入图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash 等。

实例

HTML5 <ol>标签用于定义文档中的有序列表。请参考下述示例：

2 个不同的有序列表实例：

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol><ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前大多数浏览器支持 <ol> 标签。

标签定义及使用说明

<ol> 标签定义了一个有序列表. 列表排序以数字来显示。

使用<li> 标签来定义列表选项。

提示和注释

提示： 如果需要无序列表，请使用 <ul> 标签。

提示：使用 CSS 来定义列表样式。

HTML 4.01 与 HTML5中的差异

在 HTML 4.01 中"start" 和 "type" 属性已经废弃，HTML5不支持该属性。

"reversed" 属性是 HTML5 中的新属性。

在HTML 4.01中"compact" 属性已经废弃,在 HTML5中不支持该属性。

属性

New：HTML5 新属性。

属性 值 描述
compact compact HTML5中不支持，不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。
reversedNew reversed 指定列表倒序(9,8,7...)
start number HTML5不支持，不赞成使用。请使用样式取代它。规定列表中的起始点。
type 1
A
a
I
i		 规定列表的类型。不赞成使用。请使用样式代替。

全局属性

<ol> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<ol> 标签支持所有 HTML事件属性。

相关文章

HTML 教程：HTML 列表

实例

使用 meter 元素展示给定的数据范围：

<meter value="2" min="0" max="10">2 out of 10</meter><br><meter value="0.6">60%</meter>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Firefox、Opera、Chrome 和 Safari 6 支持 <meter> 标签。

标签定义及使用说明

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。

比如：磁盘使用情况，查询结果的相关性等。

注意： <meter> 不能作为一个进度条来使用， 进度条 <progress> 标签。

HTML 4.01 与 HTML5 之间的差异

<meter> 是 HTML5 的新标签。

属性

New：HTML5 新属性。

属性值描述
formNewform_id规定 <meter> 元素所属的一个或多个表单。
highNewnumber规定被界定为高的值的范围。
lowNewnumber规定被界定为低的值的范围。
maxNewnumber规定范围的最大值。
minNewnumber规定范围的最小值。
optimumNewnumber规定度量的最优值。
valueNewnumber必需。规定度量的当前值。

全局属性

<meter> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<meter> 标签支持所有 HTML事件属性。

实例

HTML5 <menu>标签用于定义菜单列表。

两个菜单按钮系列选项实例（"File" 和 "Edit"）：

<menu type="toolbar"><li> <menu label="File"> <button type="button" onclick="file_new()">New...</button> <button type="button" onclick="file_open()">Open...</button> <button type="button" onclick="file_save()">Save</button> </menu></li><li> <menu label="Edit"> <button type="button" onclick="edit_cut()">Cut</button> <button type="button" onclick="edit_copy()">Copy</button> <button type="button" onclick="edit_paste()">Paste</button> </menu></li></menu>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前主流浏览器并不支持 <menu> 标签。

注意: 这个元素在HTML4中被弃用，但再HTML5.1（正在起草中）中被重新推荐使用。

标签定义及使用说明

<menu> 标签定义了一个命令列表或菜单。

<menu> 标签通常用于文本菜单，工具条和命令列表选项。

提示和注释

提示: 使用 CSS 来定义菜单列表样式。

HTML 4.01 与 HTML5之间的差异

HTML 4.01的 <menu> 元素已废弃。

HTML5 中 <menu> 元素已被重新定义。

属性

New：HTML5 新属性。

属性 值 描述
labelNew text 描述菜单项的标记。
typeNew context
toolbar
list		 描述显示菜单类型. 默认为 "list"。

全局属性

<menu> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<menu> 标签支持所有 HTML事件属性。


实例

描述 HTML 文档的元数据：

<head><meta name="description" content="免费在线教程"><meta name="keywords" content="HTML,CSS,XML,JavaScript"><meta name="author" content="51coolma"><meta charset="UTF-8"></head>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <meta> 标签。

标签定义及使用说明

元数据（Metadata）是数据的数据信息。

<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，当时会被浏览器解析。

META元素通常用于指定网页的描述，关键词，的文件的最后修改，作者，和其他元数据。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

提示和注释

注意：<meta> 标签通常位于 <head>区域内。

注意： 元数据通常以 名称/值 对出现。

注意： 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 scheme 属性。

在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易：

  • HTML 4.01：<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  • HTML5：<meta charset="UTF-8">

HTML 与 XHTML 之间的差异

在 HTML 中 <meta> 标签没有结束标签。

在 XHTML 中 <meta> 标签必须包含结束标签。

实例

实例 1 - 定义文档关键词，用于搜索引擎：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

实例 2 - 定义web页面描述：

<meta name="description" content="Free Web tutorials on HTML and CSS">

实例 3 - 定义页面作者：

<meta name="author" content="Hege Refsnes">

实例 4 - 每30秒刷新页面：

<meta http-equiv="refresh" content="30">

属性

New ：HTML5 新属性。

属性 值 描述
charsetNew character_set 定义文档的字符编码。
content text 定义与 http-equiv 或 name 属性相关的元信息。
http-equiv content-type
default-style
refresh		 把 content 属性关联到 HTTP 头部。
name application-name
author
description
generator
keywords		 把 content 属性关联到一个名称。
scheme format/URI HTML5不支持。 定义用于翻译 content 属性值的格式。

事件属性

<p> 标签支持所有 HTML事件属性。

相关文章

HTML 教程：HTML 头部

实例

HTML5 <map>标签用来表示图像映射，也就是指带有可点击区域的图像映射：

<img src="planets.gif"width="145" height="126"alt="Planets"usemap="#planetmap"><mapname="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"></map>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前大多数浏览器支持 <map>标签。

标签定义及使用说明

<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

HTML 4.01 与 HTML5之间的差异

注意: 在 HTML5 中, 如果 id 属性在<map> 标签中指定, 则你必须同样指定 name 属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，name 属性已经废弃，使用 id 属性替换它。

属性

属性值描述
namemapname必需。为 image-map 规定的名称。

全局属性

<map> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<map> 标签支持所有 HTML事件属性。

实例

HTML5 <label>标签用于为 input 元素做出标记。

带有两个输入字段和相关标记的简单 HTML 表单：

<form action="demo_form.asp"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br> <input type="submit" value="提交"></form>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前大多数浏览器支持 <label> 标签。

标签定义及使用说明

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

提示和注释

提示:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

HTML 4.01 与 HTML5之间的差异

"form" 属性是 HTML5 的新属性。

属性

New：HTML5 新属性。

属性 值 描述
for element_id 规定 label 与哪个表单元素绑定。
formNew form_id 规定 label 字段所属的一个或多个表单。

全局属性

<label> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<label> 标签支持所有 HTML事件属性。

实例

HTML5 <legend>元素是<fieldset>元素的第一个子元素，定义了<fieldset>元素的标题。

组合表单中的相关元素：

<form> <fieldset>   <legend>Personalia:</legend>   Name: <input type="text" size="30"><br>   Email: <input type="text" size="30"><br>   Date of birth: <input type="text" size="10"> </fieldset></form>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前大多数浏览器支持 <legend> 标签。

标签定义及使用说明

<legend> 元素为 <fieldset>元素定义标题。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01中 "align" 属性已被废弃, HTML5不支持该属性。不建议使用。 请使用 CSS 来设置 <legend> 元素的对齐方式。

属性

属性 值 描述
align top
bottom
left
right		 HTML5 不支持。 HTML 4.01 已废弃。不建议使用。 请使用样式代替。为 fieldset 中的标题定义对齐方式。

全局属性

<legend> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<legend> 标签支持所有 HTML事件属性。

实例

HTML5 <li>标签用于表示文档中列表的项目，在下述例子中，我们分别在有序列表和无序列表中使用了<li>标签。

HTML 两个列表实例： 一个有序列表 (<ol>) 和 一个无序列表 (<ul>) :

<ol>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ol><ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul>
尝试一下 »
(本页底部查看更多实例)

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前多数主流浏览器支持 <li>标签。

标签定义及使用说明

<li> 标签定义列表项目。

<li> 标签可用在有序列表（<ol>）、无序列表（<ul>）和菜单列表（<menu>）中。

HTML 4.01 与 HTML5之间的差异

"type" 属性 在 HTML 4.01 已被废弃。HTML5 不支持该属性。

"value" 属性 在 HTML 4.01 已被废弃。HTML5 不支持该属性。

提示和注释

提示: 请使用 CSS 来定义列表和列表项目的类型。

属性

属性 值 描述
type (已废弃) 1
A
a
I
i
disc
square
circle		 HTML5 不支持该属性。HTML 4.01 已废弃该属性。 不赞成使用。使用 CSS list-style-type 属性来代替, 规定使用哪种项目符号。
value number 不赞成使用。请使用样式取代它。规定列表项目的数字。

全局属性

<li> 标签支持全局属性，查看完整属性表 HTML 全局属性。

事件属性

<li> 标签支持所有 HTML 事件属性。

Examples

在线实例

一个嵌套列表
列表内的列表。

另外一个嵌套列表
更复杂的嵌套列表。

相关文章

HTML 教程: HTML 列表

实例

HTML5 <link>标签用于在文档与将要使用的外部之间建立联系，以为文档获取相应的资源。

链接到外部样式文件:

<head><link rel="stylesheet" type="text/css" href="theme.css"></head>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <link> 标签。

标签定义及使用说明

<link> 标签定义文档与外部资源的关系。

<link> 标签最常见的用途是链接样式表。

注意： link 元素是空元素，它仅包含属性。

注意： 此元素只能存在于 head 部分，不过它可出现任何次数。

HTML 4.01 与 HTML5之间的差异

一些 HTML 4.01 属性在 HTML5 中不支持。

HTML5 新增了 "sizes" 属性。

HTML 与 XHTML 之间的差异

在 HTML 中，<link> 标签没有结束标签。

在 XHTML 中，<link> 标签必须被正确地关闭。

属性

New：HTML5 新属性。

属性 值 描述
charset char_encoding HTML5 不支持该属性。 定义被链接文档的字符编码方式。
href URL 定义被链接文档的位置。
hreflang language_code 定义被链接文档中文本的语言。
media media_query 规定被链接文档将显示在什么设备上。
rel alternate
archives
author
bookmark
external
first
help
icon
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up		 必需。定义当前文档与被链接文档之间的关系。
rev reversed relationship HTML5 不支持该属性。 定义被链接文档与当前文档之间的关系。
sizesNew HeightxWidth
any		 定义了链接属性大小，只对属性 rel="icon" 起作用。
target _blank
_self
_top
_parent
frame_name		 HTML5 不支持该属性。 定义在何处加载被链接文档。
type MIME_type 规定被链接文档的 MIME 类型。

全局属性

<link> 标签支持全局属性，查看完整属性表 HTML 全局属性。

事件属性

<link> 标签支持所有 HTML 事件属性。

相关文章

HTML 教程：HTML 样式

HTML DOM 参考手册：Link 对象

实例

<keygen> 标签会生成一个公钥和私钥，私钥会存放在用户本地，而公钥则会发送到服务器。该标签在新的 Web 标准中已废弃！

带有 keygen 字段的表单：

<form action="demo_keygen.asp" method="get"> 用户名: <input type="text" name="usr_name"> 加密: <keygen name="security"> <input type="submit"></form>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Firefox、Opera、Chrome 和 Safari 6 都支持 <keygen> 标签。

标签定义及使用说明

<keygen> 标签规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

HTML 4.01 与 HTML5之间的差异

<keygen> 元素是 HTML5 新标签。

属性

New：HTML5 新属性。

属性 值 描述
autofocusNew autofocus 使 <keygen> 字段在页面加载时获得焦点。
challengeNew challenge 如果使用，则将 keygen 的值设置为在提交时询问。
disabledNew disabled 禁用 <keygen> 元素字段。
formNew form_id 定义该 <keygen> 字段所属的一个或多个表单。
keytypeNew rsa
dsa
ec		 定义密钥的安全算法。
nameNew name 定义 <keygen> 元素的唯一名称。name 属性用于在提交表单时搜集字段的值。

全局属性

<keygen> 标签支持全局属性，查看完整属性表 HTML全局属性.

事件属性

<keygen> 标签支持所有 HTML事件属性.

实例

一段带有已删除部分和新插入部分的文本：

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <ins> 标签。

标签定义及使用说明

<ins> 标签定义已经被插入文档中的文本。

提示和注释

提示：您也可以看看标记已删除文本的 <del> 标签。

提示：<del> 和 <ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。

HTML 4.01 与 HTML5之间的差异

无。

属性

属性 值 描述
cite URL 规定一个文档的 URL，该文档解释了文本被插入的原因。
datetime YYYY-MM-DDThh:mm:ssTZD 规定文本被插入的日期和时间。

全局属性

<ins> 标签支持 HTML 的全局属性。

事件属性

<ins> 标签支持 HTML 的事件属性。

实例

HTML5 <img>标签用于向网页中添加相关图片。

如何插入图像：

<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">
尝试一下 »
（更多实例见页面底部）

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <img> 标签。

标签定义及使用说明

<img> 标签定义 HTML 页面中的图像。

<img> 标签有两个必需的属性：src 和 alt。

注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

提示：通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。

HTML 4.01 与 HTML5之间的差异

HTML5 中不支持以下属性：align、border、hspace、longdesc、vspace。

在 HTML 4.01 中，以下属性：align、border、hspace、vspace 已废弃。

HTML 与 XHTML 之间的差异

在 HTML 中，<img> 标签没有结束标签。

在 XHTML 中，<img /> 标签必须被正确地关闭。

属性

New ：HTML5 中的新属性。

属性 值 描述
align (已废弃) top
bottom
middle
left
right		 HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
alt text 规定图像的替代文本。
border (已废弃) pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。
crossoriginNew anonymous
use-credentials		 设置图像的跨域属性
height pixels 规定图像的高度。
hspace (已废弃) pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。
ismap ismap 将图像规定为服务器端图像映射。
longdesc (已废弃) URL HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。
src URL 规定显示图像的 URL。
usemap #mapname 将图像定义为客户器端图像映射。
vspace (已废弃) pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。
width pixels 规定图像的宽度。

全局属性

<img> 标签支持 HTML 的全局属性。

事件属性

<img> 标签支持 HTML 的事件属性。

Examples

尝试一下 - 实例

从不同的位置插入图片
本例演示如何将其他文件夹或服务器的图片显示到网页中。

制作图像链接
本例演示如何将图像作为一个链接使用。

创建图像地图
本例演示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。


支持的图像格式

HTML 标准并没有给出必须支持的图像格式的列表，因此每个用户代理支持一组不同的格式。 Gecko 支持：

JPEGGIFPNGAPNGSVGBMPBMP ICOPNG ICO

与 CSS 的交互

关于 CSS，<img> 是一个 替换元素。它没有基线，这意味着当在一个行内格式的上下文中使用 vertical-align: baseline 时，图像的底部将会与容器的基线对齐。


相关文章

HTML 教程：HTML 图像

HTML DOM 参考手册： Image 对象


实例

一个简单的 HTML 表单，包含两个文本输入框和一个提交按钮：

<form action="demo_form.asp">  First name: <input type="text" name="fname"><br>  Last name: <input type="text" name="lname"><br>  <input type="submit" value="提交"></form>
尝试一下 »
(本页底部可以查看更多实例)

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前大多数浏览器支持 <input>标签。

标签定义及使用说明

<input> 标签规定了用户可以在其中输入数据的输入字段。

<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性。

提示和注释

注意: <input> 元素是空的,它只包含标签属性。

提示: 你可以使用 <label> 元素来定义 <input> 元素的标注。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中, "align" 数据已经不再使用。HTML5 中不支持该属性。 可以使用CSS来定义 <input> 元素的对齐方式。

在 HTML5中, <input> 添加了几个属性，并且添加了对应的值。

HTML 与 XHTML 之间的差异

在 HTML 中，<input> 标签没有结束标签。

在 XHTML 中，<input /> 标签必须被正确地关闭。

属性

New : HTML5新标签。

属性值描述
acceptaudio/*video/*image/*MIME_type规定通过文件上传来提交的文件的类型。(只针对type="file")
alignleftrighttopmiddlebottomHTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
alttext定义图像输入的替代文本。 (只针对type="image")
autocompleteNewonoffautocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocusNewautofocus属性规定当页面加载时 <input> 元素应该自动获得焦点。
checkedcheckedchecked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disableddisableddisabled 属性规定应该禁用的 <input> 元素。
formNewform_idform 属性规定 <input> 元素所属的一个或多个表单。
formactionNewURL属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
formenctypeNewapplication/x-www-form-urlencodedmultipart/form-datatext/plain属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
formmethodNewgetpost定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
formnovalidateNewformnovalidateformnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formtargetNew_blank_self_parent_topframename规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
heightNewpixels规定 <input>元素的高度。(只针对type="image")
listNewdatalist_id属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
maxNewnumberdate属性规定 <input> 元素的最大值。
maxlengthnumber属性规定 <input> 元素中允许的最大字符数。
minNewnumberdate属性规定 <input>元素的最小值。
multipleNewmultiple属性规定允许用户输入到 <input> 元素的多个值。
nametextname 属性规定 <input> 元素的名称。
patternNewregexppattern 属性规定用于验证 <input> 元素的值的正则表达式。
placeholderNewtextplaceholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。
readonlyreadonlyreadonly 属性规定输入字段是只读的。
requiredNewrequired属性规定必需在提交表单之前填写输入字段。
sizenumbersize 属性规定以字符数计的 <input> 元素的可见宽度。
srcURLsrc 属性规定显示为提交按钮的图像的 URL。 (只针对type="image")
stepNewnumberstep 属性规定 <input> 元素的合法数字间隔。
typebutton
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week		type 属性规定要显示的 <input> 元素的类型。
valuetext指定 <input> 元素 value 的值。
widthNewpixelswidth 属性规定 <input> 元素的宽度。 (只针对type="image")

全局属性

<input> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<input> 标签支持所有 HTML事件属性。

相关阅读

HTML DOM参考手册：HTML DOM Form 对象

实例

使用HTML5 <iframe>标签来标记一个内联框架：

<iframe src="http://www.51coolma.cn"></iframe>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <iframe> 标签。

标签定义及使用说明

<iframe> 标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

提示和注释

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。

提示：使用 CSS 为 <iframe> （包括滚动条）定义样式。

HTML 4.01 与 HTML5之间的差异

HTML5 新增了一些新的属性，同时去掉了 HTML 4.01 中的一些属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，name 属性已被废弃，并将被去掉。请使用 id 属性代替。

属性

New ：HTML5 中的新属性。

属性 值 描述
align (已废弃) left
right
top
middle
bottom		 HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 <iframe>。
frameborder 1
0		 HTML5 不支持。规定是否显示 <iframe> 周围的边框。
height pixels 规定 <iframe> 的高度。
longdesc URL HTML5 不支持。规定一个页面，该页面包含了有关 <iframe> 的较长描述。
marginheight pixels HTML5 不支持。规定 <iframe> 的顶部和底部的边距。
marginwidth pixels HTML5 不支持。规定 <iframe> 的左侧和右侧的边距。
name name 规定 <iframe> 的名称。
sandboxNew ""
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation		 对 <iframe> 的内容定义一系列额外的限制。
scrolling yes
no
auto		 HTML5 不支持。规定是否在 <iframe> 中显示滚动条。
seamlessNew seamless 规定 <iframe> 看起来像是父文档中的一部分。
src URL 规定在 <iframe> 中显示的文档的 URL。
srcdocNew HTML_code 规定页面中的 HTML 内容显示在 <iframe> 中。
width pixels 规定 <iframe> 的宽度。

全局属性

<iframe> 标签支持 HTML 的全局属性。

事件属性

<iframe> 标签支持 HTML 的事件属性。

相关文章

HTML 教程：HTML 框架

HTML DOM 参考手册：IFrame 对象

实例

HTML5 <head> 标签表示文档的头部，其中包含了与该文档有关的信息！

一份在头部带有 <title> 标签的 HTML 文档：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>文档标题</title></head><body>文档内容......</body></html>
尝试一下 »
（更多实例见页面底部）

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <head> 标签。

标签定义及使用说明

<head> 元素是所有头部元素的容器。

<head> 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。

以下列出的元素能被用在 <head> 元素内部：

HTML 4.01 与 HTML5之间的差异

HTML5 不再支持 profile 属性。

属性

属性 值 描述
profile URL HTML5 不支持。规定文档 URL 的一系列规则。这些规则能被浏览器识别并且准确读取 <meta> 标签的内容属性中的信息。

全局属性

<head> 标签支持 HTML 的全局属性。

Examples

尝试一下 - 实例

在 <head> 中使用 <base> 标签
本例演示如何使用 <base> 标签规定页面中所有链接的默认 URL 和默认 target。

在 <head> 中使用 <style> 标签
本例演示如何在 <head> 部分添加样式信息。

在 <head> 中使用 <link> 标签
本例演示如何使用 <link> 标签链接到一个外部样式表。

附注

如果在文档中忽略了 <head> 标签，则大部分浏览器会自动创建一个 <head> 元素。当然，有一些不会。

下面这些浏览器经测试不会自动创建一个 head 元素：Android <=1.6, iPhone <=3.1.3, Nokia 90, Opera <=9.27, and Safari <=3.2.1。

相关文章

HTML 教程：HTML 头部


定义和用法

HTML5 <html> 标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。

<html> 标签告知浏览器这是一个 HTML 文档。

html 元素是 HTML 文档中最外层的元素。

html 元素也可称为根元素。

实例

简单的 HTML 5 文档：

<!DOCTYPE HTML><html><head><title>Title of the document</title></head><body>The content of the document......</body></html>

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中的 xmlns 属性，在 XHTML 中是必须的。实际上它没有任何效果，但是出于验证的原因，在把 HTML 转换为 XHTML 的过程中，是很有帮助的。在 HTML 5 中，没有理由这么做，但是你仍然可以把 xmlns 属性定义为 "http://www.w3.org/1999/xhtml"。

在 HTML 5 中，有一个新属性：manifest。

提示和注释

注释：如果您出于某种原因，希望定义 xmlns 属性，唯一合法的值是 "http://www.w3.org/1999/xhtml"。

属性

属性值描述
manifesturl定义一个 URL，在这个 URL 上描述了文档的缓存信息。
xmlnshttp://www.w3.org/1999/xhtml定义 XML namespace 属性。

标准属性

<HTML> 标签支持 HTML 5 中的标准属性。

事件属性

<HTML> 标签支持 HTML 5 中的事件属性


注意，作为HTML文档的最外层元素，请正确书写<html>标签，并将其它HTML标签正确的放置在<html>标签中！


注意事项:
尽管在 HTML 里它不是必需的，可以是隐含的，但是在 XHTML 里必须明确给出 <html> 元素的开标签和闭标签。


实例

当内容的主题发生变化时，使用 <hr> 标签进行分隔：

<h1>HTML</h1><p>HTML 是用于描述 web 页面的一种语言。</p><hr><h1>CSS</h1><p>CSS 定义如何显示 HTML 元素。</p>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <hr> 标签。

标签定义及使用说明

<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。

<hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，<hr> 定义内容中的主题变化，并显示为一条水平线。

在 HTML 4.01 中，<hr> 标签仅仅显示为一条水平线。

在 HTML 4.01 中，所有的布局属性都 已废弃。在 HTML5 中不再支持这些属性。请使用 CSS 来为 <hr> 元素定义样式。

HTML 与 XHTML 之间的差异

在 HTML 中，<hr> 标签没有结束标签。

在 XHTML 中，<hr> 标签必须被正确地关闭，比如 <hr />。

属性

属性 值 描述
align (已废弃)
 left
center
right		 HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的对齐方式
noshade (已废弃) noshade HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的颜色呈现为纯色。
size (已废弃) pixels HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的高度。
width (已废弃) pixels
%		 HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的宽度。

全局属性

<hr> 标签支持 HTML 的全局属性。

事件属性

<hr> 标签支持 HTML 的事件属性。

实例

HTML5 <fieldset>标签用于对表单中的相关元素进行分组：

<form> <fieldset>   <legend>Personalia:</legend>   Name: <input type="text"><br>   Email: <input type="text"><br>   Date of birth: <input type="text"> </fieldset></form>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <fieldset> 标签。

标签定义及使用说明

<fieldset> 标签可以将表单内的相关元素分组。

<fieldset> 标签会在相关表单元素周围绘制边框。

提示和注释

提示：<legend> 标签为 <fieldset> 元素定义标题。

HTML 4.01 与 HTML5之间的差异

HTML5 中新增了一些 <fieldset> 的新属性：disabled、form、name，HTML 4.01 中不支持这些属性。

属性

New ：HTML5 中的新属性。

属性 值 描述
disabledNew disabled 规定该组中的相关表单元素应该被禁用。
formNew form_id 规定 fieldset 所属的一个或多个表单。
nameNew text 规定 fieldset 的名称。

全局属性

<fieldset> 标签支持 HTML 的全局属性。

事件属性

<fieldset> 标签支持 HTML 的事件属性。

定义和用法

<frame> 标签定义子窗口（框架）。

由于该标签对网页可用性的负面影响，在 HTML 5 中 <frame> 标签没有得到支持。不过，你可以在本站的“HTML <frame>标签”部分了解该标签的使用方法！

属性

    src

 这个属性指定了由帧展示的文档。
name
这个属性用于给帧添加标签。如果没有标签，所有链接都会在它们所在的帧中打开。
noresize
这个属性避免让用户改变帧的大小。
scrolling
这个属性定义了滚动条的存在。如果不使用这个属性，浏览器会按需放置滚动条。有两个选择："yes" 用于展示滚动条，即使是多余的；"no" 用于不展示滚动条，即使它是必要的。
marginheight
这个属性定义了帧之间的边距有多高。
marginwidth
这个属性定义了帧之间的边距有多宽。
frameborder
这个属性允许你为帧添加边框。


HTML 4.01 与 HTML 5 之间的差异

在 HTML 5 中不支持 <frame> 标签。


实例

带有两个输入字段和一个提交按钮的 HTML 表单：

<form action="demo_form.php" method="get">  First name: <input type="text" name="fname"><br>  Last name: <input type="text" name="lname"><br>  <input type="submit" value="提交"></form>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <form> 标签。

标签定义及使用说明

<form> 标签用于创建供用户输入的 HTML 表单。

可以用 :valid 和:invalid CSS 伪类 来给一个元素指定样式。


<form> 元素包含一个或多个如下的表单元素：

HTML 4.01 与 HTML5之间的差异

HTML5 新增了两个新的属性：autocomplete 和 novalidate，同时不再支持 HTML 4.01 中的某些属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，name 属性已被废弃。使用全局 id 属性代替。

属性

属性 值 描述
accept MIME_type HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）
accept-charset character_set 规定服务器可处理的表单数据字符集。
action URL 规定当提交表单时向何处发送表单数据。
autocomplete（新属性） on
off		 规定是否启用表单的自动完成功能。
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）
method get
post		 规定用于发送表单数据的 HTTP 方法。
name text 规定表单的名称。
novalidate（新属性） novalidate 如果使用该属性，则提交表单时不进行验证。
target _blank
_self
_parent
_top		 规定在何处打开 action URL。

全局属性

<form> 标签支持 HTML 的全局属性。

事件属性

<form> 标签支持 HTML 的事件属性。

Examples

尝试一下 - 实例

带有复选框的表单
此表单包含两个复选框和一个提交按钮。

带有单选按钮的表单
此表单包含两个单选框和一个提交按钮。

相关文章

HTML 教程：HTML 表单和输入

HTML DOM 参考手册： Form 对象


实例

被嵌入的 flash 动画片：

<embed src="helloworld.swf">
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

注意: 大多数现代浏览器已经弃用并取消了对浏览器插件的支持，所以如果您希望您的网站可以在普通用户的浏览器上运行，那么依靠 <embed> 通常是不明智的。

标签定义及使用说明

<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）。

HTML 4.01 与 HTML5之间的差异

<embed> 标签是 HTML 5 中的新标签。

属性

New ：HTML5 中的新属性。

属性 值 描述
heightNew pixels 规定嵌入内容的高度。
srcNew URL 规定被嵌入内容的 URL。
typeNew MIME_type 规定嵌入内容的 MIME 类型。
注：MIME = Multipurpose Internet Mail Extensions。
widthNew pixels 规定嵌入内容的宽度。

全局属性

<embed> 标签支持 HTML 的全局属性。

事件属性

<embed> 标签支持 HTML 的事件属性。


实例

文档中的一个区域将显示为蓝色：

<div style="color:#0000FF"> <h3>这是一个在 div 元素中的标题。</h3> <p>这是一个在 div 元素中的文本。</p></div>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <div> 标签。

标签定义及使用说明

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

提示和注释

提示：<div> 元素经常与 CSS 一起使用，用来布局网页。

注释：默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。

HTML 4.01 与 HTML5之间的差异

HTML5 中不支持 align 属性。

在 HTML 4.01 中，align 属性 已废弃。

属性

属性 值 描述
align (已废弃) left
right
center
justify		 HTML5 不支持。HTML 4.01 已废弃。 规定 <div> 元素中的内容的对齐方式。

全局属性

<div> 标签支持 HTML 的全局属性。

事件属性

<div> 标签支持 HTML 的事件属性。

相关文章

HTML 教程：HTML 布局

实例

使用 <details> 元素：

<details><summary>Copyright 1999-2011.</summary><p> - by Refsnes Data. All Rights Reserved.</p><p>All content and graphics on this web site are the property of the company Refsnes Data.</p></details>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前，只有 Chrome 和 Safari 6 支持 <details> 标签。

标签定义及使用说明

<details> 标签规定了用户可见的或者隐藏的需求的补充细节。

<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。

<details> 元素的内容对用户是不可见的，除非设置了 open 属性。

HTML 4.01 与 HTML5之间的差异

<details> 标签是 HTML5 中的新标签。

提示和注释

提示：与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

属性

New ：HTML5 中的新属性。

属性值描述
openNewopen规定 details 是否可见。

全局属性

<details> 标签支持 HTML 的全局属性。

事件属性

<details> 标签支持 HTML 的事件属性。

实例

一段带有已删除部分和新插入部分的文本：

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <del> 标签。

标签定义及使用说明

<del> 标签定义文档中已删除的文本。

提示和注释

提示：<ins> 标签的作用恰恰于此相反：表示文档中添加的内容。

提示：<del> 和 <ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。

HTML 4.01 与 HTML5之间的差异

无。

属性

属性 值 描述
cite URL 规定一个解释了文本被删除的原因的文档的 URL。
datetime YYYY-MM-DDThh:mm:ssTZD 规定文本被删除的日期和时间。

全局属性

<del> 标签支持 HTML 的全局属性。

事件属性

<del> 标签支持 HTML 的事件属性。


定义和用法

以下元素都是短语元素。并不反对使用它们，但是通过使用样式表，可能取得更丰富的效果。

<em>呈现为被强调的文本。
<strong>定义重要的文本。
<dfn>定义一个定义项目。
<code>定义计算机代码文本。
<samp>定义样本文本。
<kbd>定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite>定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中，<strong> 定义语气更重的强调文本，但是在 HTML 5 中，<strong> 定义重要的文本。

示例

<em> 元素通常被用于指示一个隐式或显式的对比。 

<p>  In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.</p>

示例

<strong>表示文本十分重要，一般用粗体显示。

<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>

<dfn> 使用说明：

  • <dfn> 元素标记了被定义的术语；术语定义应当在 <p>, <section>或定义列表 (通常是<dt>, <dd> 对)中给出。

    被定义术语的值由下列规则确定：如果 <dfn> 元素有一个 title 属性，那么该术语的值就是该属性的值。否则，如果它仅包含一个 <abbr> 元素，该元素拥有 title 属性，那么该术语的值就是该属性的值。否则，<dfn> 元素的文本内容就是该术语的值。

示例

HTML <code> 元素呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示. 

<p>Regular text. <code>This is code.</code> Regular text.</p>

示例

<samp> 元素用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体 

<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>

示例

<kbd> 用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示。 

<p>Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p><p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

示例

<var> 标签表示变量的名称，或者由用户提供的值。 

<p> A simple equation: <var>x</var> = <var>y</var> + 2 </p>

示例

<cite> 表示一个作品的引用。

More information can be found in <cite>[ISO-0000]</cite>.

属性

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title

事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload


实例

HTML5 <caption>标签用来为表格定义一个标题，使用示例如下：

带有标题的表格：

<table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <caption> 标签。

标签定义及使用说明

<caption> 标签定义表格的标题。

<caption> 标签必须直接放置到 <table> 标签之后。

您只能对每个表格定义一个标题。

提示：通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 align 属性。

HTML 4.01 已废弃 align 属性。

属性

属性 值 描述
align (已废弃)
 left
right
top
bottom		 HTML5 不支持。HTML 4.01 已废弃。 定义标题的对齐方式。

使用说明: 当 <table> 元素是 <caption> 的父元素，caption是 <figure> 元素的唯一后代的时候，使用 <figcaption> 元素替代 caption 元素

全局属性

<caption> 标签支持 HTML 的全局属性。

事件属性

<caption> 标签支持 HTML 的事件属性。


实例

HTML5 <colgroup>标签可以组合<col>标签。

<colgroup> 和 <col> 标签为表格中的三个列设置了背景色：

 <table border="1">  <colgroup>    <col span="2" style="background-color:red">    <col style="background-color:yellow">  </colgroup>  <tr>    <th>ISBN</th>    <th>Title</th>    <th>Price</th>  </tr>  <tr>    <td>3476896</td>    <td>My first HTML</td>    <td>$53</td>  </tr></table>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <colgroup> 标签。

标签定义及使用说明

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。

通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

注释：只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。

提示：如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。

HTML 4.01 与 HTML5之间的差异

HTML5 中不再支持 HTML 4.01 中的大部分属性。

属性

属性 值 描述
align (已废弃)
 left
right
center
justify
char		 HTML5 不支持。规定在列组合中内容的水平对齐方式。
char (已废弃) character HTML5 不支持。规定根据哪个字符来对齐列组中的内容。
charoff (已废弃) number HTML5 不支持。规定第一个对齐字符的偏移量。
span number 规定列组应该横跨的列数。
valign (已废弃) top
middle
bottom
baseline		 HTML5 不支持。定义在列组合中内容的垂直对齐方式。
width (已废弃) pixels
%
relative_length		 HTML5 不支持。规定列组合的宽度。

全局属性

<colgroup> 标签支持 HTML 的全局属性。

事件属性

<colgroup> 标签支持 HTML 的事件属性。

实例

HTML5 <col> 标签用于控制表格中的列，使你更加方便的为表格中的列应用样式。

<colgroup> 和 <col> 标签为表格中的三个列设置了背景色：

<table border="1">  <colgroup>    <col span="2" style="background-color:red">    <col style="background-color:yellow">  </colgroup>  <tr>    <th>ISBN</th>    <th>Title</th>    <th>Price</th>  </tr>  <tr>    <td>3476896</td>    <td>My first HTML</td>    <td>$53</td>  </tr></table>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 <col> 标签。

标签定义及使用说明

<col> 标签规定了 <colgroup> 元素内部的每一列的列属性。

通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

HTML 4.01 与 HTML5之间的差异

HTML5 中不再支持 HTML 4.01 中的大部分属性。

HTML 与 XHTML 之间的差异

在 HTML 中，<col> 标签没有结束标签。

在 XHTML 中，<col> 标签必须被正确的关闭。

属性

属性值描述
align (已废弃)
left
right
center
justify
char		HTML5 不支持。规定与 <col> 元素相关的内容的水平对齐方式。
char (已废弃)
characterHTML5 不支持。规定根据哪个字符来对齐与 <col> 元素相关的内容。
charoff (已废弃)
numberHTML5 不支持。规定第一个对齐字符的偏移量。
spannumber规定 <col> 元素应该横跨的列数。
valign (已废弃)
top
middle
bottom
baseline		HTML5 不支持。规定与 <col> 元素相关的内容的垂直对齐方式。
width (已废弃)
%
pixels
relative_length		HTML5 不支持。Specifies the width of a <col> element

全局属性

<col> 标签支持 HTML 的全局属性。

事件属性

<col> 标签支持 HTML 的事件属性。

HTML <canvas> 标签

实例

通过 <canvas> 元素来显示一个红色的矩形：

<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>编程狮(51coolma.cn)</title> 
</head> <body><canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById('myCanvas');var ctx=c.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);</script></body></html>

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <canvas> 标签。

标签定义及使用说明

<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

HTML 4.01 与 HTML5之间的差异

<canvas> 标签是 HTML5 中的新标签。

提示和注释

注释：<canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。

提示：如想了解 canvas 对象的所有属性和方法，请参阅HTML 画布参考手册。

属性

New : HTML5 中的新属性。

属性值描述
height     (New)pixels规定画布的高度。
width      (New)pixels规定画布的宽度。

全局属性

<canvas> 标签支持 HTML 的全局属性。

事件属性

<canvas> 标签支持 HTML 的事件属性。


实例

HTML5 <command>标签用于定义命令按钮。

<command> 可以进行如下标记：

<menu><command type="command" label="Save" onclick="save()">Save</command></menu>
尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前，主流浏览器都不支持 <command> 标签。

注释：只有 IE 9 支持 <command> 标签，其他之前版本或者之后版本的 IE 浏览器不支持 <command> 标签。

标签定义及使用说明

<command> 标签可以定义用户可能调用的命令（比如单选按钮、复选框或按钮）。

当使用 <menu> 元素时，command 元素将作为菜单或者工具栏的一部分显示出来。但是，用 command 规定键盘快捷键时，command元素能被放置在页面的任何位置，但元素不可见。

HTML 4.01 与 HTML5之间的差异

<command> 标签是 HTML 5 中的新标签。

属性

New ：HTML5 中的新属性。

属性 值 描述
checkedNew checked 规定当页面加载时，command 是否被选中。仅用于 radio 或 checkbox 类型。
disabledNew disabled 规定 command 是否可用。
iconNew URL 规定作为 command 来显示的图像的 URL。
labelNew text 必需。规定 command 的名字，对用户可见。
radiogroupNew groupname 规定可进行切换且将被切换的 command 所属的组名。仅在类型为 radio 时使用。
typeNew checkbox
command
radio		 定义 command 的类型。默认是 "command"。

全局属性

<command> 标签支持 HTML 的全局属性。

事件属性

<command> 标签支持 HTML 的事件属性。

定义和用法

<center> 标签对其包围的文本进行水平居中处理。HTML5不支持使用<center>标签，因此有关该标签的更多信息，请参考“HTML <center>标签”部分！

示例:

<center>这个文本将被居中<p>这是一个段落</p></center>

示例 2 (CSS 替代)

<div style="text-align:center">这个文本将被居中<p>这是一个段落</p></div>

HTML 4.01 与 HTML 5 之间的差异

在 HTML 5 中，不支持该标签。请使用 CSS 代替。

提示和注释

提示：请使用 CSS 来居中文本。

相关参考

CSS教程：CSS text-align 属性



HTML <body> 标签

实例

一个简单的 HTML 文档，包含尽可能少的必需的标签：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>文档标题</title></head><body>文档内容......</body></html>

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 <body> 标签。

标签定义及使用说明

<body> 标签定义文档的主体。

<body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

HTML 4.01 与 HTML5之间的差异

在 HTML 5 中，删除了所有 body 元素的"呈现属性"。

在 HTML 4.01 中，所有 body 元素的"呈现属性" 已废弃。

属性

属性值描述
alinkcolorHTML5 不支持。 HTML 4.01 已废弃。 规定文档中活动链接的颜色。
backgroundURLHTML5 不支持。 HTML 4.01 已废弃。 规定文档的背景图像。
bgcolorcolorHTML5 不支持。 HTML 4.01 已废弃。规定文档的背景颜色。
linkcolorHTML5 不支持。 HTML 4.01 已废弃。规定文档中未访问链接的颜色。
textcolorHTML5 不支持。 HTML 4.01 已废弃。规定文档中所有文本的颜色。
vlinkcolorHTML5 不支持。 HTML 4.01 已废弃。规定文档中已被访问链接的颜色。


全局属性

<body> 标签支持 HTML 的全局属性。

事件属性

<body> 标签支持 HTML 的事件属性。

相关文章

HTML 教程： HTML 元素

HTML DOM 参考手册：Body 对象


HTML <bdi> 标签

实例

将用户名从周围的文本方向设置中隔离出来： 

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head><body><p>在下面的示例中,显示着每个用户比赛的分数。将用户名从周围的文本方向设置中隔离出来。</p><ul> <li>用户 <bdi>hrefs</bdi>: 60 分</li> <li>用户 <bdi>jdoe</bdi>: 80 分</li> <li>用户 <bdi>إيان</bdi>: 90 分</li></ul><p><b>注意：</b> 目前只有 Firefox 和 Chrome 浏览器支持 bdi 标签。</p></body></html>

浏览器支持


元素Google ChromeInternet ExplorerFirefoxSafariOpera
<bdi>Yes不支持YesYesYes

标签定义及使用说明

bdi 指的是 bidi 隔离（Bi-directional Isolation）。

<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。

在发布用户评论或其他您无法完全控制的内容时，该标签很有用。

HTML 4.01 与 HTML5之间的差异

<bdi> 标签是 HTML5 的新标签。

全局属性

<bdi> 标签支持 HTML 的全局属性。

事件属性

<bdi> 标签支持 HTML 的事件属性。


定义和用法

<bdo> 标签覆盖默认的文本方向。bdo 指的是 bidi 覆盖（Bi-Directional Override）。

实例

在这个实例中，我们将改变显示文本的方向，使该段文本从右到左显示：

<p>该段落文字从左到右显示</p><p><bdo dir="rtl">该段落文字从右到左显示</bdo></p>

亲自试一试

HTML 4.01 与 HTML 5 之间的差异

HTML4 的规范文档中没有描述该元素的事件，它们在 XHTML 中被添加。这应该是当时的疏忽。

属性

属性 值 描述
dir
  • ltr
  • rtl
 必需。定义文本方向。

标准属性

<bdo> 标签支持 HTML 5 中的标准属性。

事件属性

<bdo> 标签支持 HTML 5 中的事件属性。


HTML <audio> 标签

实例

保存一段音频存在自己项目中输入下面代码即可实现播放声音：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>编程狮(w3cschool.cn)</title> 
</head><body><audio controls>  <source src="音频文件路径" >  <source src="音频文件路径" >您的浏览器不支持 audio 元素。</audio></body></html>

浏览器支持

Internet Explorer  Firefox  Opera  Google Chrome  Safari

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 标签。

注释： IE 8 或更早版本的 IE 浏览器不支持 <audio> 标签。

标签定义及使用说明

<audio> 标签定义声音，比如音乐或其他音频流。

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

浏览器MP3WavOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

HTML 4.01 与 HTML5之间的差异

<audio> 标签是 HTML5 的新标签。

提示和注释

提示：可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

属性

New ：HTML5 中的新属性。

属性值描述
autoplay   （New）
autoplay如果出现该属性，则音频在就绪后马上播放。
controls    （New）controls如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop          （New）loop如果出现该属性，则每当音频结束时重新开始播放。
muted      （New）muted如果出现该属性，则音频输出为静音。
preload     （New）auto
metadata
none		规定当网页加载时，音频是否默认被加载以及如何被加载。
src              （New）URL规定音频文件的 URL。

全局属性

<audio> 标签支持 HTML 的全局属性。

事件属性

<audio> 标签支持 HTML 的事件属性。





定义和用法

<ul> 标签定义无序列表。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中，ul 元素的 "compact" 和 "type" 属性是不被赞成使用的。在 HTML 5 中，不再支持这两个属性。

提示和注释

提示：请使用 CSS 来定义列表的类型。

例子

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>编程狮</title> </head> <body><h4>无序列表:</h4><ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul></body></html>

属性

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title

如需完整的描述，请访问 HTML 5 中标准属性。

事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

如需完整的描述，请访问 HTML 5 中事件属性。