11 个非常有用的 HTML One-Liners

英文 | 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="data: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 属性处理这些事件时。

如果您不希望用户能够粘贴到密码等字段，您可以在该输入字段上写上 οnpaste="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 个很有用但鲜有人知的 Linux 命令
Linux命令行吸引了大多数Linux爱好者.一个正常的Linux用户一般掌握大约50-60个命令来处理每日的任务.Linux命令和它们的转换对于Linux用户.Shell脚本程序员和管理员来说是最有 ...
计算机无法安装系统,一招就能搞定“这台电脑无法安装 Windows 11”的解决方法...
微软已经正式发布了 Windows 11.虽然公开发布为今年晚些时候,但微软的 PC Health Check (中文名电脑健康状况检查)应用程序允许 Windows 10 用户检查他们的计算机是否满 ...
科大星云诗社动态20201121
#每日一诗 2020.11.21天生我材必有用,千金散尽还复来.--李白<将进酒>诗社"出生"第四天,大家的踊跃入社是对我们最大的肯定.今日与大家分享诗仙名句,从他的乐 ...
与小弟子交谈:引申的思考笔记[第一次编辑]
#----------------------------------------------------------# # ====> 红色字体 -特指煮酒个人所见.加粗则为需要重点注意. ...
向iOS开发者介绍C++
http://www.cocoachina.com/industry/20140415/8163.html 你已经精通了Objective-C,并且一直想学更酷的东西?看看这篇文章吧!本文将向iOS开 ...
android多申请内存,Android内存等信息
1. Linux中proc目录下文件详解 http://wenku.baidu.com/view/2ce89f00a6c30c2259019ef1.html 3.android proc 进程信息解析 ...
10 个鲜为人知的 Linux 命令
Linux命令行吸引了大多数Linux爱好者.一个正常的Linux用户一般掌握大约50-60个命令来处理每日的任务.Linux命令和它们的转换对于Linux用户.Shell脚本程序员和管理员来说是最有 ...
判断oracle客户端是32还是64,64位-如何知道已安装的Oracle Client是32位还是64位？
64位-如何知道已安装的Oracle Client是32位还是64位? 操作系统:Windows 2008 Server R2 Oracle客户端:11.2 非常感谢 8个解决方案 73 votes ...
Linux中part指令,10 个鲜为人知的 Linux 命令 - Part 2
继续上篇文章<11 个很有用但鲜有人知的 Linux 命令>.在本文中,我们将关注其他几个不为人知的Linux命令,有些在管理桌面和服务器方面被证明是非常有用的. 12. 命令你在终端上 ...

11 个非常有用的 HTML One-Liners

11 个非常有用的 HTML One-Liners相关推荐

最新文章

热门文章