鮮爲人知的 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