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 语义化标签的主要内容,如果未能解决你的问题,请参考以下文章