<body> 元素
文档的 <body> 包含文档的内容。
内容可以由用户代理以不同方式呈现。
例如，内容可以是文本、图像、链接、颜色、图形等。
<body> ... </body>
在 body 标签之间，可以有不同的元素，我们可以使用 CSS 属性为其指定样式。
只需向 HTML 元素添加一个 id 或者类选择器，并在 <style> 部分提及首选样式选项（颜色、大小、字体等）。
<style>
.header-style {
color: blue;
}
</style>
<body>
<header class="header-style"></header>
</body>
<article> 元素
<article> 元素用于定义独立的、自包含的内容（文章、教程 文章、注释等）。
元素的内容有其含义，很容易与网页的其余内容区分开来。
<article> <p>Text of the article</p> </article>
版本信息 - Doctype
一个基本的 HTML 页面以文档类型声明或者文档类型开始。
这是一种通知浏览器它是什么类型的文档的方法。
doctype 始终是任何 HTML 文件顶部的第一项。
然后是小节和小节，每个小节都可能有其标题和副标题。
这些标题和分节元素有助于读者理解内容的含义。
说起过去，我们可以说过去的 doctype 声明非常令人不快且难以记住。
作为示例，请参阅 HTML 4.01 Strict DTD 声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML5 做得更多！现在最好的解决方案是这个简短的声明：
<!Doctype html>
文档类型可以用小写、大写或者大小写混合编写。
正如我们所注意到的，声明中缺少“5”。
尽管此 Web 标记称为“HTML5”。
<html> 元素
<html> 元素跟在 doctype 信息之后，用于通知浏览器这是一个 HTML 文档。
我们可以使用带有“en”值的 lang 属性来指定文档是英文的。
但是现在，即使是 lang 属性也不需要文档验证或者正常运行。
不要忘记包含结束 </html> 标签：
<!DOCTYPE HTML> <html lang="en"> </html>
<head> 部分
下一部分是 <head> 部分。
<head> 元素包含元数据（文档标题、字符集、样式、链接、脚本），以及不向用户显示的有关网页的特定信息。
<meta> 元素用于指定元数据，以向浏览器和搜索引擎提供有关网页的技术信息。
例如，如果要指定文档的作者，可以像这样使用 <meta> 元素：
<meta name="Author" content="onitroad">
要定义文档的字符编码，几乎在所有情况下都需要使用“utf-8”值设置 charset 属性。
UTF-8 是 HTML5 的默认字符编码。
了解有关 UTF-8 编码的更多信息。
<meta charset="utf-8">
使用 <title> 元素定义文档的标题。
<title>onitroad - Learn Programming Languages Online.</title>
接下来是 <link> 元素，它设置当前文档和外部资源之间的关系。
通常，它用于链接到外部 CSS 样式表。
<link> 元素的必需属性是 rel、href 和 type。
<link rel="stylesheet" type="text/css" href="style.css">
现在，我们可以看到整个 <head> 部分：
<head> <title>onitroad - Learn Programming Languages Online.</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="Author" content="onitroad"> <link rel="stylesheet" type="text/css" href="style.css"> </head>
<header> 元素
使用 <header> 元素定义文档或者部分的标题。
它通常包含徽标、搜索列、导航链接等。
<header></header>
<section> 元素
<section> 元素用于对包含逻辑连接内容（新闻块、联系信息等）的网页中的独立部分进行分组。
<section> <h1>Header</h1> <p>Some paragraph for example</p> </section> <section> <h2>Header 2</h2> <p>Another paragraph for example.</p> </section>
现在让我们完成并查看 HTML5 页面的外观。
创建 HTML5 页面的示例：
<!DOCTYPE HTML>
<html>
<head>
<title>文档的标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
html,
body {
height: 100%;
}
body {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.header-menu,
footer {
display: flex;
align-items: center;
width: 100%;
}
.header-menu {
justify-content: flex-end;
height: 60px;
background: #1c87c9;
color: #fff;
}
h2 {
margin: 0 0 8px;
}
ul li {
display: inline-block;
padding: 0 10px;
list-style: none;
}
aside {
flex: 0.4;
height: 165px;
padding-left: 15px;
border-left: 1px solid #666;
}
section {
flex: 1;
padding-right: 15px;
}
footer {
padding: 0 10px;
background: #ccc;
}
</style>
</head>
<body>
<header class="header-menu">
<nav>
<ul>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>HTML</h2>
<small>Hyper Text Markup Language 超文本标记语言</small>
</header>
<p>今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。</p>
</article>
<article>
<header>
<h2>生活</h2>
<small>飞鸟</small>
</header>
<p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
</article>
</section>
<aside>
<h2>Our Books</h2>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>PHP</p>
</aside>
<footer>
<small>onitroad 版权所有</small>
</footer>
</body>
</html>
标题（h1-h6 元素）
<h1>-<h6> 标题元素用于对即将到来的部分进行简短描述。
<h1> 被认为是最重要的，而 <h6> 是最不重要的。
<body> <h1>First-level heading</h1> <h2>Second-level heading</h2> </body>
<nav> 元素
<nav> 元素定义了一个导航链接块，在当前文档内或者到其他文档。
请注意，并非 HTML 文档中的所有链接都可以放在 <nav> 元素内；它只能包含主要的导航块。
<header>
<nav>
<ul>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
</nav>
</header>
<script> 元素
在 HTML5 中，<script> 标签对应嵌入 JavaScript 的实践。
例如，它与页面加载速度有关。
<script src="js/scripts.js"></script>