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

作者: 560b7bb7b879 | 来源:发表于2019-08-17 13:10 被阅读5次

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>

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

web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
<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>。

6.<footer>

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

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

7.<figure>和<figcaption>

<figure>定义独立的流内容(图像、图表、照片、代码等等)。
<figcaption>定义<figure>的标题,通常置于figure元素的第一个或最后一个子元素
前端开发入门到实战:html块级元素和行级元素的区别和认识

自己是一个6年的前端工程师,希望本文对你有帮助!

这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

点击:加入

相关文章

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

    html5语义化标签 1.

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

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

    html5语义化标签 1.

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

  • 前端人员必须要了解的三个问题

    前端发展的三个阶段:(文章底部有彩蛋) 初级阶段:(入门) html:常见标签,html5新增的,语义化标签等等 ...

  • 前端代码规范

    前端开发规范 一、HTML1.语义化标签HTML5 提供了很多语义化元素,更好地帮助描述内容。希望你能从这些丰富的...

  • HTML5标签语义化

    理解HTML5语义化:HTML5的语义化指的是用正确的标签包含正确的内容,标签语义化的好处就是结构良好,便于阅读,...

  • H5新增语义化标签

    HTML5 新增标签 什么是语义化 新增了那些语义化标签header --- 头部标签nav ...

  • HTML5详解

    01-HTML5新增语义化标签 HTML5语义化标签的兼容 HTML5新增表单控件和表单属性 HTML5表单验证反...

  • HTML5十大新特性

    1.语义化标签 对比之前HTML没有体现结构语义化的标签,如: //表头的声明 HTML5提供语义化标签,如: 等...

  • 好程序员web前端培训分享常见html5语义化标签

    好程序员web前端培训分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了...

  • web前端网站收藏

    更新于 2016-09-02 API 速查 HTML5标签 HTML5 标签的语义,帮助我们写出语义化的HTML ...

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/kntdrctx.html