400 186 1886
本文翻譯自 21 HTML Tips You Must Know About，作者：Shefali， 略有刪改。
在這篇文章中，我將分享21個(gè)HTML技巧和代碼片段，可以提高你的編碼技能。
鏈接聯(lián)系人
使用HTML創(chuàng)建可點(diǎn)擊的電子郵件、電話(huà)和短信鏈接：
html
代碼解讀
復(fù)制代碼<!-- Email link -->
<a href="mailto:name@example.com"> Send Email </a>
<!-- Phone call link -->
<a href="tel:+1234567890"> Call Us </a>
<!-- SMS link -->
<a href="sms:+1234567890"> Send SMS </a>
創(chuàng)建可折疊內(nèi)容
如果您想在網(wǎng)頁(yè)上包含可折疊內(nèi)容，可以使用<details>和<summary>標(biāo)簽。
<details>標(biāo)簽為隱藏內(nèi)容創(chuàng)建了一個(gè)容器，而<summary>標(biāo)簽提供了一個(gè)可點(diǎn)擊的標(biāo)簽來(lái)切換該內(nèi)容的可見(jiàn)性。
html
代碼解讀
復(fù)制代碼<details>
<summary>Click to expand</summary>
<p>This content can be expanded or collapsed.</p>
</details>
使用語(yǔ)義化元素
為您的網(wǎng)站選擇語(yǔ)義元素而不是非語(yǔ)義元素。使您的代碼更有意義，并改善結(jié)構(gòu)，可訪(fǎng)問(wèn)性和SEO。
表單元素
使用<fieldset>標(biāo)簽將表單中的相關(guān)元素分組，使用<legend>標(biāo)簽和<fieldset>標(biāo)簽為<fieldset>標(biāo)簽定義標(biāo)題。
這對(duì)于創(chuàng)建更有效和更易于訪(fǎng)問(wèn)的表單非常有用。
html
代碼解讀
復(fù)制代碼<form>
<fieldset>
<legend>Personal details</legend>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="contact">Contact:</label>
<input type="text" id="contact" name="contact" />
<input type="button" value="Submit" />
</fieldset>
</form>
增強(qiáng)下拉菜單
您可以使用<optgroup>標(biāo)簽將相關(guān)選項(xiàng)分組到<select> HTML標(biāo)簽中。當(dāng)您使用大的菜單或一個(gè)長(zhǎng)的選項(xiàng)列表時(shí)，可以使用此選項(xiàng)。
html
代碼解讀
復(fù)制代碼<select>
<optgroup label="Fruits">
<option>Apple</option>
<option>Banana</option>
<option>Mango</option>
</optgroup>
<optgroup label="Vegetables">
<option>Tomato</option>
<option>Broccoli</option>
<option>Carrot</option>
</optgroup>
</select>
改善視頻演示
poster屬性可以與<video>元素一起使用，以顯示圖像，直到用戶(hù)播放視頻。
html
代碼解讀
復(fù)制代碼<video controls poster="image.png" width="500">
<source src="video.mp4" type="video/mp4 />
</video>
支持多選下拉
您可以將multiple屬性與<input>和<select>元素一起使用，以允許用戶(hù)一次選擇/輸入multiple值。
html
代碼解讀
復(fù)制代碼<input type="file" multiple />
<select multiple>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="typescript">TypeScript</option>
<option value="rust">Rust</option>
</select>
將文本顯示為下標(biāo)和上標(biāo)
<sub>和<sup>元素可分別用于將文本顯示為下標(biāo)和上標(biāo)。
創(chuàng)建下載鏈接
您可以將download屬性與<a>元素一起使用，以指定當(dāng)用戶(hù)單擊鏈接時(shí)，鏈接的資源會(huì)被下載而不會(huì)跳轉(zhuǎn)地址。
html
代碼解讀
復(fù)制代碼<a href="document.pdf" download="document.pdf"> Download PDF </a>
定義相對(duì)鏈接的base URL
您可以使用<base>標(biāo)記為網(wǎng)頁(yè)中的所有相對(duì)URL定義base URL。
當(dāng)你想為網(wǎng)頁(yè)上的所有相對(duì)URL創(chuàng)建一個(gè)共享的 base URL 時(shí)，這可以更容易地導(dǎo)航和加載資源。
html
代碼解讀
復(fù)制代碼<head>
<base href="https://shefali.dev" target="_blank" />
</head>
<body>
<a href="/blog">Blogs</a>
<a href="/get-in-touch">Contact</a>
</body>
控制圖像加載
帶有loading元素的<img>屬性可用于控制瀏覽器如何加載圖像。它有三個(gè)值：“eager”，“l(fā)azy”和“auto”。
html
代碼解讀
復(fù)制代碼<img src="picture.jpg" loading="lazy">
控制翻譯功能
您可以使用translate屬性來(lái)指定元素的內(nèi)容是否應(yīng)該由瀏覽器的翻譯功能進(jìn)行翻譯。
html
代碼解讀
復(fù)制代碼<p translate="no">
這段文字不需要翻譯。
</p>
設(shè)置最大輸入長(zhǎng)度
通過(guò)使用maxlength屬性，您可以設(shè)置用戶(hù)在輸入字段中輸入的最大字符數(shù)。
html
代碼解讀
復(fù)制代碼<input type="text" maxlength="4">
設(shè)置最小輸入長(zhǎng)度
通過(guò)使用minlength屬性，您可以設(shè)置用戶(hù)在輸入字段中輸入的最小字符數(shù)。
html
代碼解讀
復(fù)制代碼<input type="text" minlength="3">
啟用內(nèi)容編輯
使用contenteditable屬性指定元素的內(nèi)容是否可編輯。它允許用戶(hù)修改元素中的內(nèi)容。
html
代碼解讀
復(fù)制代碼<div contenteditable="true">
你可以編輯這段文字
</div>
控制拼寫(xiě)檢查
您可以將spellcheck屬性與<input>元素、內(nèi)容可編輯元素和<textarea>元素一起使用，以啟用或禁用瀏覽器的拼寫(xiě)檢查。
html
代碼解讀
復(fù)制代碼<input type="text" spellcheck="true"/>
無(wú)障礙訪(fǎng)問(wèn)
alt屬性指定圖像無(wú)法顯示時(shí)的替代文本。始終為圖片添加描述性的 alt 屬性，以提高可訪(fǎng)問(wèn)性和搜索引擎優(yōu)化。
html
代碼解讀
復(fù)制代碼<img src="picture.jpg" alt="Description for the image">
設(shè)置跳轉(zhuǎn)鏈接的目標(biāo)行為
您可以使用target屬性指定單擊鏈接資源時(shí)的交互行為。
html
代碼解讀
復(fù)制代碼<!-- 這是默認(rèn)值，在當(dāng)前瀏覽器窗口或標(biāo)簽頁(yè)中打開(kāi)鏈接 -->
<a href="https://shefali.dev" target="_self">Open</a>
<!-- 在一個(gè)新的瀏覽器窗口或標(biāo)簽頁(yè)中打開(kāi)鏈接 -->
<a href="https://shefali.dev" target="_blank">Open</a>
<!-- 在父標(biāo)簽頁(yè)中打開(kāi)鏈接，如果存在的話(huà) -->
<a href="https://shefali.dev" target="_parent">Open</a>
<!-- 在完整的瀏覽器窗口中打開(kāi)鏈接 -->
<a href="https://shefali.dev" target="_top">Open</a>
<!-- 自定義：如果存在具有相同名稱(chēng)的窗口或標(biāo)簽頁(yè)，則在該窗口中打開(kāi)鏈接，否則會(huì)創(chuàng)建一個(gè)新的窗口或標(biāo)簽頁(yè) -->
<a href="https://shefali.dev" target="framename">Open</a>
展示附加信息
當(dāng)用戶(hù)將鼠標(biāo)懸停在某個(gè)元素上時(shí)，可以使用title屬性提供有關(guān)該元素的附加信息。
html
代碼解讀
復(fù)制代碼<p title="World Health Organization">WHO</p>
接受特定文件類(lèi)型
您可以使用accept屬性指定服務(wù)器接受的文件類(lèi)型（僅適用于文件類(lèi)型）。它與<input>元素一起使用。
html
代碼解讀
復(fù)制代碼<input type="file" accept="image/png, image/jpeg" />
優(yōu)化視頻加載
您可以通過(guò)使用帶有preload元素的<video>屬性來(lái)加快視頻文件的加載速度，以實(shí)現(xiàn)更流暢的播放。
html
代碼解讀
復(fù)制代碼<video src="video.mp4" preload="auto">
Your browser does not support the video tag.
</video>
最后
今天分享的文章到此結(jié)束了，21個(gè)html小技巧希望對(duì)你有幫助，歡迎留言你知道的更多優(yōu)化小技巧~
