时间：2021-07-01 10:21:17 帮助过：35人阅读
兼容性：浏览器全部支持
del：定义文档中已被删除的文本。
ins：定义已经被插入文档中的文本。
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><title>html标签使用</title><style>* {padding: 0;margin: 0;}</style></head><body><del>原价：299元</del><ins>特价：188元</ins></body></html>效果：
对HTML5语义化标签解释
<main> 定义主要内容
<header> 页眉，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等
<header>
<hgroup>
<h1>页眉主标题</h1>
<h1>页眉副标题</h1>
</hgroup>
</header>
<nav> 定义主体模块或者导航链接的集合
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。
<article>
<header>
<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<time datetime="2011-03-20">2011.03.20</time>
</header>
<p>文章内容详情</p>
</article>
<aside>与一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。
<aside id="sidebar">
<section class="widget">
<h4 class="widgettitle">Sidebar</h4>
<ul>
<li><a href="#">WordPress</a> (3)</li>
<li><a href="#">Design</a> (23)</li>
<li><a href="#">Design </a>(18)</li>
</ul>
</section>
</aside>
<section>表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。
一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点 来 辨识每一个<section>
<section>
<h1>这里是section标题...</h1>
<p>这里是section标题对于内内容...</p>
</section>
<figure> 元素代表一段独立的内容.用于对元素进行组合。多用于图片与图片描述组合。
<!-- Just a figure -->
<figure>
<img src="figure.png" alt="figure.png图片按" title="figure图片">
</figure>
<p>段落</p>
<!-- Figure with figcaption -->
<figure>
<img src="figure.png" alt="figure.png图片按" title="figure图片">picture">
<figcaption>figure图片描述</figcaption>
</figure>
<p>段落.....</p>
<footer> 定义了整个页面或其中一部分的页脚（并且通常包含原创作者，版权信息，联系方式和站点地图,文档相关的链接等信息）
<footer>
原创作者;版权信息;联系方式;文档相关链接等...
</footer>
<hgroup> 标签用于对网页或区段（section）的标题进行组合。使用新的HTML5元素hgroup，可以为header元素添加更多的信息。（头部主标题/副标题）
<hgroup>
<h1>Main title</h1>
<h2>Secondary title</h2>
</hgroup>
以上就是理解html语义化标签的详细内容，更多请关注Gxl网其它相关文章！