html5中有哪些语义化标签

发布时间:2021-05-06 15:45:22 作者:Leah
来源:亿速云 阅读:208

这篇文章给大家介绍html5中有哪些语义化标签,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

HTML语义化:

每个HTML标签都有自己特定含义(语义),语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解

看过一个比较形象的例子:

盖一栋房子的时候,有的地方该用砖头,有的部分该用瓷片,还有的地方得用水泥糊上,这样盖出来房子才会结实,整洁和美观。

如果硬是要瓷片替代砖头,房子勉强也能盖起来,但是这样的房子不牢固,容易倒塌,外观也不好看。

同样,生活很多事物都有相似相同之处!该用什么标签表示就用什么标签表示,结构良好,更易人和搜索引擎理解。还有一点,就是便于开发和维护啊,看过好多网页结构,各种想吐槽好吗?各种混乱不堪,外观表现的任务交由css去实现就行啦,不要为了外观表现而布局!

语义化的意义与作用

语义化都注意什么?

HTML5语义化标签:

1.header:标签定义“网页”或“section”的页眉。

通常包含h2-h7元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo

<header>
     <h2>毕业生实习</h2>
     <span>2016/08/05</span>
</header>
<!--之前使用的是无语义的div+class-->
<div class='header'>...</div>

<header>
    <hgroup>
        <h2>网站标题</h2>
        <h3>网站副标题</h3>
    </hgroup>
</header>

用法:


2.nav:定义导航链接的部分。

<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">xxx</a></li>
        <li><a href="#">xxx</a></li>
        <li><a href="#">xxx</a></li>
    </ul>
</nav>
<!--之前使用的是无语义的div+class-->
<div class='nav'>...</div>

用法:

注意:例如,在页脚中通过会有一组链接,包括服务条款,首页,版权声明等,使用footer元素是最恰当的。

具体用途:传统导航条、侧边栏导航、业内导航、翻页操作等


3.footer标签:代表“网页”或“section”的页脚。

通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。

如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。

<footer>
  作者:xxxx <br />
 Copyright © xxx.All rights reserved.
</footer>
<!--之前使用的是无语义的div+class-->
<div class='footer'>...</div>

用法:


4. hgroup元素:“网页”或“section”的标题

当元素有多个层级时,该元素可以将h2到h7元素放在其内,譬如文章的主标题和副标题的组合

<hgroup>
    <h2>主标题</h2>
    <h3>HTML 5</h3>
</hgroup>

用法:


5.section标签:定义文档中含有标题和段落的区域。(强调分段或分块)

<section>
  <h2>section要包含标题</h2>
  <p>section要包含内容...</p>
</section>

用法:


6.article:代表独立、完整、可独自被外部引用的内容(博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容);(强调的是独立性!可含有完整的标题、内容、脚注)

<article>
   <header>
     <h2>标题处</h2>
   </header>
   <p>内容描述</p>
   <footer>脚部声明标注</footer>
</article>

用法:定义一个独立完整的内容部分(可包含标题,内容,脚注)时使用!

article、section间的相互嵌套关系:

7. aside标签:表示当前页面或文章的附属信息部分,可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。

1.用于article标签之内,此时表示的是该独立内容的附属信息部分

<article>
        <p>article内容区</p>
        <aside>
            <span>附属信息1</span>
            <span>附属信息2</span>
            <span>附属信息3</span>
        </aside>
    </article>

2.用于article标签之外,此时作为页面或站点全局的附属信息部分

    <aside>
        <h2>附属信息标题</h2>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
    </aside>

用法:

(一句话概括:不同的位置表示为对应区域的附属信息!


8. figure标签:规定独立的流内容(图像、图表、照片、代码等等)。

figcaption标签:用于元素定义figure的标题。

1.一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置。

2.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。

    <figure>
        <figcaption>figure的标题</figcaption>
        <img src="pic.jpg" alt="...">
    </figure>

9. time标签:定义时间或日期

<p>定义时间...<time>9:00</time></p>

<p>结合datetime属性定义日期...<time datetime="2016-08-08">时间</time></p>



10. address标签:代表区块容器,必须是作为联系信息出现,邮编地址、邮件地址等等,一般出现在footer。

表示文档文章作者/拥有者的联系信息,在body标签中表示文档的作者的联系信息;在article标签中表示文章作者的联系信息;

用法:


关于html5中有哪些语义化标签就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. HTML5中有哪些标签
  2. html5中语义化标签有什么用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5

上一篇:HTML中怎么设置图片位置

下一篇:html5有哪些开发工具

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》