你所不知道的HTML：40个不为人所知的实用技巧

  • 1927字
  • 10分钟
  • 2024-07-31

在HTML开发中，有些非常实用的技巧但却鲜为人知，在这篇文章中，我将分享40个大部分人都不知道的HTML技巧。这些技巧涵盖了各种HTML标签和属性的使用方法，可以帮助你提高网页开发效率和用户体验。

1. 创建联系链接

使用<a>标签结合mailto:、tel:和sms:可以创建点击即联系的链接。

1
<a href="mailto:name@example.com">发送邮件</a>
2
<a href="tel:+1234567890">拨打电话</a>
3
<a href="sms:+1234567890">发送短信</a>
发送邮件拨打电话发送短信

2. 创建下载链接

<a>标签的download属性允许用户直接下载文件而不是打开它。

1
<a href="file.pdf" download>下载PDF</a>

3. 控制链接打开方式

target属性控制链接的打开方式，如在新标签页、同一窗口或指定的框架中打开，其值有_blank, _self, _parent, _top。

1
<a href="https://example.com" target="_blank">在新标签页打开</a>

在新标签页打开

4. 创建可折叠内容

利用<details>和<summary>标签可以创建简单的折叠内容区域。

1
<details>
2
  <summary>点击展开</summary>
3
  <p>这是一个可折叠的内容。</p>
4
</details>
点击展开

这是一个可折叠的内容。

5. 使用语义化标签

使用如<article>、<section>、<header>、<footer>等语义化标签，可以增强代码的可读性和可访问性，同时有利于SEO。

6. 使用<optgroup>改进下拉菜单

<optgroup>标签用于在下拉菜单中分组选项，使得菜单更有条理。

1
<select>
2
  <optgroup label="水果">
3
    <option>苹果</option>
4
    <option>香蕉</option>
5
  </optgroup>
6
  <optgroup label="蔬菜">
7
    <option>西红柿</option>
8
    <option>胡萝卜</option>
9
  </optgroup>
10
</select>

7. 改善视频展示

<video>标签的poster属性可以在视频加载前显示缩略图。

1
<video controls poster="thumbnail.jpg">
2
  <source src="movie.mp4" type="video/mp4" />
3
</video>

8. 优化视频加载

preload属性可以设置视频的预加载行为，优化加载速度。

1
<video src="movie.mp4" preload="auto">浏览器不支持视频标签。</video>

9. 支持多项选择

使用multiple属性可以在文件选择和下拉菜单中支持多项选择。

1
<input type="file" multiple />
2
<select multiple>
3
  <option value="java">Java</option>
4
  <option value="javascript">JavaScript</option>
5
</select>

10. 控制图片加载方式

loading属性可以设置图片的加载方式为懒加载（lazy）或立即加载（eager）。

1
<img src="image.jpg" loading="lazy" />

11. 确保可访问性

alt属性为图片提供描述，提高可访问性和SEO。

1
<img src="image.jpg" alt="描述图片" />

12. 使用<picture>元素实现响应式图片

<picture>元素可以根据设备的显示条件选择加载不同的图片。

1
<picture>
2
  <source media="(min-width: 650px)" srcset="img_large.jpg" />
3
  <source media="(min-width: 465px)" srcset="img_medium.jpg" />
4
  <img src="img_small.jpg" alt="描述图片" />
5
</picture>

13. 设置最大输入长度

maxlength属性用于限制用户在输入框中输入的最大字符数。

1
<input type="text" maxlength="4" />

14. 设置最小输入长度

minlength属性用于限制用户在输入框中输入的最小字符数。

1
<input type="text" minlength="3" />

15. 控制拼写检查

spellcheck属性用于启用或禁用浏览器的拼写检查功能。

1
<input type="text" spellcheck="true" />

16. 接受特定文件类型

accept属性指定文件输入框接受的文件类型。

1
<input type="file" accept="image/png, image/jpeg" />

17. 自定义滑块

使用<input>的type="range"可以创建滑块输入，允许用户在范围内选择值。

1
<input type="range" min="1" max="100" value="50" />

18. 通过<form>和<fieldset>组织表单

<fieldset>标签用于将表单元素分组，并通过<legend>定义标题。

1
<form>
2
  <fieldset>
3
    <legend>个人信息</legend>
4
    <label for="name">姓名:</label>
5
    <input type="text" id="name" name="name" />
6
  </fieldset>
7
</form>
个人信息

19. 使用<label>标签提升表单可访问性

<label>标签为表单控件提供说明，使表单更易于使用。

1
<label for="username">用户名:</label>
2
<input type="text" id="username" name="username" />

20. 使用<datalist>提供建议

<datalist>标签为<input>提供下拉建议列表。

1
<input list="browsers" />
2
<datalist id="browsers">
3
  <option value="Chrome"></option>
