【HTML5】新语义标签汇总

一颗不甘坠落的流星

已于 2023-06-27 10:01:10 修改

阅读量570

点赞数 1

分类专栏： HTML 笔记文章标签： html5 前端

于 2020-12-21 14:04:09 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/111469865

版权

HTML 笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

一、基本介绍

在这里插入图片描述

标签	描述
`<article>`	定义文章。
`<aside>`	定义页面内容以外的内容。
`<details>`	定义用户能够查看或隐藏的额外细节。
`<figcaption>`	定义 `<figure>` 元素的标题。
`<figure>`	规定自包含内容，比如图示、图表、照片、代码清单等。
`<footer>`	定义文档或节的页脚。
`<header>`	规定文档或节的页眉。
`<main>`	规定文档的主内容。
`<mark>`	定义重要的或强调的文本。
`<nav>`	定义导航链接。
`<section>`	定义文档中的节。
`<summary>`	定义 `<details>` 元素的可见标题。
`<time>`	定义日期/时间。

二、使用案例

2.1、section（节块）

<section> 元素：定义文档中的节，一般是有主题的内容组，通常具有标题。

<section>表示网页中的一部分或一块</section>
<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

2.2、article（文章）

<article> 元素：规定独立的自包含内容，文档有其自身的意义，并且可以独立于网站其他内容进行阅。

<article>表示一块与上下文无关的独立内容</article>
<article>
   <h1>What Does WWF Do?</h1>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

2.3、aside（侧栏）

<aside> 元素：为页面主内容之外的某些内容（比如侧栏）。

<aside>在article之外对article进行辅助描述</aside>
<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

2.4、header（页眉）

<header> 元素：为文档或节规定页眉。

<header id="header">表示网页中的头部或某个模块中的头部</header>
<article>
   <header>
     <h1>What Does WWF Do?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

2.5、footer（页脚）

<footer> 元素：为文档或节规定页脚。

<footer id="footer">表示网页中底部或者某个模块中的底部</footer>
<footer>
   <p>Posted by: Hege Refsnes</p>
   <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

2.6、nav（导航）

<nav> 元素：定义导航链接集合。

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

2.7、figure（组合）+ figcaption

<figure> 元素：一般用于组合元素，使图片和标题能够被组合在 <figure> 元素中。
<figcaption>元素：为<figure> 元素的标题

<figure><!--表示一段独立的流内容-->
     <figcaption>为其添加标题(第一个或最后一个子元素的位置)</figcaption>
</figure>
<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>