H5 语义化标签

Posted 大大大猫头鹰

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5 语义化标签相关的知识,希望对你有一定的参考价值。

语义化标签的主要是为了解决以下问题:

  • 前端代码可读性
  • 代码维护成本
  • SEO优化

html的标签可以参考以下字典:

http://www.w3school.com.cn/html5/html5_reference.asp

这里我们用一个简单的DEMO去理解这些语义化的H5标签,当然,这个DEMO中也没办法cover到所有的标签,不过对于在有限的范围内去了解语义化的作用,小编觉得已经绰绰有余了

这里的DEMO是一个微信名片,如图所示,当然这里面也增加了一些别的内容,也是为了方便的理解H5标签的语义化作用

1.首先是页面的基本布局,我们使用<header>,<footer>,<section>来对页面整体布局

这里来说一下header,footer,section的作用

header : 定义文档的页面组合,通常是一些引导和导航信息。

footer : 定义 section 或 document 的页脚

section : 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分

2.接下里我们看下header里面有什么,其实是对这个页面目的的一个简要介绍,这段介绍包括一个主标题和副标题,这里我们使用<hgroup>

<header>
    <hgroup>
        <h1>我们以微信的一个用户名片为例</h1>
        <h2>演示H5常用的语义化标签</h2>
    </hgroup>
</header>

hgroup : 用于对网页或区段的标题元素(h1-h6)进行组合

3.页面主要的内容一共有三块,包括用户的基本信息,用户的朋友圈等额外信息的缩略图,以及用户可执行的操作,在每个块上方小编也额外加入了一段简介,这里使用了<details><summary>来显示介绍信息

<details>
    <summary>基本信息</summary>
    用户的基本信息
</details>

details : 标签用于描述文档或文档某个部分的细节

summary : 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息

4.接下来再看看footer中包含什么,footer中包含小编的邮箱和页脚的版权声明,这里小编使用了<address><small>

<footer>
    <address>kameleon@126.com</address>
    <small>版权所有 © 2018-2019 猫头鹰的巢</small>
</footer>

address : 标签定义文档作者或拥有者的联系信息。

如果 <address> 元素位于 <article> 元素内部,则它表示该文章作者或拥有者的联系信息。

通常的做法是将 address 元素添加到网页的头部或底部

small : 标签将旁注 (side comments) 呈现为小型文本。

免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求。

对于由 em 元素强调过的或由 strong 元素标记为重要的文本,small 元素不会取消对文本的强调,也不会降低这些文本的重要性。

当然,H5还有包含其他的标签,比如像<picture>,<progress>,<time>,<vedio>,<audio>,<aside>,<canvas>等等,这里在小编的这个例子中可能没办法一一列举出来,看官们还是可以多多参考下文档,这些新标签的出现也是为了能够更好的方便开发者去开发前端页面,即使在脱离CSS的情况下,也能呈现一个很好的文档结构,当然也有些鸡肋的标签,不过这些都是仁者见仁,智者见智,多多使用才能够更好地拓展咱们的视野和经验!

 

最后是小编html页面整体的代码,就不放CSS了,理解下文档结构就好!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="testh5.css">
    <title>H5 Test</title>
</head>
<body>
    <header>
        <hgroup>
            <h1>我们以微信的一个用户名片为例</h1>
            <h2>演示H5常用的语义化标签</h2>
        </hgroup>
    </header>
    <details>
        <summary>基本信息</summary>
        用户的基本信息
    </details>
    <section class = "basic-info-container">
        <img src="icon.jpg" alt="" width="50px" height="50px" class = "avater">
        <ul>
            <li>
                <strong>猫头鹰的巢</strong>
            </li>
            <li>
                <span>昵称:</span>
                <span>胖啄木鸟</span>
                <i class = "sex"></i>
            </li>
            <li>
                <span>微信号:</span>
                <span>kameleonX</span>
            </li>
            <li>
                <span>地区:</span>
                <span>辽宁 大连</span>
            </li>
        </ul>
    </section>
    <details>
        <summary>展示信息</summary>
        用户的朋友圈缩略图
    </details>
    <section class = "display-info-container">
        <div class = "custom-sign">
            <span>个性签名</span>
            <p>没心没肺的活着</p>
        </div>
        <hr>
        <div class = "pengyouquan">
            <span>朋友圈</span>
            <ul>
                <li>
                    <img src="react.jpg" alt="" width="45" height="45">
                </li>
                <li>
                    <img src="angular.jpg" alt="" width="45" height="45">
                </li>
            </ul>
            <i class = "arrow"></i>
        </div>
        <hr>
        <div class = "more">
            <span>更多信息</span>
            <ul>
                <li>
                    <img src="baidu.png" alt="" width="25" height="25">
                </li>
                <li>
                    <img src="bilibili.png" alt="" width="25" height="25">
                </li>
            </ul>
            <i class = "arrow"></i>
        </div>
    </section>
    <details>
        <summary>操作按钮</summary>
        用户的可执行的操作
    </details>
    <section class = "operate-container">
        <div class = "button">
            <i class = "message"></i>发消息
        </div>
        <hr>
        <div class = "button">
            <i class = "vedio"></i>音视频通话
        </div>
    </section>
    <footer>
        <address>kameleon@126.com</address>
        <small>版权所有 © 2018-2019 猫头鹰的巢</small>
    </footer>
</body>
</html>

 

以上是关于H5 语义化标签的主要内容,如果未能解决你的问题,请参考以下文章

H5 语义化标签

H5 语义化标签

web语义化与h5新增标签

H5新增语义化标签

H5新特性之语义化标签

H5-语义化标签的使用