article元素表示自包含HTML文档中的内容。
以下代码显示了正在使用的 article 元素。
<!DOCTYPE HTML>
<html>
</head>
<body>
<article>
<header>
<hgroup>
<h1 id="fruitsilike">H1Like</h1>
<h2>H2</h2>
</hgroup>
</header>
This is a test.
<section>
<h1 id="morefruit">XML</h1>
This is a test.
<section>
<h1>HTML</h1>
This is a test.
</section>
</section>
<footer>
<nav>
Nav
</nav>
</footer>
</article>
</body>
</html>section元素是HTML5的新功能，表示文档的一部分。
section元素应用于包含内容将在文档的大纲或目录中列出。
段元素通常包含一个或多个内容段落和标题，但标题是可选的。
以下代码显示了正在使用的section元素。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<section>
<hgroup>
<h1>H1</h1>
<h2>H2</h2>
</hgroup>
This is a test.
<section>
<h1>H1</h1>
This is a test.
<section>
<h1>More information</h1>
This is a test.
</section>
</section>
</section>
</body>
</html> nav 元素表示文档的一个部分包含到其他页面或同一页面的其他部分的链接。
此元素标识文档的主要导航部分。
以下代码显示了使用 nav 元素。
<!DOCTYPE HTML>
<html>
<body>
<header>
<hgroup>
<h1>H1</h1>
<h2>by www..cn</h2>
</hgroup>
<nav>
<h1>Contents</h1>
<ul>
<li><a href="#fruitsilike">XML</a></li>
<ul>
<li><a href="#morefruit">HTML</a></li>
</ul>
<li><a href="#activitiesilike">CSS</a></li>
<ul>
<li><a href="#tritypes">Java</a></li>
<li><a href="#mytri">Javascript</a></li>
</ul>
</ul>
</nav>
</header>
<section>
<header>
<hgroup>
<h1 id="fruitsilike">Section h1</h1>
<h2>Section h2</h2>
</hgroup>
</header>
This is a test.
<section>
<h1 id="morefruit">Inner H1</h1>
This is a test.
<section>
<h1>More information</h1>
This is a test.
</section>
</section>
</section>
<section>
<header>
<h1 id="activitiesilike">Activities</h1>
</header>
<section>
<p>This is a test.</p>
<h1 id="tritypes">Java</h1>
This is a test.
<section>
<h1 id="mytri">Javascript</h1>
</section>
</section>
</section>
<nav>
More Information: <a href="http://www..cn">Learn More About</a>
<a href="http://www..cn">Learn More About</a>
</nav>
<footer id="mainFooter">
©2011, www..cn. <a href="http://www..cn">Visit</a>
</footer>
</body>
</html> details 元素创建一个节，用户可以展开该节以获取有关主题的更多详细信息。
details 元素通常包含一个摘要元素，用于为详细信息部分创建标签或标题。
以下代码显示如何使用摘要和详细信息元素。
<!DOCTYPE HTML>
<html>
<head>
<style>
details {
border: solid thin black;
padding: 5px
}
details>summary {
font-weight: bold
}
</style>
</head>
<body>
<article>
<h1>H1</h1>
</header>
<section>
<p>This is a test.</p>
<details>
<summary>Summary</summary>
<ol>
<li>XML</li>
<li>HTML</li>
<li>CSS</li>
</ol>
</details>
</section>
</article>
</body>
</html> header 元素表示节的标题。它可以包含任何您想要表示为头部的内容。
头部元素通常包含一个 h1?h6 元素或一个 hgroup 元素，它还可以包含节的导航元素。
footer 元素是页眉的补充，表示部分的页脚。
页脚通常包含关于版块的摘要信息，并且可以包括作者的详细信息，权限信息。
您可以在以下代码中看到页眉和页脚元素。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<hgroup>
<h1>H1</h1>
<h2>by www..cn</h2>
</hgroup>
</header>
<section>
<header>
<hgroup>
<h1>Section h1</h1>
<h2>Section h2</h2>
</hgroup>
</header>
This is a test.
<section>
<h1>Inner Section h1</h1>
This is a test.
<section>
<h1>More information</h1>
This is test.
</section>
</section>
</section>
<footer id="mainFooter">
©2015, www..cn. <a href="http://www..cn">Visit</a>
</footer>
</body>
</html> aside 元素表示仅与周围元素相关的内容。这类似于书或杂志中的侧边栏。
内容与页面，文章或部分的其余部分有关，但它不是主要流程的一部分。
下面的代码添加和样式 aside 元素。
<!DOCTYPE HTML>
<html>
<head>
<style>
article {
border: thin black solid;
padding: 10px;
margin-bottom: 5px
}
aside {
width: 40%;
background: white;
float: right;
border: thick solid black;
margin-left: 5px;
}
aside>section {
padding: 5px;
}
aside>h1 {
background: white;
color: black;
text-align: center
}
</style>
</head>
<body>
<article>
<header>
<hgroup>
<h1 id="fruitsilike">H1</h1>
<h2>H2</h2>
</hgroup>
</header>
<aside>
<h1>Why</h1>
<section>
This is a test:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
</section>
</aside>
</article>
</body>
</html>
HTML表格跨度colspan- 列跨度要将单元格跨多个列，请使用 colspan 属性。分配给 colspan 的值必须是整数。您还必须删除展开后的...
HTML表单标签 label 元素为表单中的每个元素提供了一些上下文。它有局部属性: for，form 。例子以下代码显示了如何为用户提供一...
HTML 视频（Videos）在 HTML 中播放视频的方法有很多种。可以使用 embed 标签、object 标签以及 video 标签（HTML 5中启用）。 H...
HTML 表单和输入 HTML 表单用于收集不同类型的用户输入。 在线实例 创建文本字段 (Text field)本例演示如何在 HTML 页面创建文本...
HTML 即超文本标记语言，是目前应用最为广泛的语言之一，是组成一个网页的主要语言。在现今这个 HTML5 华丽丽地占领了整个互联网...
HTML div 和span HTML 可以通过 div 和 span 将元素组合起来。HTML 区块元素 大多数 HTML 元素被定义为块级元素或内联元素。块级...
