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

读本文

您将了解到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>

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 时，拼写检查属性会告诉浏览器必须检查用户在此元素中输入的语法和拼写错误。这是一个方便的属性，可帮助用户编写正确无误的内容。

avaScript 发展至今已经变得越来越强大，且广泛用于前端和后端开发。

作为一名前端程序员，不断的学习精进技巧，了解JS的最新发展也是非常必要的，而简洁的一行代码示例就是很好的方法。

今天，我们有 21 个JavaScript单行代码技巧，增强我们对 JavaScript 的理解并帮助您编写更简洁、更有效的代码。展示 JavaScript 的优雅和高效。

1. 检查变量是否是数组：

const isArray=variable=> Array.isArray(variable);

Array.isArray() 方法检查给定变量是否是数组。

2. 获取数组中的最后一项：

const lastItem=array=> array.slice(-1)[0];

通过使用负数组索引和 slice() 方法，我们可以轻松检索数组中的最后一项。

3. 生成一个范围内的随机数：

const randomNumber=(min, max)=> Math.floor(Math.random() * (max - min + 1)) + m

使用 Math.random()、Math.floor() 和一点算术，我们可以生成指定范围内的随机数。

4. 合并两个数组：

const mergedArray=(array1, array2)=> [...array1, ...array2];

扩展运算符 (...) 允许我们将两个数组合并为一个数组。

5. 从数组中删除重复项：

const uniqueArray=array=> [...new Set(array)];

通过使用 Set 对象和展开运算符，我们可以轻松地消除数组中的重复值。

6. 将字符串的第一个字母大写：

const capitalize=string=> string.charAt(0).toUpperCase() + string.slice(1);

这个简洁的代码片段将给定字符串的第一个字母大写。

7. 检查字符串是否包含子字符串：

const containsSubstring=(string, substring)=> string.includes(substring);

使用includes()方法，我们可以快速判断一个字符串是否包含特定的子字符串。

8. 查找数组中的最大数字：

const maxNumber=array=> Math.max(...array);

使用扩展运算符和 Math.max() 方法，我们可以轻松找到数组中的最大数字。

9. 计算数字数组的总和：

const sumArray=array=> array.reduce((total, num)=> total + num, 0);

reduce() 方法允许我们通过迭代地将每个元素添加到运行总计中来计算数组的总和。

10. 反转字符串：

const reverseString=string=> string.split('').reverse().join('');

此单行代码使用 split()、reverse() 和 join() 方法来反转给定的字符串。

11. 打乱数组：

const shuffleArray=array=> array.sort(()=> Math.random() - 0.5);

通过提供生成随机值的自定义排序函数，我们可以对数组的元素进行打乱。

12. 从数组中删除假值：

const truthyValues=array=> array.filter(Boolean);

filter() 方法与布尔构造函数一起允许我们从数组中删除假值（例如 null、undefined 和 false）。

13. 截断字符串并在超过指定长度时添加省略号：

const truncateString=(string, maxLength)=> string.length > maxLength ? string.slice(0, maxLength) + '...' : string;

此单行将字符串截断为指定长度，并在超过该长度时附加省略号。

14. 查找数组中元素第一次出现的索引：

const indexOfElement=(array, element)=> array.indexOf(element);

indexOf() 方法返回数组中给定元素第一次出现的索引。

15. 检查字符串是否为回文：

const isPalindrome=string=> string===string.split('').reverse().join('');

这个简洁的代码片段通过将字符串与其反转版本进行比较来检查字符串是否为回文。

16. 将字符串转换为字符数组：

const stringToArray=string=> Array.from(string);

Array.from() 方法将可迭代对象（例如字符串）转换为数组。

17. 生成指定范围内的数字数组：

const rangeArray=(start, end)=> Array.from({length: end - start + 1}, (_, i)=> start + i);

使用 Array.from() 方法和箭头函数，我们可以生成给定范围内的数字数组。

18. 删除字符串开头和结尾的空格：

const trimString=string=> string.trim();

Trim() 方法删除字符串两端的空格。

19. 求一组数字的平均值：

const average=array=> array.reduce((total, num)=> total + num, 0) / array.length;

通过将数组的总和除以它的长度，我们可以计算出数字的平均值。

20. 检查数字是否为偶数：

const isEven=number=> number % 2===0;

这个简洁的代码片段通过验证数字除以 2 的余数是否为零来检查数字是否为偶数。

21. 从键值对数组创建对象：

const objectFromPairs=pairs=> Object.fromEntries(pairs);

Object.fromEntries() 方法从键值对数组创建一个对象。

怎么样？这些简洁的一行代码示例，有没有让你瞬间get新技能呢？提高 JavaScript 技能并学习编写高效、让代码变优雅新方法。

最后，想要前端相关的什么知识点文章可以直接留言给我们！会在之后的发文中安排上！

让优秀的教育资源不再孤芳自赏，与你共享！

——千锋数字智慧大前端

