HTML5 - 快速指南

HTML5 - 概述

HTML5 是 HTML 标准的下一个主要修订版本，取代了 HTML 4.01、XHTML 1.0 和 XHTML 1.1。HTML5 是一个用于在万维网上构建和呈现内容的标准。

HTML5 是万维网联盟 (W3C) 和 Web 超文本应用技术工作组 (WHATWG) 之间的合作成果。

新标准包含了视频回放和拖放等功能，这些功能以前依赖于第三方浏览器插件，例如 Adobe Flash、Microsoft Silverlight 和 Google Gears。

浏览器支持

最新版本的 Apple Safari、Google Chrome、Mozilla Firefox 和 Opera 都支持许多 HTML5 功能，Internet Explorer 9.0 也将支持一些 HTML5 功能。

预装在 iPhone、iPad 和 Android 手机上的移动网络浏览器都对 HTML5 提供了极佳的支持。

新功能

HTML5 引入了一些新的元素和属性，可以帮助您构建现代网站。以下是一些 HTML5 中引入的最突出功能。

新的语义元素 - 这些元素例如 <header>、<footer> 和 <section>。
表单 2.0 - 对 HTML 网页表单的改进，其中为 <input> 标签引入了新的属性。
持久本地存储 - 实现持久本地存储，无需依赖第三方插件。
WebSocket - 一种用于 Web 应用程序的新一代双向通信技术。
服务器发送事件 - HTML5 引入了从 Web 服务器流向 Web 浏览器的事件，称为服务器发送事件 (SSE)。
Canvas - 支持一个二维绘图表面，您可以使用 JavaScript 对其进行编程。
音频和视频 - 您可以将音频或视频嵌入到网页中，无需依赖第三方插件。
地理位置 - 现在，访问者可以选择与您的 Web 应用程序共享其物理位置。
微数据 - 这使您可以创建超出 HTML5 的词汇表，并使用自定义语义扩展您的网页。
拖放 - 将项目从一个位置拖放到同一网页上的另一个位置。

向后兼容性

HTML5 尽可能地设计为向后兼容现有的 Web 浏览器。其新功能构建在现有功能的基础上，并允许您为旧版浏览器提供回退内容。

建议使用几行 JavaScript 检测对各个 HTML5 功能的支持。

如果您不熟悉 HTML 的任何先前版本，建议您在探索 HTML5 功能之前先阅读我们的HTML 教程。

HTML5 - 语法

HTML 5 语言具有“自定义”HTML 语法，该语法与 Web 上发布的 HTML 4 和 XHTML1 文档兼容，但不兼容 HTML 4 的更深奥的 SGML 功能。

HTML 5 的语法规则与 XHTML 不同，在 XHTML 中，我们需要使用小写标签名称，引用我们的属性，属性必须具有值，并且必须关闭所有空元素。

HTML5 具有很大的灵活性，它支持以下功能 -

大写标签名称。
属性的引号是可选的。
属性值是可选的。
关闭空元素是可选的。

DOCTYPE

在旧版本的 HTML 中，DOCTYPE 更长，因为 HTML 语言基于 SGML，因此需要引用 DTD。

HTML 5 作者将使用简单的语法指定 DOCTYPE，如下所示 -

<!DOCTYPE html>

以上语法不区分大小写。

字符编码

HTML 5 作者可以使用简单的语法指定字符编码，如下所示 -

<meta charset = "UTF-8">

以上语法不区分大小写。

<script> 标签

通常的做法是在脚本元素中添加一个类型属性，其值为“text/javascript”，如下所示 -

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 去除了所需的额外信息，您可以简单地使用以下语法 -

<script src = "scriptfile.js"></script>

<link> 标签

到目前为止，您一直将 <link> 编写如下 -

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 去除了所需的额外信息，您可以简单地使用以下语法 -

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

HTML5 元素

HTML5 元素使用开始标签和结束标签进行标记。标签使用尖括号分隔，标签名称位于尖括号之间。

开始标签和结束标签的区别在于，后者在标签名称前包含一个斜杠。

以下是一个 HTML5 元素的示例 -

<p>...</p>

HTML5 标签名称不区分大小写，可以全部大写或混合大小写，尽管最常见的约定是坚持使用小写。

大多数元素包含一些内容，例如 <p>...</p> 包含一段文字。但是，有些元素禁止包含任何内容，这些元素称为空元素。例如，br、hr、link、meta 等。

以下是 HTML5 元素的完整列表。

HTML5 属性

