11 個(gè)有用的 HTML 技巧
HTML（超文本標(biāo)記語(yǔ)言）是網(wǎng)頁(yè)最基礎(chǔ)的結(jié)構(gòu)，也是網(wǎng)頁(yè)的主要構(gòu)成元素。 雖然許多開(kāi)發(fā)人員都熟悉 HTML 的基礎(chǔ)知識(shí)，但還有許多鮮為人知的技巧和技術(shù)可以提高您的 HTML 編碼技能。
在本文中，我們將探討您可能不知道的 10 個(gè) HTML 技巧。
1. 使用 <base> 元素在新標(biāo)簽頁(yè)中打開(kāi)鏈接
如果您希望文檔中的所有鏈接默認(rèn)在新選項(xiàng)卡中打開(kāi)，您可以使用 <base> 元素。 在 HTML 的 <head> 部分添加以下代碼：
<base target="_blank">現(xiàn)在，無(wú)論何時(shí)單擊鏈接，除非另有說(shuō)明，否則它將在新選項(xiàng)卡中打開(kāi)。
2.使用download屬性下載文件
您可以提示用戶直接下載文件，而不是在單擊鏈接時(shí)導(dǎo)航到文件。 這可以通過(guò)將下載屬性添加到您的鏈接來(lái)實(shí)現(xiàn)。 這是一個(gè)例子：
<a href="path/to/file" download>Download</a>單擊鏈接時(shí)，文件將由用戶下載，而不是在瀏覽器中打開(kāi)。
3.直接聯(lián)系鏈接
改善您網(wǎng)站上用戶交互的一個(gè)好方法是為電子郵件、電話和 SMS 提供直接鏈接。 這可以通過(guò)在 href 屬性中使用具有特定協(xié)議的 <a> 錨標(biāo)記來(lái)實(shí)現(xiàn)。
這些協(xié)議是 mailto:、tel: 和 sms: 分別用于電子郵件、電話和 SMS。
以下是如何實(shí)現(xiàn)它的示例：
<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>當(dāng)用戶點(diǎn)擊這些鏈接時(shí)，他們的設(shè)備將打開(kāi)默認(rèn)的電子郵件客戶端、撥號(hào)器或消息應(yīng)用程序，其中包含所提供的信息。
4. 使用 rel="noopener" 增強(qiáng)安全性
使用 target="_blank" 在新選項(xiàng)卡中打開(kāi)鏈接時(shí)，新打開(kāi)的頁(yè)面可以訪問(wèn)原始頁(yè)面的 window.opener 屬性。
這可能是一個(gè)安全風(fēng)險(xiǎn)，為防止這種情況，您可以將 rel="noopener" 屬性添加到您的鏈接，如下所示：
<a target="_blank" rel="noopener">Link</a>這樣可以確保新打開(kāi)的頁(yè)面無(wú)法訪問(wèn) window.opener 屬性，從而提高安全性。
5. 輸入給定的 Datalist 元素
HTML 中的 <datalist> 元素提供了一個(gè)預(yù)定義選項(xiàng)列表，以在用戶將數(shù)據(jù)輸入到 <input> 元素時(shí)向用戶提出建議。 這對(duì)于用戶在鍵入時(shí)可以從快速建議中受益的字段尤其有用，例如搜索字段或電子郵件輸入。
下面是如何使用它：
<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>在此示例中，當(dāng)用戶開(kāi)始在輸入字段中鍵入內(nèi)容時(shí)，他們將看到與其輸入相匹配的建議選項(xiàng)。
6.計(jì)算結(jié)果的輸出元素
<output> 元素是一個(gè)容器元素，網(wǎng)站或應(yīng)用程序可以將計(jì)算結(jié)果或用戶操作的結(jié)果注入其中。 這是一個(gè)例子：
<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>在此示例中，當(dāng)用戶更改輸入字段的值時(shí)，添加的結(jié)果將顯示在輸出字段中。
7. 使用 <fieldset> 元素對(duì)控件進(jìn)行分組
使用 Web 表單時(shí)，您可以使用 <fieldset> 元素對(duì)相關(guān)控件和標(biāo)簽進(jìn)行分組。 這有助于組織和構(gòu)建表單。
這是一個(gè)例子：
<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.使用海報(bào)屬性顯示視頻縮略圖
在您的網(wǎng)頁(yè)上嵌入視頻時(shí)，您可以指定在加載視頻時(shí)或在用戶單擊播放按鈕之前顯示的縮略圖。 使用 poster 屬性定義縮略圖圖像 URL。 這是一個(gè)例子：
<video poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
</video>指定的 thumbnail.jpg 將一直顯示，直到視頻加載或開(kāi)始播放。
9. 使用 <details> 元素構(gòu)建手風(fēng)琴菜單
要在不依賴 JavaScript 的情況下創(chuàng)建手風(fēng)琴菜單，您可以使用 <details> 和 <summary> 元素。 <details> 元素充當(dāng)容器，而 <summary> 元素代表可點(diǎn)擊的標(biāo)題。 這是一個(gè)例子：
<details>
<summary>Click me</summary>
<p>Content of the accordion panel.</p>
</details>這允許用戶展開(kāi)和折疊手風(fēng)琴菜單中的內(nèi)容。
10. 使用 contenteditable 屬性執(zhí)行內(nèi)聯(lián)編輯
如果您想直接在瀏覽器中啟用內(nèi)容的內(nèi)聯(lián)編輯，您可以使用 contenteditable 屬性。 通過(guò)將 contenteditable="true" 添加到 HTML 元素，例如 <div> 或 <p>，用戶可以編輯其中的文本。 這是一個(gè)例子：
<div contenteditable="true">
This text can be edited by the user.
</div>用戶可以點(diǎn)擊文字，直接在網(wǎng)頁(yè)內(nèi)進(jìn)行修改。
11. 使用 <mark> 標(biāo)記突出顯示文本
要以視覺(jué)方式突出顯示 HTML 文檔中文本的特定部分，您可以使用 <mark> 標(biāo)記。 只需用 <mark> 標(biāo)簽包裹要突出顯示的文本。 這是一個(gè)例子：
<p>This is an example <mark>highlighted text</mark>.</p>結(jié)論
請(qǐng)繼續(xù)探索學(xué)習(xí)，保持好奇，并繼續(xù)擴(kuò)展您的 HTML 知識(shí)。
另外，本文中提供的示例已為演示目的進(jìn)行了簡(jiǎn)化。 在您自己的項(xiàng)目中實(shí)施這些技術(shù)時(shí)，始終確保正確的 HTML 語(yǔ)法并遵循最佳實(shí)踐。
