前端程序员不可忽略的 11 个有用的 HTML 属性
1. multiple
此属性允许用户输入多个值。 您可以将 multiple 属性与 标签和
在
|
1 2 3 4 5 6 7 |
> > |
使用 multiple 属性进行文件输入
通过对文件输入使用 multiple 属性,您可以选择多个文件(通过按住 Shift 或 Ctrl 键)。
| 1 | ="file" multiple> |
使用 multiple 属性进行电子邮件输入
通过对电子邮件输入使用 multiple 属性,您可以输入以逗号分隔的电子邮件地址列表。 将从列表中的每个地址中删除所有空格。
| 1 | ="email" multiple> |
2.contenteditable
您可以使用 contenteditable 属性使网页上的 HTML 内容可编辑。 这是一个全局属性,即它对所有 HTML 元素都是通用的。
|
1 2 3 |
="true"> |
3.spellcheck
spellcheck 属性指定是否可以检查元素的拼写错误。 您可以对
|
1 2 3 |
="true" spellcheck="true"> |
4.download
您可以使用下载属性下载资源。 download 属性告诉浏览器下载指定的 URL 而不是导航到它。 您可以将下载属性与 标签和 标签一起使用。
注意:下载属性仅适用于同源 URL。 它遵循同源策略的规则。
| 1 | ="xyz.png" download="myImage">下载> |
5. accept
标签的 accept 属性指定用户可以上传的文件类型。 您可以指定一个或多个文件类型的逗号分隔列表作为其值。
接受音频文件
| 1 | ="file" id="audioFile" accept="audio/*"> |
接受视频文件
| 1 | ="file" id="videoFile" accept="video/*"> |
接受图像文件
| 1 | ="file" id="imageFile" accept="image/*"> |
接受 Microsoft Word 文件
|
1 2 |
="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> |
接受 PNG 或 JPEG 文件
| 1 | ="file" id="imageFile" accept=".png, .jpg, .jpeg"> |
接受 PDF 文件
| 1 | ="file" id="pdfFile" accept=".pdf"> |
6. translate
translate 属性告诉浏览器在页面本地化时该元素是否应该被翻译。 它可以有 2 个值:“是”或“否”。
|
1 2 3 |
="no"> |
7.poster
poster 属性用于在视频下载或用户播放视频之前显示图像。
注意:如果您不指定任何内容,则在第一帧可用之前不会显示任何内容。 当第一帧可用时,它显示为海报帧。
|
1 2 3 4 |
8.inputmode
inputmode 属性指示浏览器在用户选择任何 input 或 textarea 元素时显示哪个键盘。 此属性接受各种值:
None
| 1 | ="text" inputmode="none" /> |
Numeric
| 1 | ="text" inputmode="numeric" /> |
Tel
| 1 | ="text" inputmode="tel" /> |
Decimal
| 1 | ="text" inputmode="decimal" /> |
| 1 | ="text" inputmode="email" /> |
URL
| 1 | ="text" inputmode="url" /> |
Search
| 1 | ="text" inputmode="search" /> |
9. pattern
元素的模式属性允许您指定一个正则表达式,元素的值将根据该正则表达式进行验证。 您可以将模式属性与多种输入类型一起使用,例如文本、日期、搜索、URL、电话、电子邮件和密码。
|
1 2 3 |
> |
10.autocomplete
autocomplete 属性指定浏览器是否应根据用户输入自动完成输入。 您可以将 autocomplete 属性用于多种输入类型,例如文本、搜索、URL、电话、电子邮件、密码、日期选择器、范围和颜色。 您可以将此属性与 元素或