HTML的查缺补漏（21 个容易被忽略的实用技巧）简介 HTML是构建网页的基础，掌握实用的技巧可以极大的提高开发效率

简介

HTML是构建网页的基础，掌握实用的技巧可以极大的提高开发效率。在日常开发中，一些容易被忽略的技巧却能带来意想不到的效果。接下来我将分享 21 个鲜为人知的编程技巧，帮助你提高编码水平，丰富对HTML的认知。

代码效果放在了文章的最后面！！！

创建联系方式链接

使用HTML的<a>标签，可以帮助我们创建可点击跳转的的电子邮件、电话和短信链接，我们点击后可以弹出对应的联系方式

<a href="mailto:name@example.com"> 发送电子邮件 </a>

<a href="tel:+1234567890"> 电话联系 </a>

<a href="sms:+861234567890">发送短信</a>

下载链接

我们可以使用 <a> 元素的 "download属性"来指定用户点击链接时，应该下载链接的资源。这样用户在点击后，浏览器就会自动下载对应的文件。

<a href="document.pdf" download="document.pdf"> 下载 PDF </a>

定义链接的基础URL

使用 <base> 标签可以为网页上的所有相对 URL 设置一个共同的基准 URL，这样做可以极大地简化和统一资源的管理，尤其是当你的网页资源分布在不同的目录或路径时。

注意：<base> 标签必须放在 <head> 部分中，并且一个文档中只能有一个 <base> 元素。

<head>
   <base href="https://juejin.cn/post" target="_blank" />
</head>
<body>
   <a href="/7346919387353219106"># 为什么面试官都爱问websocket？</a>
   <a href="/7346471697162649634"># 5分钟从0到1，学会webSocket的使用</a>
</body>

创建可折叠组件

当我们想要在网页上创建可折叠的内容时，可以我们使用 <details> 和 <summary> 标签。

<details> 标签可以创建一个可以展开和折叠的容器，<details> 标签用于包裹需要隐藏的内容。默认情况下，包含在 <details> 标签内的内容是不可见的，

而 <summary> 标签定义了 <details> 元素的可见标题，提供了一个可点击的标签来帮助我们切换内容的可见性。

通常<summary> 标签都会放在 <details> 标签内部，并且作为它的第一个子元素。

<details>
  <summary>点击展开</summary>
  <p>此内容可以展开或折叠。</p>
</details>

语义化标签

在编写代码时，我们应该选择使用语义化标签素。因为它们能够让提高代码的可读性、可访问性和SEO。

下面我们用分组表单标签来示例

我们可以使用 <fieldset> 标签来对表单中的相关元素进行分组，并结合 <legend> 标签为 <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>标签在 <select>标签中对相关选项进行分组。这个标签对于长列表的选项非常有用，它可以帮助用户更轻松地在下拉列表中找到他们想要的选项。

这在我们可选值数量特别多的时候特别有用

<select>
   <optgroup label="水果">
      <option>苹果</option>
      <option>香蕉</option>
      <option>芒果</option>
   </optgroup>
   <optgroup label="蔬菜">
      <option>番茄</option>
      <option>西兰花</option>
      <option>胡萝卜</option>
   </optgroup>
</select>

提高视频的展示效果

<video> 元素的 poster 属性用于指定在视频下载过程中或在用户点击播放按钮之前显示的图像，。

<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> 元素分别将文本显示为下标和上标。这在我们需要展示数学公式时特别有用，特别是2的平方这种情况

<p>这是一个<sub>下标</sub>和一个<sup>上标</sup>的例子。</p>
<p>x<sup>2</sup></p>

控制图片的加载

<img> 元素的 loading 属性可以用于控制浏览器加载图像的方式。它具有三个值：“eager”，“lazy”和“auto”

eager：浏览器会尽快加载图像，即使用户还没有滚动到图像所在的位置。
lazy：浏览器会延迟加载图像，直到用户滚动到图像所在的位置。这可以提高页面加载速度，特别是在包含大量图像的页面上。
auto：浏览器会根据用户的网络连接和设备性能来决定如何加载图像。

<img src="picture.jpg" loading="lazy">

是否允许翻译

我们可以使用 translate 属性指定元素的内容是否允许应该由浏览器的翻译功能翻译。

<p translate="no">
 China
</p>

设置最大输入长度

我们可以使用 maxlength 属性设置用户在输入框中输入的最大字符数。

<input type="text" maxlength="4">

设置最小输入长度

我们使用 minlength 属性设置用户在输入框种输入的最小字符数。

<input type="text" minlength="3">

是否允许内容编辑

我们可以使用 contenteditable 属性可以指定元素的内容是否可编辑。当他的值为"true"时，允许用户修改元素中的内容。

<div contenteditable="true">
   此内容可以编辑。
</div>

拼写检查

我们可以使用 spellcheck 属性与 <input> 元素结合使用，它可以指定元素的内容是否可以被浏览器检查拼写错误。

<input type="text" spellcheck="true"/>

是否可访问性

alt 属性为图像指定了替代文本，用于在无法显示图像的情况下显示。

<img src="picture.jpg" alt="图像说明">

指定链接的跳转行为

我们可以使用 target 属性指定点击链接时将在何处显示链接的资源。

在当前窗口或标签中打开链接

<a href="https://shefali.dev" target="_self">打开</a>

在新窗口或标签中打开

<a href="https://shefali.dev" target="_blank">打开</a>

会在父框架集中打开链接。如果当前页面是在一个框架内（例如，iframe或frameset），则链接会在父框架中打开。如果没有父框架，这个值的行为类似于 _self。

<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 属性可用于在用户将鼠标悬停在元素上时提供有关该元素的提示信息。

<p title="世界卫生组织">WHO</p>

指定接收文件类型

我们可以使用 accept 属性指定服务器接受的文件类型（仅用于文件类型）。注意我们accept 属性需要和 <input> 元素一起使用。

<input type="file" accept="image/png, image/jpeg" />

优化视频加载

我们可以使用preload 属性来指定（如视频或音频）如何在页面加载时预加载

none：不预加载媒体文件。在用户点击播放之前，不会加载媒体文件。
metadata：仅预加载媒体文件的元数据（如长度、尺寸等），而不加载媒体文件本身。
auto：页面加载时预加载整个媒体文件。这是默认行为，但如果指定了 preload 属性，最好明确指定值。

<video src="video.mp4" preload="auto">
   我们的浏览器不支持 video 标签。
</video>

HTML的查缺补漏（21 个容易被忽略的实用技巧）

简介