1秒登录
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
<b>
</b>
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
例子解释
<html> 与 </html> 之间的文本描述网页 <body> 与 </body> 之间的文本是可见的页面内容 <h1> 与 </h1> 之间的文本被显示为标题 <p> 与 </p> 之间的文本被显示为段落
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>
<h6>
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
HTML 段落是通过 <p> 标签进行定义的。
<p>
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML 链接是通过 <a> 标签进行定义的。
<a>
<a href="http://www.w3school.com.cn">This is a link</a>
注释：在 href 属性中指定链接的地址，href是Hypertext Reference的缩写。
HTML 图像是通过 <img> 标签进行定义的。
<img>
<img src="w3school.jpg" width="104" height="142" />
注释：图像的名称和尺寸是以属性的形式提供的。
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML 文档实例
<html> <body> <p>This is my first paragraph.</p> </body> </html>
上面的例子包含三个 HTML 元素
<p>This is my first paragraph.</p>
<p> 元素： 这个 <p> 元素定义了 HTML 文档中的一个段落。 这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。 元素内容是：This is my first paragraph。
</p>
<body> <p>This is my first paragraph.</p> </body>
<body> 元素： <body> 元素定义了 HTML 文档的主体。 这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。 元素内容是另一个 HTML 元素（p 元素）。
<body>
</body>
<html> 元素： <html> <body> <p>This is my first paragraph.</p> </body> </html>
<html> 元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 <html>，以及一个结束标签</html>。 元素内容是另一个 HTML 元素（body 元素）。
<html>
</html>
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
<p>This is a paragraph <p>This is a paragraph
上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
注释：未来的 HTML 版本不允许省略结束标签。
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。 <br> 就是没有关闭标签的空元素（<br> 标签定义换行）。 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。 在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。 即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
<br>
<br />
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
<P>
属性为 HTML 元素提供附加信息。
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<html> <body> <h1 align="center">This is heading 1</h1> <p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p> </body> </html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> </head> <body bgcolor="yellow"> <h2>请看: 改变了颜色的背景。</h2> </body> </html>
HTML 提示：使用小写属性，属性和属性值对大小写不敏感。
始终为属性值加引号
name='Bill "HelloWorld" Gates'
完整的 HTML 参考手册
HTML 标准属性参考手册
在 HTML 文档中，标题很重要。
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。 <h1> 定义最大的标题。<h6> 定义最小的标题。
<h1> - <h6>
注释：浏览器会自动地在标题的前后添加空行。 注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
标题很重要
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。 搜索引擎使用标题为您的网页的结构和内容编制索引。 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
<hr />
hr
提示：使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。
<hr>
<!-- This is a comment -->
注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
右键 --> “查看源文件”（IE）||“查看页面源代码”（Firefox）|| 检查元素（Safari）
<p>This is a paragraph</p> <p>This is another paragraph</p>
注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素） 提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！但是不要用 <br /> 标签去创建列表
<p></p>
<p>This is a paragraph <p>This is another paragraph
上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。
注释：在未来的 HTML 版本中，不允许省略结束标签。 提示：通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>This is<br />a para<br />graph with line breaks</p> <br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。 您也许发现 <br> 与 <br /> 很相似。 在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。 即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。 对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
<html> <body> <b>This text is bold</b> <br /> <strong>This text is strong</strong> <br /> <big>This text is big</big> <br /> <em>This text is emphasized</em> <br /> <i>This text is italic</i> <br /> <small>This text is small</small> <br /> This text contains <sub>subscript</sub> <br /> This text contains <sup>superscript</sup> </body> </html>
<html> <body> <pre> 这是 预格式文本。 它保留了 空格 和换行。 </pre> <p>pre 标签很适合显示计算机代码：</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html>
<html> <body> <code>Computer code</code> <br /> <kbd>Keyboard input</kbd> <br /> <tt>Teletype text</tt> <br /> <samp>Sample text</samp> <br /> <var>Computer variable</var> <br /> <p> <b>注释：</b>这些标签常用于显示计算机/编程代码。 </p> </body> </html>
<!DOCTYPE html> <html> <body> <address> Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> </body> </html>
<html> <body> <abbr title="etcetera">etc.</abbr> <br /> <acronym title="World Wide Web">WWW</acronym> <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p> <p>仅对于 IE 5 中的 acronym 元素有效。</p> <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p> </body> </html>
<html> <body> <p> 如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)； </p> <bdo dir="rtl"> Here is some Hebrew text </bdo> </body> </html>
<html> <body> 这是长的引用： <blockquote> 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。 </blockquote> 这是短的引用： <q> 这是短的引用。 </q> <p> 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。 </p> </body> </html>
<html> <body> <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p> <p>大多数浏览器会改写为删除文本和下划线文本。</p> <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p> </body> </html>
文本格式化标签
计算机输出”标签
引用、引用和术语定义
可以使用专业的 HTML 编辑器来编辑 HTML：
不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法。 通过记事本，依照以下四步来创建您的第一张网页。
当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名
通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。
<head>
<html> <head> <style type="text/css"> h1 {color: red} p {color: blue} </style> </head> <body> <h1>header 1</h1> <p>A paragraph.</p> </body> </html>
本例演示如何使用样式属性做一个没有下划线的链接。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> </head> <body> <a href="www.baidu.com" style="text-decoration:none"> 这是一个链接！ </a> </body> </html>
本例演示如何<link>标签链接到一个外部样式表。
<link>
<html> <head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > </head> <body> <h1>我通过外部样式表进行格式化。</h1> <p>我也一样！</p> </body> </html>
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
1.外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2.内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<style>
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
3.内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
HTML 使用超级链接与网络上的另一个文档相连。 几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 我们通过使用 <a> 标签在 HTML 中创建链接。 有两种使用 <a> 标签的方式： 1.通过使用 href 属性 - 创建指向另一个文档的链接 2.通过使用 name 属性 - 创建文档内的书签
链接的 HTML 代码很简单。它类似这样：
<a href="url">Link text</a>
<a href="http://www.w3school.com.cn/">Visit W3School</a>
上面这行代码显示为：Visit W3School 点击这个超链接会把用户带到 W3School 的首页。
提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
使用 Target 属性，你可以定义被链接的文档在何处显示。 下面的这行会在新窗口打开文档：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
name 属性规定锚（anchor）的名称。 您可以使用 name 属性创建 HTML 页面中的书签。 书签不会以任何特殊方式显示，它对读者是不可见的。 当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>
提示：锚的名称可以是任何你喜欢的名字。 提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。
实例
1.首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
2.然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
3.您也可以在其他页面中创建指向该锚的链接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
有用的提示
具体效果就是点击“有用的提示”跳转到相应位置，如同书签
注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html" ,就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/" 提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。 提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html" ,就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"
提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
<html> <body> <p> <p><a href="http://www.baidu.com/">打开百度</a> 百度</p> </body> </html>
<html> <body> <p> 您也可以使用图像来作链接： <a href="http://scimg.jb51.net/allimg/160518/14-16051Q51020515.jpg"> <img border="0" src="http://scimg.jb51.net/allimg/160518/14-16051PZ1525c.jpg" /> </a> </p> </body> </html>
<html> <body> <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。 </p> </body> </html>
<html> <body> <p>被锁在框架中了吗？</p> <a href="/index.html" target="_top">请点击这里！</a> </body> </html>
<html> <body> <p> 这是另一个 mailto 链接： <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a> </p> <p> <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 </p> </body> </html> <html> <body> <p> 这是邮件链接： <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a> </p> <p> <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 </p> </body> </html>
src
在 HTML 中，图像由 <img> 标签定义。 <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。 要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。 定义图像的语法是：
<img src="url" />
alt
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
<!DOCTYPE HTML> <html> <body> <p> 一幅图像： <img src="/i/eg_mouse.jpg" width="128" height="128" /> </p> <p> 一幅动画图像： <img src="/i/eg_cute.gif" width="50" height="50" /> </p> <p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p> </body> </html>
来自另一个文件夹的图像： <img src="/i/ct_netscape.jpg" /> 来自 W3School.com.cn 的图像： <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
<html> <body background="/i/eg_background.jpg"> <h3>图像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果图像小于页面，图像会进行重复。</p> </body> </html>
<html> <body> <h2>未设置对齐方式的图像：</h2> <p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p> <h2>已设置对齐方式的图像：</h2> <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p> <p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p> <p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p> <p>请注意，bottom 对齐方式是默认的对齐方式。</p> </body> </html>
<html> <body> <p> <img src ="/i/eg_cute.gif" align ="left"> 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。 </p> <p> <img src ="/i/eg_cute.gif" align ="right"> 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。 </p> </body> </html>
<img src="/i/eg_mouse.jpg" width="50" height="50">
- 为图片显示替换文本 ```html <p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p> <p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p> <img src="/i/eg_goleft.gif" alt="向左转" /> <p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>
<html> <body> <p>请点击图像上的星球，把它们放大。</p> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p> </body> </html>
<!DOCTYPE html> <html> <body> <p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p> <a href="/example/html/html_ismap.html"> <img src="/i/eg_planets.jpg" ismap /> </a> </body> </html>
你可以使用 HTML 创建表格。
<table border="1"><th>说明</th><tr><tr> 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1"><th>说明</th><tr><tr>
<table>
<tr>
<td>
td
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。 使用边框属性来显示一个带有边框的表格：
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
表格的表头使用 <th>标签进行定义。 大多数浏览器会把表头显示为粗体居中的文本：
<th>
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td></td> <td>row 2, cell 2</td> </tr> </table>
注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td> </td> <td>row 2, cell 2</td> </tr> </table>
<h4>这个表格没有边框：</h4> <table> /* 或则是这句<table border="0"> */ <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
<html> <body> <h4>表头：</h4> <table border="1"> <tr> <th>姓名</th> <th>电话</th> <th>电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>垂直的表头：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th>电话</th> <td>555 77 854</td> </tr> <tr> <th>电话</th> <td>555 77 855</td> </tr> </table> </body> </html>
<html> <body> <table border="1"> <tr> <td>Some text</td> <td>Some text</td> </tr> <tr> <td></td> <td>Some text</td> </tr> </table> <p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p> <p>我们的技巧是在单元中插入一个 no-breaking 空格。</p> <p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p> <p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p> </body> </html>
<html> <body> <h4>这个表格有一个标题，以及粗边框：</h4> <table border="6"> <caption>我的标题</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body>
<html> <body> <h4>横跨两列的单元格：</h4> <table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>横跨两行的单元格：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">电话</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>
<html> <body> <table border="1"> <tr> <td> <p>这是一个段落。</p> <p>这是另一个段落。</p> </td> <td>这个单元包含一个表格： <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>这个单元包含一个列表： <ul> <li>苹果</li> <li>香蕉</li> <li>菠萝</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>
<html> <body> <h4>没有 cellpadding：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>带有 cellpadding：</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
<html> <body> <h4>没有 cellspacing：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>带有 cellspacing：</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
<h4>背景颜色：</h4> <table border="1" bgcolor="red"> <h4>背景图像：</h4> <table border="1" background="/i/eg_bg_07.gif">
<td bgcolor="red">First</td> <td background="/i/eg_bg_07.gif"> Second</td>
<html> <body> <table width="400" border="1"> <tr> <th align="left">消费项目....</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">衣服</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">化妆品</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">食物</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">总计</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr> </table> </body> </html>
<html> <body> <p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p> <p>Table with frame="box":</p> <table frame="box"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="above":</p> <table frame="above"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="below":</p> <table frame="below"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="hsides":</p> <table frame="hsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="vsides":</p> <table frame="vsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html>
表格标签
HTML 支持有序、无序和定义列表
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>
<ul> <li>Coffee</li> <li>Milk</li> </ul>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<ol> <li>Coffee</li> <li>Milk</li> </ol>
自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>
<dd>
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
列表标签
<ol> 定义有序列表。 <ul> 定义无序列表。 <li> 定义列表项。 <dl> 定义定义列表。 <dt> 定义定义项目。 <dd> 定义定义的描述。 <dir> 已废弃。使用 <ul> 代替它。 <menu> 已废弃。使用 <ul> 代替它。
<table border="1"><th>举例</th><tr><tr>
<ul type="disc"> 实心黑点 <ul type="circle"> 圆圈 <ul type="square">实心方块
<ol></ol> 数字列表 <ol type="A"> 字母列表 <ol type="a"> 小写字母 <ol type="I"> 罗马字母 <ol type="i"> 小写罗马
<h4>一个嵌套列表：</h4> <ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶 <ul> <li>中国茶</li> <li>非洲茶</li> </ul> </li> </ul> </li> <li>牛奶</li> </ul>
<h2>一个定义列表：</h2> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
<div>
<span>
可以通过<div>和 <span> 将 HTML 元素组合起来。
大多数 HTML 元素被定义为块级元素或内联元素。 编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。 块级元素在浏览器显示时，通常会以新行来开始（和结束）。 例子：<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。 例子：<b>, <td>, <a>, <img>
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素是内联元素，可用作文本的容器。 <span> 元素也没有特定的含义。 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
标签 描述 <div> 定义文档中的分区或节（division/section）。 <span> 定义 span，用来组合文档中的行内元素。
提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
<!DOCTYPE html> <html> <head> <style type="text/css"> div#container{width:500px} div#header {background-color:#99bbbb;} div#menu {background-color:#ffff99;height:200px;width:150px;float:left;} div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;} div#footer {background-color:#99bbbb;clear:both;text-align:center;} h1 {margin-bottom:0;} h2 {margin-bottom:0;font-size:18px;} ul {margin:0;} li {list-style:none;} </style> </head> <body> <div id="container"> <div id="header"> <h1>Main Title of Web Page</h1> </div> <div id="menu"> <h2>Menu</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">Content goes here</div> <div id="footer">Copyright W3School.com.cn</div> </div> </body> </html>
<!DOCTYPE html> <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#99bbbb;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr valign="top"> <td style="background-color:#ffff99;width:100px;text-align:top;"> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript </td> <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#99bbbb;text-align:center;"> Copyright W3School.com.cn</td> </tr> </table> </body> </html>
提示：使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。 提示：由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
HTML 布局标签
<form>
<form> ... input 元素 ... </form>
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
<input>
<form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form>
注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
<form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form>
注意，只能从中选取其一。
<form> <input type="checkbox" name="bike" /> I have a bike <br /> <input type="checkbox" name="car" /> I have a car </form>
<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。
<html> <body> <form> 用户： <input type="text" name="user"> <br /> 密码： <input type="password" name="password"> </form> <p> 请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。 </p> </body> </html>
<html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
<html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
<html> <body> <p> This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. </p> <textarea rows="10" cols="30"> The cat was playing in the garden.
<input type="button" value="Hello world!">
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。 使用框架的坏处：
框架结构标签（）
编者注：frameset 标签也被某些文章和书籍译为框架集。
Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 标签中加入：noresize="noresize"。 为不支持框架的浏览器添加 <noframes> 标签。
<noframes>
重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body>标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
<body></body>
<frameset></frameset>
<html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的浏览器无法处理框架！</body> </noframes> </frameset> </html>
<html> <frameset rows="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </html>
<html> <frameset rows="50%,50%"> <frame src="/example/html/frame_a.html"> <frameset cols="25%,75%"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </frameset> </html>
<html> <frameset cols="50%,*,25%"> <frame src="/example/html/frame_a.html" noresize="noresize" /> <frame src="/example/html/frame_b.html" /> <frame src="/example/html/frame_c.html" /> </frameset> </html>
<html> <frameset cols="120,*"> <frame src="/example/html/html_contents.html"> <frame src="/example/html/frame_a.html" name="showframe"> </frameset> </html>
<html> <body> <iframe src="/i/eg_landscape.jpg"></iframe> <p>一些老的浏览器不支持 iframe。</p> <p>如果得不到支持，iframe 是不可见的。</p> </body> </html>
<iframe src="URL"></iframe>
URL 指向隔离页面的位置。
height 和 width 属性用于规定 iframe 的高度和宽度。 属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 "0" 就可以移除边框：
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
背景（Backgrounds）
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
背景颜色（Bgcolor）
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
黑色 <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">
背景（Background）
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制
<body background="clouds.gif"> <body background="http://www.w3school.com.cn/clouds.gif">
URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。
提示：如果你打算使用背景图片，你需要紧记一下几点：
<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。 应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
颜色由红色、绿色、蓝色混合而成。
颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。 每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。 这个表格给出了由三种颜色混合而成的具体效果：
颜色名
大多数的浏览器都支持颜色名集合。
提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色，需要使用十六进制的颜色值。
Web安全色
数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。 我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。
216 跨平台色
最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。
颜色名和文字搭配对比
<!DOCTYPE> 声明帮助浏览器正确地显示网页。
<!DOCTYPE> 声明
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。 HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。 <!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。 提示：W3School 即将升级为最新的 HTML5 文档类型。
带有 HTML5 DOCTYPE 的 HTML 文档：
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
HTML 版本
从 Web 诞生早期至今，已经发展出多个 HTML 版本：
HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013
常用的声明
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。 以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title> 元素
<title>
<title> 标签定义文档的标题
HTML <base>元素
<base>
<link> 标签定义文档与外部资源之间的关系。 <link> 标签最常用于连接样式表： <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。 您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式： <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
HTML <meta> 元素
<meta>
元数据（metadata）是关于数据的信息。 <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。 典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 <meta> 标签始终位于 head 元素中。 元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 针对搜索引擎的关键词 一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。 下面的 meta 元素定义页面的描述： <meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> 下面的 meta 元素定义页面的关键词： <meta name="keywords" content="HTML, CSS, XML" /> name 和 content 属性的作用是描述页面的内容。
HTML <script> 元素
<script>
<script> 标签用于定义客户端脚本，比如 JavaScript。 我们会在稍后的章节讲解 script 元素。
HTML 头部元素
标签 描述 <head> 定义关于文档的信息。 <title> 定义文档标题。 <base> 定义页面上所有链接的默认地址或默认目标。 <link> 定义文档与外部资源之间的关系。 <meta> 定义关于 HTML 文档的元数据。 <script> 定义客户端脚本。 <style> 定义文档的样式信息。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> </head> <body> <p> 对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a> </p> <p>您将在 5 秒内被重定向到新的地址。</p> <p>如果超过 5 秒后您仍然看到本消息，请点击上面的链接。</p> </body> </html>
JavaScript 使 HTML 页面具有更强的动态和交互性。。
HTML script 元素
<script> 标签用于定义客户端脚本，比如 JavaScript。 script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。 必需的 type 属性规定脚本的 MIME 类型。 JavaScript 最常用于图片操作、表单验证以及内容动态更新。 下面的脚本会向浏览器输出“Hello World!”： <script type="text/javascript"> document.write("Hello World!") </script>
<noscript> 标签
<noscript>
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。 noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。 只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容： <script type="text/javascript"> document.write("Hello World!") </script> <noscript>Your browser does not support JavaScript!</noscript>
如何应付老式的浏览器
如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。 实例 JavaScript: <script type="text/javascript"> <!-- document.write("Hello World!") //--> </script> VBScript: <script type="text/vbscript"> <!-- document.write("Hello World!") '--> </script>
标签 描述 <script> 定义客户端脚本。 <noscript> 为不支持客户端脚本的浏览器定义替代内容。
<html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script> </body> </html>
<!DOCTYPE html> <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> <noscript>Sorry, your browser does not support JavaScript!</noscript> <p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p> </body> </html>
HTML 实体
&entity_name; 或者 &#entity_number; 如需显示小于号，我们必须这样写：< 或 <
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
不间断空格（non-breaking space）
HTML 中的常用字符实体是不间断空格( )。 浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
HTML 实例示例
<!DOCTYPE html> <html> <body> <h2>字符实体</h2> <p>&X;</p> <p>用实体数字（比如"#174"）或者实体名称（比如 "pound"）替代 "X"，然后查看结果。</p> </body> </html>
HTML 中有用的字符实体
注释：实体名称对大小写敏感！
显示结果 描述 实体名称 实体编号 空格   < 小于号 < < > 大于号 > > & 和号 & & " 引号 " " ' 撇号 ' (IE不支持) ' ￠ 分 ¢ ¢ £ 镑 £ £ ¥ 日圆 ¥ ¥ € 欧元 € € § 小节 § § © 版权 © © ® 注册商标 ® ® ™ 商标 ™ ™ × 乘号 × × ÷ 除号 ÷ ÷
HTML 实体符号参考手册
http://www.w3school.com.cn/html/index.asp
scheme://host.domain:port/path/filename
遵守以下的语法规则
解释：
以下是其中一些最流行的 scheme：
Scheme 访问 用于... http 超文本传输协议 以 http:// 开头的普通网页。不加密。 https 安全超文本传输协议 安全网页。加密所有信息交换。 ftp 文件传输协议 用于将文件下载或上传至网站。 file 您计算机上的文件。
如果希望向世界发布您的网站，那么您必须把它存放在 web 服务器上。
在自己的服务器上托管网站始终是一个选项。有几点需要考虑：
从 ISP 租用服务器也很常见。 大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点：
选取一家 ISP 之前，请务必阅读 W3School 的 Web 主机教程。
Web 上的多媒体指的是音效、音乐、视频和动画。现代网络浏览器已支持很多多媒体格式。
多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。
在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。
在本教程中，您将了解到不同的多媒体格式，以及如何在您的网页中使用它们。
第一款因特网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，图片支持也被加入。
不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些则需要额外的插件。 您将在下面的章节学习更多有关插件的知识。
多媒体元素（比如视频和音频）存储于媒体文件中。
确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。
多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。
MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。
WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。 MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐，那么 MP3 是一个选项。
<object>
辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。
辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。
使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。
大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。
如需了解在 HTML 中包含音视频的最好方法，请参阅下一章节。
<object width="420" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="bird.wav" /> <param name="controller" value="true" /> </object>
<object width="420" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="movie.mp4" /> <param name="controller" value="true" /> </object>
<object width="400" height="40" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> <param name="SRC" value="bookmark.swf"> <embed src="bookmark.swf" width="400" height="40"></embed> </object>
下面的例子展示用于播放 Windows 媒体文件的推荐代码：
<object width="100%" height="100%" type="video/x-ms-asf" url="3d.wmv" data="3d.wmv" classid="CLSI D:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="url" value="3d.wmv"> <param name="filename" value="3d.wmv"> <param name="autostart" value="1"> <param name="uiMode" value="full" /> <param name="autosize" value="1"> <param name="playcount" value="1"> <embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed> </object>
在 HTML 中播放声音的方法有很多种。
在 HTML 中播放音频并不容易！ 您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。 插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。 可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。 这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。
<embed>
<embed> 标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。 下面的代码片段能够显示嵌入网页中的 MP3 文件：
<embed height="100" width="100" src="song.mp3" />
问题：
注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。
<object tag> 标签也可以定义外部（非 HTML）内容的容器。 下面的代码片段能够显示嵌入网页中的 MP3 文件：
<object tag>
<object height="100" width="100" data="song.mp3">
<audio>
<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。
<audio controls="controls"> <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> Your browser does not support this audio format. </audio>
上面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。
为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息。
<audio controls="controls" height="100" width="100"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> <embed height="100" width="100" src="song.mp3" /> </audio>
上面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。
向网页添加音频的最简单的方法是什么？ 雅虎的媒体播放器绝对算其中之一。 使用雅虎媒体播放器是一个不同的途径。您只需简单地让雅虎来完成歌曲播放的工作就好了。 它能播放 mp3 以及一系列其他格式。通过一行简单的代码，您就可以把它添加到网页中，轻松地将 HTML 页面转变为专业的播放列表。
<a href="song.mp3">Play Sound</a> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"> </script> 亲自试一试 使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部： <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> 然后只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮： <a href="song1.mp3">Play Song 1</a> <a href="song2.mp3">Play Song 2</a>
雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。
请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。
如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。
以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”来播放该文件：
<a href="song.mp3">Play the sound</a>
当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。 如果您打算在 web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。
我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。
HTML 4.01 多媒体标签
标签 描述 <applet> 不赞成。定义内嵌 applet。 <embed> HTML4 中不赞成，HTML5 中允许。定义内嵌对象。 <object> 定义内嵌对象。 <param> 定义对象的参数。
HTML 5 多媒体标签
标签 描述 <audio> 标签定义声音，比如音乐或其他音频流。 <embed> 标签定义嵌入的内容，比如插件。
在 HTML 中播放视频的方法有很多种。
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video>
在 HTML 中播放视频并不容易！ 您需要谙熟大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。
标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 代码显示嵌入网页的 Flash 视频：
<embed src="movie.swf" height="200" width="200"/>
问题
HTML4 无法识别 <embed> 标签。您的页面无法通过验证。 如果浏览器不支持 Flash，那么视频将无法播放 iPad 和 iPhone 不能显示 Flash 视频。 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
标签的作用是在 HTML 页面中嵌入多媒体元素。 下面的 HTML 片段显示嵌入网页的一段 Flash 视频： <object data="movie.swf" height="200" width="200"/> 问题 如果浏览器不支持 Flash，将无法播放视频。 iPad 和 iPhone 不能显示 Flash 视频。 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。 使用 <video> 标签 <video> 是 HTML 5 中的新标签。 <video> 标签的作用是在 HTML 页面中嵌入视频元素。 以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频： <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> 您必须把视频转换为很多不同的格式。 <video> 元素在老式浏览器中无效。 <video> 元素无法通过 HTML 4 和 XHTML 验证。 最好的 HTML 解决方法 HTML 5 + <object> + <embed> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video> 上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。 问题 您必须把视频转换为很多不同的格式 <video> 元素无法通过 HTML 4 和 XHTML 验证。 <embed> 元素无法通过 HTML 4 和 XHTML 验证。 注释：使用 (HTML5) 解决验证问题。 优酷解决方案 在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。 如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：``` ```html <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed> 使用超链接 如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。 以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player 来播放这个 AVI 文件： <a href="movie.swf">Play a video file</a> 关于内联视频的一段注释 当视频被包含在网页中时，它被称为内联视频。 如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。 同时请注意，用户可能已经关闭了浏览器中的内联视频选项。 我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。 HTML 4.01 多媒体标签 标签 描述 <applet> 不赞成。定义内嵌 applet。 <embed> 不赞成。定义内嵌对象。（HTML5 中允许） <object> 定义内嵌对象。 <param> 定义对象的参数。 HTML 5 多媒体标签 标签 描述 <video> 标签定义声音，比如音乐或其他音频流。 <embed> 标签定义嵌入的内容，比如插件。 HTML 5 教程 HTML5 简介 HTML5 是下一代的 HTML。 什么是 HTML5？ HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 HTML5 是如何起步的？ HTML5 是 W3C 与 WHATWG 合作的结果。 编者注：W3C 指 World Wide Web Consortium，万维网联盟。 编者注：WHATWG 指 Web Hypertext Application Technology Working Group。 WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。 为 HTML5 建立的一些规则： 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求（比如 Flash） 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独立于设备 开发进程应对公众透明 新特性 HTML5 中的一些有趣的新特性： 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、search 浏览器支持 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。 HTML5 视频 许多时髦的网站都提供视频。HTML5 提供了展示视频的标准。 Web 上的视频 直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 视频格式 当前，video 元素支持三种视频格式： Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 如何工作 如需在 HTML5 中显示视频，您所有需要的是： <video src="http://www.w3school.com.cn/i/movie.mp4" controls="controls"> </video> control 属性供添加播放、暂停和音量控件。 包含宽度和高度属性也是不错的主意。 <video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的： <video src="http://www.w3school.com.cn/i/movie.mp4" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video> 上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。 要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。 video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式： <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> Internet Explorer Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。 <video> 标签的属性 HTML 5 Video + DOM HTML5 <video> - 使用 DOM 进行控制 HTML5 <video> 元素同样拥有方法、属性和事件。 其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。 下例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。 <!DOCTYPE html> <html> <body> <div style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="/example/html5/mov_bbb.mp4" type="video/mp4" /> <source src="/example/html5/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video> </div> <script type="text/javascript"> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html> HTML5 <video> - 方法、属性以及事件 下面列出了大多数浏览器支持的视频方法、属性和事件： 方法 属性 事件 play() currentSrc play pause() currentTime pause load() videoWidth progress canPlayType videoHeight error duration timeupdate ended ended error abort paused empty muted emptied seeking waiting volume loadedmetadata height width 注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。 HTML 5 音频 Web 上的音频 直到现在，仍然不存在一项旨在网页上播放音频的标准。 今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 audio 元素来包含音频的标准方法。 audio 元素能够播放声音文件或者音频流。 音频格式 当前，audio 元素支持三种音频格式： 如何工作 如需在 HTML5 中播放音频，您所有需要的是： <audio src="song.ogg" controls="controls"> </audio> control 属性供添加播放、暂停和音量控件。 <audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：``` ```html <audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio> 上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。 要确保适用于 Safari 浏览器，音频文件必须是 MP3 或 Wav 类型。 audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式： <audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> Internet Explorer **Internet Explorer 8 不支持 audio 元素。在 IE 9 中，将提供对 audio 元素的支持。 ** <audio>标签的属性 HTML 拖放 拖放（Drag 和 drop）是 HTML5 标准的组成部分。 拖放 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 浏览器支持 Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 注释：在 Safari 5.1.2 中不支持拖放。 HTML5 拖放实例 <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> 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> 它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。 ** 设置元素为可拖放** 1.首先，为了使元素可拖动，把 draggable 属性设置为 true ： <img draggable="true" /> 拖动什么 - ondragstart 和 setData() 2.然后，规定当元素被拖动时，会发生什么。 在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。 dataTransfer.setData() 方法设置被拖数据的数据类型和值： function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } 在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。 放到何处 - ondragover 3.ondragover 事件规定在何处放置被拖动的数据。 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。 这要通过调用 ondragover 事件的 event.preventDefault() 方法： event.preventDefault()``` **进行放置 - ondrop** 4.当放置被拖数据时，会发生 drop 事件。 > 在上面的例子中，ondrop 属性调用了一个函数，drop(event)： ```html 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") 把被拖元素追加到放置元素（目标元素）中 来回拖放图片 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> 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)"> <img src="http://pic.qqtn.com/file/2012/2012-12/2012122114312932657.gif" draggable="true" ondragstart="drag(evnt)" id="drag1" /> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html> HTML5 画布 canvas 元素用于在网页上绘制图形。 什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度： <canvas id="myCanvas" width="200" height="100"></canvas> 通过 JavaScript 来绘制 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成： <script type="text/javascript"> 1.JavaScript 使用 id 来寻找 canvas 元素： var c=document.getElementById("myCanvas"); 2.然后，创建 context 对象： 2.1 getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 var cxt=c.getContext("2d"); 3.下面的两行代码绘制一个红色的矩形： 3.1 fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。 cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> 理解坐标 上面的 fillRect 方法拥有参数 (0,0,150,75)。 意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。 画布的 X 和 Y 坐标用于在画布上对绘画进行定位。 把鼠标悬停在下面的矩形上可以看到坐标 <!DOCTYPE HTML> <html> <head> <style type="text/css"> body { font-size:70%; font-family:verdana,helvetica,arial,sans-serif; } </style> <script type="text/javascript"> function cnvs_getCoordinates(e) { x=e.clientX; y=e.clientY; document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; } function cnvs_clearCoordinates() { document.getElementById("xycoordinates").innerHTML=""; } </script> </head> <body style="margin:0px;"> <p>把鼠标悬停在下面的矩形上可以看到坐标：</p> <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div> <br /> <br /> <br /> <div id="xycoordinates"></div> </body> </html> 实线 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> </body> </html> 圆形 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> </body> </html> 渐变 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script> </body> </html> 图像 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="http://t2.27270.com/uploads/tu/mx/180/2.jpg" cxt.drawImage(img,0,0); </script> </body> </html> HTML5 SVG HTML5 内联 SVG 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG 的优势 与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。 把 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:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" /> </svg> </body> </html> HTML5 Canvas vs SVG Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。 SVG SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 Canvas Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。 Canvas 与 SVG 的比较不同之处 Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 不适合游戏应用 HTML5 地理定位 HTML5 Geolocation（地理定位）用于定位用户的位置。 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。 浏览器支持 Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。 注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。 HTML5 - 使用地理定位 请使用 getCurrentPosition() 方法来获得用户的位置。 下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。 <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script> 例子解释： 检测是否支持地理定位 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象 showPosition() 函数获得并显示经度和纬度 上面的例子是一个非常基础的地理定位脚本，不含错误处理。 处理错误和拒绝 function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }``` 举例 ```html <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮，获得您的坐标：</p> <button onclick="getLocation()">试一下</button> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html> 错误代码： 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+"' />"; }``` **举例** ```html <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮，获得您的位置：</p> <button onclick="getLocation()">试一下</button> <div id="mapholder"></div> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { 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+"' />"; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html> 在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。 谷歌地图脚本 <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮，获得您的位置：</p> <button onclick="getLocation()">试一下</button> <div id="mapholder"></div> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { lat=position.coords.latitude; lon=position.coords.longitude; latlon=new google.maps.LatLng(lat, lon) mapholder=document.getElementById('mapholder') mapholder.style.height='250px'; mapholder.style.width='500px'; var myOptions={ center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }; var map=new google.maps.Map(document.getElementById("mapholder"),myOptions); var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html> 给定位置的信息 本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。 案例： 更新本地信息 显示用户周围的兴趣点 交互式车载导航系统 (GPS) getCurrentPosition() 方法 - 返回数据 若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。 属性 描述 coords.latitude 十进制数的纬度 coords.longitude 十进制数的经度 coords.accuracy 位置精度 coords.altitude 海拔，海平面以上以米计 coords.altitudeAccuracy 位置的海拔精度 coords.heading 方向，从正北开始以度计 coords.speed 速度，以米/每秒计 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="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script> HTML 5 Web 存储 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。 对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。 HTML5 使用 JavaScript 来存储和访问数据。 localStorage 方法 localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。 如何创建和访问 localStorage： <script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script> 下面的例子对用户访问页面的次数进行计数： <script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s)."); </script> sessionStorage 方法 sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。 如何创建并访问一个 sessionStorage： <script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script> 下面的例子对用户在当前 session 中访问页面的次数进行计数： <script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits "+sessionStorage.pagecount+" time(s) this session."); </script> HTML 5 应用程序缓存 **使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。 ** 什么是应用程序缓存（Application Cache）？ HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势： 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。 浏览器支持 所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。 HTML5 Cache Manifest 实例 下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）： <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html> 例子 <!DOCTYPE html> <html manifest="/example/html5/demo_html.appcache"> <body> <script type="text/javascript" src="/example/html5/demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p> <p><img src="/i/w3school_banner.gif" /></p> <p>请打开<a href="/example/html5/html5_html_manifest.html" target="_blank">这个页面</a>，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。</p> </body> </html> Cache Manifest 基础 如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性： <!DOCTYPE HTML> <html manifest="demo.appcache"> </html> 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。 manifest 文件的建议的文件扩展名是：".appcache"。 请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。 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.asp" 永远不会被缓存，且离线时是不可用的： NETWORK: login.asp 可以使用星号来指示所有其他资源/文件都需要因特网连接： NETWORK: * FALLBACK 下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件： FALLBACK: /html5/ /404.html 注释：第一个 URI 是资源，第二个是替补。 更新缓存 一旦应用被缓存，它就会保持缓存直到发生下列情况： 用户清空浏览器缓存 manifest 文件被修改（参阅下面的提示） 由程序来更新应用缓存 实例 - 完整的 Manifest 文件 CACHE MANIFEST ## 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: 重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。 关于应用程序缓存的注释 一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。 注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。 HTML5 Web Workers web worker 是运行在后台的 JavaScript，不会影响页面的性能。 什么是 Web Worker？ 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。 浏览器支持 所有主流浏览器均支持 web worker，除了 Internet Explorer。 HTML5 Web Workers 实例 下面的例子创建了一个简单的 web worker，在后台计数： 计数： <!DOCTYPE html> <html> <body> <p>计数: <output id="result"></output></p> <button onclick="startWorker()">开始 Worker</button> <button onclick="stopWorker()">停止 Worker</button> <br /><br /> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("/example/html5/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> A.检测 Web Worker 支持 在创建 web worker 之前，请检测用户的浏览器是否支持它： if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... } else { // Sorry! No Web Worker support.. } B. **创建 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 资源的任务。 C.创建 Web Worker 对象 我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。 下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码： 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; }; 当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。 D.终止 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 对象： window 对象 document 对象 parent 对象 HTML 5 服务器发送事件 HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新。 以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。 例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。 浏览器支持 所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。 接收 Server-Sent 事件通知 EventSource 对象用于接收服务器发送事件通知： var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; };``` ```html <!DOCTYPE html> <html> <body> <h1>获得服务器更新</h1> <div id="result"></div> <script> if(typeof(EventSource)!=="undefined") { var source=new EventSource("/example/html5/demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events..."; } </script> </body> </html> 例子解释： 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"） 每接收到一次更新，就会发生 onmessage 事件 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中 检测 Server-Sent 事件支持 在上面的 TIY 实例中，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况： if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. } 服务器端代码实例 为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。 服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。 ** PHP 代码 (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}\n\n"; 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: " 开头） 向网页刷新输出数据 HTML5 表单 HTML5 输入类型 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。 本章全面介绍这些新的输入类型： email url number range Date pickers (date, month, week, time, datetime, datetime-local) search color 浏览器支持 注释：Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。 Input 类型 - email email 类型用于应该包含 e-mail 地址的输入域。 在提交表单时，会自动验证 email 域的值。 E-mail: <input type="email" name="user_email" /> 提示：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。 Input 类型 - url url 类型用于应该包含 URL 地址的输入域。 在提交表单时，会自动验证 url 域的值。 Homepage: <input type="url" name="user_url" /> 提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。 Input 类型 - number number 类型用于应该包含数值的输入域。 您还能够设定对所接受的数字的限定： Points: <input type="number" name="points" min="1" max="10" /> 请使用下面的属性来规定对数字类型的限定： 属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） value number 规定默认值 提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。 Input 类型 - range range 类型用于应该包含一定范围内数字值的输入域。 range 类型显示为滑动条。 您还能够设定对所接受的数字的限定： <input type="range" name="points" min="1" max="10" /> 请使用下面的属性来规定对数字类型的限定： 属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） value number 规定默认值 Input 类型 - Date Pickers（日期选择器） HTML5 拥有多个可供选取日期和时间的新输入类型： date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间（小时和分钟） datetime - 选取时间、日、月、年（UTC 时间） datetime-local - 选取时间、日、月、年（本地时间） Date: <input type="date" name="user_date" /> Date: <input type="date" name="user_date" /> 输入类型 "month": <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Month: <input type="month" name="user_date" /> <input type="submit" /> </form> </body> </html> 输入类型 "week": <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Week: <input type="week" name="user_date" /> <input type="submit" /> </form> </body> </html> 输入类型 "time": <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Time: <input type="time" name="user_date" /> <input type="submit" /> </form> </body> </html> 输入类型 "datetime": <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Date and time: <input type="datetime" name="user_date" /> <input type="submit" /> </form> </body> </html> 输入类型 "datetime-local": <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Date and time: <input type="datetime-local" name="user_date" /> <input type="submit" /> </form> </body> </html> Input 类型 - search search 类型用于搜索域，比如站点搜索或 Google 搜索。 search 域显示为常规的文本域。 HTML5 表单元素 HTML5 的新的表单元素： HTML5 拥有若干涉及表单的元素和属性。 本章介绍以下新的表单元素： datalist keygen output 浏览器支持 Input type IE Firefox Opera Chrome Safari datalist No No 9.5 No No keygen No No 10.5 3.0 No output No No 9.5 No No datalist 元素 datalist 元素规定输入域的选项列表。 列表是通过 datalist 内的 option 元素创建的。 如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id： <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3School" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <input type="submit" /> </form> </body> </html> 提示：option 元素永远都要设置 value 属性。 keygen 元素 keygen 元素的作用是提供一种验证用户的可靠方法。 keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。 目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。 <form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> <form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> output 元素 output 元素用于不同类型的输出，比如计算或脚本输出： <output id="result" onforminput="resCalc()"></output> 简易计算器 <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function resCalc() { numA=document.getElementById("num_a").value; numB=document.getElementById("num_b").value; document.getElementById("result").value=Number(numA)+Number(numB); } </script> </head> <body> <p>使用 output 元素的简易计算器：</p> <form onsubmit="return false"> <input id="num_a" /> + <input id="num_b" /> = <output id="result" onforminput="resCalc()"></output> </form> </body> </html> HTML5 表单属性 HTML5 的新的表单属性 本章讲解涉及 <form> 和 <input> 元素的新属性。 新的 form 属性： autocomplete novalidate 新的 input 属性： autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height 和 width list min, max 和 step multiple pattern (regexp) placeholder required 浏览器支持 autocomplete 属性 autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。 注释：autocomplete 适用于 <form> 标签，以及以下类型的 <input>标签：text, search, url, telephone, email, password, datepickers, range 以及 color。 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项： <form action="demo_form.asp" method="get" autocomplete="on"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" /> </form> 注释：在某些浏览器中，您可能需要启用自动完成功能，以使该属性生效。 autofocus 属性 autofocus 属性规定在页面加载时，域自动地获得焦点。 注释：autofocus 属性适用于所有 标签的类型。 User name: <input type="text" name="user_name" autofocus="autofocus" /> form 属性 form 属性规定输入域所属的一个或多个表单。 注释：form 属性适用于所有 <input> 标签的类型。 form 属性必须引用所属表单的 id： <form action="demo_form.asp" method="get" id="user_form"> First name:<input type="text" name="fname" /> <input type="submit" /> </form> Last name: <input type="text" name="lname" form="user_form" /> 注释：如需引用一个以上的表单，请使用空格分隔的列表。 表单重写属性 表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。 表单重写属性有： formaction - 重写表单的 action 属性 formenctype - 重写表单的 enctype 属性 formmethod - 重写表单的 method 属性 formnovalidate - 重写表单的 novalidate 属性 formtarget - 重写表单的 target 属性 注释：表单重写属性适用于以下类型的 标签：submit 和 image。 <form action="demo_form.asp" method="get" id="user_form"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="Submit" /> <br /> <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> <br /> <input type="submit" formnovalidate="true" value="Submit without validation" /> <br /> </form> height 和 width 属性 height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。 注释：height 和 width 属性只适用于 image 类型的 标签。 <input type="image" src="img_submit.gif" width="99" height="99" /> list 属性 list 属性规定输入域的 datalist。datalist 是输入域的选项列表。 注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。 Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> min、max 和 step 属性 min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。 max 属性规定输入域所允许的最大值。 min 属性规定输入域所允许的最小值。 step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。 注释：min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。 下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）： Points: <input type="number" name="points" min="0" max="10" step="3" /> multiple 属性 multiple 属性规定输入域中可选择多个值。 注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。 Select images: <input type="file" name="img" multiple="multiple" /> novalidate 属性 novalidate 属性规定在提交表单时不应该验证 form 或 input 域。 注释：novalidate 属性适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color. <form action="demo_form.asp" method="get" novalidate="true"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form> pattern 属性 pattern 属性规定用于验证 input 域的模式（pattern）。 模式（pattern） 是正则表达式。您可以在 JavaScript 中学习到有关正则表达式的内容。 注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。 下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）： Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /> placeholder 属性 placeholder 属性提供一种提示（hint），描述输入域所期待的值。 注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。 提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失： <input type="search" name="user_search" placeholder="Search W3School" /> required 属性 required 属性规定必须在提交之前填写输入域（不能为空）。 注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 Name: <input type="text" name="usr_name" required="required" /> HTML 参考手册 标签列表（字母排序） 标签列表（功能排序） HTML 属性 HTML 事件 HTML 视频/音频 HTML 画布 HTML 文档类型 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML URL 编码 HTML 语言代码 HTML 消息 HTML5 参考手册 标签列表（字母排序） 标签列表（功能排序） HTML 属性 HTML 事件 HTML 视频/音频 HTML 画布 HTML 文档类型 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML URL 编码 HTML 语言代码 HTTP 消息 HTTP 方法 posted @ 2019-08-27 12:07 superxjhw 阅读( 384) 评论( 0) 编辑 收藏 刷新评论 刷新页面 返回顶部
<object data="movie.swf" height="200" width="200"/>
如果浏览器不支持 Flash，将无法播放视频。 iPad 和 iPhone 不能显示 Flash 视频。 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
<video>
<video> 是 HTML 5 中的新标签。 <video> 标签的作用是在 HTML 页面中嵌入视频元素。 以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video>
您必须把视频转换为很多不同的格式。 <video> 元素在老式浏览器中无效。 <video> 元素无法通过 HTML 4 和 XHTML 验证。
HTML 5 + <object> + <embed>
上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。
您必须把视频转换为很多不同的格式 <video> 元素无法通过 HTML 4 和 XHTML 验证。 <embed> 元素无法通过 HTML 4 和 XHTML 验证。
注释：使用 (HTML5) 解决验证问题。
在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。 如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：``` ```html <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>
如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。 以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player 来播放这个 AVI 文件：
<a href="movie.swf">Play a video file</a>
当视频被包含在网页中时，它被称为内联视频。 如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。 同时请注意，用户可能已经关闭了浏览器中的内联视频选项。 我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。
标签 描述 <applet> 不赞成。定义内嵌 applet。 <embed> 不赞成。定义内嵌对象。（HTML5 中允许） <object> 定义内嵌对象。 <param> 定义对象的参数。
标签 描述 <video> 标签定义声音，比如音乐或其他音频流。 <embed> 标签定义嵌入的内容，比如插件。
HTML5 是下一代的 HTML。
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、search
许多时髦的网站都提供视频。HTML5 提供了展示视频的标准。
直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。
当前，video 元素支持三种视频格式：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
如需在 HTML5 中显示视频，您所有需要的是：
<video src="http://www.w3school.com.cn/i/movie.mp4" controls="controls"> </video>
control 属性供添加播放、暂停和音量控件。 包含宽度和高度属性也是不错的主意。 <video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的：
<video src="http://www.w3school.com.cn/i/movie.mp4" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video>
上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。 要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。 video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。
HTML5 <video> - 使用 DOM 进行控制 HTML5 <video> 元素同样拥有方法、属性和事件。 其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。 下例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。
<!DOCTYPE html> <html> <body> <div style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="/example/html5/mov_bbb.mp4" type="video/mp4" /> <source src="/example/html5/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video> </div> <script type="text/javascript"> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>
下面列出了大多数浏览器支持的视频方法、属性和事件：
方法 属性 事件 play() currentSrc play pause() currentTime pause load() videoWidth progress canPlayType videoHeight error duration timeupdate ended ended error abort paused empty muted emptied seeking waiting volume loadedmetadata height width
注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
直到现在，仍然不存在一项旨在网页上播放音频的标准。 今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 audio 元素来包含音频的标准方法。 audio 元素能够播放声音文件或者音频流。
当前，audio 元素支持三种音频格式：
如需在 HTML5 中播放音频，您所有需要的是：
<audio src="song.ogg" controls="controls"> </audio>
control 属性供添加播放、暂停和音量控件。 <audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：``` ```html <audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio>
上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。 要确保适用于 Safari 浏览器，音频文件必须是 MP3 或 Wav 类型。 audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
**Internet Explorer 8 不支持 audio 元素。在 IE 9 中，将提供对 audio 元素的支持。 **
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 注释：在 Safari 5.1.2 中不支持拖放。
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> 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>
它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。
** 设置元素为可拖放**
1.首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true" />
拖动什么 - ondragstart 和 setData()
2.然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。 dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
3.ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。 这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()``` **进行放置 - ondrop** 4.当放置被拖数据时，会发生 drop 事件。 > 在上面的例子中，ondrop 属性调用了一个函数，drop(event)： ```html function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
代码解释：
来回拖放图片
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> 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)"> <img src="http://pic.qqtn.com/file/2012/2012-12/2012122114312932657.gif" draggable="true" ondragstart="drag(evnt)" id="drag1" /> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
canvas 元素用于在网页上绘制图形。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript"> 1.JavaScript 使用 id 来寻找 canvas 元素： var c=document.getElementById("myCanvas"); 2.然后，创建 context 对象： 2.1 getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 var cxt=c.getContext("2d"); 3.下面的两行代码绘制一个红色的矩形： 3.1 fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。 cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
把鼠标悬停在下面的矩形上可以看到坐标
<!DOCTYPE HTML> <html> <head> <style type="text/css"> body { font-size:70%; font-family:verdana,helvetica,arial,sans-serif; } </style> <script type="text/javascript"> function cnvs_getCoordinates(e) { x=e.clientX; y=e.clientY; document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; } function cnvs_clearCoordinates() { document.getElementById("xycoordinates").innerHTML=""; } </script> </head> <body style="margin:0px;"> <p>把鼠标悬停在下面的矩形上可以看到坐标：</p> <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div> <br /> <br /> <br /> <div id="xycoordinates"></div> </body> </html>
实线
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> </body> </html>
圆形
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> </body> </html>
渐变
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script> </body> </html>
图像
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="http://t2.27270.com/uploads/tu/mx/180/2.jpg" cxt.drawImage(img,0,0); </script> </body> </html>
HTML5 内联 SVG
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
在 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:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" /> </svg> </body> </html>
Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。
HTML5 Geolocation（地理定位）用于定位用户的位置。
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。
请使用 getCurrentPosition() 方法来获得用户的位置。 下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script>
上面的例子是一个非常基础的地理定位脚本，不含错误处理。
function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }``` 举例 ```html <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮，获得您的坐标：</p> <button onclick="getLocation()">试一下</button> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html>
错误代码：
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+"' />"; }``` **举例** ```html <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮，获得您的位置：</p> <button onclick="getLocation()">试一下</button> <div id="mapholder"></div> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { 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+"' />"; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html>
在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。
谷歌地图脚本
<!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮，获得您的位置：</p> <button onclick="getLocation()">试一下</button> <div id="mapholder"></div> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { lat=position.coords.latitude; lon=position.coords.longitude; latlon=new google.maps.LatLng(lat, lon) mapholder=document.getElementById('mapholder') mapholder.style.height='250px'; mapholder.style.width='500px'; var myOptions={ center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }; var map=new google.maps.Map(document.getElementById("mapholder"),myOptions); var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html>
本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。
案例：
属性 描述 coords.latitude 十进制数的纬度 coords.longitude 十进制数的经度 coords.accuracy 位置精度 coords.altitude 海拔，海平面以上以米计 coords.altitudeAccuracy 位置的海拔精度 coords.heading 方向，从正北开始以度计 coords.speed 速度，以米/每秒计
下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script>
HTML5 提供了两种在客户端存储数据的新方法：
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。 如何创建和访问 localStorage：
<script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>
下面的例子对用户访问页面的次数进行计数：
<script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s)."); </script>
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个 sessionStorage：
<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>
下面的例子对用户在当前 session 中访问页面的次数进行计数：
<script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits "+sessionStorage.pagecount+" time(s) this session."); </script>
**使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。 **
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。
下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
例子
<!DOCTYPE html> <html manifest="/example/html5/demo_html.appcache"> <body> <script type="text/javascript" src="/example/html5/demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p> <p><img src="/i/w3school_banner.gif" /></p> <p>请打开<a href="/example/html5/html5_html_manifest.html" target="_blank">这个页面</a>，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。</p> </body> </html>
<!DOCTYPE HTML> <html manifest="demo.appcache"> </html>
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
manifest 文件可分为三个部分：
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST /theme.css /logo.gif /main.js
上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
NETWORK
下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的：
NETWORK: login.asp
可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK: *
FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：
FALLBACK: /html5/ /404.html
注释：第一个 URI 是资源，第二个是替补。
一旦应用被缓存，它就会保持缓存直到发生下列情况：
实例 - 完整的 Manifest 文件
CACHE MANIFEST ## 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK:
重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。
注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
所有主流浏览器均支持 web worker，除了 Internet Explorer。
下面的例子创建了一个简单的 web worker，在后台计数：
计数：
<!DOCTYPE html> <html> <body> <p>计数: <output id="result"></output></p> <button onclick="startWorker()">开始 Worker</button> <button onclick="stopWorker()">停止 Worker</button> <br /><br /> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("/example/html5/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>
A.检测 Web Worker 支持
在创建 web worker 之前，请检测用户的浏览器是否支持它：
if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... } else { // Sorry! No Web Worker support.. }
B. **创建 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 资源的任务。
C.创建 Web Worker 对象
我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。
下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：
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; };
当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
D.终止 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>
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。
EventSource 对象用于接收服务器发送事件通知：
var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; };``` ```html <!DOCTYPE html> <html> <body> <h1>获得服务器更新</h1> <div id="result"></div> <script> if(typeof(EventSource)!=="undefined") { var source=new EventSource("/example/html5/demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events..."; } </script> </body> </html>
例子解释：
if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. }
为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。 服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。
** PHP 代码 (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}\n\n"; flush(); ?>
ASP 代码 (VB) (demo_sse.asp):
<% Response.ContentType="text/event-stream" Response.Expires=-1 Response.Write("data: " & now()) Response.Flush() %>
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型：
注释：Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
Input 类型 - email
email 类型用于应该包含 e-mail 地址的输入域。
在提交表单时，会自动验证 email 域的值。
E-mail: <input type="email" name="user_email" />
提示：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。
Input 类型 - url url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。
Homepage: <input type="url" name="user_url" />
提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。
Input 类型 - number
number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定：
Points: <input type="number" name="points" min="1" max="10" />
请使用下面的属性来规定对数字类型的限定：
属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） value number 规定默认值
提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。
Input 类型 - range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
<input type="range" name="points" min="1" max="10" />
Input 类型 - Date Pickers（日期选择器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
Date: <input type="date" name="user_date" />
输入类型 "month":
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Month: <input type="month" name="user_date" /> <input type="submit" /> </form> </body> </html>
输入类型 "week":
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Week: <input type="week" name="user_date" /> <input type="submit" /> </form> </body> </html>
输入类型 "time":
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Time: <input type="time" name="user_date" /> <input type="submit" /> </form> </body> </html>
输入类型 "datetime":
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Date and time: <input type="datetime" name="user_date" /> <input type="submit" /> </form> </body> </html>
输入类型 "datetime-local":
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Date and time: <input type="datetime-local" name="user_date" /> <input type="submit" /> </form> </body> </html>
HTML5 拥有若干涉及表单的元素和属性。
本章介绍以下新的表单元素：
Input type IE Firefox Opera Chrome Safari datalist No No 9.5 No No keygen No No 10.5 3.0 No output No No 9.5 No No
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3School" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <input type="submit" /> </form> </body> </html>
提示：option 元素永远都要设置 value 属性。
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
<form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>
output 元素用于不同类型的输出，比如计算或脚本输出：
<output id="result" onforminput="resCalc()"></output>
简易计算器
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function resCalc() { numA=document.getElementById("num_a").value; numB=document.getElementById("num_b").value; document.getElementById("result").value=Number(numA)+Number(numB); } </script> </head> <body> <p>使用 output 元素的简易计算器：</p> <form onsubmit="return false"> <input id="num_a" /> + <input id="num_b" /> = <output id="result" onforminput="resCalc()"></output> </form> </body> </html>
本章讲解涉及 <form> 和 <input> 元素的新属性。
<form> 和 <input>
新的 form 属性：
autocomplete novalidate
新的 input 属性：
autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height 和 width list min, max 和 step multiple pattern (regexp) placeholder required
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。 注释：autocomplete 适用于 <form> 标签，以及以下类型的 <input>标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
<form action="demo_form.asp" method="get" autocomplete="on"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" /> </form>
注释：在某些浏览器中，您可能需要启用自动完成功能，以使该属性生效。
autofocus 属性规定在页面加载时，域自动地获得焦点。
注释：autofocus 属性适用于所有 标签的类型。
User name: <input type="text" name="user_name" autofocus="autofocus" />
form 属性规定输入域所属的一个或多个表单。
注释：form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id：
<form action="demo_form.asp" method="get" id="user_form"> First name:<input type="text" name="fname" /> <input type="submit" /> </form> Last name: <input type="text" name="lname" form="user_form" />
注释：如需引用一个以上的表单，请使用空格分隔的列表。
表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。
表单重写属性有：
formaction - 重写表单的 action 属性 formenctype - 重写表单的 enctype 属性 formmethod - 重写表单的 method 属性 formnovalidate - 重写表单的 novalidate 属性 formtarget - 重写表单的 target 属性
注释：表单重写属性适用于以下类型的 标签：submit 和 image。
<form action="demo_form.asp" method="get" id="user_form"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="Submit" /> <br /> <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> <br /> <input type="submit" formnovalidate="true" value="Submit without validation" /> <br /> </form>
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释：height 和 width 属性只适用于 image 类型的 标签。
<input type="image" src="img_submit.gif" width="99" height="99" />
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。
Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。
注释：min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：
Points: <input type="number" name="points" min="0" max="10" step="3" />
multiple 属性规定输入域中可选择多个值。
注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。
Select images: <input type="file" name="img" multiple="multiple" />
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释：novalidate 属性适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.
<form action="demo_form.asp" method="get" novalidate="true"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form>
pattern 属性规定用于验证 input 域的模式（pattern）。
模式（pattern） 是正则表达式。您可以在 JavaScript 中学习到有关正则表达式的内容。
注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：
Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：
<input type="search" name="user_search" placeholder="Search W3School" />
required 属性规定必须在提交之前填写输入域（不能为空）。
注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
Name: <input type="text" name="usr_name" required="required" />
标签列表（字母排序）
标签列表（功能排序）
HTML 属性
HTML 事件
HTML 视频/音频
HTML 画布
HTML 文档类型
HTML 颜色名
HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML URL 编码 HTML 语言代码 HTML 消息
HTML 属性 HTML 事件 HTML 视频/音频 HTML 画布 HTML 文档类型 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML URL 编码 HTML 语言代码 HTTP 消息 HTTP 方法
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。
）和源属性（src）