4
  <option value="Firefox"></option>
5
  <option value="Safari"></option>
6
  <option value="Edge"></option>
7
  <option value="Opera"></option>
8
</datalist>

21. 允许内容编辑

contenteditable属性使元素内容可编辑，方便用户直接修改文本。

1
<div contenteditable="true">此内容可编辑。</div>
此内容可编辑。

22. 提供额外信息

title属性用于在用户悬停在元素上时显示额外信息。

1
<p title="世界卫生组织">WHO</p>

WHO

23. 创建分隔线

使用<hr>标签可以创建水平分隔线，用于视觉上的内容分隔。

1
<hr />

24. 显示文本的下标和上标

<sub>和<sup>元素可以用来显示文本的下标和上标。

1
<p>H<sub>2</sub>O</p>
2
<p>E=mc<sup>2</sup></p>

H2O

E=mc2

25. 使用<base>定义基准URL

<base>标签用于定义所有相对URL的基准URL。

1
<head>
2
  <base href="https://example.com" target="_blank" />
3
</head>
4
<body>
5
  <a href="/page">页面</a>
6
</body>

26. 使用<meta>标签设置视口

<meta>标签中的viewport设置可以优化移动设备上的网页显示效果。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

27. 使用<wbr>控制长单词的换行

<wbr>标签用于在长单词的特定位置添加可选的换行点。

1
<p>
2
  这是一个长单词：su<wbr />per<wbr />ca<wbr />li<wbr />fra<wbr />gi<wbr />li<wbr />sti<wbr />cex<wbr />pi<wbr />ali<wbr />do<wbr />cious。
3
</p>

28. 使用<code>和<pre>显示代码片段

<code>标签用于内联代码，<pre>和<code>结合使用可显示多行代码片段并保持格式。

1
<pre><code>
2
function helloWorld() {
3
  console.log("Hello, World!");
4
}
5
</code></pre>

29. 使用<bdi>确保文本方向正确

<bdi>（双向隔离）标签确保文本的方向不会影响周围的内容，常用于混合语言的情况。

1
<p>用户名：<bdi>username123</bdi></p>

用户名：username123

30. 使用<noscript>为不支持JavaScript的用户提供信息

1
<noscript>你的浏览器不支持JavaScript，部分功能可能无法正常使用。</noscript>

<noscript>标签用于提供在禁用JavaScript时显示的内容。

31. 使用<b>和<strong>加粗文本

<b>和<strong>用于加粗文本，其中<strong>表示强调。

1
<p><b>粗体</b>文本</p>
2
<p><strong>重要</strong>文本</p>

粗体文本

重要文本

32. 使用<i>和<em>表示斜体和强调

<i>和<em>用于表示斜体和强调，其中<em>表示强调。

1
<p><i>斜体</i>文本</p>
2
<p><em>强调</em>文本</p>

斜体文本

强调文本

33. 使用<kbd>表示用户输入

<kbd>标签用于表示用户输入。

1
<p>请按下<kbd>Ctrl</kbd> + <kbd>C</kbd>复制文本。</p>

请按下Ctrl + C复制文本。

34. 使用<time>表示特定时间或日期

<time>标签用于表示特定的时间或日期。

1
<p>会议将于<time datetime="2024-07-19">2024年7月19日</time>举行。</p>

会议将于举行。

35. 利用<cite>引用作品标题

<cite>标签用于引用作品的标题。

1
<p>我最喜欢的小说是<cite>《百年孤独》</cite>。</p>

我最喜欢的小说是《百年孤独》。

36. 使用<meter>表示已知范围内的标量测量

<meter>标签用于表示已知范围内的标量测量，比如评分。

1
<meter value="2" min="0" max="10">2 out of 10</meter>

2 out of 10

37. 使用<progress>显示任务进度

<progress>标签用于显示任务的完成进度。

1
<progress value="70" max="100">70%</progress>

70%

38. 利用<abbr>标签显示缩写的全称

使用<abbr>标签可以为缩写添加全称的解释，当用户悬停在缩写上时会显示提示。

1
<p><abbr title="Hypertext Markup Language">HTML</abbr> 是一种标记语言。</p>

HTML 是一种标记语言。

39. <mark>标签突出显示文本

<mark>标签用于突出显示文本。

1
<p>这是一个<mark>重要</mark>的提示。</p>

这是一个重要的提示。

40. 使用<dialog>标签打开一个弹框

参考这篇文章：如何使用HTML5新标签<dialog>

总结

本文分享了40个HTML实用技巧，通过掌握这些HTML技巧，你可以显著提高网页开发效率，提升用户体验。这些技巧涵盖了从基本标签的使用到高级功能的应用，希望这些内容对你有所帮助！

美团外卖红包 饿了么红包 支付宝红包