英文 | https://javascript.plainenglish.io/11-html-one-liners-that-are-insanely-useful-3b62f4e57a06

翻譯 | 楊小愛

HTML 和 CSS 是前端開發(fā)世界的支柱。

雖然精通 CSS 和 JavaScript 對(duì)于創(chuàng)建出色的網(wǎng)站至關(guān)重要，但人們經(jīng)常低估您僅使用普通的舊 HTML 文件即可完成的工作。

從延遲加載圖像到為視頻添加字幕，HTML 能夠完成大多數(shù)開發(fā)人員并不完全了解的許多事情。

以下是您可以立即使用的 11 個(gè) HTML 單行代碼：

1、工具提示

<body><p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p><p title="Free Web tutorials">W3Schools</p></body>

向 HTML 元素添加簡(jiǎn)單的工具提示不需要 CSS 或 JavaScript。

使用 title 屬性，您可以輕松添加工具提示以向用戶提供額外信息。

2、下載

<a href="/images/myw3schoolsimage.jpg" download>

當(dāng)您希望用戶下載鏈接而不是導(dǎo)航到文件時(shí)，下載屬性非常有用。

此外，您還可以設(shè)置用戶將下載的文件的文件名。

<a href="link/to/your/file" download="filename">Download link</a>

3、斷字功能

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>

沒有人喜歡 HTML 在不應(yīng)該的地方斷詞。

使用 <wbr> ，您可以輕松地找到可以打斷單詞的點(diǎn)（機(jī)會(huì)）。

當(dāng)單詞太長(zhǎng)并且瀏覽器很可能在不正確的位置打破它時(shí)，這很有用。

(譯者注：這個(gè)功能在英文書寫是非常有用，中文中寫拼音的時(shí)候，也是可以用的，但是漢字書寫，不會(huì)把一個(gè)字拆成兩半）

4、文字方向

<p dir="auto">This text is following dir=auto</p>

使用 dir="auto" ，瀏覽器將根據(jù)內(nèi)容的語(yǔ)言更改文本對(duì)齊方式。

當(dāng)您處理不像英語(yǔ)那樣從左到右的語(yǔ)言時(shí)，這非常有用。

使用此屬性的一個(gè)潛在地方是社交媒體聊天應(yīng)用程序。

5、基本手風(fēng)琴

<details>  <summary>Epcot Center</summary>  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p></details>

您可以使用詳細(xì)信息和摘要語(yǔ)義元素創(chuàng)建一個(gè)非常基本但簡(jiǎn)單的手風(fēng)琴。

用 details 元素包裹你的手風(fēng)琴元素，標(biāo)題使用 summary 元素。最后，使用 p 段落元素編寫手風(fēng)琴的主要內(nèi)容。

6、內(nèi)容可編輯

<p contenteditable='true'>This is a paragraph. Click the button to make me editable.</p>

您可以通過將 contenteditable 屬性設(shè)置為 true 來使任何內(nèi)容可編輯。

不管是 div 還是 p ，它都會(huì)變成可編輯的。

此外，您還可以使用 isContentEditable 屬性來查找某個(gè)元素是否可編輯。

7、添加字幕

<video width="320" height="240" controls>  <source src="forrest_gump.mp4" type="video/mp4">  <source src="forrest_gump.ogg" type="video/ogg">  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"></video>

只需使用 HTML，您就可以使用 <track> 元素為視頻文件添加字幕。

使用 src 屬性指向字幕文件，使用 srclang 屬性設(shè)置語(yǔ)言。

8、延遲加載

<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%"><img src="/w3images/rocks.jpg" alt="Rocks" style="width:100%">
<!-- off-screen images --><img src="/w3images/paris.jpg" alt="Paris" style="width:100%" loading="lazy"><img src="/w3images/nature.jpg" alt="Nature" style="width:100%" loading="lazy"><img src="/w3images/underwater.jpg" alt="Underwater" style="width:100%" loading="lazy"><img src="/w3images/ocean.jpg" alt="Ocean" style="width:100%" loading="lazy"><img src="/w3images/mountainskies.jpg" alt="Mountains" style="width:100%" loading="lazy">

您可以通過將加載屬性設(shè)置為“延遲”來按需加載圖像（也稱為延遲加載）。

這是一種簡(jiǎn)單但非常有效的優(yōu)化技術(shù)，它只加載用戶可見的部分，其他圖像根據(jù)用戶需要稍后加載。

9、基本網(wǎng)址

<head>  <base href="https://www.w3schools.com/" target="_blank"></head>
<body><img src="images/stickman.gif" width="24" height="39" alt="Stickman"><a href="tags/tag_base.asp">HTML base Tag</a></body>

如果您在網(wǎng)站上多次調(diào)用公共域，則可以使用 <base> 元素設(shè)置基本 URL，如上面提供的代碼片段所示。

現(xiàn)在圖像元素中src的實(shí)際值為“https://www.w3schools.com/images/stickman.gif”。

如果您使用過 Axios 之類的庫(kù)，則設(shè)置基本 URL 是一種非常常見的做法。

10、控制上下文菜單和粘貼

<input type="text" onpaste="return false" value="Paste something in here"><div oncontextmenu="myFunction()" contextmenu="mymenu">

您可以監(jiān)聽事件，例如當(dāng)他們使用右鍵單擊或嘗試粘貼內(nèi)容并使用 oncontextmenu 和 onpaste 屬性處理這些事件時(shí)。

如果您不希望用戶能夠粘貼到密碼等字段，您可以在該輸入字段上寫上 onpaste="return false" 并且用戶將無(wú)法粘貼到那里。

類似地，只要用戶右鍵單擊該元素，就會(huì)觸發(fā) oncontextmenu。

11、拼寫檢查

<p contenteditable="true" spellcheck="true">This is a praggagraph. It is editable. Try to change the text.</p>

當(dāng)設(shè)置為 true 時(shí)，拼寫檢查屬性告訴瀏覽器必須檢查用戶在該元素中輸入的語(yǔ)法和拼寫錯(cuò)誤。

這是一個(gè)方便的屬性，可幫助用戶編寫正確無(wú)誤的內(nèi)容。

總結(jié)

HTML 展示了數(shù)據(jù)的結(jié)構(gòu)，而 CSS 則對(duì)其進(jìn)行了樣式設(shè)置并使其具有可展示性。

但是，HTML 的功能遠(yuǎn)不止設(shè)置數(shù)據(jù)結(jié)構(gòu)。

使用這些強(qiáng)大的單行屬性，您可以直接從 HTML 文件中執(zhí)行更多操作。

最后，感謝您的閱讀，如果您覺得內(nèi)容對(duì)您有幫助，請(qǐng)記得給我點(diǎn)個(gè)贊，同時(shí)也請(qǐng)分享給身邊的做開發(fā)的朋友。

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

11 個(gè)非常有用的 HTML One-Liners

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)