这篇文章中，描述并演示了一些有趣的 HTML 属性，您可能听说过也可能没有听说过，并且可能会发现它们非常有用，可以在您的项目中亲自使用。

有次和公司大佬闲余时间进行讨论时，说到了一个问题：

今年你很高兴学习或更深入地学习哪些语言/技术？

我的：typescript、next.js、react、graphql、solidity、node

他的答案很简单：HTML。而且我一点也没有讽刺或嘲弄。当然，我非常清楚在哪些情况下使用哪些标签，以及如何使我的 HTML 大部分具有语义性和可访问性。

但是我确信我已经忘记了一大堆较少使用的属性，并且可能有一大堆我甚至不知道存在的属性。这篇文章是我学习的结果，我希望你会发现其中的一些对你有用，因为大部分初学者在接下来的几个月里正在构建 HTML 页面。

enterkeyhint虚拟键盘 的属性

iOS 13.7+，以及Chrome77+新支持了一个HTML属性enterkeyhint，可以修改软键盘中的enter键，也就是回车键的文案或者UI。

该HTML属性的兼容性如下图所示：

enterkeyhint接受七个可能值之一，这些值将确定用户在他的“输入”键上看到的内容：

只是强调一下，这个属性不接受自定义值；该值需要是上面显示的七个之一。无法识别的值将默认为输入键的设备默认文本。

<link>标签的title属性

这对我来说是全新的，可能是此列表中最有趣的一个。作为一些背景知识，如果您不知道，Firefox 有一个选项可让您选择查看页面时要使用的样式表。通常，此功能显示两个选项：“基本页面样式”和“无样式”，如下图所示。

这使您可以快速测试禁用样式时页面的外观，还允许您使用任何备用样式表查看页面。

备用样式表功能通过两个属性启用：title属性和rel=alternate应用于<link>元素，如下面的代码所示：

<link href="main.css" rel="stylesheet" title="Default">
<link href="contrast.css" rel="alternate stylesheet" title="High Contrast">
<link href="readable.css" rel="alternate stylesheet" title="Readable">

在这种情况下，我的“默认”样式将自动应用，但仅当我使用 Firefox 的“页面样式”选项选择它们时，备用样式表才会应用。

<blockquote>标签定义及用法

<blockquote>标签定义块引用。

<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

<blockquote></blockquote>这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。

现在我们来看看长文本的引用，还有和p标签的对比，效果如图：

自定义有序列表的属性<ol>

<ol>经常使用使用该元素的有序列表。一些鲜为人知的功能允许您自定义出现在此类列表中的编号行为：

• 属性，以相反的顺序对reversed项目进行编号（从高到低，而不是默认的从低到高）；
• 属性，定义从start哪个数字开始；
• 属性，定义是type使用数字、字母还是罗马数字；
• 属性，用于在value特定列表项上指定自定义编号。

如您所见，使用纯 HTML 的有序列表比您通常习惯的要灵活得多。

该reversed属性是一个有趣的属性，因为它实际上并没有反转列表本身的内容；它只会反转每个列表项旁边的数字。

<ol reversed>
    <li>List item...</li>
    <li>List item...</li>
    <li>List item...</li>
</ol>

上面，我还提到了其他三个属性。让我们将它们合并到列表中，看看如何使用它们：

<ol reversed start="20" type="1">
    <li>Typee: A Peep at Polynesian Life (1846)</li>
    <li>Omoo: A Narrative of Adventures in the South Seas (1847)</li>
    <li>Mardi: and a Voyage Thither (1849)</li>
    <li>Redburn: His First Voyage (1849)</li>
    <li value="100">White-Jacket; or, The World in a Man-of-War (1850)</li>
    <li>Moby-Dick; or, The Whale (1851)</li>
    <li>Pierre; or, The Ambiguities (1852)</li>
    <li>Isle of the Cross (1853 unpublished, and now lost)</li>
</ol>

请注意，已添加的type和属性以及单个列表项上的属性。该属性接受表示编号类型的五个单字符值（、、、、 ）之一，效果如图：

<a>标签的download属性

<a href="/example.pdf" download>Download File</a>

如果没有值，该download属性会强制下载链接页面。或者，您可以提供一个值，浏览器将其用作下载资源的建议文件名。

<img>标签的decoding属性

