7个你可能不知道但有用的HTML属性

web前端开发

共 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前端开发




浏览 21
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报