HTML5语义化标签

nayeon
148 阅读4分钟

什么是HTML5语义化标签

定义：语义化标签是表示一些特定区域的标签，旨在让标签有自己的含义

<p>一个段落</p>
<span>一行文字</span>

如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签则没有独特的含义

为什么需要语义化标签结构

  1. 代码结构更加清晰，方便与他人进行协作开发，也具有更高的可读性，降低维护的难度
  2. 对于某些特殊的设备，如：屏幕阅读器、盲人阅读器、移动设备等等来解析会以语义的方式进行渲染网页
  3. 有利于搜索引擎优化（SEO），比如浏览器搜索的时候，就可以根据header标签的内容来判断与要查找的内容的相关性，以此来决定信息的排列
  4. 可以使页面引用的css文件未加载出来时，页面仍然可以保持一定的结构样式，不至于过于混乱

因此我觉得在写页面结构时，应尽量使用有语义的HTML标签，养成良好习惯（叉腰）

常见的语义化标签

  • header元素

定义：用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等

注意：

  1. 一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素
  2. 倘若header元素非必要，仅仅h1~h6和hgroup就可以完成功能，就没必要强行使用header标签了
  3. 在HTML5中，一个header元素至少可以包含一个heading元素（h1-h6），也可以包括hgroup元素，还可以包括其他的元素，在新的W3C HTML5标准，我们还可以把NAV元素包括进去

  • footer元素

定义：表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息

注意：我们在html5开发使用footer标签时，把当作普通div标签对待即可，只不过一般用于网站底部布局。一般情况下一篇网页只有一个底部区，所以使用最好只使用一次footer即可

  • nav元素

定义：表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引

并不是要求将所有的链接都要存放在nav中，将主要的链接存放进来就可以了

  • hgroup元素

定义：<hgroup>  HTML 元素代表文档标题和与标题相关联的内容，它将一个 <h1>–<h6> 元素与一个或多个 <p> 元素组合在一起

当连续使用多个标题元素的时候，再使用这个元素

  • aside元素

定义：表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框

  • article元素

定义：表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目

相对独立的情况下用article，与外部其他元素有关联用section，没有语义的话用div

  • section元素

定义：表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题

该元素用来划分网页，但是不能用它进行布局，这是W3C推荐的要求。布局推荐使用<div>关于布局尽量用class,如果根后台相关可以用id

  • 其他元素

详情见：什么是HTML语义化标签？常见HTML语义化标签大全_易刺猬的博客-CSDN博客

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        header{

        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <header>
        <!-- 头部标题 -->
        <h1>HTML5时代</h1>
        <!-- 头部标题end -->

        <!-- 导航 -->
        <nav>
            <ul>
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">活动</a>
                </li>
                <li>
                    <a href="#">话题</a>
                </li>
                <li>
                    <a href="#">社区·</a>
                </li>
            </ul>
        </nav>
        <!-- 导航end -->

    </header>
    <!-- 头部end -->

    <!-- 部分片段section -->
    <!-- 介绍 -->
    <section id="idea">
        <div>
            <h2>HTML5时代</h2>
            <p>通过我们的 HTML 编辑器，您能够编辑 HTML，然后点击按钮来查看结果。</p>
        </div>
    </section>
    <!-- 介绍end -->
    <!-- 活动幻灯片 -->
    <section id="activity">
        <!-- 活动上部 -->
        <div class="up">
            <!-- 活动区域日历控件 class命名为左侧 -->
            <div id="calendar" class="left_part"></div>
            <!-- 活动区域日历控件end class命名为左侧 -->
            <!-- 右侧 信息info -->
            <div id="info" class="right_part">
                <!-- 公告bulletin -->
                <div id="bulletin">
                    <!-- 公告标题 -->
                    <h3>公告栏</h3>
                    <!-- 公告标题 end -->
                    <p>输入替换内容后，替换所有匹配关键字。(NOTE: 注意此时如果鼠标焦点在编辑窗口中</p>
                </div>
                <!-- 公告bulletin end -->
            </div>
            <!-- 右侧 信息info end -->
        </div>
        <!-- 活动上部end -->

        <!-- 活动下部 -->
        <div class="dowm">
            <h3>发现活动</h3>
            <!-- 活动区域轮播图控件 -->
            <div id="act_slides"></div>
            <!-- 活动区域轮播图控件end -->
        </div>
        <!-- 活动下部end -->
    </section>
    <!-- 活动幻灯片end -->

    <!-- 正文部分 -->
    <section id="post">
        <h3>社区文章</h3>
        <!-- 左侧 -->
        <article id="posts">
            <applet class="item">
                <figure>![](http://upload-images.jianshu.io/upload_images/3877962-9b88174b25a2a31c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</figure>
                <div class="header">
                    <h4>
                        <a href="#" title="常用表达式">常用表达式</a>
                        <span>作者:黄继鹏<time>2017-10-12 19:05</time></span>
                    </h4>
                </div>
                <div class="body"></div>
                <div class="footer"></div>
            </applet>
        </article>
        <!-- 左侧end -->

        <!-- 右侧 -->
        <article id="others"></article>
        <!-- 右侧end -->
    </section>
    <!-- 正文部分end -->

    <!-- 部分片段section end -->

    <!-- 页脚 -->
        <footer>
            <ul></ul>
            <address></address>
        </footer>
    <!-- 页脚end -->
</body>
</html>
avatar
文章
阅读
粉丝