这篇文章中,描述并演示了一些有趣的 HTML 属性,您可能听说过也可能没有听说过,并且可能会发现它们非常有用,可以在您的项目中亲自使用。
有次和公司大佬闲余时间进行讨论时,说到了一个问题:
今年你很高兴学习或更深入地学习哪些语言/技术?
我的:typescript、next.js、react、graphql、solidity、node
他的答案很简单:HTML。而且我一点也没有讽刺或嘲弄。当然,我非常清楚在哪些情况下使用哪些标签,以及如何使我的 HTML 大部分具有语义性和可访问性。
但是我确信我已经忘记了一大堆较少使用的属性,并且可能有一大堆我甚至不知道存在的属性。这篇文章是我学习的结果,我希望你会发现其中的一些对你有用,因为大部分初学者在接下来的几个月里正在构建 HTML 页面。
iOS 13.7+,以及Chrome77+新支持了一个HTML属性enterkeyhint,可以修改软键盘中的enter键,也就是回车键的文案或者UI。
该HTML属性的兼容性如下图所示:
enterkeyhint接受七个可能值之一,这些值将确定用户在他的“输入”键上看到的内容:
enter | 表示回车,多出现在<textarea>文本域等需要多行输入的场景中。 |
go | 表示前往,, 意思是把用户带到他们输入的文本的目标处。 |
next | 表示下一项,通常会移动到下一个输入项那里。 |
previous | ‘previous’表示上一个,通常会移动到上一个输入项那里。 |
search | ‘search’表示搜索,通常用在搜索行为中。 |
send | ‘send’表示发,通常用在文本信息的发送上。 |
done | ‘done’表示完成,表示没有更多内容输入,输入结束。 |
只是强调一下,这个属性不接受自定义值;该值需要是上面显示的七个之一。无法识别的值将默认为输入键的设备默认文本。
这对我来说是全新的,可能是此列表中最有趣的一个。作为一些背景知识,如果您不知道,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>这个标签可以将其包起来的文字,全部往右缩排。而且加一组标签,往右缩排一单位,加两组标签,往右缩排两单位,依此类推。
现在我们来看看长文本的引用,还有和p标签的对比,效果如图:
<ol>经常使用使用该元素的有序列表。一些鲜为人知的功能允许您自定义出现在此类列表中的编号行为:
如您所见,使用纯 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 href="/example.pdf" download>Download File</a>
如果没有值,该download属性会强制下载链接页面。或者,您可以提供一个值,浏览器将其用作下载资源的建议文件名。
在研究这个标签时,这对我来说是另一篇全新的文章——而且在规范中似乎相当新。将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图像)。
我在处理块引用时已经提到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>
对于每个元素,这两个属性代表的内容如下:
通过 <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 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。
这是我在研究本文时的另一对新属性,它们在规范中也是相对较新的。
这两个属性都可以与元素一起定义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 属性,请随时在评论中告诉我。
Reset 对象
在 HTML 表单中 <input type="reset"> 标签每出现一次,一个 Reset 对象就会被创建。
当重置按钮被点击,包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML value 属性或 JavaScript 的 defaultValue 属性指定。
重置按钮在重置表单之前触发 onclick 句柄,并且这个句柄可以通过返回 fasle 来取消。
您可以通过遍历表单的 elements[] 数组来访问某个重置按钮,或者通过使用document.getElementById()。
Reset 对象属性
W3C: W3C 标准。
属性 | 描述 | W3C |
---|---|---|
disabled | 设置或返回重置按钮是否应被禁用。 | Yes |
form | 返回一个对包含此重置按钮的表单对象的引用。 | Yes |
name | 设置或返回重置按钮的名称。 | Yes |
type | 返回重置按钮的表单元素类型。 | Yes |
value | 设置或返回重置按钮上显示的文本。 | Yes |
标准属性和事件
Reset 对象同样支持标准的 属性 和 事件。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
lement的el-transfer穿梭框很好用,但是总有满足不了业务的需求的时候,比如要修改el-transfer穿梭框的默认按钮颜色,如下图
一般看到这样的需求,我首先会去element的官网看看这个el-transfer穿梭框有没有提供相应的参数来实现,结果去看一下发现没有,只有可以自定义按钮文案,却没有自定义按钮的颜色或样式。怎么办?只好自己去研究默认按钮颜色的css和html是怎么写,然后自己写css进行覆盖默认的样式。
经过我的研究,发现俩个按钮ccs和html一模一样,但是我只需要修改第一个按钮的颜色。所以想到用css的:nth-of-type(n)选择器,这个选择器可以匹配属于父元素的特定类型的第 N 个子元素的每个元素。也就是我可以用:nth-of-type(1)选到第一个按钮,然后可以写css样式改变颜色,具体代码如下:
.el-transfer__button:nth-of-type(1).el-button--primary {
// 写你覆盖样式
}
最终代码如下:
*请认真填写需求信息,我们会在24小时内与您取得联系。