phpclownfish技巧_分享一些有趣的你从不该用的html属性

一月份，麦迪逊卡纳[问她的推特粉丝

今年你想要学习或更深入地学习哪些措辞/技能？

typescript、next.js、react、graphql、solidity、node，这几个是哪个呢

- 麦迪逊卡纳 (@Madisonkanna)

2022 年 1 月 3 日

但是我的答案很大略：HTML。
而且我一点也没有讽刺或揶揄。
当然，我非常清楚在哪些情形下利用哪些标签，以及如何利用我的 HTML 大部分具有语义性和可访问性。

但是我确信我已经忘却了一大堆较少利用的属性，并且可能有一大堆我乃至不知道存在的属性。
这篇文章是我研究的结果，我希望你会创造个中的一些对你有用，由于你在接下来的几个月里构建 HTML 页面。

该enterkeyhint属性是一个全局属性，可运用于已contenteditable设置为的表单控件或元素true。
此属性可帮助利用虚拟屏幕键盘的移动设备上的用户。

<input type="text" enterkeyhint="done">

复制

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

您可以看到这些“提示”如何对用户有用。
用户是否正在实行一系列操作？他们在提交信息吗？他们在保存设置吗？根据他们正在做什么，您可以自定义提示以匹配您的运用程序的需求。

您可以通过在移动设备上访问下面的信息 CodePen 演示来考试测验这个。

<main> <h2>Using the <code>enterkeyhint</code> Attribute</h2> <p>View this demo on a mobile device. Note the text in the "enter" key on your mobile device's virtual keyboard.</p> <input type="text" enterkeyhint="Next"></main>

body { font-family: Arial, sans-serif; font-size: 20px; padding: 0 20px;}main { text-align: center; margin: 0 auto; max-width: 800px;}p { text-align: left; padding: 0 20px;}code { color: firebrick;}

在我的 iOS 设备上，回车键的文本会随着键的颜色而变革，详细取决于值，如下面的屏幕截图所示。
这可能会有所不同，详细取决于用户的设备。

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

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

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

备用样式表功能通过两个属性启用：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 的“页面样式”选项选择它们时，备用样式表才会运用。
您可以通过利用 Firefox 或其他兼容浏览器访问以下 CodePen 来考试测验上述示例：

下面的屏幕截图显示了 Firefox 中的样式表选项：

如前所述，此功能在 Firefox 中有效，但我无法让它在任何时候基于 Chromium 浏览器中事情。
MDN关于备用样式表的文章说它可以在其他浏览器中利用扩展启用，但我找不到可以实行此操作的活动扩展。

我敢肯定你<blockquote>常常利用这个元素。
您可以在没有属性的情形下直策应用它，但您也可以选择利用该cite属性。
这是一个引用描述利用citeon的 MDN 文章的示例<blockquote>：

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#attr-cite"> A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.</blockquote>

由于我上面的地块引用来阐明了什么是 MDN 文章cite，因此我将指向页面的 URL 设置为cite值。

您可以看到这是多么有用，由于它将引用和引用的来源包装在一个元素中。
但请把稳HTML 规范中的进一步阐明：

用户代理可能许可用户关注此类引用链接，但它们紧张用于私人用场（例如，通过做事器端脚本网络有关站点利用引用的统计信息），而不是供读者利用。

当然，相同的观点也适用于用于内联引用cite的元素上。
<q>

<ol>常常利用利用该元素的有序列表。
一些鲜为人知的功能许可您自定义涌如今此类列表中的编号行为：

如您所见，利用纯 HTML 的有序列表比您常日习气的要灵巧得多。

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

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

下面的 CodePen 演示添加了一些 JavaScript，因此您可以交互地切换reversed属性。

请把稳，列表本身保持不变，但数字会发生变革。
如果您正在探求一种反转内容的方法，请记住这一点。
这是您可以利用 JavaScript、CSS 或直接在 HTML 源代码中实行的操作。

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

<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和属性以及单个列表项上的属性。
该属性接管表示编号类型的五个单字符值（、、、、 ）之一。
start``value``type``a``A``i``I``1

利用以下交互式演示进行考试测验：

利用单选按钮选择该type属性的五个值之一。
然后考试测验利用Toggle Reversed按钮反转列表。
如您所见，除了有序列表的默认行为之外，还有很多可能性！

就像网络上无处不在的链接一样，拥有一个使链接更加强大的属性总是很好的。
该download属性是几年前添加到规范中的，它许可您指定单击链接时该当下载而不是访问该链接。

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

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

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

作为涉及此属性的额外技巧，您可以将此功能与一些 JavaScript 结合起来，为用户创建一种下载他们自己创建的内容的办法。

元素 的decoding属性

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

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

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

值为：

如果您对解码图像的观点感到好奇，该规范有[一个很好的阐明]，并不难明得。

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

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

复制

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

在大多数情形下，您会将表单输入和控件嵌套在<form>元素中。
但是，如果您的运用程序或布局须要一些不同的东西，您可以选择将表单输入放在您想要的任何位置，并将其与任何<form>元素干系联——纵然不是元素的父元素。

<form id="myForm" action="/form.php"> <input id="name"> <button type="submit"></form><input type="email" form="myForm">

正如您在上面看到<input>的，表单外部的电子邮件的form属性设置为myForm，该属性设置为与表单的 相同的值id。
submit您可以利用此属性和表单的 id将表单控件（包括按钮）与文档中的任何表单干系联。

您可以利用此演示页面进行考试测验。
表单利用 GET 要求提交，因此您可以在 URL 的查询字符串中看到提交的值。
在该页面上，“评论”框位于<form>元素之外。

我对这个属性的唯一抱怨是它可能该当被授予一个更独特的名称，大概像“formowner”之类的东西。
只管如此，如果您的设计或布局须要无父表单字段，请记住它是有用的。

我在处理块引用时已经提到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>

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

在我的例子中，我利用了一些文本的例子，描述了一个在 Firefox 中须要供应商前缀的 CSS 属性。
这可能是一篇旧博客文章。
删除前缀后，我可以利用and元向来delete获取旧文本和insert新文本。
然后我可以利用该属性来引用办理问题的缺点报告。
<del>``<ins>``cite

末了，这末了一个有点像老歌，但由于它不常常被利用，大概你乃至不知道它的存在。
这是一个元素和一个属性的组合。

<select>如果下拉选项中包含一长串项目，则可以利用<optgroup>元素及其关联label属性将选项分组为可见种别：

<select> <option>--Your Favourite Animal--</option> <optgroup label="Birds"> <option>Blue Jay</option> <option>Cardinal</option> <option>Hummingbird</option> </optgroup> <optgroup label="Sea Creatures"> <option>Shark</option> <option>Clownfish</option> <option>Whale</option> </optgroup> <optgroup label="Mammals"> <option>Lion</option> <option>Squirrel</option> <option>Quokka</option> </optgroup></select>

您可以利用以下 CodePen 来试用一个示例：

请把稳，每个<optgroup>都有一个label为每个组定义标题的属性——但不能选择标题。
作为额外提示，您还可以利用disabledan 上的属性来禁用下拉菜单<optgroup>该部分中的所有选项。
<select>

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

这两个属性都可以与元素一起定义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属性中指定的其他媒体功能。

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

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