你不知道的HTML5语义化标签

2,764 阅读4分钟

大家好,我是辉夜真是太可爱啦。HTML5中,有一个特点就是语义化标签,相信大多数人和我一样,虽然在工作中也有自己学习和一个成长的习惯,但更多地,会把自己的注意力往 Javascript , css3ES6Vue3.0 等方向发展,还包括已经热了有一段时间的 Typescript , 往往,很少有人会将关注点放于 HTML5 了。

前言

毕竟,大家可能都已经搬砖搬地麻木了,觉得 div + css 可以走遍整个项目,殊不知,这种页面结构是相对而言比较差劲的,不利于 SEO 以及代码阅读,性能优化等。写好正确的标签,也同样能让你的项目大放光彩。

当然,如果很强烈考虑兼容 IE 的话,那么本章节应不太适合学习。

定义

正确的标签做正确的事情

好处

一般既然学习,首先要明白它的好处,这样子才会学的有意义,它的好处主要有以下三点:

  • html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的

  • 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重,利于 SEO;

  • 使阅读源代码的人对网站更容易将网站分块,便于团队开发以及维护

常用 HTML5 纯语义化标签

指其实并没有实质性的作用,主要是纯语义化标签,用来标记当前内容块主要是写什么内容。

<article>

<article> 标签,顾名思义,用来定义文章的部分。

使用环境:

  • 论坛帖子
  • 博客文章
  • 新闻故事
  • 评论

<aside>

<aside> 标签用来表示跟当前页面的内容没有很相关的部分,通常用于显示侧边栏或者补充的内容。

使用环境:

  • 目录
  • 索引

<address>

<address> 标签用于表示提供住址或者联系方式等个人或者组织信息。

使用环境:

  • 收货地址
  • 版权信息
  • 联系我们

<header>

<header> 标签表示网页的头部信息。

使用环境:

包裹顶部导航栏。

<footer>

<footer> 标签表示章节内容或者是根节点元素中的页脚。

使用环境:

包裹网页底部版权信息栏。

<hgroup>

<hgroup> 标签主要是将 <h1><h6> 之间的子元素组装到一起,所以称之为 <hgroup>

使用环境:

文档章节所属的多级别目录。

<nav>

<nav> 标签一般表示此部分是导航栏

使用环境:

导航栏

<section>

<section> 标签表示一个包含在HTML文档中的独立部分,它没有更具体的语义元素来表示。

使用环境:

一个没有更具体语义元素来表示的独立部分,使用它。

<label>

<label> 标签用于为 <input> 元素做标题绑定。

使用案例:

<label for="name">姓名</label> 
<input type="text" name="name" id="name" />

<caption>

<caption> 标签用于定义表格的标题。

使用环境:

表格。

常用 HTML5 语义化标签

指拥有语义化作用的同时,拥有它自己独特的作用,例如拥有独特的样式或者功能。

<noscript>

<noscript> 标签表示当前浏览器或者其他环境中,如不支持Javascript的话,显示的替代内容。

使用环境:

基本都用,也算一个兼容性配置了。

使用方案:

<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

<base>

<base> 标签规定页面上所有链接的默认 URL 和默认目标,不同的是,它有点类似于 <meta> 标签,是写于 <head> 文档头部中的。

使用案例:

<base href="https://www.cooldream.fun/home" target="_blank">

<del> & <ins>

<del> 标签主要是 delete 的意思,即删除部分。

<ins> 标签主要是 insert 的意思,即插入部分,是对删除部分的补充,同时,它还有两个属性

  • cite

    cite 属性的值指向一个文档的 URL,该文档解释了文本被插入或修改的原因。(目前该属性还没有被主流浏览器支持)

  • datetime

    该特性指示的此修改发生的时间和日期,并且该特性的值必须是一个有效的日期或者时间字符串

所以,两个标签一般来讲是配对使用,当然,也可以单独使用。

使用环境:

文档更新迭代,或者活动价等位置。

使用案例

<del>
  <p>“v2.6.10”</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
  <p>“v3.0.0”</p>
</ins>

效果如图所示:

image.png

<figure> & <figcaption>

<figure> 标签表示一段独立的内容,经常与说明 <figcaption> 进行配合使用

使用环境:

  • 需要有文字说明的图像,表格,代码段等

使用案例:

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

效果如图所示:

image.png

<summary> & <detail>

<detail> 标签可创建一个挂件,仅在被切换成展开状态时,它才会显示内含的信息。

<summary> 标签一般和 <detail> 标签配合使用,用作 一个 <details> 元素的一个内容的摘要,标题或图例。

使用环境:

脑经急转弯,面试题,或者个人博客的技术详解中。

使用案例:

<details>
  <summary>猜猜我几岁</summary>
  <p>少年永远18岁</p>
</details>

效果如图所示:

detail.gif

<sub> & <sup>

<sub> 表示下标

<sup> 表示上标

使用环境:

<sup> 一般用于平方数,立方数等。

<progress>

<progress> 标签表示进度条。它有一个 max 属性来设置进度条的最大值,以及一个 value 属性表示当前值。

使用案例:

<progress id="file" max="100" value="70"> 70% </progress>

效果如下图所示:

image.png