HTML5元素

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

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

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

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

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

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

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

HTML5<header>元素

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

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

HTML5<footer>元素

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

<footer>
        <p>作者</p>
        <p>条款 <a href="www.san.com">www.san.com</a></p>
</footer>

HTML5<nav>元素

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

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

<aside>
        <h4>标题</h4>
        <p>这是一部分内容</p>
</aside>

HTML5<figure><figcaption>元素

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

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

<figure>
        <img src="pic_jpg" alt="The Pulpit Rock" width="333" height="222">
        <figcaption>Fig1. - The Pulpit Rock,Norway.</figcaption>
    </figure>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

倒霉男孩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值