Module 02 · CSS Overview & HTML5 ElementsCSS 概述与 HTML5 元素
Common HTML5 Tags and Structural Elements常见 HTML5 标签与结构元素
Estimated time needed: 25 minutes
所需估计时间：25 分钟
Special HTML Elements 特殊 HTML 元素
In this reading, you will learn about some common HTML5 elements and their purpose. You will also learn about additional elements used for embedding content, which were introduced with HTML5.
在本阅读中，您将了解一些常见的 HTML5 元素及其用途。您还将了解一些用于嵌入内容的附加元素，这些元素是在 HTML5 中引入的。
Objectives 目标
After completing this reading section, you will be able to:
完成本阅读部分后，您将能够：
- Use common non-HTML5 specific tags
使用常见的非 HTML5 特定标签 - Differentiate between HTML5 structural elements including
<section>and<article>
区分 HTML5 结构元素，包括<section>和<article> - Use navigational and grouping elements
使用导航和分组元素 - Use HTML5 elements specific for embedding different types of content
使用特定于嵌入不同类型内容的 HTML5 元素
Common HTML Elements - Review 常见 HTML 元素 - 回顾
In this section, you will learn more about some common HTML elements and when to use them. You will also go through some examples of their usage for better understanding.
在本节中，您将了解一些常见的 HTML 元素及其使用时机。您还将通过一些使用示例来加深理解。
Non HTML5 Specific Tags 非 HTML5 特定标签
Comments 注释
HTML comments are used to include information in your code that is not to be displayed in your browser. This tag provides a way to document your source code and give more information about the code thus, enabling other users to undertand the purpose of the code when working on a large database with other developers.
HTML 注释用于在代码中包含不希望在浏览器中显示的信息。此标签提供了一种记录源代码并给出更多关于代码信息的方法，从而使用户在与其他开发者一起处理大型数据库时能够理解代码的目的。
To insert a comment into your code, use the comment tag <!-- [YOUR COMMENT HERE] -->, replacing [YOUR COMMENT HERE] with your comment. There are no limitations to what your comment could be, it can be text (both single-line and multi-line) or even other additional HTML tags.
将注释插入到您的代码中，请使用注释标签 <!-- [YOUR COMMENT HERE] --> ，将[YOUR COMMENT HERE]替换为您的注释。注释的内容没有限制，可以是文本（单行和多行）甚至其他额外的 HTML 标签。
<div>
The <div> tag defines a division of the page, and is used to group content together. Any type of content can be placed in a div tag, and it is not necessary that it should be semantically related.
<div> 标签定义了页面的一部分，用于将内容分组。任何类型的内容都可以放置在 div 标签中，并且不需要它与内容在语义上相关。
<div> tags are commonly used when many elements are required to have the same format. Grouping such elements together in the same <div> tag enables a developer to easily style them by either using a class or an id.
标签通常在需要许多元素具有相同格式时使用。将此类元素分组在同一标签中，开发人员可以通过使用类或 ID 轻松地对它们进行样式化。
When using a <div> tag, note that browsers will insert a line break before and after the element.
使用 <div> 标签时，请注意浏览器将在元素前后插入换行符。
<div>
<h1>This is a heading in a div element</h1>
<p>This is some text in a div element.</p>
</div>
Structural HTML5 Elements 结构化 HTML5 元素
<section>
The <section> element is used to group content in a more specific way than the <div> tag. The content within a <section> element is grouped in a semantically meaningful way, that is, there is a reason, other than for styling purposes for putting the content together. Content within a <section> tag has a theme, which is usually indicated by a heading tag (e.g. <h1>) used immediately after the opening <section> tag.
<section> 元素用于以比 <div> 标签更具体的方式对内容进行分组。 <section> 元素内的内容以语义上有意义的方式进行分组，也就是说，除了为了样式目的，将内容放在一起还有其他原因。 <section> 标签内的内容有一个主题，这通常由紧随开头的 <section> 标签后的标题标签（例如 <h1> ）来指示。
<section>
<h1>Section 1</h1>
<p>This is text related to section 1.</p>
</section>
<section>
<h1>Section 2</h1>
<p>This is some text related to section 2.</p>
</section>
<article>
An <article> element is even more specific than a <section> tag. It is used to group together semantically related, self-contained content which can be meaningful on its own. Similar to the <section> element, articles usually have headings immediately after their opening tag to indicate what the article is about.
一个 <article> 元素比一个 <section> 标签更加具体。它用于将语义相关、自包含的内容组合在一起，这些内容可以独立地具有意义。类似于 <section> 元素，文章通常在其开标签后立即有标题，以表明文章的内容。
<article>
<h1>Article 1</h1>
<p>This paragraph is related only to article one and is meaningful on its own, without the rest of the code.</p>
</article>
<article>
<h1>Article 2</h1>
<p>This paragraph is related only to article two and is meaningful on its own, without the rest of the code.</p>
</article>
<header>
The <header> element is a container used to define the introductory/header information of a page. It can be used for a navigational bar, or to wrap a table of contents.
<header> 元素是一个容器，用于定义页面的简介/标题信息。它可以用于导航栏，或者包裹目录表。
An HTML document can contain more than one <header> elements, however, they cannot be placed within <address>, <footer>, or other <header> elements.
一个 HTML 文档可以包含多个 <header> 元素，但是它们不能放置在 <address> 、 <footer> 或其他 <header> 元素内。
<footer>
A <footer> element defines the area at the bottom of the page (known as a footer). This often contains copyright information, contact information, and contact links.
一个 <footer> 元素定义了页面底部区域（称为页脚）。这通常包含版权信息、联系信息和联系链接。
<body>
<article>
<header>
<h1>G8 summit protests</h1>
</header>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="control">
<h1>Crowd control</h1>
<p>...more...</p>
</section>
</div>
<footer>
<p>Published today.</p>
</footer>
</article>
</body>
HTML5 Elements for Grouping HTML5 分组元素
<aside>
The <aside> element is used to provide additional information that is related to the main discussion. It lets you display further content or additional resources without detracting from the main discussion, and is often placed as a sidebar in a document.
<aside> 元素用于提供与主要讨论相关联的附加信息。它允许您显示更多内容或额外资源，而不会影响主要讨论，通常在文档中作为侧边栏放置。
While the <aside> element itself is not displayed different from the rest of the content, it is useful for understanding your code and for styling purposes.
尽管 <aside> 元素本身与内容中的其他部分没有显示差异，但它对于理解您的代码和样式化目的很有用。
<p>This is a paragraph of text that casually mentions a concept and continues explaining the main point</p>
<aside>
<h4>Concept Definition</h4>
<p>This goes over the concept mentioned in the paragraph to provide readers with further explanation if needed. However, it does not detract from the main content.</p>
</aside>
<figure>
The <figure> tag defines self-contained content, such as a diagram or photo, that is referred to from the main content. The content within the <figure> element should be related to the main content, but still independent in such a way that if removed from the document, it would not affect the flow.
<figure> 标签定义了自包含的内容，如图表或照片，这些内容在主内容中被引用。 <figure> 元素内的内容应与主内容相关，但仍然保持独立，如果从文档中移除，则不会影响流程。
<figcaption>
The <figcaption> tag defines the caption for the contents of the <figure> element. It can be placed as the first or last child element within the <figure> element.
<figcaption> 标签定义了 <figure> 元素内容的标题。它可以放置在 <figure> 元素内的第一个或最后一个子元素位置。
<figure>
<img src="images/IDSNlogo.png" width="500" height="500"/>
<figcaption>IBM Developer Skills Network Logo</figcaption>
</figure>
Navigational Elements 导航元素
<nav>
The <nav> element is used as a way to group navigational elements which are used to move between pages, such as the navigation bar typically found at the top of websites.
<nav> 元素被用作分组导航元素的方式，这些导航元素用于在页面之间移动，例如通常在网站顶部找到的导航栏。
The <nav> tag is a convenience tag which does not alter the appearance on webpages. However, it is useful in styling all navigational elements, as well as omitting the content for certain functionalities, such as with screen readers.
<nav> 标签是一个便利标签，它不会改变网页上的外观。然而，它在样式化所有导航元素以及省略某些功能的内容方面很有用，例如与屏幕阅读器一起使用。
<nav>
<div class="menu">
<a href="#">Home</a> |
<a href="about.html">About</a> |
<a href="register.html">Register</a> |
<a href="#">Sign in</a>
</div>
</nav>
Additional HTML5 Elements 附加 HTML5 元素
This section will introduce you to new HTML5 elements which are commonly used. This is not a comprehensive list, but is meant to familiarize you with the most common ones.
本节将向您介绍一些常用的 HTML5 元素。这不是一个完整的列表，而是旨在让您熟悉最常见的元素。
Embedding Content 嵌入内容
<audio>
The <audio> element is used to embed sound content, such as music or podcasts. It contains one or more <source> tags with different audio sources (e.g. MP3, WAV), so the browser can select the first supported source to play.
<audio> 元素用于嵌入声音内容，如音乐或播客。它包含一个或多个 <source> 标签，带有不同的音频源（例如 MP3、WAV），以便浏览器可以选择第一个支持的源进行播放。
If a browser does not support the audio formats provided, the browser will instead display any text within the <audio> element.
如果浏览器不支持提供的音频格式，浏览器将显示 <audio> 元素内的任何文本。
<audio>
<source src="soundtrack.mp3" type="audio/mpeg">
<source src="soundtrack.ogg" type="audio/ogg">
Your browser does not support the audio formats provided.
</audio>
<canvas>
The <canvas> element is used to draw graphics via scripting. JavaScript is one way to utilize scripting to draw these graphics, as shown in the example below.
<canvas> 元素用于通过脚本绘制图形。JavaScript 是利用脚本绘制这些图形的一种方式，如下例所示。
<canvas>
Your browser does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
context.fillRect(0, 0, 100, 100);
</script>
If a browser does not support graphical content or JavaScript is disabled, the browser will display any text within the <canvas> element.
如果浏览器不支持图形内容或禁用了 JavaScript，浏览器将显示 <canvas> 元素内的任何文本。
<embed>
The <embed> element is used as a container to embed external resources such as media players and plug-in applications into your web page.
<embed> 元素用作容器，用于将媒体播放器和插件应用程序等外部资源嵌入到您的网页中。
<embed type="text/html" src="another_webpage.html">
<track>
The <track> element defines text tracks, such as subtitles or captions, for <audio> and <video> elements. This text should be visible as the related media source it playing, and are formatted in the WebVTT (.vtt) format.
<track> 元素定义了文本轨道，如字幕或标题，用于 <audio> 和 <video> 元素。此文本应与正在播放的相关媒体源一起可见，并采用 WebVTT (.vtt) 格式。
<video>
<source src="common_html_elements.mp4" type="video/mp4">
<track src="english_subtitles.vtt" kind="subtitles" srclang="en" label="English">
<track src="spanish_subtitles.vtt" kind="subtitles" srclang="es" label="Spanish">
</video>