html简单网页代码有哪些（11个非常有用的HTML单行代码介绍）-前沿创业网

阅读本文

您将了解到11个非常有用的单行代码，它能帮助我们做很多事，不要小瞧了HTML哦!!!

前言

HTML 和 CSS 是前端开发世界的支柱。虽然精通 CSS 和 JavaScript 对于创建出色的网站至关重要，但人们经常低估您仅使用一个普通的旧 HTML 文件就可以完成的工作。从延迟加载图像到为视频添加字幕，HTML 能够完成大多数开发人员并不完全了解的许多事情。以下是您可以立即使用的 11 个 HTML 单行代码

正文

1.Tooltip

向 HTML 元素添加简单的工具提示不需要 CSS 或 JavaScript。使用 title 属性，您可以轻松添加工具提示以向用户提供额外信息。

<body><abbrtitle=”World Health Organization”>WHO</abbr>was founded in 1948. <ptitle=”Free Web tutorials”>W3Schools</body>

html简单网页代码有哪些（11个非常有用的HTML单行代码介绍）-1

2.Download

当您希望用户下载链接而不是导航到文件时，下载属性非常有用。此外，您还可以设置用户将下载的文件的文件名

<ahref=”/images/myw3schoolsimage.jpg”download>
<ahref=”link/to/your/file”download=”filename”>Download link</a>

3. Word Break Opportunity

没有人喜欢HTML在不该打断的地方打断文字。使用，您可以轻松地找到可以打断单词的点(机会)。当单词太长，浏览器很有可能会在不正确的地方打断它时，这很有用。

This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongwordthatwillbreakatspecificplaceswhenthebrowserwindowisresized.

4. Text direction

使用DIR =“AUTO”，浏览器将根据内容的语言更改文本对齐。当您处理不遵循左边的语言时，这非常有用。使用此属性的潜在地点是社交媒体聊天应用程序。

<pdir=”auto”>This text is following dir=auto

5. Basic Accordion

通过使用细节和摘要语义元素，您可以创建一个非常基本但很容易的手风琴。将accordion元素与details元素打包，而标题则使用summary元素。最后，使用p段落元素来编写手风琴的主要内容。

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

html简单网页代码有哪些（11个非常有用的HTML单行代码介绍）-2

6. Content Editable

通过将contentteditable属性设置为true，可以使任何内容都可编辑。不管它是div还是p，它都是可编辑的。此外，还可以使用isContentEditable属性来查找某个元素是否可编辑。

<pcontenteditable=’true’>This is a paragraph. Click the button to make me editable.

7.Add Captions

只需使用 HTML，您就可以使用 <track> 元素为视频文件添加字幕。使用 src 属性指向字幕文件，使用 srclang 属性设置语言。

<videowidth=”320″height=”240″controls><sourcesrc=”forrest_gump.mp4″type=”video/mp4″><sourcesrc=”forrest_gump.ogg”type=”video/ogg”><tracksrc=”fgsubtitles_en.vtt”kind=”subtitles”srclang=”en”label=”English”><tracksrc=”fgsubtitles_no.vtt”kind=”subtitles”srclang=”no”label=”Norwegian”></video>

8.Lazy loading

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

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

9. Base URL

如果您在您的网站上多次调用一个公共域，您可以使用**<base>**元素来设置一个基本URL，如下面提供的代码片段所示。现在，src在图像元素中的实际值是“

www.w3schools.com/images/stic… 如果您使用过像Axios这样的库，那么设置基URL是一种非常常见的做法。

10. Controlling Context Menu and Paste

您可以在使用右键单击时收听事件，也可以尝试使用OnContextMenu和OnPaste属性粘贴内容并处理这些事件。如果您不希望用户能够粘贴到密码等某些字段上，则可以在该输入字段上写入Onpaste =“返回false”，用户将无法粘贴到那里。同样，oncontextmenu在用户右键单击该元素时会触发。

<inputtype=”text”onpaste=”return false”value=”Paste something in here”> <div oncontextmenu=”myFunction()”contextmenu=”mymenu”>