7个你可能不知道但有用的HTML属性
共 2362字,需浏览 5分钟
·
2021-03-29 10:35
英文 | https://javascript.plainenglish.io/7-useful-html-attributes-that-you-probably-dont-know-661784fe21e
翻译 | web前端开发
HTML是每个Web开发人员都必须具备的技能。如果你不了解这种标记语言,你就不能称自己为Web开发人员。
你在网络上看到的每个网站都是使用HTML构建的,因为它具有许多有用而强大的功能,作为开发人员,你可以从中受益以创建网页。话虽如此,HTML还具有可以附加到元素或标签的属性,以便向HTML元素添加某些交互功能。
在本文中,我们将为你提供一些你可能尚未听说过的有用的HTML属性的列表。因此,让我们开始吧。
1、accept
如你所知,HTML允许你创建输入,你可以在其中上传文件。除此之外,HTML属性accept还用于上传输入,以指定文件类型或用户可以上传到服务器的唯一格式。
例如,我们可以接受仅上传jpg并上传png到我们的服务器。
示例如下:
<input type =“file” accept =“.jpg,.png” >
你可以在Codepen中查看它的线上效果:https://codepen.io/MehdiAoussiad/pen/jOrZVeo
2、multiple
multiple 属性可以附加到标记<input>和<select>中。它允许用户输入多个值。
例如,我们还可以允许用户上载多个文件。
示例如下:
<input type =“ file” multiple />
3、contenteditable
该属性contenteditable用于使HTML内容在网页上可编辑。基本上,它允许用户编辑具有contenteditable属性的页面元素。
示例如下:
<div>
<h1> Employees: </h1>
<ul contenteditable="true">
<li> 1. John </li>
<li> 2. Mehdi </li>
<li> 3. James </li>
</ul>
</div>
上面的示例使我们可以编辑网页上的列表。
你可以在Codepen中查看它的线上效果:
https://codepen.io/MehdiAoussiad/pen/VwKzmKL
4、Download
download属性在HTML中指定当用户单击链接时将下载链接。此属性允许用户从你的网站下载文件。
示例如下:
<div>
<a href="index.html" download="fileName">下载此文件</a>
</ div>
但你只需要在属性上指定文件名,指定download文件的href路径。
你可以在Codepen中查看示例效果:
https://codepen.io/MehdiAoussiad/pen/eYBWopo
5、translate
translate属性用于告诉内容是否应该翻译。可以将其附加到所有HTML标记,因为它是全局属性。
例如,每当将页面翻译成另一种语言时,就可以在文本徽标上使用此属性,以保持相同的品牌名称。
这是代码示例:
<p translation =“ no” > Mehdi </ p>
6、poster
Poster属性用于在HTML视频下载时或用户单击播放按钮之前显示图像。
代码示例如下:
<video poster="picture.jpeg" controls>
<source src="file.mp4" type="file/mp4">
<source src="file.ogg" type="file/ogg">
</video>
在你单击播放按钮之前,图像将显示为视频的缩略图。
7、pattern
通过使用pattern属性,你可以轻松地将正则表达式添加到表单内的输入元素。
我们还可以将另一个title属性与pattern属性一起使用,以帮助用户在输入上编写正确形式的文本。
代码示例如下:
<form >
<label for="input">Country Code:</label>
<input type="text" id="input" pattern="[A-Za-z]{3}" title="Three letters country code.">
<input type="submit">
</form>
你可以在Codepen中查看线上效果:
https://codepen.io/MehdiAoussiad/pen/xxRaPZW
结论
这些HTML属性非常有用并且非常重要。它们可以使你向HTML元素添加额外的有用功能。这就是为什么我鼓励你从其他资源中了解更多属性的原因。
感谢您阅读本文,希望对你有用。
本文完〜
学习更多技能
请点击下方web前端开发