HTML5元素

HTML5的<section>元素和<article>元素

<section>元素定义文档中的一部分,着重于对页面内容进行分块或者分段,通常可以分为引言、内容和联系人信息等几个部分。

html 复制代码
<section>
        <h1>WWF</h1>
        <p>WWF 是世界自然基金会的英文缩写,它是 1961 年成立的独立性非政府环保组织,总部位于瑞士格朗</p>
</section>

<article>元素规定不依赖,自包含内容。用于表示文档、页面、应用程序或者网站中独立的、完整的且可以独自被外部引用的内容。<article>元素中的内容能够独立存在,不依赖页面的其他部分就能被理解。

html 复制代码
<article>
        <h1>WWF</h1>
        <p>坚持全球性、独立性、文化多元性和无党派的立场;用科学的办法解决环境问题,同时以批判的眼光来审视自身取得的成就.</p>
</article>

<section>元素和<article>元素的区别:

<section>元素着重于对页面内容进行分块或者分段,而<article>元素强调内容的独立性和完整性。如果一个内容块可以独立存在并且能被独立引用,就使用<article>元素;如果只是对页面内容进行划分,就使用<section>元素。

HTML5<header>元素

<header>元素指定一个文档或者章节的标题。<header>元素应作为介绍内容的容器。在一个文档中可以有多个<header>元素。

html 复制代码
<article>
        <header>
            <h1>What Does WWF Do?</h1>
            <p>WWF's mission:</p>
        </header>
        <p>WWF 是世界自然基金会的英文缩写,它是 1961 年成立的独立性非政府环保组织,总部位于瑞士格朗</p>
</article>

HTML5<footer>元素

<footer>元素可以嵌套在其他元素内部,用于定义某个特定节的页脚。<footer>元素通常包含与它所属的文档或节相关的信息,这些信息一般是一些辅助性的内容,有助于用户更好地理解和使用整个页面。页脚通常包含文档的作者、版权信息、使用条款的链接、联系人信息等。

一个文档中可以有几个<footer>元素

html 复制代码
<footer>
        <p>作者</p>
        <p>条款 <a href="www.san.com">www.san.com</a></p>
</footer>

HTML5<nav>元素

<nav>元素定义了一组导航超链接,这些链接能引导用户访问网站的其他部分,或者跳转到其他相关页面。它能让代码更具语义,使开发者和浏览器更清晰地识别页面的导航区域。不是所有的链接的文件应该在一个<nav>元素里面。<nav>元素仅用于主要的导航链接块。

html 复制代码
<nav>
        <a href="/html/">HTML</a>
        <a href="/css/">CSS</a>
        <a href="/js/">JavaScript</a>
        <a href="/jquery/">jQuery</a>
</nav>

HTML5<aside>元素

<aside>元素定义一些边栏内容,,这部分内容独立于主要内容,但又对整体有补充作用。它通常包含一些辅助信息、侧边栏内容、广告、相关链接等。

html 复制代码
<aside>
        <h4>标题</h4>
        <p>这是一部分内容</p>
</aside>

HTML5<figure><figcaption>元素

<figure>元素:它是一个容器元素,用于包含与文档主体相关的可视化内容,比如图片、图表、示意图、代码示例等。这些内容通常可以独立于文档的主要流而存在,并且可以在文档中被移动而不影响文档的整体含义。

<figcaption>该元素用于为<figure>元素中的内容提供标题或说明。它是可选的,但当存在时,应该是 <figure>元素的第一个或最后一个子元素。

html 复制代码
<figure>
        <img src="pic_jpg" alt="The Pulpit Rock" width="333" height="222">
        <figcaption>Fig1. - The Pulpit Rock,Norway.</figcaption>
    </figure>
相关推荐
yanlele21 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮28 分钟前
【无标题】
开发语言·前端·javascript
谦行38 分钟前
深度神经网络训练过程与常见概念
前端
Simon_He1 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军2 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子2 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游2 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能