21 个你必须掌握的 HTML 实用技巧

七夏 · 2026-3-3 18:17:48

在写网页时，总会遇到一些看似简单却非常好用的小技巧。这些小细节往往能让你的代码更规范、更易维护，也更“专业”。今天就给你整理了 21 个超实用的 HTML 技巧，全部附带代码示例，简单易懂，写项目随用随拽！

创建可点击的邮箱 / 电话 / 短信链接

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

复制代码

使用 <details> 做可折叠内容

<details>
<summary>点击展开</summary>
<p>这里是折叠内容。</p>
</details>

复制代码

用语义化标签优化结构与 SEO
更推荐

<header> <main> <footer> <section> <article>

复制代码

而不是

<div id="header">

复制代码

用 <fieldset> 和 <legend> 优化表单结构

<form>
<fieldset>
<legend>个人信息</legend>
<label>名字：</label>
<input />
<label>邮箱：</label>
<input type="email" />
<input type="button" value="提交">
</fieldset>
</form>

复制代码

<optgroup> 分组你的下拉选项

<select>
<optgroup label="水果">
<option>苹果</option>
<option>香蕉</option>
</optgroup>
<optgroup label="蔬菜">
<option>胡萝卜</option>
</optgroup>
</select>

复制代码

视频封面图：poster

<video controls poster="cover.png">
<source src="v.mp4" type="video/mp4">
</video>

复制代码

支持多选：multiple

<input type="file" multiple />
<select multiple>
<option>Java</option>
<option>JavaScript</option>
</select>

复制代码

下标 / 上标：<sub> <sup>

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

复制代码

创建下载链接

<a href="file.pdf" download="资料.pdf">点击下载</a>

复制代码

<base> 设置统一基础路径

<head>
<base href="https://example.com" target="_blank">
</head>

复制代码

控制图片加载方式：loading

<img src="pic.jpg" loading="lazy">

复制代码

控制浏览器自动翻译：translate

<p translate="no">TechX Pro</p>

复制代码

限制最大字符：maxlength

<input maxlength="4">

复制代码

限制最少字符：minlength

<input minlength="3">

复制代码

让 HTML 可编辑：contenteditable

<div contenteditable="true">你可以编辑我</div>

复制代码

控制浏览器拼写检查：spellcheck

<input spellcheck="true">

复制代码

必备无障碍：图片 alt

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

复制代码

<a> 的 target 打开方式

<a target="_blank">新标签打开</a>
<a target="_self">当前页面</a>
<a target="_parent">父框架</a>

复制代码

使用 title 显示悬停提示

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

复制代码

限制上传文件类型：accept

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

复制代码

预加载视频：preload

<video src="video.mp4" preload="auto"></video>

复制代码

这些 HTML 小技巧，都是工作中经常会用到却容易忽略的“效率神器”。掌握它们，你写页面会更快、更加专业，也更符合现代前端开发规范。如果你觉得这套技巧有帮助，欢迎收藏或分享给朋友，让更多人一起进步！

21 个你必须掌握的 HTML 实用技巧

回复

相关帖子

浏览过的版块

晨曦初露

QQ用户

有头有脸

快捷访问

附加功能

关于我们

关注我们