文章目录
HTML5 定义了一组新的语义化标记来描述元素的内容，可以简化 HTML 页面设计，并且使用浏览器搜索网页时，也可以利用这些元素。
1、header标签
<header> 标签定义文档的页眉，通常是一些引导和导航信息，通常被放置在⻚⾯或者⻚⾯中某个区块元素的顶部,⽤来介绍内容或者当做导航链接栏。它不局限于写在网页头部，也可以写在网页内容里面。
在⼀个⽂档中，您可以定义多个< header>元素。
通常 header 标签至少包含一个标题标记（h1-h6），还可以包括 hgroup 标签，还可以包括表格内容、标识、搜索表单、nav 导航等。
<body>
<header>
<h1>网站标题</h1>
<h2>网站副标题</h2>
</header>
</body>
2、nav标签
<nav> 标签通常表示页面的导航，定义导航链接的部分：描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。
<body>
<nav>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
</body>
3、main标签
⽂档主要内容
4、article标签
<article> 标签定义独立的内容，使用在相对比较独立、完整的内容模块。常常使用在论坛帖子，报纸文章，博客条目，用户评论等独立的内容项目之中。article 可以嵌套，内层的 article 对外层的 article 标签有隶属关系。
<body>
<article>
<h1>什么是网站？</h1>
<p>展示特定内容的相关网页的集合</p>
</article>
</body>
5、section标签
<section> 表示文档中的一个区域（或节），一般用来做内容的分组。比如章节、页眉、页脚或文档中的其他部分，一般来说会包含一个标题。
<body>
<section>
<h1>section是什么？</h1>
<p>一个新章节</p>
</section>
</body>
注：不要把 <section> 元素作为一个普通的 div 容器来使用。一般来说，一个 <section> 应该出现在文档大纲中。
6、aside标签
<aside> 标签表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。
<body>
<aside>
<h1>美食网简介</h1>
<p>一个介绍美食的网站</p>
</aside>
</body>
7、footer标签
<footer> 标签定义 section 或 document 的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。 它和 header 标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入了 footer 标签，那么它就相当于该区段的页脚了。
<body>
<footer>
<span>Copyright @美食网</span>
</footer>
</body>
8、示例
首先我们来看一个普通的页面的布局方式：
以上是很常见的 div+css 布局模式，通过 class 名称来区分不同的结构，包括头部、导航、文章内容、右边栏，还有底部模块。
而 HTML5 新标签带来的新的布局则是下面这种情况：
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my page</title>
</head>
<body>
<header>header
<nav>nav</nav>
</header>
<article>
<section>section</section>
</article>
<aside>aside</aside>
<footer>footer</footer>
</body>
</html>
注：上面的代码没有 CSS 样式，只是展示 HTML 结构。拥有具体含义的标签，使得代码有很直观的感受，搜索器也能很容易地抓取合适的信息。
详细示例如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
header {
width: 1200px;
margin: 0 auto;
}
header img {
display: inline-block;
width: 200px;
vertical-align: middle;
}
header nav {
display: inline-block;
margin-left: 100px;
}
article {
float: left;
width: 780px;
border: 1px solid #000;
}
aside {
float: right;
width: 400px;
border: 1px solid #000;
}
main {
overflow: hidden;
}
footer {
text-align: center;
}
</style>
</head>
<body>
<header>
<img src="logo.jpg" alt="logo">
<nav>
<a href="">html5</a>
<a href="">css3</a>
<a href="">js</a>
</nav>
</header>
<main>
<article>
<h1>html5+css3</h1>
<p>html5+css3讲解</p>
<section>
<h4>html5</h4>
<p>html5是html的最新版本........</p>
</section>
<section>
<h4>css3</h4>
<p>css3新特性...........</p>
</section>
</article>
<aside>
<h1>html5结构元素</h1>
<p>header、footer、section.....</p>
<nav>
<ul>
<li><a href="">html5</a></li>
<li><a href="">css3</a></li>
<li><a href="">js</a></li>
</ul>QQ
</nav>
</aside>
</main>
<footer>
<p>Copyright ©️2021 QQ课堂</p>
</footer>
</body>
9、其他标签
ruby标签
ruby标签：定义ruby注释(中⽂或字符)
将<ruby>标签与<rt>和<rp>标签⼀起使⽤。
<rp>标签可选，该标签定义的是当浏览器不⽀持"ruby元素"时显示的内容
示例：
<ruby>
课<rp>(</rp><rt>ke</rt><rp>)</rp>
堂<rp>(</rp><rt>tang</rt><rp>)</rp>
</ruby>
若浏览器不支持ruby标签，显示如下：
课（ke）堂（tang）
progress标签
progress标签：定义进度条
<progress max="100" value="50"></progress>
mark标签
mark标签：⽤来标记⽂本
<p><mark>html5</mark>是html的最新版本</p>
embed标签
embed标签：⽤来嵌⼊指定的内容，⽐如插件
<embed src="logo.jpg" type="">
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
