- 作者：老汪软件技巧
- 发表时间：2024-09-08 00:03
- 浏览量：
这篇文章将分享 21 个 HTML 小技巧，并附带代码片段，帮助你提升编码技能。
创建联系链接
使用 HTML 创建可点击的电子邮件、电话和短信链接：
<a href="mailto:name@example.com"> 发送电子邮件 a>
<a href="tel:+1234567890"> 联系我们 a>
<a href="sms:+1234567890"> 发送短信 a>
创建可折叠内容
当你想在网页上包含可折叠内容时，可以使用 和 标签。
标签创建了一个隐藏内容的容器，而 标签提供了一个可点击的标签来切换该内容的可见性。
<details>
<summary>点击展开summary>
<p>此内容可以展开或折叠。p>
details>
使用语义化元素
为你的网站选择语义化元素而不是非语义化元素。它们使你的代码更有意义，并改进结构、可访问性和 SEO。
分组表单元素
使用 标签将表单中的相关元素分组，并使用 标签与 一起为 标签定义标题。
这对于创建更高效和更易访问的表单非常有用。
<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>
增强下拉菜单
可以使用 标签在 HTML 标签中对相关选项进行分组。
这可以在你处理大型下拉菜单或很长的选项列表时使用。
<select>
<optgroup label="水果">
<option>苹果option>
<option>香蕉option>
<option>芒果option>
optgroup>
<optgroup label="蔬菜">
<option>番茄option>
<option>西兰花option>
<option>胡萝卜option>
optgroup>
select>
改进视频展示
poster 属性可以与 元素一起使用，以便在用户播放视频之前显示图片。
<video controls poster="image.png" width="500">
src="video.mp4" type="video/mp4 />
video>
支持多选
可以使用 和 元素的 multiple 属性，允许用户一次选择/输入多个值。
type="file" multiple />
<select multiple>
<option value="java">Javaoption>
<option value="javascript">JavaScriptoption>
<option value="typescript">TypeScriptoption>
<option value="rust">Rustoption>
select>
将文本显示为下标和上标
和 元素可以分别用来将文本显示为下标和上标。
创建下载链接
可以使用 元素的 download 属性来指定，当用户点击链接时，链接的资源应该被下载而不是被导航。
href="document.pdf" download="document.pdf"> 下载 PDF
为相对链接定义基本 URL
可以使用 标签为网页中所有相对 URL 定义基本 URL。
当你想为网页上的所有相对 URL 创建一个共享的起点时，这很有用，它可以更容易地导航和加载资源。
<head>
<base href="https://shefali.dev" target="_blank" />
head>
<body>
<a href="/blog">博客a>
<a href="/get-in-touch">联系我们a>
body>
控制图片加载
元素的 loading 属性可以用来控制浏览器如何加载图片。它有三个值：“eager”、“lazy” 和 “auto”。
src="picture.jpg" loading="lazy">
管理翻译功能
可以使用 translate 属性来指定元素的内容是否应该被浏览器的翻译功能翻译。
translate="no">
这段文本不应该被翻译。
设置最大输入长度
使用 maxlength 属性，可以设置用户在输入字段中输入的最大字符数。
type="text" maxlength="4">
设置最小输入长度
使用 minlength 属性，可以设置用户在输入字段中输入的最小字符数。
type="text" minlength="3">
启用内容编辑
使用 contenteditable 属性来指定元素的内容是否可编辑。
它允许用户修改元素中的内容。
contenteditable="true">
你可以编辑此内容。
控制拼写检查
可以使用 元素、可编辑内容元素和 元素的 spellcheck 属性来启用或禁用浏览器对它们的拼写检查。
type="text" spellcheck="true"/>
确保可访问性
alt 属性指定了当图片无法显示时图片的备用文本。
始终为图片包含描述性的 alt 属性，以改善可访问性和 SEO。
src="picture.jpg" alt="图片描述">
定义链接的目标行为
可以使用 target 属性来指定当点击链接时链接的资源将在哪里显示。
<a href="https://shefali.dev" target="_self">打开a>
<a href="https://shefali.dev" target="_blank">打开a>
<a href="https://shefali.dev" target="_parent">打开a>
<a href="https://shefali.dev" target="_top">打开a>
<a href="https://shefali.dev" target="framename">打开a>
提供附加信息
title 属性可以用来在用户将鼠标悬停在元素上时提供有关该元素的附加信息。
title="世界卫生组织">WHO
接受特定文件类型
可以使用 accept 属性来指定服务器接受的文件类型（仅用于文件类型）。这与 元素一起使用。
type="file" accept="image/png, image/jpeg" />
优化视频加载
可以使用 元素的 preload 属性来使视频文件加载更快，以便实现更流畅的播放。
<video src="video.mp4" preload="auto">
你的浏览器不支持 video 标签。
video>
