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

翻譯 | 楊小愛

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

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

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

以下是您可以立即使用的 11 個 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 元素添加簡單的工具提示不需要 CSS 或 JavaScript。

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

2、下載

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

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

此外，您還可以設(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> ，您可以輕松地找到可以打斷單詞的點（機會）。

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

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

4、文字方向

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

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

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

使用此屬性的一個潛在地方是社交媒體聊天應(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>

您可以使用詳細信息和摘要語義元素創(chuàng)建一個非常基本但簡單的手風(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 ，它都會變成可編輯的。

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

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è)置語言。

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è)置為“延遲”來按需加載圖像（也稱為延遲加載）。

這是一種簡單但非常有效的優(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的實際值為“https://www.w3schools.com/images/stickman.gif”。

如果您使用過 Axios 之類的庫，則設(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 屬性處理這些事件時。

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

類似地，只要用戶右鍵單擊該元素，就會觸發(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 時，拼寫檢查屬性告訴瀏覽器必須檢查用戶在該元素中輸入的語法和拼寫錯誤。

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

總結(jié)

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

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

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

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

11 個非常有用的 HTML One-Liners

學(xué)習(xí)更多技能
請點擊下方公眾號

11 個非常有用的 HTML One-Liners

學(xué)習(xí)更多技能請點擊下方公眾號

學(xué)習(xí)更多技能
請點擊下方公眾號