你所不知道的HTML：40個不為人所知的實用技巧

  • 1918字
  • 10分鐘
  • 2024-07-31

在HTML開發中，有些非常實用的技巧但卻鮮為人知，在這篇文章中，我將分享40個大部分人都不知道的HTML技巧。這些技巧涵蓋了各種HTML標籤和屬性的使用方法，可以幫助你提高網頁開發效率和用戶體驗。

1. 創建聯絡鏈接

使用<a>標籤結合mailto:、tel:和sms:可以創建點擊即聯絡的鏈接。

1
<a href="mailto:name@example.com">發送郵件</a>
2
<a href="tel:+1234567890">撥打電話</a>
3
<a href="sms:+1234567890">發送短信</a>
發送郵件撥打電話發送短信

2. 創建下載鏈接

<a>標籤的download屬性允許用戶直接下載文件而不是打開它。

1
<a href="file.pdf" download>下載PDF</a>

3. 控制鏈接打開方式

target屬性控制鏈接的打開方式，如在新標籤頁、同一窗口或指定的框架中打開，其值有_blank, _self, _parent, _top。

1
<a href="https://example.com" target="_blank">在新標籤頁打開</a>

在新標籤頁打開

4. 創建可折疊內容

利用<details>和<summary>標籤可以創建簡單的折疊內容區域。

1
<details>
2
  <summary>點擊展開</summary>
3
  <p>這是一個可折疊的內容。</p>
4
</details>
點擊展開

這是一個可折疊的內容。

5. 使用語義化標籤

使用如<article>、<section>、<header>、<footer>等語義化標籤，可以增強代碼的可讀性和可訪問性，同時有利於SEO。

6. 使用<optgroup>改進下拉菜單

<optgroup>標籤用於在下拉菜單中分組選項，使得菜單更有條理。

1
<select>
2
  <optgroup label="水果">
3
    <option>蘋果</option>
4
    <option>香蕉</option>
5
  </optgroup>
6
  <optgroup label="蔬菜">
7
    <option>西紅柿</option>
8
    <option>胡蘿蔔</option>
9
  </optgroup>
10
</select>

7. 改善視頻展示

<video>標籤的poster屬性可以在視頻加載前顯示縮略圖。

1
<video controls poster="thumbnail.jpg">
2
  <source src="movie.mp4" type="video/mp4" />
3
</video>

8. 優化視頻加載

preload屬性可以設置視頻的預加載行為，優化加載速度。

1
<video src="movie.mp4" preload="auto">瀏覽器不支持視頻標籤。</video>

9. 支持多項選擇

使用multiple屬性可以在文件選擇和下拉菜單中支持多項選擇。

1
<input type="file" multiple />
2
<select multiple>
3
  <option value="java">Java</option>
4
  <option value="javascript">JavaScript</option>
5
</select>

10. 控制圖片加載方式

loading屬性可以設置圖片的加載方式為懶加載（lazy）或立即加載（eager）。

1
<img src="image.jpg" loading="lazy" />

11. 確保可訪問性

alt屬性為圖片提供描述，提高可訪問性和SEO。

1
<img src="image.jpg" alt="描述圖片" />

12. 使用<picture>元素實現響應式圖片

<picture>元素可以根據設備的顯示條件選擇加載不同的圖片。

1
<picture>
2
  <source media="(min-width: 650px)" srcset="img_large.jpg" />
3
  <source media="(min-width: 465px)" srcset="img_medium.jpg" />
4
  <img src="img_small.jpg" alt="描述圖片" />
5
</picture>

13. 設置最大輸入長度

maxlength屬性用於限制用戶在輸入框中輸入的最大字符數。

1
<input type="text" maxlength="4" />

14. 設置最小輸入長度

minlength屬性用於限制用戶在輸入框中輸入的最小字符數。

1
<input type="text" minlength="3" />

15. 控制拼寫檢查

spellcheck屬性用於啟用或禁用瀏覽器的拼寫檢查功能。

1
<input type="text" spellcheck="true" />

16. 接受特定文件類型

accept屬性指定文件輸入框接受的文件類型。

1
<input type="file" accept="image/png, image/jpeg" />

17. 自訂滑塊

使用<input>的type="range"可以創建滑塊輸入，允許用戶在範圍內選擇值。

1
<input type="range" min="1" max="100" value="50" />

18. 透過<form>和<fieldset>組織表單

<fieldset>標籤用於將表單元素分組，並透過<legend>定義標題。

1
<form>
2
  <fieldset>
3
    <legend>個人信息</legend>
4
    <label for="name">姓名:</label>
5
    <input type="text" id="name" name="name" />
6
  </fieldset>
7
</form>
個人信息

19. 使用<label>標籤提升表單可訪問性

<label>標籤為表單控件提供說明，使表單更易於使用。

1
<label for="username">用戶名:</label>
2
<input type="text" id="username" name="username" />

20. 使用<datalist>提供建議

<datalist>標籤為<input>提供下拉建議列表。

