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

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

好文
已推荐 生活百科 32 2 网创网 营销顾问 知名网络工程师 互联网优化师 本文总共3302个字，预计阅读时间或需12分钟
    当前位置：
  1. 网络推广
  2. 生活百科
试试语音读文章

热门答案：

阅读本文

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

前言

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

正文

1.Tooltip

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

<body>
<p>
<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>
<p title="Free Web tutorials">W3Schools</p>
</body>

11个非常有用的HTML单行代码

2.Download

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

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

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

3. Word Break Opportunity

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

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

4. Text direction

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

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

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

11个非常有用的HTML单行代码

6. Content Editable

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

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

7.Add Captions

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

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

8.Lazy loading

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

<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. Base URL

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

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

10. Controlling Context Menu and Paste

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

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

11.Spellcheck

当设置为 true 时。拼写检查属性会告诉浏览器必须检查用户在此元素中输入的语法和拼写错误。 这是一个方便的属性。可帮助用户编写正确无误的内容。

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

大家还在搜：

  • html简单网页代码
    • 更多网络推广文章推荐

    以上就是由互联网推广工程师 网创网 整理编辑的，如果觉得有帮助欢迎收藏转发~

    分享到 :
    聚酯纤维是啥面料好不好 有哪些优缺点
    上一篇 2022-10-13
    如何实现高效健身 这些知识不能不知道
    2022-10-13 下一篇
    相关推荐
    显卡推荐 显卡全面降价，2022年2月显卡价格分析及型号推荐

    显卡推荐 显卡全面降价，2022年2月显卡价格分析及型号推荐

    适合宝宝看的动画片有哪些 记得收藏哦

    适合宝宝看的动画片有哪些 记得收藏哦

    okr和kpi的区别与联系 掌握这7点，复杂的内容轻松搞定

    okr和kpi的区别与联系 掌握这7点，复杂的内容轻松搞定

    夸奖美女的成语 描写女子美貌的成语古风

    夸奖美女的成语 描写女子美貌的成语古风

    适合女生的机械键盘 小姐姐们别再用爆丑键盘

    适合女生的机械键盘 小姐姐们别再用爆丑键盘

    买机票用哪个APP既靠谱又便宜

    买机票用哪个APP既靠谱又便宜

    舟山出现血红色天空的原因 浙江气象局回应

    舟山出现血红色天空的原因 浙江气象局回应

    高中生应该要求发型吗 高中生发型标准公布

    高中生应该要求发型吗 高中生发型标准公布

    发表评论

    您的电子邮箱地址不会被公开。

    浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。

    评论(2)

    • 郎不知 永久VIP 2022年10月12日 22:43:40

      属性，元素，您可以，用户，加载，有用，代码，文件，内容，字幕

      回复
    • 风华三生 永久VIP 2022年10月12日 22:43:40

      html简单网页代码 11个非常有用的HTML单行代码，现在知道了，不过这这篇解答确实也是太好了

      回复
    • 浮生三叹 永久VIP 2022年10月12日 22:43:40

      阅读本文您将了解到11个非常有用的单行代码。它能帮助我们做很多事。不要小瞧了HTML哦!!!前言HTML 和

      回复