在研究这个标签时，这对我来说是另一篇全新的文章——而且在规范中似乎相当新。将decoding属性添加到图像元素可为浏览器提供图像解码提示。

<img src="/images/example.png" alt="Example" decoding="async">

此属性类似于async在脚本上使用该属性。加载图像所需的时间不会改变，但其“解码”的方式（因此其内容在视口中变得可见）由decoding属性决定。

值为：

• sync 同步解码图像，一般浏览器都是这样做的。
• async 异步解码图像以避免延迟其他内容的呈现。
• auto 默认允许浏览器使用自己的内置解码方法。

<iframe>标签 的loading属性

您可能已经知道，图像元素现在可以包含一个loading属性，该属性将延迟加载作为一项功能放入浏览器，这是我们多年来使用 JavaScript 解决方案所做的事情。但不要忘记该loading属性也可以用于<iframe>元素：

<iframe src="/page.html" width="300" height="250" loading="lazy">

与图像一样，该loading属性接受eager（默认浏览器行为）或 的值lazy，这会延迟 iframe 内容的加载，直到 iframe 即将进入视口。此属性的唯一缺点是 Firefox 不支持在 iframe 上使用它（尽管 Firefox 确实支持loading图像）。

删除/插入的citeAnddatetime属性

我在处理块引用时已经提到cite过，但是这个属性也可以用于用<del>and<ins>元素标记的删除和插入。此外，两个元素都可以包含一个datetime属性。

<del
  cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
  datetime="2020-07-23"
>Firefox doesn't support CSS's standard <code>appearance</code> property, so you can only use it prefixed.</del>

<ins          
  cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
  datetime="2020-07-23"
>The <code>appearance</code> property, previously only available prefixed in Firefox, can now be used in all modern browers unprefixed.</ins>

对于每个元素，这两个属性代表的内容如下：

• cite 指向资源的 URL，该资源解释了删除或插入内容的原因。
• datetime 删除或插入的日期。

HTML <optgroup> 标签

通过 <optgroup> 标签把相关的选项组合在一起：

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

用于预加载响应式图像的imagesizes和imagesrcset属性

这是我在研究本文时的另一对新属性，它们在规范中也是相对较新的。

这两个属性都可以与元素一起定义rel=preload，as如下<link>所示：

<link rel="preload"
  as="image"
  imagesrcset="images/example-480.png 480w,
  images/example-800.png 800w,
    images/example.png 2000w"
  imagesizes="(max-width: 600px) 480px,
  (max-width: 1000px) 800px,
    1000px"
  src="images/example.png"
  alt="Example Image">

这里的使用rel=preload通知浏览器我们希望指定的资源优先加载，因此它们不会被脚本和样式表之类的东西阻塞。该as属性指定所请求内容的类型。

您可以使用href属性以及preload和预加载常规图像as。但最重要的是，您可以使用imagesrcsetandimagesizes属性，就像我在上面的代码中所做的那样。

这允许您预加载正确的图像，具体取决于视口的大小或您在imagesizes属性中指定的其他媒体功能。

除了我已经详细描述和演示的属性之外，您可能还想了解其他一些属性，我将在这里简要提及：

• crossorigin可以应用于多个元素的属性，包括<audio>、<img>、<link>、<script>和<video>，为跨域资源共享（CORS）提供支持；
• HTML属性；<dfn><abbr>
• HTML的新disablepictureinpicture属性；<video>
• HTML的integrity属性，帮助浏览器验证资源没有被不当操作；
• HTML的disabled属性<fieldset>，轻松同时禁用多个表单元素；
• 电子邮件和文件输入的multiple属性。

如果您使用过本文中提到的任何属性，或者如果您知道在您的项目中使用过的另一个 HTML 属性，请随时在评论中告诉我。

个开发工具插件，可以理解为 tailwindcss 的小程序版本。

weapp-tailwindcss 简介

weapp-tailwindcss 是一系列专门为小程序开发而生的插件，主要解决在小程序中使用 tailwindcss 的问题，提升开发效率的全方面解决方案。

weapp-tailwindcss 官网

本质上它是一个转义器，负责把 tailwindcss 中所采集的类名，以及生成的结果，转化成小程序中可以编译的方式。

小程序版 tailwindcss

