HTML5 Introduction
HTML5 Introduction （HTML5简介）
HTML5 is not only a new version of HTML language enriched with new elements and attributes, but a set of technologies for building more powerful and diverse web sites and applications, that support multimedia, interact with software interfaces, etc. （HTML5不仅是一种新版本的HTML语言，充满了新的元素和属性，而且是一套用于构建更强大和多样化的网站和应用程序的技术，支持多媒体，与软件界面交互等。）
HTML5 Benefits
HTML5 Benefits （HTML5优势）
The main benefits of HTML5 are listed below:
HTML5 is supported by all modern browsers. （-所有现代浏览器都支持HTML5。）
HTML5 is more device friendly. It is easy for use. （- HTML5对设备更友好。它易于使用。）
HTML5 can help creating attractive websites with CSS, JavaScript, etc. （- HTML5可以使用CSS、JavaScript等帮助创建有吸引力的网站。）
HTML5 supports SVG (Scalable Vector Graphics - Wikipedia) and other virtual graphics. In earlier versions, the use of vector graphics was possible only in combination with such technologies as Flash, VML, etc. （- HTML5支持SVG （可缩放矢量图形-维基百科）和其他虚拟图形。在早期版本中，只有结合Flash、VML等技术才能使用矢量图形。）
The code becomes cleaner mainly due to replacing div tags with Semantic elements, which help better structure content of the web page and improve readability. （-代码变得更干净，主要是由于将div标记替换为 语义元素，有助于更好地构建网页内容并提高可读性。）
HTML5 supports geolocation, which makes it possible to determine the users’ location. （- HTML5支持地理位置，从而可以确定用户的位置。）
The new standards were specified for playing multimedia (animation, audio, video) directly in the browser without having to install additional plug-ins. （-规定了直接在浏览器中播放多媒体（动画、音频、视频）的新标准，而无需安装其他插件。）
Support for web storage introduced in HTML5 makes it possible to store large amounts of application data locally, without affecting your web application’s performance. The data in local storage will persist even when the user’s browser is closed and reopened. （-支持HTML5中引入的Web存储，可以在本地存储大量应用程序数据，而不会影响Web应用程序的性能。即使关闭并重新打开用户的浏览器，本地存储中的数据也会保留。）
Disadvantages of HTML5:
It is supported only by modern browsers. （-它仅受现代浏览器支持。）
You must write long codes which is time-consuming. （-您必须编写很长的代码，这很耗时。）
HTML5 Content Models
HTML5 Content Models （HTML5内容模型）
In HTML5, the content of a web page can be divided into semantic groups, which describe its content. These groups are called content models. Each of these models describes the type of elements it contains. The content model can contain text and child elements. The element can belong to one or more content categories. （在HTML5中，网页的内容可以划分为描述其内容的语义组。这些组称为内容模型。这些模型中的每一个都描述了它所包含的元素类型。内容模型可以包含文本和子元素。元素可以属于一个或多个内容类别。）
HTML5 content models are listed below:
Metadata content （-元数据内容）
Flow content （-流程内容）
Sectioning content （-分区内容）
Heading content （标题内容）
Phrasing content （-措辞内容）
Embedded content （嵌入内容）
Interactive content （互动内容）
Palpable content （-可触摸的内容）
Content models can overlap, and it means that elements are belonging to several categories in the meantime. For example, sectioning, heading, phrasing, embedded, interactive, and a part of metadata content refer to flow content. Metadata and interactive content in certain cases may refer to phrasing content. （内容模型可以重叠，这意味着同时元素属于多个类别。例如，分段、标题、短语、嵌入式、交互式和元数据内容的一部分是指流内容。在某些情况下，元数据和交互式内容可能指措辞内容。）
There are also elements that are used for specific purposes, for example, for defining forms. Such kind of elements does not refer to any of the content mentioned above models. （还有一些元素用于特定目的，例如用于定义表单。此类元素不涉及上述任何内容。）
Metadata content
Elements belonging to the metadata content category contain information about HTML documents, set up links to other resources, define the presentation, or the behavior of it. These elements are not displayed on the web page. （属于元数据内容类别的元素包含有关HTML文档的信息、设置指向其他资源的链接、定义演示文稿或其行为。这些元素不会显示在网页上。）
The elements of content model category are:
<base> ,
<link> ,
<meta>,
<noscript>,
<script>,
<style>,
<template> and
<title>.
Example of elements belonging to the metadata content:
<head>
<title>Title of the document</title>
<meta charset="UTF-8">
<style>
* {
color: #1c87c9;
}
</style>
</head>
Flow content
Elements belonging to the flow content category are typically those used in the body of an HTML document (enclosed inside the <body></body> tags).
The elements of flow model category are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>.
Example of elements belonging to the flow content:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><abbr title="Universal Resource Locator">URL</abbr> - This is a special form of designating an individual resource address on the Internet </p>
<hr/>
<div>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
</p>
<hr/>
<ol type="A">
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</div>
</body>
</html>
The following elements belong to the flow content, but only if a specific condition is met:
<area>, only inside <map>,
<link>, only if itemprop attribute is specified,
<meta>, only if itemprop attribute is specified,
<style>, only if scoped attribute is specified.
Sectioning content
Elements belonging to the sectioning content are those creating independent sections in the structure of an HTML document (for example, header, footer, etc.) Note that each section could have its heading and outline. （属于分区内容的元素是在HTML文档结构中创建独立分区的元素（例如，页眉、页脚等）。）请注意，每个部分都可以有标题和大纲。）
The elements of sectioning content model are: <article>, <aside>, <nav> and <section>.
Example of elements belonging to the sectioning content:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<section>
<h1>Article about flower</h1>
<article>
<h2>Roses</h2>
<p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
</article>
</section>
</body>
</html>
Heading content
Elements belonging to the sectioning content model create a section in the current outline that defines the scope of <header> elements, <footer> elements, and heading content.
The elements of heading content are: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> and <hgroup>.
Example of elements belonging to the heading content:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<hgroup>
<h1>Welcome to w3cdoc</h1>
<h2>Here you can learn HTML Bases.</h2>
<h3>Some text or subtitle.<h3>
</hgroup>
</body>
</html>
Phrasing Content
The elements belonging to phrasing content define and mark-up the text. They are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small> <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video> and <wbr>.
Example of elements belonging to the phrasing content:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example with HTML tags</h1>
<p>
Here is some text <sub> with the sup tag</sub>.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...</p>
<p>Reference site about Lorem Ipsum,<sup> giving information on its origins</sup>, as well as a random Lipsum generator.</p>
<p>Learn HyperText markup language (HTML) on <mark>w3cdoc.com</mark> website.</p>
<p>We’ve used <strong> tag to highlight <strong> this important part of the text</strong>.</p>
<p>The important part of the text is highlighted by the <em> in italic</em>.</p>
</body>
</html>
The following elements belong to the phrasing content, but only if a specific condition is met:
<a>, if it contains only phrasing content,
<area> only inside the <map> element,
<del>, if it contains only phrasing content,
<ins>, if it contains only phrasing content,
<link> if itemprop attribute is specified,
<map>, if it contains only phrasing content,
<meta> if itemprop attribute is specified.
Embedded content
Embedded content imports another resource or inserts content from another mark-up language or namespace into the document. This content model includes the following elements: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, and <video>.
Examples of elements belonging to the embedded content:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Examples of the HTML elements:</h1>
<h2>Example of the HTML<canvas> tag:</h2>
<canvas id="canvasExample" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('canvasExample');
var context = canvas.getContext('2d');
context.font = '30pt Calibri';
context.fillStyle = '#1c87c9';
context.fillText('Canvas Example !', 50, 100);
</script>
<h2>Example of the HTML<img> tag:</h2>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
<h2>Example of the HTML<svg> tag:</h2>
<svg width="350" height="150">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
</svg>
<br/>
</body>
</html>
Interactive content
Interactive content model includes elements specifically designed for user interaction. They are <a> (if href attribute is specified), <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select> и <textarea>.
Example of elements belonging to the interactive content:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of Interactive content</h1>
<form>
<select>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
<br><br>
<textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea>
<br>
<button type="button">Send</button>
</form>
</body>
</html>
The following elements belong to the interactive content model, but only if a specific condition met:
<audio>, if controls attribute is specified,
<img>, if usemap attribute is specified,
<input>, if type attribute is not hidden,
<menu>, if the value of type attribute is “toolbar”,
<object>, if usemap attribute is specified,
<video>, if controls attribute is specified.
Palpable content
Content is palpable when it’s neither empty or hidden; this is the content that is rendered and is substantive. Elements whose model is flow content or phrasing content should have at least one node which is palpable, and which has no attribute whose value is set to hidden. （内容既不是空的也不是隐藏的；这是呈现的内容，是实质性的。模型为流内容或短语内容的元素应至少有一个可触摸的节点，并且没有值设置为隐藏的属性。）
This is not a required condition; there are cases when the element can be empty. For example, it can be filled after an external script executed. （这不是必需的条件；在某些情况下，元素可以为空。例如，它可以在执行外部脚本后填充。）
The secondary content categories
The secondary content categories are those that support scripts. The script-supporting elements don’t directly contribute to the rendered output of a document, but support scripts, either by containing or specifying script code directly, or by specifying data that will be used by scripts. The script-supporting elements are <script> and <template>. The <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> and <td> elements are called sectioning roots. Elements belonging to transparent content model are <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> and <video>. These elements inherit the type of the parent element and can contain content allowed in their parent element.