HTML Tips（HTML 技巧）
Category（分类）: HTML Status: 未知
作者（Author）：Marko Denic 发布日期（Published）：April 12, 2020
English: In this article, I will share with you some very useful HTML tips. Enjoy!
中文： 本文分享一些非常实用的 HTML 技巧，希望对你有所帮助。
English: This post may be updated regularly with new tips.
中文： 本文可能会持续补充新的技巧。需要注意的是，浏览器实现和最佳实践会随时间变化，使用前应结合当前标准和浏览器支持情况验证。
But first, what is HTML?（首先，什么是 HTML？）
English: Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
中文： 超文本标记语言（HyperText Markup Language，HTML）是用于描述 Web 文档结构的标准标记语言。CSS（Cascading Style Sheets）可以负责样式，JavaScript 可以负责交互和动态行为。
HTML 主要描述内容的语义和结构，例如标题、段落、表单、链接和媒体。HTML 本身不是编程语言，也不负责完成复杂的业务逻辑。
Let’s start!（开始吧！）
1. The loading="lazy" attribute（loading="lazy" 属性）
English: You can use the
loading="lazy"attribute to defer loading an image until it is close to the user’s viewport.中文： 可以使用
loading="lazy"延迟加载距离当前视口较远的图片，浏览器会根据自身策略决定具体加载时机。
<img
src="image.jpg"
width="800"
height="600"
loading="lazy"
alt="Alternative text"
>
注意：
lazy不是“滚动到图片位置才加载”的绝对保证，浏览器可能提前加载；- 首屏主图、LCP（Largest Contentful Paint）候选图片通常不应懒加载；
- 建议提供
width和height，或使用aspect-ratio，减少布局偏移（CLS）； alt应描述图片内容，装饰性图片可以使用alt=""。
2. Email, call, and SMS links（邮件、电话和短信链接）
HTML 可以使用特殊协议创建邮件、电话和短信链接：
<a
href="mailto:hello@example.com?subject=Hello%20world&body=This%20is%20a%20message"
>
Send us an email（发送邮件）
</a>
<a href="tel:+8613800138000">
Call us（拨打电话）
</a>
<a href="sms:+8613800138000?body=Hello%20world">
Send us a message（发送短信）
</a>
原文中的 {email}、{subject} 和 {content} 只是占位符，不能原样使用，需要替换为真实数据并进行 URL 编码。
注意：
mailto:会依赖用户设备上的邮件客户端；tel:和sms:的行为取决于设备和操作系统；subject和body等参数需要进行 URL 编码；- 不要把未经编码的用户输入直接拼接到 URL 中。
3. Ordered lists and the start attribute（有序列表的 start 属性）
English: Use the
startattribute to change the starting number of an ordered list.中文： 可以使用
start属性修改有序列表的起始编号。
<ol start="5">
<li>第五项</li>
<li>第六项</li>
<li>第七项</li>
</ol>
start 应该使用整数。它只改变列表编号的起点，不会改变列表项在 HTML 中的顺序。
原文配图：
4. The meter element（meter 元素）
English: You can use the
<meter>element to display a scalar measurement within a known range. No JavaScript or CSS is required for its basic presentation.中文：
<meter>用于表示已知范围内的标量数值，例如磁盘使用率、评分或温度。它的基础显示不需要 JavaScript 或 CSS。
<label for="storage">Storage used（存储使用率）</label>
<meter
id="storage"
min="0"
max="100"
value="72"
low="60"
high="85"
>
72%
</meter>
meter 的常用属性：
min：允许的最小值，默认通常为0；max：允许的最大值，默认通常为1；value：当前值；low：低于该值时表示较低区间；high：高于该值时表示较高区间；optimum：表示理想值。
不要用 <meter> 表示任务完成进度。下载进度、上传进度等应使用 <progress>：
<label for="download">Download progress（下载进度）</label>
<progress id="download" max="100" value="45">45%</progress>
5. Native HTML Search（HTML 原生搜索建议）
<datalist> 可以为输入框提供浏览器原生建议，不需要 JavaScript：
<label for="technology">Technology（技术）</label>
<input
id="technology"
name="technology"
list="technology-options"
autocomplete="off"
>
<datalist id="technology-options">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Web Development">
<option value="Accessibility">
</datalist>
datalist 提供的是建议，不会强制用户只能选择列表中的值。如果业务要求只能选择固定选项，应使用 <select> 或在提交时进行验证。
6. The fieldset element（fieldset 元素）
English: Use the
<fieldset>element to group several related controls and labels within a web form.中文： 使用
<fieldset>将一组相关的表单控件和标签组合起来，通常配合<legend>描述这组控件的主题。
<fieldset>
<legend>Contact preference（联系方式偏好）</legend>
<label>
<input type="radio" name="contact" value="email">
Email（邮件）
</label>
<label>
<input type="radio" name="contact" value="phone">
Phone（电话）
</label>
</fieldset>
fieldset 不只是视觉上的边框，还能为辅助技术提供表单分组语义。不要为了布局而滥用它；没有表单分组语义时，应使用普通容器元素。
7. window.opener
当页面使用 target="_blank" 打开新页面时，新页面可能通过 window.opener 访问打开它的原页面。这可能带来安全和性能问题。
推荐显式添加 rel="noopener"：
<a
href="https://markodenic.com/"
target="_blank"
rel="noopener"
>
Marko's website
</a>
如果还不希望新页面获得来源地址，可以使用：
<a
href="https://example.com/"
target="_blank"
rel="noopener noreferrer"
>
Open external page（打开外部页面）
</a>
现代浏览器对部分 _blank 链接已经默认采用类似 noopener 的行为，但显式声明更清晰，也能兼容旧环境。noreferrer 还会影响 Referer 请求头，不应在不需要时盲目添加。
8. The <base> element（<base> 元素）
English: The
<base>element can define the default target and base URL for links in a document.中文：
<base>可以设置文档中相对 URL 的基准地址，或者设置链接和表单的默认打开目标。
例如，让没有显式设置 target 的链接默认在新标签页打开：
<head>
<base target="_blank">
</head>
也可以设置相对 URL 的基准地址：
<head>
<base href="https://example.com/docs/">
</head>
注意：
- 一个文档通常只应使用一个
<base>元素； <base>应放在<head>的前面部分；- 它会影响页面中所有相对 URL，包括链接、图片、脚本、样式表和表单；
- 设置
target="_blank"会让所有未指定目标的链接打开新标签页，可能影响用户体验； - 使用
<base href>时要检查 CSS、JavaScript、图片和锚点链接的解析结果。
9. Favicon cache busting（网站图标缓存更新）
English: To request a new favicon version, you can append a version query string such as
?v=2to the URL.中文： 为了让浏览器和 CDN 识别出网站图标的版本变化，可以在 URL 后添加版本查询参数。
<link rel="icon" href="/favicon.ico?v=2">
它可以帮助生产环境获取新的 favicon，但是否真正重新请求还取决于浏览器、HTTP 缓存和 CDN 配置。更换图标时，也应正确配置缓存响应头。
10. The spellcheck attribute（spellcheck 属性）
English: Use the
spellcheckattribute to indicate whether the element may be checked for spelling errors.中文： 使用
spellcheck属性提示浏览器是否可以检查元素中的拼写错误。
<textarea spellcheck="true">This text may be checked.</textarea>
<input
type="text"
spellcheck="false"
autocomplete="off"
aria-label="Code input"
>
spellcheck 是提示，不是强制命令，最终行为由浏览器和操作系统决定。该属性通常适用于可编辑文本内容，不适合密码、代码或不希望浏览器修改的内容。
11. Native HTML sliders（HTML 原生滑块）
English: Use
<input type="range">to create a slider.中文： 使用
<input type="range">创建原生滑块控件。
<label for="volume">Volume（音量）</label>
<input
id="volume"
name="volume"
type="range"
min="0"
max="100"
value="50"
step="1"
>
建议为滑块提供：
- 关联的
<label>； - 明确的
min、max和value； - 合理的
step； - 显示当前值的文本，尤其是音量、亮度等用户需要精确理解的场景。
原生控件的外观和清除按钮一样，可能因浏览器和操作系统不同而变化。
12. HTML Accordion（HTML 原生折叠面板）
English: Use the
<details>element to create a native disclosure widget.中文： 使用
<details>和<summary>创建原生的展开/折叠内容。
<details>
<summary>What is HTML?（什么是 HTML？）</summary>
<p>HTML describes the structure and meaning of web content.</p>
</details>
需要多个互斥展开项时，可以使用 name 属性（浏览器支持情况应单独确认）：
<details name="faq">
<summary>Question 1</summary>
<p>Answer 1</p>
</details>
<details name="faq">
<summary>Question 2</summary>
<p>Answer 2</p>
</details>
details 是原生 disclosure 组件，不等同于所有复杂的 Accordion 交互。需要高度定制的动画、键盘行为或状态管理时，应结合无障碍要求进行实现和测试。
13. The <mark> tag（<mark> 标签）
English: Use the
<mark>element to highlight text that is relevant in the current context.中文： 使用
<mark>标记当前上下文中与用户相关或需要强调的文本。
<p>
Search result: <mark>Service Worker</mark> is mentioned here.
</p>
mark 表示语义上的突出显示，不只是为了获得黄色背景。如果只是装饰性高亮，应使用 CSS；如果高亮内容需要被辅助技术明确读出，还应根据实际场景补充合适的文本语义。
原文配图：
14. The download attribute（download 属性）
English: The
downloadattribute suggests that the linked resource should be downloaded instead of navigated to.中文：
download属性可以提示浏览器将链接资源下载下来，而不是直接导航到资源地址。
<a href="/files/report.pdf" download>
Download report（下载报告）
</a>
<a href="/files/report.pdf" download="annual-report.pdf">
Download with a filename（使用指定文件名下载）
</a>
注意：
download对跨域资源不一定生效，通常需要同源、blob:或data:URL；- 服务器响应头可能影响最终行为；
- 用户代理和安全策略可能忽略下载提示；
- 不要用它下载用户没有权限访问的资源。
15. Performance tip: WebP and responsive images（性能技巧：WebP 与响应式图片）
English: WebP can reduce image size, but the best format depends on the image and browser support.
中文： WebP 通常可以减少图片体积，但是否更小取决于图片内容和压缩参数。也可以根据项目需求比较 AVIF、WebP、JPEG 和 PNG。
<picture>
<source srcset="logo.avif" type="image/avif">
<source srcset="logo.webp" type="image/webp">
<img
src="logo.png"
width="320"
height="120"
alt="Company logo"
>
</picture>
<picture> 会按照浏览器支持情况和媒体条件选择合适的资源，img 是必要的回退内容。生产环境还应考虑：
- 使用合适的图片尺寸，不要只依赖 CSS 缩小超大图片；
- 设置
width和height或宽高比，减少布局偏移； - 仅对非首屏图片使用懒加载；
- 使用
srcset和sizes提供响应式图片； - 为内容图片提供准确的
alt。
16. Video thumbnail: the poster attribute（视频封面：poster 属性）
English: Use the
posterattribute to specify an image shown before the video starts playing or before the first video frame is available.中文： 使用
poster指定视频播放前显示的封面图片。
<video
controls
poster="/images/video-poster.jpg"
preload="metadata"
width="640"
height="360"
>
<source src="/videos/demo.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
poster 只是视频的占位封面，不是视频内容本身。视频是否预加载由 preload、浏览器策略和网络环境共同决定。
17. The input type="search"（input type="search"）
English: Use
type="search"for search inputs. Some browsers and operating systems provide a native clear control.中文： 搜索框可以使用
type="search"，部分浏览器和操作系统会提供原生清除按钮，但不能假设所有环境都有相同的外观和行为。
<form role="search" action="/search" method="get">
<label for="site-search">Search（搜索）</label>
<input
id="site-search"
name="q"
type="search"
autocomplete="off"
>
<button type="submit">Search（搜索）</button>
</form>
不要只依赖浏览器的清除按钮。如果业务需要统一的清空行为，应自行提供可访问的清除按钮，并确保键盘和屏幕阅读器都能使用。
原文配图：
18. The <pre> tag（<pre> 标签）
English: Use the
<pre>element to present preformatted text with its whitespace and line breaks preserved.中文： 使用
<pre>展示预格式化文本，HTML 中的空格和换行通常会被保留。
<pre>
This spacing
and these line breaks
are preserved.
</pre>
展示代码时通常配合 <code>：
<pre><code>const message = 'Hello HTML'</code></pre>
长行内容可能造成横向溢出，可以设置：
pre {
max-width: 100%;
overflow-x: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
如果代码需要语法高亮，还需要使用专门的高亮工具；pre 和 code 本身不会自动完成语法高亮。
错误修正与使用建议（Corrections and practical notes）
原文整体内容适合作为 HTML 入门技巧列表，但以下结论不能绝对化：
loading="lazy"不是精确的滚动触发器；mailto:、tel:和sms:依赖设备和系统支持；<meter>表示范围测量，任务进度应使用<progress>；<datalist>是输入建议，不等于强制选项；_blank的noopener在现代浏览器中部分情况下已经默认启用，但显式声明仍然更清晰；<base>会影响所有相对 URL，使用前必须确认页面资源路径；- favicon 查询参数只是缓存版本技巧，不是缓存控制的完整替代方案；
spellcheck是浏览器提示，不保证一定进行拼写检查；download对跨域资源可能不生效；- WebP 不一定对所有图片都比其他格式更小；
input type="search"的原生清除按钮不是所有浏览器都一致支持；<pre>保留空白，但长内容仍然需要处理横向溢出。
参考资料（References）
- 原文作者（Author）：Marko Denic
- 原文页面（Original article）：HTML Tips
- MDN：
loading属性 - MDN：
meter元素 - MDN：
datalist元素 - MDN：
fieldset元素 - MDN：
base元素 - MDN：
details元素 - MDN：
download属性 - MDN：
picture元素 - MDN：
pre元素