1
<input list="browsers" />
2
<datalist id="browsers">
3
  <option value="Chrome"></option>
4
  <option value="Firefox"></option>
5
  <option value="Safari"></option>
6
  <option value="Edge"></option>
7
  <option value="Opera"></option>
8
</datalist>

21. 允許內容編輯

contenteditable屬性使元素內容可編輯，方便用戶直接修改文本。

1
<div contenteditable="true">此內容可編輯。</div>
此內容可編輯。

22. 提供額外信息

title屬性用於在用戶懸停在元素上時顯示額外信息。

1
<p title="世界衛生組織">WHO</p>

WHO

23. 創建分隔線

使用<hr>標籤可以創建水平分隔線，用於視覺上的內容分隔。

1
<hr />

24. 顯示文本的下標和上標

<sub>和<sup>元素可以用來顯示文本的下標和上標。

1
<p>H<sub>2</sub>O</p>
2
<p>E=mc<sup>2</sup></p>

H2O

E=mc2

25. 使用<base>定義基準URL

<base>標籤用於定義所有相對URL的基準URL。

1
<head>
2
  <base href="https://example.com" target="_blank" />
3
</head>
4
<body>
5
  <a href="/page">頁面</a>
6
</body>

26. 使用<meta>標籤設置視口

<meta>標籤中的viewport設置可以優化移動設備上的網頁顯示效果。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

27. 使用<wbr>控制長單詞的換行

<wbr>標籤用於在長單詞的特定位置添加可選的換行點。

1
<p>
2
  這是一個長單詞：su<wbr />per<wbr />ca<wbr />li<wbr />fra<wbr />gi<wbr />li<wbr />sti<wbr />cex<wbr />pi<wbr />ali<wbr />do<wbr />cious。
3
</p>

28. 使用<code>和<pre>顯示代碼片段

<code>標籤用於內聯代碼，<pre>和<code>結合使用可顯示多行代碼片段並保持格式。

1
<pre><code>
2
function helloWorld() {
3
  console.log("Hello, World!");
4
}
5
</code></pre>

29. 使用<bdi>確保文本方向正確

<bdi>（雙向隔離）標籤確保文本的方向不會影響周圍的內容，常用於混合語言的情況。

1
<p>用戶名：<bdi>username123</bdi></p>

用戶名：username123

30. 使用<noscript>為不支持JavaScript的用戶提供信息

1
<noscript>你的瀏覽器不支持JavaScript，部分功能可能無法正常使用。</noscript>

<noscript>標籤用於提供在禁用JavaScript時顯示的內容。

31. 使用<b>和<strong>加粗文本

<b>和<strong>用於加粗文本，其中<strong>表示強調。

1
<p><b>粗體</b>文本</p>
2
<p><strong>重要</strong>文本</p>

粗體文本

重要文本

32. 使用<i>和<em>表示斜體和強調

<i>和<em>用於表示斜體和強調，其中<em>表示強調。

1
<p><i>斜體</i>文本</p>
2
<p><em>強調</em>文本</p>

斜體文本

強調文本

33. 使用<kbd>表示用戶輸入

<kbd>標籤用於表示用戶輸入。

1
<p>請按下<kbd>Ctrl</kbd> + <kbd>C</kbd>複製文本。</p>

請按下Ctrl + C複製文本。

34. 使用<time>表示特定時間或日期

<time>標籤用於表示特定的時間或日期。

1
<p>會議將於<time datetime="2024-07-19">2024年7月19日</time>舉行。</p>

會議將於舉行。

35. 利用<cite>引用作品標題

<cite>標籤用於引用作品的標題。

1
<p>我最喜歡的小說是<cite>《百年孤獨》</cite>。</p>

我最喜歡的小說是《百年孤獨》。

36. 使用<meter>表示已知範圍內的標量測量

<meter>標籤用於表示已知範圍內的標量測量，比如評分。

1
<meter value="2" min="0" max="10">2 out of 10</meter>

2 out of 10

37. 使用<progress>顯示任務進度

<progress>標籤用於顯示任務的完成進度。

1
<progress value="70" max="100">70%</progress>

70%

38. 利用<abbr>標籤顯示縮寫的全稱

使用<abbr>標籤可以為縮寫添加全稱的解釋，當用戶懸停在縮寫上時會顯示提示。

1
<p><abbr title="Hypertext Markup Language">HTML</abbr> 是一種標記語言。</p>

HTML 是一種標記語言。

39. <mark>標籤突出顯示文本

<mark>標籤用於突出顯示文本。

1
<p>這是一個<mark>重要</mark>的提示。</p>

這是一個重要的提示。

40. 使用<dialog>標籤打開一個彈框

參考這篇文章：如何使用HTML5新標籤<dialog>

總結

本文分享了40個HTML實用技巧，透過掌握這些HTML技巧，你可以顯著提高網頁開發效率，提升用戶體驗。這些技巧涵蓋了從基本標籤的使用到高級功能的應用，希望這些內容對你有所幫助！