鲜为人知的 HTML 技巧

什么是 HTML？

超文本标记语言 (HTML) 是设计用于在 Web 浏览器中显示的文档的标准标记语言。它能够借助级联样式表 (CSS) 等技术和 JavaScript 等脚本语言来打辅助。javascript

1. `loading=lazy` 属性

性能优化。您能够使用该loading=lazy属性来推迟图像的加载，直到用户滚动到它们为止。html

<img src='image.jpg' loading='lazy' alt='Alternative Text'>           
复制代码

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

<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. 有序列表`start`属性。

使用该start属性更改有序列表的起点。java

<ol start="11">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Python</li>
    <li>Go</li>
</ol>
复制代码

4. `meter` 元素

您能够使用该<meter>元素来显示数量。不须要 JavaScript/CSS。python

<label for="value1">Low</label>
<meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>

<label for="value2">Medium</label>
<meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>

<label for="value3">High</label>
<meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="80"></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. 字段集元素

您能够使用该<fieldset>元素对<label>Web 表单中的多个控件和标签 ( )进行分组。web

<form>
    <fieldset>
        <legend>Choose your favorite language</legend>

        <input type="radio" id="javascript" name="language">
        <label for="javascript">JavaScript</label><br/>

        <input type="radio" id="python" name="language">
        <label for="python">Python</label><br/>

        <input type="radio" id="java" name="language">
        <label for="java">Java</label>
    </fieldset>
</form>
复制代码

7. Window.opener

打开target="_blank"的页面容许新页面访问原始页面window.opener。这可能会对安全和性能产生影响。包括rel="noopener"或rel="noreferrer"能够防止这种状况发生。浏览器

<a href="https://markodenic.com/" target="_blank" rel="noopener">
    Marko's website
</a>           
复制代码

8. 基本元素

若是要在新选项卡中打开文档中的全部连接，能够使用<base>element：缓存

<head>
    <base target="_blank">
</head>
<!-- This link will open in a new tab. -->
<div class="wrapper">
    This link will be opened in a new tab: &nbsp;
    <a href="https://freecodetools.org/">
        Free Code Tools
    </a>

    <p>
        Read more: <br>
        <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">
            MDN Documentation
        </a>
    </p>
</div>
复制代码

9. Favicon 缓存破坏

想要刷新您网站的图标，您能够经过添加?v=2到文件名来强制浏览器下载新版本。安全

这在生产中特别有用，能够确保用户得到新版本。性能优化

<link rel="icon" href="/favicon.ico?v=2" />           
    
复制代码

10.`拼写检查`属性

使用该spellcheck属性来定义是否检查元素的拼写错误。markdown

<label for="input1">spellcheck="true"</label>
<input type="text" id="input1" spellcheck="true">

<label for="input2">spellcheck="false"</label>
<input type="text" id="input2" spellcheck="false">
复制代码

11. 原生 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">
复制代码

12. HTML 手风琴

您能够使用该details元素来建立 HTML 手风琴。

<div class="wrapper">
    <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>
</div>
复制代码

13.`mark`标签

您能够使用<mark>标签来突显文本。

14.`download`属性

您能够使用download连接中的属性来下载文件，而不是导航到该文件。

<a href='path/to/file' download>
    Download
</a>           
复制代码

15. 性能提示

使用.webp图像格式缩小图像并提升网站的性能。

<picture>
    <!-- load .webp image if supported -->
    <source srcset="logo.webp" type="image/webp">
  
    <!-- Fallback if `.webp` images or <picture> tag not supported by the browser. -->
    <img src="logo.png" alt="logo">
</picture>           
    
复制代码

16.视频缩略图

使用该poster属性指定在视频下载时或在用户点击播放按钮以前显示的图像。

<video poster="path/to/image">           
复制代码

17.输入 `type="search"`

将type="search"用于您的搜索输入，您将白嫖“清除”按钮。

<form>
    <label for="text">Input Type Text</label>
    <input type="text" id="text" name="text">
    
    <label for="search">Input Type Search</label>
    <input type="search" id="search" name="search">
</form>           
复制代码

参考文章

HTML Tips