ITPub博客

首页 > 应用开发 > > 前端开发入门到实战:html5语义化标签

前端开发入门到实战:html5语义化标签

作者:兔子爱喝奶茶 时间:2019-07-16 09:37:07 0 删除 编辑

html5语义化标签


1.<article>

可以是页面任何独立的内容区域,比如文章/博客/新闻/故事/论坛帖子/评论等等任何独立的内容。

<article>

    <header>

        <h1>文章标题</h1>

        <p>发布时间:<time pubdate='2019-05-06'>2019-05-06</time></p>

        <p>作者:xxx</p>

    </header>

    <p>文章内容.........</p>

    <p>文章内容.........</p>

</article>


2.<section>

定义文档中的节、区段,比如章节、页眉或文章中的其他部分。比如我们对一篇文章进行分章节。

<article>

    <header>

        <h1>文章标题</h1>

        <p>发布时间:<time pubdate='2019-05-06'>2019-05-06</time></p>

        <p>作者:xxx</p>

    </header>

    <section>

        <h2>章节一的标题</h2>

        <p>文章内容.........</p>

    </section>

    <section>

        <h2>章节二的标题</h2>

        <p>文章内容.........</p>

    </section>

</article>

<section>应包含一组内容及其标题。如果内容没有标题,不推荐使用<section>。


3.<nav>

定义页面的导航区域。

<nav>

    <a href='/a'>页面a</a>

    <a href='/b'>页面b</a>

    <a href='/c'>页面c</a>

</nav>


4.<aside>

定义页面主区域内容之外的内容(比如侧边栏)


5.<header>

描述文档头部区域,用于定义内容的介绍展示,可以使用多个<header>。

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为前端工程师,乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:784783012 欢迎大家进群学习交流,共同进步。 

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。 

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有效资源还是很有必要的。


6.<footer>

描述文档底部区域,通常包含文档作者,著作权,使用条款,联系信息等,可以使用多个<footer>,文档的大致结构可以分为

下面是更细致的语义化标签,也是更容易被忽略的标签。


7.<figure>和<figcaption>

<figure>定义独立的流内容(图像、图表、照片、代码等等)。

<figcaption>定义<figure>的标题,通常置于figure元素的第一个或最后一个子元素

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69918097/viewspace-3155107/ ,如需转载,请注明出处,否则将追究法律责任。

上一篇: Redis 入门
请登录后发表评论 登录
全部评论

注册时间:2019-04-26

  • 博文量
    1470
  • 访问量
    11257