元素可能包含用于设置元素各种属性的属性。

一些属性是全局定义的，可以在任何元素上使用，而另一些属性仅为特定元素定义。所有属性都有名称和值，如下面的示例所示。

以下是一个 HTML5 属性的示例，说明如何使用值为“example”的名为 class 的属性标记 div 元素 -

<div class = "example">...</div>

属性只能在开始标签内指定，绝不能在结束标签中使用。

HTML5 属性不区分大小写，可以全部大写或混合大小写，尽管最常见的约定是坚持使用小写。

以下是 HTML5 属性的完整列表。

HTML5 文档

以下标签已引入以实现更好的结构 -

section - 此标签表示通用文档或应用程序部分。它可以与 h1-h6 一起使用以指示文档结构。
article - 此标签表示文档的独立内容部分，例如博客文章或报纸文章。
aside - 此标签表示与页面其余部分略微相关的部分内容。
header - 此标签表示部分的标题。
footer - 此标签表示部分的页脚，可以包含有关作者、版权信息等信息。
nav - 此标签表示用于导航的文档部分。
dialog - 此标签可用于标记对话。
figure - 此标签可用于将标题与某些嵌入内容（例如图形或视频）关联起来。

HTML 5 文档的标记如下所示 -

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

在线演示

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

它将产生以下结果 -

HTML5 - 属性

如上一章所述，元素可能包含用于设置元素各种属性的属性。

一些属性是全局定义的，可以在任何元素上使用，而另一些属性仅为特定元素定义。所有属性都有名称和值，如下面的示例所示。

以下是一个 HTML5 属性的示例，说明如何使用值为“example”的名为 class 的属性标记 div 元素 -

<div class = "example">...</div>

属性只能在开始标签内指定，绝不能在结束标签中使用。

HTML5 属性不区分大小写，可以全部大写或混合大小写，尽管最常见的约定是坚持使用小写。

标准属性

以下列出的属性几乎所有 HTML 5 标签都支持。

属性	选项	功能
accesskey	用户定义	指定访问元素的键盘快捷键。
align	right, left, center	水平对齐标签
background	URL	在元素后面放置背景图像
bgcolor	数字、十六进制、RGB 值	在元素后面放置背景颜色
class	用户定义	将元素分类以用于级联样式表。
contenteditable	true, false	指定用户是否可以编辑元素的内容。
contextmenu	菜单 ID	指定元素的上下文菜单。
data-XXXX	用户定义	自定义属性。HTML 文档的作者可以定义自己的属性。必须以“data-”开头。
draggable	true、false、auto	指定用户是否允许拖动元素。
height	数值	指定表格、图像或表格单元格的高度。
hidden	hidden	指定元素是否可见。
id	用户定义	为元素命名，以便与层叠样式表一起使用。
item	元素列表	用于对元素进行分组。
itemprop	项目列表	用于对项目进行分组。
spellcheck	true, false	指定是否必须检查元素的拼写或语法。
style	CSS样式表	为元素指定内联样式。
subject	用户定义ID	指定元素对应的项目。
tabindex	Tab编号	指定元素的Tab顺序。
title	用户定义	元素的“弹出”标题。
valign	top、middle、bottom	垂直对齐HTML元素内的标签。
width	数值	指定表格、图像或表格单元格的宽度。

有关HTML5标签和相关属性的完整列表，请查看我们对HTML5标签的参考。

自定义属性

HTML 5引入的一项新功能是添加自定义数据属性。

自定义数据属性以data-开头，并根据您的需求命名。以下是一个简单的示例：

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

以上代码将是完全有效的HTML5，其中包含两个名为datasubject和data-level的自定义属性。您可以使用JavaScript API或CSS以与获取标准属性类似的方式获取这些属性的值。

HTML5 - 事件

当用户访问您的网站时，他们会执行各种活动，例如单击文本、图像和链接、将鼠标悬停在定义的元素上等。这些是JavaScript称为事件的示例。

我们可以在Javascript或VBscript中编写事件处理程序，并且您可以将这些事件处理程序指定为事件标签属性的值。HTML5规范定义了各种事件属性，如下所示：

我们可以使用以下属性集来触发任何javascript或vbscript代码（作为值给出），当任何HTML5元素发生任何事件时。

在后续章节中，我们将在详细讨论这些元素时介绍特定于元素的事件。

