这年头 HTML 标签已经这么牛了吗!

开发 前端
在 HTML5 推出之后,很多的 HTML 标签都具备了非常牛逼的功能。有些甚至可以让我们完全脱离 JS ,通过简单的 html 就可以实现复杂的操作。

Hello,大家好,我是 Sunday。

在 HTML5 推出之后,很多的 HTML 标签都具备了非常牛逼的功能。有些甚至可以让我们完全脱离 JS ,通过简单的 html 就可以实现复杂的操作。

那么今天咱们就来看看这些牛逼的 HTML 特性!

01:在 img标签 中生成可点击区域

<map> 配合 <area> 可以直接在 img 标签中创建部分的可点击区域:

<body>
  <img src="01.jpg" usemap="#work" />
  <map name="work">
    <!-- coords:右、上、左、下 -->
    <area shape="rect" coords="25,68,220,450" href="02.jpg" />
    <area shape="rect" coords="360,68,460,200" href="03.jpg" />
    <area shape="rect" coords="360,268,460,200" href="04.jpg" />
  </map>
</body>
  • 利用 img 创建背景图,作为可点击的图形
  • 通过 usemap="#work" + <map name="work"> 标记指定的 map
  • 在 map 标签中,通过 area 确定点击位置和展示的图片。其中 coords 表示点击位置,四个数字分别对应 右、上、左、下

最终效果如下:

图片图片

02:利用 base 标签设置基准路径

在前端项目中,通过 a 标签跳转链接是比较常见的需求。

一般情况下我们的跳转通过会这么写:

<body>
  <a href="https://space.bilibili.com/478809258">跳转</a>
  <a href="https://space.bilibili.com/478809258">跳转</a>
  <a href="https://space.bilibili.com/478809258">跳转</a>
  <a href="https://space.bilibili.com/478809258">跳转</a>
  <a href="https://space.bilibili.com/478809258">跳转</a>
  <a href="https://space.bilibili.com/478809258">跳转</a>
</body>

但是当链接比较多的时候,一旦 域名地址 发生变化,修改起来就会非常麻烦。

所以,我们会期望设置一个 BASEURL,就像 axios 可以统一处理请求路径,甚至可以在 环境变量切换 时,自动处理它。

因此 <base> 标签 就显得很有用了。我们可以通过 <base> 标签 来达到类似 BASEURL 的效果

<body>
  <base href="https://space.bilibili.com" />
  <!-- 上面的 base,下面是各种跳转 -->
  <a href="/478809258">跳转</a>
  <a href="/478809258">跳转</a>
  <a href="/478809258">跳转</a>
  <a href="/478809258">跳转</a>
  <a href="/478809258">跳转</a>
  <a href="/478809258">跳转</a>
</body>

03:利用 progress 直接生成进度条

通过 progress 标签可以直接生成进度条效果:

<body>
  <label for="pp">一个进度条</label>
  <progress id="pp" value="0" max="100">10%</progress>

  <script>
    const ppElement = document.querySelector('#pp')
    const interval = setInterval(() => {
      ppElement.value += 1
      if (ppElement.value === 100) {
        clearInterval(interval)
      }
    }, 50)
  </script>
</body>

图片图片

同时也可以利用 <meter> 标签 实现不同阶段的样式渐变:

<body>
  <label for="pp">类似于充电的效果</label>
  <meter
    id="pp"
    min="0"
    max="100"
    low="33"
    high="66"
    optimum="80"
    value="0"
  ></meter>
  <script>
    const ppElement = document.querySelector('#pp')
    const interval = setInterval(() => {
      ppElement.value += 1
      if (ppElement.value === 100) {
        clearInterval(interval)
      }
    }, 50)
  </script>
</body>

图片图片

责任编辑:武晓燕 来源: 程序员Sunday
相关推荐

2019-05-07 16:02:46

硬盘SSD笔记本

2022-02-17 07:31:44

Linux程序员RPM

2018-08-24 11:54:36

电商

2018-01-26 09:01:16

对象存储Java

2018-10-23 10:58:14

SSL性价比漏洞

2017-06-07 18:27:45

大数据供销集团产业园

2021-06-22 18:50:00

机器翻译人工智能计算机

2022-06-29 10:16:25

数据库SQL

2009-07-03 11:46:43

JSP标签库

2017-03-06 07:01:56

2022-06-02 08:03:19

PyCharmPython代码

2020-10-22 07:44:03

Tomcat调优JVM

2021-05-06 08:57:44

脑机接口机器人工智能

2019-03-10 16:21:05

大数据深度学习人工智能

2020-09-07 12:31:53

量子计算技术

2023-09-11 08:00:00

代码审查开发

2022-08-16 07:45:25

宠物面部识别

2009-06-05 10:12:36

Struts标签库HTML标签

2019-12-11 14:23:50

大数据商业 价值分析

2022-11-29 15:05:16

大数据数据网格
点赞
收藏

51CTO技术栈公众号