[quote]在写网页时，总会遇到一些看似简单却非常好用的小技巧。这些小细节往往能让你的代码更规范、更易维护，也更“专业”。今天就给你整理了 21 个超实用的 HTML 技巧，全部附带代码示例，简单易懂，写项目随用随拽！[/quote]创建可点击的邮箱 / 电话 / 短信链接
[code]<!-- 邮箱 -->
<a href="mailto:name@example.com">发送邮件</a>
<!-- 电话 -->
<a href="tel:+1234567890">拨打电话</a>
<!-- 短信 -->
<a href="sms:+1234567890">发送短信</a>[/code]
使用 <details> 做可折叠内容
[code]<details>
<summary>点击展开</summary>
<p>这里是折叠内容。</p>
</details>[/code]
用语义化标签优化结构与 SEO
更推荐
[code]<header> <main> <footer> <section> <article>[/code]而不是
[code]<div id="header">[/code]
用 <fieldset> 和 <legend> 优化表单结构
[code]<form>
<fieldset>
<legend>个人信息</legend>
<label>名字：</label>
<input />
<label>邮箱：</label>
<input type="email" />
<input type="button" value="提交">
</fieldset>
</form>[/code]
<optgroup> 分组你的下拉选项
[code]<select>
<optgroup label="水果">
<option>苹果</option>
<option>香蕉</option>
</optgroup>
<optgroup label="蔬菜">
<option>胡萝卜</option>
</optgroup>
</select>[/code]
视频封面图：poster
[code]<video controls poster="cover.png">
<source src="v.mp4" type="video/mp4">
</video>[/code]
支持多选：multiple
[code]<input type="file" multiple />
<select multiple>
<option>Java</option>
<option>JavaScript</option>
</select>[/code]
下标 / 上标：<sub> <sup>
[code]H<sub>2</sub>O
E = mc<sup>2</sup>[/code]
创建下载链接
[code]<a href="file.pdf" download="资料.pdf">点击下载</a>[/code]
<base> 设置统一基础路径
[code]<head>
<base href="https://example.com" target="_blank">
</head>[/code]
控制图片加载方式：loading
[code]<img src="pic.jpg" loading="lazy">[/code]
控制浏览器自动翻译：translate
[code]<p translate="no">TechX Pro</p>[/code]
限制最大字符：maxlength
[code]<input maxlength="4">[/code]
限制最少字符：minlength
[code]<input minlength="3">[/code]
让 HTML 可编辑：contenteditable
[code]<div contenteditable="true">你可以编辑我</div>[/code]
控制浏览器拼写检查：spellcheck
[code]<input spellcheck="true">[/code]
必备无障碍：图片 alt
[code]<img src="img.jpg" alt="图片描述">[/code]
<a> 的 target 打开方式
[code]<a target="_blank">新标签打开</a>
<a target="_self">当前页面</a>
<a target="_parent">父框架</a>[/code]
使用 title 显示悬停提示
[code]<p title="世界卫生组织">WHO</p>[/code]
限制上传文件类型：accept
[code]<input type="file" accept="image/png, image/jpeg">[/code]
预加载视频：preload
[code]<video src="video.mp4" preload="auto"></video>[/code]
这些 HTML 小技巧，都是工作中经常会用到却容易忽略的“效率神器”。掌握它们，你写页面会更快、更加专业，也更符合现代前端开发规范。如果你觉得这套技巧有帮助，欢迎收藏或分享给朋友，让更多人一起进步！