属性	值	描述
offline	script	当文档离线时触发
onabort	script	在中止事件时触发
onafterprint	script	文档打印后触发
onbeforeonload	script	文档加载前触发
onbeforeprint	script	文档打印前触发
onblur	script	窗口失去焦点时触发
oncanplay	script	媒体可以开始播放时触发，但可能需要停止缓冲
oncanplaythrough	script	媒体可以播放到结尾时触发，无需停止缓冲
onchange	script	元素发生变化时触发
onclick	script	鼠标单击时触发
oncontextmenu	script	触发上下文菜单时触发
ondblclick	script	鼠标双击时触发
ondrag	script	拖动元素时触发
ondragend	script	拖动操作结束时触发
ondragenter	script	将元素拖动到有效放置目标时触发
ondragleave	script	元素离开有效放置目标时触发
ondragover	script	将元素拖过有效放置目标时触发
ondragstart	script	拖动操作开始时触发
ondrop	script	拖动元素被放下时触发
ondurationchange	script	媒体长度发生变化时触发
onemptied	script	媒体资源元素突然变空时触发。
onended	script	媒体到达结尾时触发
onerror	script	发生错误时触发
onfocus	script	窗口获得焦点时触发
onformchange	script	表单发生变化时触发
onforminput	script	表单获得用户输入时触发
onhaschange	script	文档发生变化时触发
oninput	script	元素获得用户输入时触发
oninvalid	script	元素无效时触发
onkeydown	script	按下键时触发
onkeypress	script	按下并释放键时触发
onkeyup	script	释放键时触发
onload	script	文档加载时触发
onloadeddata	script	媒体数据加载时触发
onloadedmetadata	script	媒体元素的持续时间和其他媒体数据加载时触发
onloadstart	script	浏览器开始加载媒体数据时触发
onmessage	script	触发消息时触发
onmousedown	script	按下鼠标按钮时触发
onmousemove	script	鼠标指针移动时触发
onmouseout	script	鼠标指针移出元素时触发
onmouseover	script	鼠标指针移到元素上时触发
onmouseup	script	释放鼠标按钮时触发
onmousewheel	script	旋转鼠标滚轮时触发
onoffline	script	当文档离线时触发
onoine	script	文档上线时触发
ononline	script	文档上线时触发
onpagehide	script	窗口隐藏时触发
onpageshow	script	窗口可见时触发
onpause	script	媒体数据暂停时触发
onplay	script	媒体数据即将开始播放时触发
onplaying	script	媒体数据开始播放时触发
onpopstate	script	窗口历史记录更改时触发
onprogress	script	浏览器正在获取媒体数据时触发
onratechange	script	媒体数据的播放速率发生变化时触发
onreadystatechange	script	就绪状态发生变化时触发
onredo	script	文档执行重做操作时触发
onresize	script	窗口大小调整时触发
onscroll	script	滚动元素的滚动条时触发
onseeked	script	媒体元素的seeking属性不再为true，并且搜索已结束时触发
onseeking	script	媒体元素的seeking属性为true，并且搜索已开始时触发
onselect	script	选择元素时触发
onstalled	script	获取媒体数据时发生错误时触发
onstorage	script	文档加载时触发
onsubmit	script	提交表单时触发
onsuspend	script	浏览器一直在获取媒体数据，但在获取整个媒体文件之前停止时触发
ontimeupdate	script	媒体更改其播放位置时触发
onundo	script	文档执行撤消操作时触发
onunload	script	用户离开文档时触发
onvolumechange	script	媒体更改音量时触发，将音量设置为“静音”时也会触发
onwaiting	script	媒体已停止播放，但预计将恢复时触发

HTML5 - Web 表单 2.0

Web Forms 2.0是对HTML4中表单功能的扩展。HTML5中的表单元素和属性提供了比HTML4更高的语义标记程度，使我们免于在HTML4中需要的大量繁琐的脚本编写和样式设置。

HTML4中的<input>元素

HTML4输入元素使用type属性指定数据类型。HTML4提供以下类型：

序号	类型&描述
1	text 自由格式文本字段，通常不包含换行符。
2	password 用于敏感信息的自由格式文本字段，通常不包含换行符。
3	checkbox 从预定义列表中选择零个或多个值。
4	radio 枚举值。
5	submit 自由形式的按钮，用于启动表单提交。
6	file 具有MIME类型并可选地具有文件名的任意文件。
7	image 相对于特定图像大小的坐标，其额外语义是它必须是最后一个选定的值并启动表单提交。
8	hidden 通常不显示给用户的任意字符串。
9	select 枚举值，类似于radio类型。
10	textarea 自由格式文本字段，通常没有换行符限制。
11	button 自由形式的按钮，可以启动与按钮相关的任何事件。