tailwindcss 是一款原子化的样式生成器，特点是所写即所得，可读性很好，能够自动摇树优化没有用到的样式，也能通过插件和预设提炼项目公共的样式部分，在前端领域非常受欢迎。weapp-tailwindcss 项目的作者是 sonofmagic ，他在2021 年接触到了 tailwindcss 后非常喜欢，并且开始在很多项目中使用。

后来他发现在小程序中没法直接使用像 tailwindcss 这样的 web 库，所以就产生了开发 weapp-tailwindcss 的想法，发布后也很受欢迎，截止本文发文的2024年2月中旬，已经得到了 833 Star！

技术特性

• 不但可以处理和转义 wxml/wxss , 像微信小程序中的 js 和 wxs 产物也能处理；
• 提供多种使用方式，包括 webpack/vite/gulp 和 nodejs api，项目集成很方便；
• 生态以及解决方案丰富，提供大量现成模板，可以利用许多 tailwindcss 现有的生态来构建小程序；
• 高效的解析和缓存机制，即使项目很大，热更新响应时间也是毫秒级；
• 贴合 tailwindcss 的设计思路，智能提示友好。

weapp-tailwindcss 文档

为什么在小程序中不能直接使用tailwindcss？

在国内的各家小程序开发中，由于小程序本身有自己的一套 独特的 技术规范标准，会导致我们无法使用 web 中很多的特性，也没办法直接使用像 tailwindcss 这种 for web 的工具库。

今天向大家推荐的 weapp-tailwindcss ，就是一款能让你在小程序开发中使用 tailwindcss 大部分特性的开发插件。目前支持所有使用 webpack 和 vite 的主流小程序框架，以及使用 webpack / gulp 的原生小程序打包方式。

简单地说，我们可以很容易在目前市面上的各个框架，或者原生开发中集成 tailwindcss。

开发上手

使用 weapp-tailwindcss 之前需要先安装好 tailwindcss，官网有详细的教程，这里不赘述了。开发支持很全面，几乎涵盖了所有的开发小程序的方式：

• uni-app vue2 webpack
• uni-app vue3 vite
• uni-app HbuilderX 使用方式
• Taro v3 (所有框架)
• Rax (react)
• mpx (原生增强)
• 原生开发(打包方案)
• Nodejs API

uni-app HbuilderX 使用方式

我开发小程序使用的是 HbuilderX，默认的需要配置 tailwind.config.js 文件：

// tailwind.config.js
const path = require("path");

const resolve = (p) => {
  return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 注意此处，一定要 `path.resolve` 一下, 传入绝对路径
  // 如果有其他目录，比如 components，也必须在这里，添加一下
  content: ["./index.html", "./pages/**/*.{html,js,ts,jsx,tsx,vue}"].map(resolve),
  // ...
  corePlugins: {
    preflight: false,
  },
};

同时配置 vite.config.js ：

import path from "path";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from "weapp-tailwindcss/vite";
// 注意： 打包成 h5 和 app 都不需要开启插件配置
const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app";
const WeappTailwindcssDisabled = isH5 || isApp;

const resolve = (p) => {
  return path.resolve(__dirname, p);
};

export default defineConfig({
  plugins: [uni(), uvwt({
    rem2rpx: true,
    disabled: WeappTailwindcssDisabled
  })],
  css: {
    postcss: {
      plugins: [
        require("tailwindcss")({
          // 注意此处，手动传入 `tailwind.config.js` 的绝对路径
          config: resolve("./tailwind.config.js"),
        }),
        require("autoprefixer"),
      ],
    },
  },
});

注意两个配置文件都需要传入 tailwindcss 的绝对路径。配置完成后，就可以在页面文件中使用 tailwindcss，最后在 uni-app 插件市场安装「Tailwind CSS语言服务」这个插件，就可以开启智能语法提示，可以大大提高开发效率。

视频教程

作者还录制的详细的视频教程，帮助大家快速上手。

免费开源说明

weapp-tailwindcss 是一款免费开源的小程序开发插件工具，源码基于 MIT 开源协议托管在 Github 上，我们可以免费下载来使用，也可以用在商业项目上。

↓↓点击查看本次分享的网站。

weapp-tailwindcss - 在开发小程序中使用 tailwindcss 的最佳方式，免费开源，支持国内各家主流小程序平台｜那些免费的砖