有关html的基础知识（那些你从不使用的且有趣的HTML属性）

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

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

今年你很高兴学习或更深入地学习哪些语言/技术？我的：typescript、next.js、react、graphql、solidity、node

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

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

enterkeyhint虚拟键盘 的属性

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

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

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

enter	表示回车，多出现在<textarea>文本域等需要多行输入的场景中。
go	表示前往，, 意思是把用户带到他们输入的文本的目标处。
next	表示下一项，通常会移动到下一个输入项那里。
previous	‘previous’表示上一个，通常会移动到上一个输入项那里。
search	‘search’表示搜索，通常用在搜索行为中。
send	‘send’表示发，通常用在文本信息的发送上。
done	‘done’表示完成，表示没有更多内容输入，输入结束。

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

<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 属性，请随时在评论中告诉我。

,