此属性类似于async在脚本上使用该属性 。加载图像所需的时间不会改。分享一些有趣的，你从不使用的html属性( 三 )。" />

江苏龙网

  1. 主页 > 生活百科 > >

分享一些有趣的，你从不使用的html属性( 三 )

html属性


<img src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-24/"/images/example.png" alt="Example" decoding="async">此属性类似于async在脚本上使用该属性 。加载图像所需的时间不会改变，但其“解码”的方式（因此其内容在视口中变得可见）由decoding属性决定 。
值为：

  • sync 同步解码图像，一般浏览器都是这样做的 。
  • async 异步解码图像以避免延迟其他内容的呈现 。
  • auto 默认允许浏览器使用自己的内置解码方法 。
如果您对解码图像的概念感到好奇，该规范有[一个很好的解释]，并不难理解 。
元素 的loading属性您可能已经知道，图像元素现在可以包含一个loading属性，将延迟加载作为一项功能放入浏览器中，这是我们多年来使用 JavaScript 解决方案所做的事情 。但不要忘记该loading属性也可以用于<iframe>元素：
<iframe src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-24/"/page.html" width="300" height="250" loading="lazy">复制
与图像一样，该loading属性接受eager（默认浏览器行为）或 的值lazy，这会延迟 iframe 内容的加载，直到 iframe 即将进入视口 。此属性的唯一缺点是 Firefox 不支持在 iframe 上使用它（尽管 Firefox 确实支持loading图像） 。
表单字段的form属性在大多数情况下，您会将表单输入和控件嵌套在<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”之类的东西 。尽管如此，如果您的设计或布局需要无父表单字段，请记住它是有用的 。
删除/插入的citeAnddatetime属性我在处理块引用时已经提到cite过，但是这个属性也可以用于用<del>and<ins>元素标记的删除和插入 。此外，两个元素都可以包含一个datetime属性 。
<delcite="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><inscite="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 删除或插入的日期 。
在我的例子中，我使用了一些文本的例子，描述了一个在 Firefox 中需要供应商前缀的 CSS 属性 。这可能是一篇旧博客文章 。删除前缀后，我可以使用and元素来delete获取旧文本和insert新文本 。然后我可以使用该属性来引用解决问题的错误报告 。<del>``<ins>``cite
元素 的label属性最后，这最后一个有点像老歌，但因为它不经常被使用，也许你甚至不知道它的存在 。这是一个元素和一个属性的组合 。
<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>


推荐阅读


上一篇：web前端移动端最流行的网页布局技术：flexbox弹性布局学习详解

下一篇：项目管理还只会用甘特图？这7种软件让你拉开差距