html简单网页代码 11个非常有用的HTML单行代码

【html简单网页代码 11个非常有用的HTML单行代码】
阅读本文您将了解到11个非常有用的单行代码。它能帮助我们做很多事。不要小瞧了HTML哦!!!
前言HTML 和 CSS 是前端开发世界的支柱。虽然精通 CSS 和 JavaScript 对于创建出色的网站至关重要。但人们经常低估您仅使用一个普通的旧 HTML 文件就可以完成的工作。从延迟加载图像到为视频添加字幕。HTML 能够完成大多数开发人员并不完全了解的许多事情。以下是您可以立即使用的 11 个 HTML 单行代码
正文1.Tooltip向 HTML 元素添加简单的工具提示不需要 CSS 或 JavaScript 。使用 title 属性。您可以轻松添加工具提示以向用户提供额外信息。
<body><abbr title="World Health Organization">WHO</abbr> was founded in 1948.W3Schools</body>

文章插图
2.Download当您希望用户下载链接而不是导航到文件时。下载属性非常有用。此外。您还可以设置用户将下载的文件的文件名
<a href="https://www.wangchuang8.com/images/myw3schoolsimage.jpg" download><a href="https://www.wangchuang8.com/link/to/your/file" download="filename">Download link</a>3. Word Break Opportunity没有人喜欢HTML在不该打断的地方打断文字。使用 。您可以轻松地找到可以打断单词的点(机会) 。当单词太长。浏览器很有可能会在不正确的地方打断它时。这很有用。

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

4. Text direction使用DIR =“AUTO” 。浏览器将根据内容的语言更改文本对齐。当您处理不遵循左边的语言时。这非常有用。使用此属性的潜在地点是社交媒体聊天应用程序。
This text is following dir=auto5. Basic Accordion通过使用细节和摘要语义元素。您可以创建一个非常基本但很容易的手风琴。将accordion元素与details元素打包。而标题则使用summary元素。最后。使用p段落元素来编写手风琴的主要内容。

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

文章插图
6. Content Editable通过将contentteditable属性设置为true 。可以使任何内容都可编辑。不管它是div还是p 。它都是可编辑的。此外。还可以使用isContentEditable属性来查找某个元素是否可编辑。
This is a paragraph. Click the button to make me editable.7.Add Captions只需使用 HTML 。您就可以使用 <track> 元素为视频文件添加字幕。使用 src 属性指向字幕文件。使用 srclang 属性设置语言。

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

8.Lazy loading你可以通过设置加载属性为“lazy”来按需加载图片(也叫惰性加载) 。这是一种简单但非常有效的优化技术。只加载对用户可见的部分。其他图像稍后根据用户的需要加载。

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

9. Base URL如果您在您的网站上多次调用一个公共域。您可以使用**<base>**元素来设置一个基本URL 。如下面提供的代码片段所示。现在。src在图像元素中的实际值是“www.w3schools.com/images/stic… 如果您使用过像Axios这样的库。那么设置基URL是一种非常常见的做法。