在写网页时，总会遇到一些看似简单却非常好用的小技巧。这些小细节往往能让你的代码更规范、更易维护，也更“专业”。今天就给你整理了 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>
而不是
用 <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
限制最少字符：minlength
让 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 小技巧，都是工作中经常会用到却容易忽略的“效率神器”。掌握它们，你写页面会更快、更加专业，也更符合现代前端开发规范。
该文章在 2026/2/24 14:42:27 编辑过
400 186 1886
