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

更新日期: 2021-12-06阅读: 794标签: html

前言

htmlcss前端开发世界的支柱。虽然精通 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>

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>


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 展示了数据的结构,而 CSS 则对其进行了样式设置并使其具有可展示性。但是,HTML 的功能远不止设置数据结构。

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


链接: https://www.fly63.com/article/detial/10913

css/html 空格,html空格符的显示、标示方式【html空格代码】

css/html 空格,html空格符的显示、标示方式。在html里面空格的话,你直接敲打出来的空格是不可以的,这篇文章将通过html和css中设置显示空格的实现总结

HTML/CSS代码风格指南(Google)

本文档定义了HTML/CSS的编写格式和风格规则,适用于HTML/CSS文件,包括GSS文件。如果你要编辑代码,先花几分钟看看它的代码风格,如果它这么做,那你也应该这么做。

html鼠标自定义右键菜单:css+js实现自定义html右键菜单

我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码。

基于 HTML5 Canvas 的交互式地铁线路图

地图稍微内容有点多,要全部展示,字显得有点小了,但是没关系,可以按照需求放大缩小,字体和绘制的内容并不会失真,毕竟都是用矢量绘制的~

如何用 Python 解析 HTML

用一些简单的脚本,可以很容易地清理文档和其它大量的 HTML 文件。但是首先你需要解析它们。我决定为自己创建一个项目来解决这个问题。 一种方法是搜索未使用的现有图像文件。

你可能从未听说过的15种HTML元素方法!

我们来讨论HTML和DOM之间的区别。显然,一个普通<table>元素就是HTML。您可以在.html的文件中使用它。它有一组属性影响它的外观和行为方式。这就是HTML,不过它与JavaScript无关。

KeyPress 和KeyDown 、KeUp之间的区别

input 框在输入查询内容之后,按回车键居然有两种不同的表现形式(input 框没有绑定键盘事件),谷歌和火狐功能正常,但IE在按了回车键以后居然自动调用方法。

在html中做嵌套页面_客户端实现html页面的嵌套

如何在客户端利用html、或js将一个html页面嵌套在另一个页面中,这篇文章主要讲解以下几种方式:IFrame引入 、<object>方式、Behavior的download方式 、使用JQuery的load方法

HTML的Doctype

<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。DOCTYPE不存在或格式不正确会导致文档以混杂(兼容)模式呈现。

VSCode中快捷输入HTML代码

VSCode中有一些快捷编辑HTML的方法,能大大提高工作效率,在这记录一些。文是在VSCode下编写的,其他编辑器如Atom、Sublime Text都支持Emmet

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!