小白成长路之H5语义化标签

最新推荐文章于 2024-04-22 05:07:53 发布

钰清颂

最新推荐文章于 2024-04-22 05:07:53 发布

阅读量135

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_46260607/article/details/104575296

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

H5新特性之语义化标签

在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。

语义化标签

section元素

类似于div,section 更偏向划分区域，具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。如果只是为了添加样式，请用div！

header元素

表示页面中一个内容区块或整个页面的标题，整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素

footer元素

表示页面中一个内容区块或整个页面的脚注，可以是“网页”或任意“section”的底部部分；没有个数限制，除了包裹的内容不一样，其他跟header类似。

nav元素

表示页面中导航链接部分，用于定义页面的主要导航部分。

 <nav>
    <ul>
        <li>首页</li>
        <li>关于我们</li>
        <li>联系我们</li>
    </ul>
</nav>

main元素

表示页面中的主要的内容(ie不兼容)，一个页面只能使用一次。如果是web应用，则包围其主要功能

article元素

表示一块与上下文无关的独立的内容，完整的的内容区块，更偏向于内容的展示。所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用article元素。article可以互相嵌套。

aside元素

在article之外的，与article内容相关的辅助信息。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

hgroup

标题的一个分组

mark

定义高亮显示的文本(span)

time

可以带格式的时间标签

dialog

标记定义一个对话框(会话框)类似微信

embed

标记定义外部的可交互的内容或插件比如flash

figure元素

表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

最后我们就来应用一下

结构代码演示

<body>
    <div class="box">
        <header>Header</header>
        <section>
            <nav>
                <h2>nav</h2>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </nav>
            <main>
                <article>
                    <header>Article header</header>
                    <p>内容内容内容内容...内容内容内容容内容内容内容内容内容内容</p>
                    <footer>Article footer</footer>
                </article>
                <article>
                    <header>Article header</header>
                    <p>内容内容内容内容内容内容内容容内容内容内容内容内容...内容内容内容内容内容</p>
                    <footer>Article footer</footer>
                </article>
            </main>
            <aside>Asder
                <p>内容内内容内容内容内容...容内容内容内容</p>
            </aside>
        </section>
        <footer>footer</footer>
    </div>
</body>

样式代码演示

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1000px;
            height: 600px;
            margin: 0 auto;
            border: 5px solid gray;
        }
        header{
            height: 80px;
            background: orange;
            font-size: 34px;
            line-height: 80px;
            text-align: center;
            font-weight: bolder;
            color: #fff;
        }
        section{
            height: 480px;
            background: #ccc;
        }
        nav{
            width: 200px;
            height: 480px;
            background: grey;
            float: left;
        }
        nav h2{
            font-size: 24px;
            color: white;
            text-align: center;
        }
        nav li{
            padding-top: 20px;
            border-bottom: 3px solid white;
            list-style: none;
        }
        main{
            width: 600px;
            height: 480px;
            background: white;
            float: left;
        }
        article{
            padding: 20px;
            margin: 10px;

        }
        article header{
            height: 40px;
            background: orange;
            font-size: 24px;
            line-height: 40px;
            text-align: center;
            color: white;
        }
        article footer{
            height: 40px;
            background: orange;
            font-size: 24px;
            line-height: 40px;
            text-align: center;
            color: white;
        }
        aside{
            font-size: 24px;
            color: white;
            width: 200px;
            height: 480px;
            background: grey;
            text-align: center;
            float: left;
        }
        aside p{
            font-size: 18px;
            color: white;
            text-align: center;
            margin-top: 20px;
        }
        footer{
            height: 40px;
            background: orange;
            text-align: center;
            color: white;
            font-size: 24px;
            line-height: 40px;
            font-weight: bolder;
        }
    </style>