分享一些有趣的,你从不使用的html属性

快速总结 ? 在这篇文章中,Louis Lazaris 描述并演示了一些有趣的 html 属性,您可能没有听说过也可能没有听说过,并且可能会发现它们非常有用,可以在您的项目中亲自使用 。
一月份,麦迪逊卡纳[问她的推特粉丝

今年你想要学习或更深入地学习哪些语言/技术?
typescript、next.js、react、graphql、solidity、node,这几个是哪个呢
- 麦迪逊卡纳 (@Madisonkanna)
2022 年 1 月 3 日
【分享一些有趣的,你从不使用的html属性】但是我的答案很简单:HTML 。而且我一点也没有讽刺或嘲弄 。当然,我非常清楚在哪些情况下使用哪些标签,以及如何使用我的 HTML 大部分具有语义性和可访问性 。
但是我确信我已经忘记了一大堆较少使用的属性,并且可能有一大堆我甚至不知道存在的属性 。这篇文章是我研究的结果,我希望你会发现其中的一些对你有用,因为你在接下来的几个月里构建 HTML 页面 。
enterkeyhint`虚拟键盘 的属性该enterkeyhint属性是一个全局属性,可应用于已contenteditable设置为的表单控件或元素true 。此属性可帮助使用虚拟屏幕键盘的移动设备上的用户 。
<input type="text" enterkeyhint="done">复制
enterkeyhint接受七个可能值之一,这些值将确定用户在他的“输入”键上看到的内容:
  • enter,
  • done,
  • go,
  • next,
  • previous,
  • search,
  • send.
您可以看到这些“提示”如何对用户有用 。用户是否正在执行一系列操作?他们在提交信息吗?他们在保存设置吗?根据他们正在做什么,您可以自定义提示以匹配您的应用程序的需求 。
您可以通过在移动设备上访问下面的信息 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 设备上,回车键的文本会随着键的颜色而变化,具体取决于值,如下面的屏幕截图所示 。这可能会有所不同,具体取决于用户的设备 。
分享一些有趣的,你从不使用的html属性

文章插图
 

分享一些有趣的,你从不使用的html属性

文章插图
 
只是强调一下,这个属性不接受自定义值;该值需要是上面显示的七个之一 。无法识别的值将默认为输入键的设备默认为文本 。
样式表上的title属性在为本文进行研究时,这对我来说是全新的,可能是此列表中最有趣的一个 。作为一些背景知识,如果您不知道,Firefox 有一个选项可让您选择查看页面时要使用的样式表 。通常,此功能显示两个选项:“基本页面样式”和“无样式”,如下图所示在我的 windows 机器上 。
分享一些有趣的,你从不使用的html属性

文章插图
 
这使您可以快速测试禁用样式时页面的外观,还允许您使用任何备用样式表查看页面 。
备用样式表功能通过两个属性启用:title属性和rel=alternate应用于<link>元素,如下面的代码所示:
<link href=https://www.isolves.com/it/cxkf/yy/html5/2022-04-24/"main.css" rel="stylesheet" title="Default">在这种情况下,我的“默认”样式将自动应用,但仅限于我使用 Firefox 的“页面样式”选项选择它们时,备用样式表才会应用 。您可以通过使用 Firefox 或其他兼容浏览器访问以下 CodePen 来尝试上述示例:
分享一些有趣的,你从不使用的html属性

文章插图
 
下面的屏幕截图显示了 Firefox 中的样式表选项:
分享一些有趣的,你从不使用的html属性

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


推荐阅读