11 個有用的 HTML 技巧
HTML（超文本標記語言）是網頁最基礎的結構，也是網頁的主要構成元素。 雖然許多開發人員都熟悉 HTML 的基礎知識，但還有許多鮮為人知的技巧和技術可以提高您的 HTML 編碼技能。
在本文中，我們將探討您可能不知道的 10 個 HTML 技巧。
1. 使用 <base> 元素在新標簽頁中打開鏈接
如果您希望文檔中的所有鏈接默認在新選項卡中打開，您可以使用 <base> 元素。 在 HTML 的 <head> 部分添加以下代碼：
<base target="_blank">現在，無論何時單擊鏈接，除非另有說明，否則它將在新選項卡中打開。
2.使用download屬性下載文件
您可以提示用戶直接下載文件，而不是在單擊鏈接時導航到文件。 這可以通過將下載屬性添加到您的鏈接來實現。 這是一個例子：
<a href="path/to/file" download>Download</a>單擊鏈接時，文件將由用戶下載，而不是在瀏覽器中打開。
3.直接聯系鏈接
改善您網站上用戶交互的一個好方法是為電子郵件、電話和 SMS 提供直接鏈接。 這可以通過在 href 屬性中使用具有特定協議的 <a> 錨標記來實現。
這些協議是 mailto:、tel: 和 sms: 分別用于電子郵件、電話和 SMS。
以下是如何實現它的示例：
<a href="mailto:example@email.com?subject=Hello&body=Nice to meet you">
Send an email
</a>
<a href="tel:+123456789">
Make a call
</a>
<a href="sms:+123456789?body=Hello">
Send a text
</a>當用戶點擊這些鏈接時，他們的設備將打開默認的電子郵件客戶端、撥號器或消息應用程序，其中包含所提供的信息。
4. 使用 rel="noopener" 增強安全性
使用 target="_blank" 在新選項卡中打開鏈接時，新打開的頁面可以訪問原始頁面的 window.opener 屬性。
這可能是一個安全風險，為防止這種情況，您可以將 rel="noopener" 屬性添加到您的鏈接，如下所示：
<a target="_blank" rel="noopener">Link</a>這樣可以確保新打開的頁面無法訪問 window.opener 屬性，從而提高安全性。
5. 輸入給定的 Datalist 元素
HTML 中的 <datalist> 元素提供了一個預定義選項列表，以在用戶將數據輸入到 <input> 元素時向用戶提出建議。 這對于用戶在鍵入時可以從快速建議中受益的字段尤其有用，例如搜索字段或電子郵件輸入。
下面是如何使用它：
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="Internet Explorer">
</datalist>在此示例中，當用戶開始在輸入字段中鍵入內容時，他們將看到與其輸入相匹配的建議選項。
6.計算結果的輸出元素
<output> 元素是一個容器元素，網站或應用程序可以將計算結果或用戶操作的結果注入其中。 這是一個例子：
<form oninput="result.value=Number(a.value)+Number(b.value)">
<input type="range" id="a" value="50" /> +
<input type="number" id="b" value="25" /> =
<output name="result" for="a b">75</output>
</form>在此示例中，當用戶更改輸入字段的值時，添加的結果將顯示在輸出字段中。
7. 使用 <fieldset> 元素對控件進行分組
使用 Web 表單時，您可以使用 <fieldset> 元素對相關控件和標簽進行分組。 這有助于組織和構建表單。
這是一個例子：
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
</fieldset>
</form>8.使用海報屬性顯示視頻縮略圖
在您的網頁上嵌入視頻時，您可以指定在加載視頻時或在用戶單擊播放按鈕之前顯示的縮略圖。 使用 poster 屬性定義縮略圖圖像 URL。 這是一個例子：
<video poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
</video>指定的 thumbnail.jpg 將一直顯示，直到視頻加載或開始播放。
9. 使用 <details> 元素構建手風琴菜單
要在不依賴 JavaScript 的情況下創建手風琴菜單，您可以使用 <details> 和 <summary> 元素。 <details> 元素充當容器，而 <summary> 元素代表可點擊的標題。 這是一個例子：
<details>
<summary>Click me</summary>
<p>Content of the accordion panel.</p>
</details>這允許用戶展開和折疊手風琴菜單中的內容。
10. 使用 contenteditable 屬性執行內聯編輯
如果您想直接在瀏覽器中啟用內容的內聯編輯，您可以使用 contenteditable 屬性。 通過將 contenteditable="true" 添加到 HTML 元素，例如 <div> 或 <p>，用戶可以編輯其中的文本。 這是一個例子：
<div contenteditable="true">
This text can be edited by the user.
</div>用戶可以點擊文字，直接在網頁內進行修改。
11. 使用 <mark> 標記突出顯示文本
要以視覺方式突出顯示 HTML 文檔中文本的特定部分，您可以使用 <mark> 標記。 只需用 <mark> 標簽包裹要突出顯示的文本。 這是一個例子：
<p>This is an example <mark>highlighted text</mark>.</p>結論
請繼續探索學習，保持好奇，并繼續擴展您的 HTML 知識。
另外，本文中提供的示例已為演示目的進行了簡化。 在您自己的項目中實施這些技術時，始終確保正確的 HTML 語法并遵循最佳實踐。
