HTML5 新增元素详解与用法-优快云博客

本文链接：https://blog.youkuaiyun.com/Shmily_ox/article/details/104658487

本文详细介绍了HTML5中新增的结构元素、分组元素、页面交互元素、文本层次语义元素以及全局属性的用法，包括header、nav、article、aside、section、footer、figure、figcaption、hgroup、details、summary、progress、meter、time、mark、cite、draggable、hidden、spellcheck和contenteditable等，帮助开发者更好地理解和应用这些元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 新增元素的用法

一、结构元素

1、header

用法
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。
注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。在HTML5中，一个header元素至少可以包含一个heading元素（h1-h6）。

例子

<body>
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文部分</p>
</article>
</body>

2、nav

用法
nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可以链接到其他页面或者当前页面的其他部分，并不是所有的链接组都要被放在nav元素里面，我们只需要把最主要的、基本的、重要的放在nav元素里面即可。
比如说页脚底部如果有个版权申明，我们就不建议使用nav元素，而是使用footer元素是最合适的。一个页面中我们可用多个nav元素作为整体或者不同部分的导航。

例子

<body>
<h1>nav的使用方法</h1>
<nav>
<ul>
<li>
<a href=”nav元素.html”>首页</a>
</li>
<li>
<a href=”aside元素.html”>aside</a>
</li>
<li>
<a href=”section元素.html”>section</a>
</li>
</ul>
</nav>
</body>

nav的多层嵌套，我们可以在下面新建一个独立的区块，我们使用article。

<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=”section元素.html”>section</a>
</li>
<li>
<a href=”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>//这就实现了一层的嵌套
<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=”section元素.html”>section</a>
</li>
<li>
<a href=”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>

总结nav元素的方法
1、传统的导航条
2、侧边栏导航
3、内页导航
4、翻页操作

3、article

用法
article代表文档、页面、应用程序中独立的完整的被外部引用的内容区域。它可以是博客中的文章、帖子、用户的回复，总之article它所表示的所展现的内容，是外表独立出来的内容，所以它有自己独立的标题、页脚。

例子

<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8”>
<titile></title>
</head>
<body>
<article>
</header>
<h1>我是Article</h1>
<p>创建时间：<time pubdate=”pabdate”>2014/09/27</time></p>
</header>
<p>
<b>Article</b>是一个独一的区域
</p>
<footer>
<p><small>麦子学院版权所有</small></p>
</footer>
</article>
</body>
</html>

嵌套用法：在内容区域的下面添加一个sectio