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

🕗 发布于 2024-07-22 23:42 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>

代码总结示例

jcode

学习资源

原文地址：https://blog.csdn.net/weixin_45215308/article/details/140422310

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：[k8s源码]6.reflector
下一篇：python实现发送邮件

POI操作EXCEL增加下拉框
有时候通过excel将数据批量导入到系统，而业务操作人员对于一些列不想手动输入，而是采用下拉框的方式来进行选择。可以在EXCEL中的数据有效性看到数据来源。采用隐藏sheet页的方式来进行操作。
阅读更多2024-09-20
Java企业面试题4
Error和Exception。Error指的是严重的错误，通常由JVM内部错误或者资源耗尽引起，应用程序无法处理。Exception是程序可以处理的异常情况，又分为检查型异常（checked exc
阅读更多2024-09-20
MongoDB
基于分布式文件存储的数据库由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库(nosql)之间的产品，是非关系数据库当中功能最丰富
阅读更多2024-09-20
【STM32 HAL库】OLED显示模块
本文为笔者学习 OLED 的总结，基于keysking的视频内容，如有错误，欢迎指正。
阅读更多2024-09-20
Vue3.4 中 v-model 双向数据绑定新玩法详解
defineModel 是一个新的宏,旨在简化支持 v-model 的组件的实现, 这个宏用来声明一个双向绑定 prop,下面我们就来看看他的具体使用吧
阅读更多2024-09-20
PicoQuant公司：探索铜铟镓硒（CIGS）太阳能电池技术，引领绿色能源革新
‌在这一创新科研中，德国PicoQuant公司，凭借其深厚的科技积淀与卓越的前沿技术创新能力，正积极投身于CIGS（铜铟镓硒）太阳能电池研发领域的测试技术开发中，不仅为这一高效能、环保型能源解决方案的
阅读更多2024-09-20
(栈 + 模拟) LeetCode 2390. 从字符串中移除星号
本题十分简单，大家可以作为练手！时间复杂度：O(n)；空间复杂度：O(1)
阅读更多2024-09-20
操作系统之文件系统
当访问文件时，系统先根据文件名搜索文件所在的目录文件，从该文件对应的目录项中找到文件的i结点号，根据i结点号从磁盘中将i结点信息读入内存，文件在磁盘中的地址信息都存放在i结点中
阅读更多2024-09-20
Windows10安装cuda11.3.0+cudnn8.5.0，以及创建conda虚拟环境（pytorch）
5、创建一个名为<learn>的环境，python版本为3.9，需要注意的是pytorch与python对应。根据cuda11.3.0，参照下图我选择了pytorch=1.12.0、py
阅读更多2024-09-20
有关NLog及中间件实现日志记录
NLog 是一个非常强大的日志记录库，广泛应用于 .NET 应用程序中。它支持多种日志目标（如文件、数据库、控制台、远程服务器等），并且可以根据日志级别（如 Trace、Debug、Info、Warn
阅读更多2024-09-20