以下是如何使用标签、单选按钮和提交按钮的简单示例：

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

HTML5中的<input>元素

除了上述属性外，HTML5输入元素还为type属性引入了几个新值。这些列在下面。

注意：请使用最新版本的Opera浏览器尝试以下所有示例。

序号	类型&描述
1	datetime 日期和时间（年、月、日、时、分、秒、秒的小数部分），根据ISO 8601编码，时区设置为UTC。
2	datetime-local 日期和时间（年、月、日、时、分、秒、秒的小数部分），根据ISO 8601编码，不包含时区信息。
3	date 日期（年、月、日），根据ISO 8601编码。
4	month 由年和月组成的日期，根据ISO 8601编码。
5	week 由年和周数组成的日期，根据ISO 8601编码。
6	time 时间（时、分、秒、秒的小数部分），根据ISO 8601编码。
7	number 仅接受数值。step属性指定精度，默认为1。
8	range range类型用于输入字段，这些字段应包含一定范围内的数值。
9	email 仅接受电子邮件值。此类型用于应包含电子邮件地址的输入字段。如果您尝试提交简单的文本，它将强制您以[email protected]格式仅输入电子邮件地址。
10	url 它仅接受 URL 值。此类型用于应包含 URL 地址的输入字段。如果您尝试提交简单文本，它会强制您仅输入 http://www.example.com 格式或 http://example.com 格式的 URL 地址。

<output> 元素

HTML5 引入了一个新的元素 <output>，用于表示不同类型输出的结果，例如脚本编写的输出。

您可以使用 for 属性来指定输出元素与文档中影响计算的其他元素（例如，作为输入或参数）之间的关系。for 属性的值是其他元素 ID 的空格分隔列表。

在线演示

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

它将产生以下结果 -

占位符属性

HTML5 引入了一个名为 placeholder 的新属性。此属性在 <input> 和 <textarea> 元素上为用户提供有关可以在字段中输入什么的提示。占位符文本不得包含回车符或换行符。

以下是占位符属性的简单语法：

<input type = "text" name = "search" placeholder = "search the web"/>

此属性仅受最新版本的 Mozilla、Safari 和 Chrome 浏览器支持。

在线演示

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

这将产生以下结果：

自动聚焦属性

这是一个简单的单步模式，在文档加载时使用 JavaScript 轻松编程，自动聚焦一个特定的表单字段。

HTML5 引入了一个名为 autofocus 的新属性，使用方法如下：

<input type = "text" name = "search" autofocus/>

此属性仅受最新版本的 Mozilla、Safari 和 Chrome 浏览器支持。

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

必填属性

现在您不再需要 JavaScript 进行客户端验证，例如空文本框将永远不会提交，因为 HTML5 引入了一个名为 required 的新属性，使用方法如下，并且会坚持要求有一个值：

<input type = "text" name = "search" required/>

此属性仅受最新版本的 Mozilla、Safari 和 Chrome 浏览器支持。

在线演示

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

它将产生以下结果 -

HTML5 - SVG

SVG 代表 Scalable Vector Graphics，它是一种使用 XML 描述 2D 图形和图形应用程序的语言，然后由 SVG 查看器呈现 XML。

SVG 主要用于矢量类型图表，例如饼图、X、Y 坐标系中的二维图形等。

SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准，您可以在 SVG 规范中查看 SVG 规范的最新版本。

查看 SVG 文件

大多数网络浏览器可以像显示 PNG、GIF 和 JPG 一样显示 SVG。Internet Explorer 用户可能需要安装 Adobe SVG 查看器才能在浏览器中查看 SVG。

在 HTML5 中嵌入 SVG

HTML5 允许使用 <svg>...</svg> 标签直接嵌入 SVG，该标签具有以下简单语法：

<svg xmlns = "http://www.w3.org/2000/svg">
   ...    
</svg>

Firefox 3.7 还引入了一个配置选项（“about:config”），您可以在其中使用以下步骤启用 HTML5：

在 Firefox 地址栏中输入 about:config。
单击出现的警告消息上的“我保证会小心！”按钮（并确保您遵守它！）。
在页面顶部的过滤器栏中输入 html5.enable。
目前它将被禁用，因此单击它以将值切换为 true。

现在您的 Firefox HTML5 解析器应该已启用，您应该能够使用以下示例进行实验。