后端开发教程 - Java、Spring Boot 实战 - msg200.com
在这篇文章中，我将分享 21 个带有代码片段的 HTML 技巧，可以提高您的编码技能。
让我们直接开始吧。🚀
创建联系链接
使用 HTML 创建可点击的电子邮件、电话和短信链接：
<!-- Email link -->
<a href="mailto:name@example.com"> Send Email </a>
<!-- Phone call link -->
<a href="tel:+1234567890"> Call Us </a>
<!-- SMS link -->
<a href="sms:+1234567890"> Send SMS </a>
创建可折叠内容
当您想要在网页中包含可折叠内容时，可以使用<details>和标签。<summary>
标签<details>为隐藏内容创建一个容器，同时<summary>标签提供一个可点击的标签来切换该内容的可见性。
<details>
<summary>Click to expand</summary>
<p>This content can be expanded or collapsed.</p>
</details>
利用语义元素
为您的网站选择语义元素而非非语义元素。它们使您的代码有意义并改善结构、可访问性和 SEO。
表单元素分组
使用<fieldset>标签将表单中的相关元素分组，并<legend>使用标签<fieldset>为标签定义标题<fieldset>。
这对于创建更高效、更易访问的表单很有用。
<form>
<fieldset>
<legend>Personal details</legend>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="contact">Contact:</label>
<input type="text" id="contact" name="contact" />
<input type="button" value="Submit" />
</fieldset>
</form>
增强下拉菜单
您可以使用<optgroup>标签将相关选项分组到<select>HTML 标签中。
当您使用大型下拉菜单或一长串选项时可以使用此功能。
<select>
<optgroup label="Fruits">
<option>Apple</option>
<option>Banana</option>
<option>Mango</option>
</optgroup>
<optgroup label="Vegetables">
<option>Tomato</option>
<option>Broccoli</option>
<option>Carrot</option>
</optgroup>
</select>
改善视频呈现
该poster属性可与<video>元素一起使用来显示图像，直到用户播放视频。
<video controls poster="image.png" width="500">
<source src="video.mp4" type="video/mp4 />
</video>
支持多项选择
您可以将multiple属性与<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"> Download PDF </a>
定义相对链接的基本 URL
您可以使用<base>标签定义网页中所有相对 URL 的基本 URL。
当您想要为网页上的所有相对 URL 创建一个共享的起点时，这非常方便，从而可以更轻松地导航和加载资源。
<head>
<base href="https://shefali.dev" target="_blank" />
</head>
<body>
<a href="/blog">Blogs</a>
<a href="/get-in-touch">Contact</a>
</body>
控制图像加载
loading元素附带的属性可<img>用于控制浏览器如何加载图像。它有三个值：“eager”、“lazy”和“auto”。
<img src="picture.jpg" loading="lazy">
管理翻译功能
您可以使用该translate属性来指定元素的内容是否应通过浏览器的翻译功能进行翻译。
<p translate="no">
This text should not be translated.
</p>
设置最大输入长度
通过使用该maxlength属性，您可以设置用户在输入字段中输入的最大字符数。
<input type="text" maxlength="4">
设置最小输入长度
通过使用该minlength属性，您可以设置用户在输入字段中输入的最小字符数。
<input type="text" minlength="3">
启用内容编辑
使用该contenteditable属性指定元素的内容是否可编辑。
它允许用户修改元素内的内容。
<div contenteditable="true">
You can edit this content.
</div>
控制拼写检查
您可以将spellcheck属性与<input>元素、可编辑内容元素和<textarea>元素一起使用以启用或禁用浏览器的拼写检查。
<input type="text" spellcheck="true"/>
确保可访问性
alt如果无法显示图像，此属性指定图像的替代文本。
始终为图像包含描述性 alt 属性以提高可访问性和 SEO。
<img src="picture.jpg" alt="Description for the image">
定义链接的目标行为
您可以使用该target属性来指定单击时链接资源的显示位置。
<!-- Opens in the same frame -->
<a href="https://shefali.dev" target="_self">Open</a>
<!-- Opens in a new window or tab -->
<a href="https://shefali.dev" target="_blank">Open</a>
<!-- Opens in the parent frame -->
<a href="https://shefali.dev" target="_parent">Open</a>
<!-- Opens in the full body of the window -->
<a href="https://shefali.dev" target="_top">Open</a>
<!-- Opens in the named frame -->
<a href="https://shefali.dev" target="framename">Open</a>
提供更多信息
title当用户将鼠标悬停在元素上时，可以使用该属性提供有关元素的附加信息。
<p title="World Health Organization">WHO</p>
接受特定文件类型
您可以使用accept属性来指定服务器接受的文件类型（仅适用于文件类型）。这与<input>元素一起使用。
<input type="file" accept="image/png, image/jpeg" />
优化视频加载
preload您可以使用元素的属性使视频文件加载更快，以实现更流畅的播放<video>。
<video src="video.mp4" preload="auto">
Your browser does not support the video tag.
</video>
今天就到这里。
我希望这有帮助。