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

翻译 | 杨小爱

HTML 和 CSS 是前端开发世界的支柱。

虽然精通 CSS 和 JavaScript 对于创建出色的网站至关重要，但人们经常低估您仅使用普通的旧 HTML 文件即可完成的工作。

从延迟加载图像到为视频添加字幕，HTML 能够完成大多数开发人员并不完全了解的许多事情。

以下是您可以立即使用的 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>

当您希望用户下载链接而不是导航到文件时，下载属性非常有用。

此外，您还可以设置用户将下载的文件的文件名。

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

3、断字功能

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

没有人喜欢 HTML 在不应该的地方断词。

使用 <wbr> ，您可以轻松地找到可以打断单词的点（机会）。

当单词太长并且浏览器很可能在不正确的位置打破它时，这很有用。

(译者注：这个功能在英文书写是非常有用，中文中写拼音的时候，也是可以用的，但是汉字书写，不会把一个字拆成两半）

4、文字方向

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

使用 dir="auto" ，浏览器将根据内容的语言更改文本对齐方式。

当您处理不像英语那样从左到右的语言时，这非常有用。

使用此属性的一个潜在地方是社交媒体聊天应用程序。

5、基本手风琴

<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>

您可以使用详细信息和摘要语义元素创建一个非常基本但简单的手风琴。

用 details 元素包裹你的手风琴元素，标题使用 summary 元素。最后，使用 p 段落元素编写手风琴的主要内容。

6、内容可编辑

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

您可以通过将 contenteditable 属性设置为 true 来使任何内容可编辑。

不管是 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 属性设置语言。

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">

您可以通过将加载属性设置为“延迟”来按需加载图像（也称为延迟加载）。

这是一种简单但非常有效的优化技术，它只加载用户可见的部分，其他图像根据用户需要稍后加载。

9、基本网址

<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>

如果您在网站上多次调用公共域，则可以使用 <base> 元素设置基本 URL，如上面提供的代码片段所示。

现在图像元素中src的实际值为“https://www.w3schools.com/images/stickman.gif”。

如果您使用过 Axios 之类的库，则设置基本 URL 是一种非常常见的做法。

10、控制上下文菜单和粘贴

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

您可以监听事件，例如当他们使用右键单击或尝试粘贴内容并使用 oncontextmenu 和 onpaste 属性处理这些事件时。

如果您不希望用户能够粘贴到密码等字段，您可以在该输入字段上写上 onpaste="return false" 并且用户将无法粘贴到那里。

类似地，只要用户右键单击该元素，就会触发 oncontextmenu。

11、拼写检查

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

当设置为 true 时，拼写检查属性告诉浏览器必须检查用户在该元素中输入的语法和拼写错误。

这是一个方便的属性，可帮助用户编写正确无误的内容。

总结

HTML 展示了数据的结构，而 CSS 则对其进行了样式设置并使其具有可展示性。

但是，HTML 的功能远不止设置数据结构。

使用这些强大的单行属性，您可以直接从 HTML 文件中执行更多操作。

最后，感谢您的阅读，如果您觉得内容对您有帮助，请记得给我点个赞，同时也请分享给身边的做开发的朋友。

11 个非常有用的 HTML One-Liners

学习更多技能
请点击下方公众号

11 个非常有用的 HTML One-Liners

学习更多技能请点击下方公众号

学习更多技能
请点击下方公众号