Yukun的blog

2021年，HTML的新东西

HTML的新东西

2021年了 HTML 大家都知道，有些冷门的小技巧你可能还不知道。本文介绍几个有趣的HTML Tips，看看这些你都用起来了吗？

1. loading="lazy" 属性

使用 loading="lazy" 属性，效果跟你想象的一样，就是滚动到这里的时候再加载图像。

<img src='image.jpg' loading='lazy' alt='延迟加载的图像'>

2. 电子邮件、电话和短信链接

你可能知道电话链接 tel:，邮件链接 mailto:，那你知不知道还有短信链接 sms:？

<a href="mailto:{email}?subject={subject}&body={content}">
  Send us an email
</a>

<a href="tel:{phone}">
  Call us
</a>

<!-- 点击后直接调出发短信界面 -->
<a href="sms:{phone}?body={content}">
  Send us a message
</a>

3. 有序列表的起点

有序列表，也可以不从1开始计数

<ol start="11">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Python</li>
    <li>Go</li>
</ol>

有序列表的起点

4. meter 元素

不用样式不用JS就可以展示进度条

<meter  
    min="0" max="100" 
    low="30" high="75" optimum="80" 
    value="25"></meter>

meter 元素

meter 样式演示
meter 文档

5. HTML 本地搜索建议

直接看代码

<div class="wrapper">
  <h1>
    Native HTML Search
  </h1>

  <input list="items">

  <datalist id="items">
    <option value="Marko Denic">
    <option value="FreeCodeCamp">
    <option value="FreeCodeTools">
    <option value="Web Development">
    <option value="Web Developer">
  </datalist>
</div>

看样式
搜索建议

搜索建议

6. 输入框 type="search"

input type="search" 可以给输入框加一个清除按钮

<input type="search" />

type="search"

输入框 type=’search’

7. 原生 HTML 滑块

直接使用 <input type="range"> 来创建滑块。

<label for="volume">Volume: </label>
<input type="range" id="volume" name="volume" min="0" max="20">

<label for="result">Your choice: </label>
<input type="number" id="result" name="result">

const volume = document.getElementById('volume');
const result = document.getElementById('result');
result.value = volume.value;

volume.addEventListener('change', () => {
  result.value = volume.value;
});

HTML 滑块

原生 HTML 滑块

8. 原生折叠效果

用 details 元素创建手风琴折叠效果

<details>
    <summary>
      Click me to see more details
    </summary>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.
    </p>
  </details>

原生折叠效果

原生折叠效果

9. 用 mark 标签高亮

Mark 一下重点

You can use the  tag to <mark>highlight</mark> text.

mark 标签

mark 标签

10. 有点危险的 Window.opener

大家都知道用 target = “ _ blank”打开的页面，新页面可以通过 window.opener 访问原始页面的。这可能会对安全性和性能产生影响。给链接加上 rel = "noopener" 或者 rel ="noreferer" 来防止这种情况。

很多网站的中间跳转页，是不是就没有安全方面的理由了？

<a href="https://markodenic.com/" target="_blank" rel="noopener">
    Other website
</a>

以上是整理自这篇原文的10个HTML技巧，有些可能你已经知道了。或许还有更多不常见但是很好用的 HTML tips，欢迎留言告诉我。

引用链接

[1] meter 样式演示: https://codepen.io/denic/pen/MWbJRXe
[2] meter 文档: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter
[3] 搜索建议: https://codepen.io/denic/pen/WNQbvbo
[4] 输入框 type=]search’: https://codepen.io/yukun/pen/Rwpmjdw
[5] 原生 HTML 滑块: https://codepen.io/denic/pen/bGBrLRz
[6] 原生折叠效果: https://codepen.io/denic/pen/PozobRO
[7] mark 标签: https://codepen.io/yukun/pen/bGqyYeN
[8] 原文: https://markodenic.com/html-tips/

Yukun

,