非常有用的HTML标签知识

断续器

在本文中，我将与您分享一些非常有用的HTML提示。享受！

原文：https://markodenic.com/html-tips/

但首先，什么是HTML？

超文本标记语言（HTML）是设计用于在 Web 浏览器中显示的文档的标准标记语言。它可以通过级联样式表（CSS）和脚本语言（如JavaScript）等技术来辅助。

让我们开始吧！

1. 'loading=lazy'属性

性能提示。您可以使用该属性延迟图像的加载，直到用户滚动到它们。loading=lazy

   
<img src='image.jpg' loading='lazy' alt='Alternative Text'>

复制

2. 电子邮件、电话和短信链接：

   
<a href='mailto:{email}?subject={subject}&body={content}'>
  Send us an email
</a>

<a href='tel:{phone}'>
  Call us
</a>

<a href='sms:{phone}?body={content}'>
  Send us a message
</a>

复制

3. 有序列表'开始'属性。

使用该属性更改有序列表的起点。start

编解码器预览

4. '仪表'元素1. 您可以使用该元素来显示数量。不需要 JavaScript/CSS。`<meter>`

5.HTML 原生搜索

6. 字段集元素

可以使用该元素对 Web 窗体中的多个控件以及标签（）进行分组。<fieldset>``<label>

7. 窗口打开程序

打开的页面允许新页面访问原始页面。这可能会对安全性和性能产生影响。包括或防止这种情况。target='_blank'``window.opener``rel='noopener'``rel='noreferrer'

   
<a href='https://markodenic.com/' target='_blank' rel='noopener'>
	Marko's website
</a>

复制

8. 基本元素

如果要在新选项卡中打开文档中的所有链接，可以使用 element：<base>

9. 破坏图标缓存

要刷新网站的图标，您可以通过添加到文件名来强制浏览器下载新版本。?v=2

这在生产中特别有用，以确保用户获得新版本。

   
<link rel='icon' href='/favicon.ico?v=2' />

复制

10. '拼写检查'属性

使用该属性可以定义是否可以检查元素是否存在拼写错误。spellcheck

11. 原生 HTML 滑块

可用于创建滑块。<input type='range'>

12.HTML 手风琴

可以使用该元素创建本机 HTML 可折叠面板。details

13. '标记'标签

您可以使用标签突出显示文本。<mark>

标记标记实现

14. '下载'属性

您可以使用链接中的属性来下载文件，而不是导航到该文件。download

   
<a href='path/to/file' download>
  Download
</a>

复制

15. 性能提示

使用图片格式使图片变小并提高网站的性能。.webp

   
<picture>
  <!-- load .webp image if supported -->
  <source srcset='logo.webp' type='image/webp'>
  
  <!-- 
	Fallback if `.webp` images or <picture> tag 
	not supported by the browser.
  -->
  <img src='logo.png' alt='logo'>
</picture>

复制

16. 视频缩略图

使用该属性可以指定要在下载视频时或直到用户点击播放按钮时显示的图像。poster

   
<video poster='path/to/image'>

复制

17. 输入 `type='search'`

使用搜索输入使用，您将免费获得'清除'按钮。type='search'

18. '预'标签

使用该标记可以完全按照 HTML 文件中的写法显示预先格式化的文本：<pre>