HTML5的语义元素

  • HTML5语义元素:

HTML5提供新的语义元素来明确一个web页面的不同部分:<head>、<nav>、<section>、<article>、<aside>、<figcation>、<figure>、<footer>。

1)、<section>元素:

<section>标签定义文档中的节,比如章节、页眉、页脚或文档中的其他部分。示例:

<section>

<h1>wsx</h1>

<p> hello world!</p>

</section>

2)、<article>元素:

<article>标签定义独立的内容。示例:

<article>

<h1>wsx</h1>

<p> hello world!</p>

</article>

3)、<nav>元素:

<nav>标签定义导航链接的部分。<nav>元素用于定义页面的导航链接部分区域,但是,不是所有的链接都需要包含在<nav>元素中。示例:

<nav>

<a href= "/html/">HTML</a> |

<a href= "/CSS/">CSS</a>

<p> hello world!</p>

</nav>

4)、<aside>元素:

<aside>标签定义页面主区域内容之外的内容,比如侧边栏。<aside>标签的呢绒应与主区域的内容相关。示例:

<p>My family and I visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

5)、<header>元素:

<header>元素描述了文档的头部区域。<header>主要用于定义内容的介绍展示区域。在页面中,可以使用多个<header>元素。示例:

<article>

<header>

<h1>wsx</h1>

<p> hello world!</p>

</header>

</article>

6)、<footer>元素:

<footer>元素描述了文档的底部区域。<footer>元素应该包含它的包含元素。一个页脚通常包含文档的作者、著作权信息、链接的使用条款、联系信息等。示例:

<footer>

<p>Posted by: Hege Refsnes</p>

<p><time pubdate datetime="2012-03-01"></time></p> </footer>

7)、<figure>元素和<figcaption>元素:

<figure>标签规定独立的流内容(图像、图表、照片、代码等等)。<figure> 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。<figcaption> 标签定义 <figure> 元素的标题。<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。示例:

<figure>

<img decoding="async" loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>

</figure>

相关推荐
元气少女小圆丶1 小时前
unity发布web嵌入到前端页面的接受参数
前端·unity·webgl
工业HMI实战笔记1 小时前
【拯救HMI】:低碳制造:自动化技术如何助力企业节能降耗
运维·前端·自动化·交互·制造
不简说3 小时前
JS 代码技巧 vol.4 — 10 个异步并发控制,Promise.all 这帮兄弟的踩坑实录
前端·javascript·面试
Sinclair3 小时前
安企CMS的安装-PHPStudy(小皮面板)部署
前端·后端
会飞的特洛伊3 小时前
IAM身份认证
前端·后端
钛态4 小时前
AI 组件生成评测:别只看页面能不能渲染
前端·vue·react·web
Hyyy4 小时前
requestAnimationFrame和setTimeout有什么不同
前端
Jackson__5 小时前
问到你想清楚,这个 skill 专治没想明白就写代码!
前端·github·ai编程
এ慕ོ冬℘゜5 小时前
前端实战:Textarea 实时字数计数输入器(带字数限制+UI优化完整源码)
前端·ui
程序员黑豆5 小时前
从零开始:创建第一个鸿蒙应用程序
前端·harmonyos