avaScript可以实现很多令人惊奇的事！

从复杂的框架到处理API，有太多的东西可以学习。

甚至，仅用一行代码，它也能完成一些很棒的工作。

不信？那么请看这13条JavaScript单行代码，用上它们，会让你看起来特别专业！

1. 获取随机布尔值（true/false）

使用Math.random()方法可以让函数返回布尔值（true或false）。Math.random会创建一个介于0和1之间的随机数，然后我们检查这个数是大于还是小于0.5。也就是说，有50％/50％的几率得到true或false。

以下JS代码块显示了如何使用Math.Random方法获取随机布尔值。

const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
// Result: a 50/50 change on returning true of false

2. 检查指定日期是否是工作日

我们可以通过此方法来检查函数中提供的日期是工作日还是周末。

以下JS代码块显示了如何编写一个返回指定日期是工作日还是周末的函数。

const isWeekday = (date) => date.getDay() % 6 !== 0;
console.log(isWeekday(new Date(2021, 0, 11)));
// Result: true (Monday)
console.log(isWeekday(new Date(2021, 0, 10)));
// Result: false (Sunday)

3. 反转字符串

有两种不同的方式可以反转字符串。使用split()，reverse()和join()方法是最简单的方法之一。

以下JS代码块显示了如何反转字符串。

const reverse = str => str.split('').reverse().join('');
reverse('hello world');     
// Result: 'dlrow olleh'

4. 检查当前tab是否在视图/焦点中

我们可以使用document.hidden属性来检查当前tab是否在视图/焦点中。

以下JS代码块显示了如何使用文档的hidden属性来获取当前tab是否在视图/焦点中。

const isBrowserTabInView = () => document.hidden;
isBrowserTabInView();
// Result: returns true or false depending on if tab is in view / focus

5. 检查数字是偶数还是奇数

可以通过使用取模运算符(%)来解决这个超简单的任务。如果你对此还不太熟悉，那么Stack Overflow上就有直观的说明。

以下JS代码块显示了如何使用模运算符来检查数字是偶数还是奇数。

const isEven = num => num % 2 === 0;
console.log(isEven(2));
// Result: true
console.log(isEven(3));
// Result: false

6. 从日期中获取时间

通过使用.toTimeString()方法并在合适的位置切割字符串，我们就可以从指定的日期中获取时间，也可以获取当前时间。

以下JS代码块显示了如何通过toTimeString方法和切割字符串从日期中获取时间。

const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// Result: "17:30:00"
console.log(timeFromDate(new Date()));
// Result: will log the current time

7. 截取数字小数点后的固定几位

使用Math.pow()方法，可以截取数字小数点后的固定几位。

以下JS代码块显示了如何使用Math.Power方法舍入某个小数点。

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// Examples
toFixed(25.198726354, 1);       // 25.1
toFixed(25.198726354, 2);       // 25.19
toFixed(25.198726354, 3);       // 25.198
toFixed(25.198726354, 4);       // 25.1987
toFixed(25.198726354, 5);       // 25.19872
toFixed(25.198726354, 6);       // 25.198726

8. 检查元素当前是否处于焦点

我们可以使用document.activeElement属性来检查一个元素当前是否处于焦点。

以下JS代码块显示了如何使用文档对象上的activeElement属性检查元素当前是否处于焦点。

const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)
// Result: will return true if in focus, false if not in focus

9. 检查当前用户是否支持touch事件

以下JS代码块显示了如何检查当前用户是否支持touch事件。

const touchSupported = () => {
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}
console.log(touchSupported());
// Result: will return true if touch events are supported, false if not

10. 检查当前用户是否使用Apple上

可以使用navigator.platform来检查当前用户是否使用Apple设备。

以下JS代码块显示了如何检查用户当前是否在Apple设备上。

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
// Result: will return true if user is on an Apple device

11. 滚动到页面顶部

window.scrollTo()方法通过x坐标和y坐标实现滚动。如果将它们设置为0，则将滚动到页面顶部。

注意：Internet Explorer不支持.scrollTo()方法。

以下JS代码块显示了如何使用scrollTo方法将浏览器滚动至顶部。

const goToTop = () => window.scrollTo(0, 0);
goToTop();
// Result: will scroll the browser to the top of the page

12. 获取参数的平均值

可以使用reduce方法获取函数参数的平均值。

以下JS代码块显示了如何使用reduce方法获取参数的平均值。

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5

13. 转换华氏/摄氏

最后一个2合1了！

处理温度有时会晕头转向。这两个函数则能帮助大家将华氏温度转换为摄氏温度，以及将摄氏温度转换为华氏温度。

以下JS代码块显示了如何将华氏温度转换为摄氏温度，以及反向的转换。

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
// Examples
celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0

喜欢本文，请关注，点赞，收藏哦。

在线咨询

上一篇：html和css开发工具介绍
下一篇：对Http Rest API接口设计和API治理管控

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商