21个HTML技巧你必须了解的
在这篇文章中，我将分享21个HTML技巧，包括代码片段，可以提升你的编码技能。
让我们立即开始吧。🚀
（本文视频讲解：java567.com）
创建联系链接
使用HTML创建可点击的电子邮件、电话和短信链接：
<!-- 电子邮件链接 -->
<a href="mailto:name@example.com"> 发送电子邮件 </a>
<!-- 电话呼叫链接 -->
<a href="tel:+1234567890"> 给我们打电话 </a>
<!-- 短信链接 -->
<a href="sms:+1234567890"> 发送短信 </a>
创建可折叠内容
当你想在网页上包含可折叠内容时，可以使用<details>和<summary>标签。
<details>标签创建一个包含隐藏内容的容器，而<summary>标签提供一个可点击的标签来切换该内容的可见性。
<details>
<summary>点击展开</summary>
<p>此内容可以展开或折叠。</p>
</details>
利用语义元素
为你的网站选择语义元素而不是非语义元素。它们使你的代码有意义，并改善了结构、可访问性和SEO。
分组表单元素
使用<fieldset>标签来将表单中相关的元素分组，并使用<legend>标签与<fieldset>一起为<fieldset>标签定义一个标题。
这对于创建更高效和可访问的表单非常有用。
<form>
<fieldset>
<legend>个人详细信息</legend>
<label for="firstname">名字：</label>
<input type="text" id="firstname" name="firstname" />
<label for="email">电子邮件：</label>
<input type="email" id="email" name="email" />
<label for="contact">联系方式：</label>
<input type="text" id="contact" name="contact" />
<input type="button" value="提交" />
</fieldset>
</form>
改进下拉菜单
你可以使用<optgroup>标签来将<selec\t> HTML标签中相关的选项分组。
当你使用大型下拉菜单或长列表选项时，可以使用这个功能。
<select>
<optgroup label="水果">
<option>苹果</option>
<option>香蕉</option>
<option>芒果</option>
</optgroup>
<optgroup label="蔬菜">
<option>番茄</option>
<option>西兰花</option>
<option>胡萝卜</option>
</optgroup>
</select>
改善视频呈现
可以使用poster属性与<video>元素来显示一个图像，直到用户播放视频。
<video controls poster="image.png" width="500">
<source src="video.mp4" type="video/mp4 />
</video>
支持多重选择
你可以在<input>和<select>元素中使用multiple属性，允许用户一次选择/输入多个值。
<input type="file" multiple />
<select multiple>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="typescript">TypeScript</option>
<option value="rust">Rust</option>
</select>
显示文本为下标和上标
<sub>和<sup>元素分别可用于显示文本为下标和上标。
创建下载链接
你可以使用download属性与<a>元素一起，指定当用户点击链接时，链接的资源应该被下载而不是导航到。
<a href="document.pdf" download="document.pdf"> 下载PDF </a>
为相对链接定义基础URL
你可以使用<base>标签为网页中所有相对URL定义基础URL。
当你想要为网页上所有相对URL创建一个共享的起点时，这个功能非常方便，使得导航和加载资源变得更容易。
<head>
<base href="/index" target="_blank" />
</head>
<body>
<a href="/blog">博客</a>
<a href="/get-in-touch">联系</a>
</body>
控制图像加载
<img>元素的loading属性可以用来控制浏览器如何加载图像。它有三个值：“eager”，“lazy”，和“auto”。
<img src="picture.jpg" loading="lazy">
管理翻译功能
你可以使用translate属性来指定浏览器是否应该通过浏览器的翻译功能来翻译元素的内容。
<p translate="no">
此文本不应被翻译。
</p>
设置最大输入长度
通过使用maxlength属性，你可以设置用户在输入字段中输入的最大字符数。
<input type="text" maxlength="4">
设置最小输入长度
通过使用minlength属性，你可以设置用户在输入字段中输入的最小字符数。
<input type="text" minlength="3">
启用内容编辑
使用contenteditable属性来指定元素的内容是否可编辑。
它允许用户修改元素内的内容。
<div contenteditable="true">
你可以编辑这个内容。
</div>
控制拼写检查
你可以在<input>元素、可编辑内容的元素和<textarea>元素中使用spellcheck属性来启用或禁用浏览器的拼写检查。
<input type="text" spellcheck="true"/>
确保可访问性
alt属性为图像指定一个替代文本，如果图像无法显示。
始终为图像包含描述性的alt属性，以提高可访问性和SEO。
<img src="picture.jpg" alt="图像的描述">
为链接定义目标行为
你可以使用target属性来指定当点击链接时，链接的资源将在何处显示。
<!-- 在同一框架中打开 -->
<a href="/index" target="_self">打开</a>
<!-- 在新窗口或标签中打开 -->
<a href="/index" target="_blank">打开</a>
<!-- 在父框架中打开 -->
<a href="/index" target="_parent">打开</a>
<!-- 在窗口的完整体中打开 -->
<a href="/index" target="_top">打开</a>
<!-- 在命名框架中打开 -->
<a href="/index" target="framename">打开</a>
提供额外信息
title属性可用于在用户悬停在元素上时提供有关元素的额外信息。
<p title="世界卫生组织">WHO</p>
接受特定文件类型
你可以使用accept属性来指定服务器接受的文件类型（仅适用于文件类型）。这与<input>元素一起使用。
<input type="file" accept="image/png, image/jpeg" />
优化视频加载
你可以通过在<video>元素中使用preload属性来使视频文件加载更快，以实现更流畅的播放。
<video src="video.mp4" preload="auto">
您的浏览器不支持video标签。
</video>
今天就到这里了。
希望对你有所帮助。
感谢阅读。
（本文视频讲解：java567.com）
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix