7 个少见但有用的 HTML 属性

简介: HTML 是 web 开发的基石。然而很多急于速成的开发者对其浅尝即止,立马去学习 CSS, JS 或其他,错失了其潜力。

image.png


一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第13天,点击查看活动详情


本文是译文,采用意译。


HTMLweb 开发的基石。然而很多急于速成的开发者对其浅尝即止,立马去学习 CSS, JS 或其他,错失了其潜力。

下面是很多初学者对 HTML 不熟悉的属性。


也许拥有几年的开发者都不知道。说的就是俺 💨


1. Multiple



multiple 属性是一个布尔值,允许用户在 <input> 标签操作,<input> 标签的类型 typefile 或者 email。当然,你也可以用在 <select> 标签。


对于 email 类型的 <input>,添加上 multiple 属性,你输入的邮箱值需要用 , 分隔开,内容不允许有空格。


对于 file 类型的 <input>,你可以多选文件上传。


<input type="file" multiple />
复制代码


2. Accept



<input> 元素有 accept 属性,它允许你指明上传文件 file 的类型。


你需要通过 , 来分割文件类型。


<input type="file" accept=".png, .jpg" />
复制代码


当然,你还可以使用它上传音频或视频。


3. Contenteditable



contenteditable 是一个全局的属性(对于所有的 HTML 元素都适用),它可以使得 HTML 的可被用户编辑。


需要注意的是,它仅对可见内容和DOM的内容进行更改。


<div contenteditable="true">I'm a cool editable div ;)</div>
复制代码


image.png


当然,如果你想使得整个文档的内容都可以编辑,你可以直接使用 document.designMode = "on",关闭编辑则使用

document.designMode = "off"。如果你想保存整个文档或者某个编辑内容,可以直接通过 DOM 操作完成。


4. Spellcheck



spellcheck 也是一个全局的属性,可以检验 HTML 内容是否有拼写的语法错误,你可以用在 input 或其他元素上。


⚠️注意:通常不检查不可编辑元素的拼写错误,即使 spellcheck 被设置为 true 并且浏览器支持检查。


<!-- 不检查 -->
<p spellcheck="true">
Thanks furr checkinng my speling :)</p>
<!-- 检查 -->
<p contenteditable="true" spellcheck="true">
Thanks furr checkinng my speling :)</p>
复制代码


5. Translate



translate 告诉浏览器指定的内容是否应该被翻译。


比如:你想阻止谷歌自动翻译你公司名称或者品牌名称。


<footer><p translate="no">LearnPine</p></footer>
复制代码


6. Poster



当视频正在加载中或者当用户开始播放视频前,我们可以用 poster 属性设定指定的视频海报。


如果 poster 未指定图片,则视频的第一帧可用之后作为海报显示。


<video controls 
src="https://bit.ly/3nWh78w"
poster="posterImage.png">
</video>
复制代码


7. Download



download 属性结合 <a> 元素,告诉浏览器下载的 URL,而不是导航到它,提示用户将其下载到本地。


你还可以命名文件。


<a href="index.html" download="fileName">Download me :)</a>
复制代码


url 指向 video,image 资源,不会直接下载,会进行跳转



相关文章
WK
|
28天前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
46 1
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表,包括`class`、`id`、`style`、`title`等,用于定义元素的样式、唯一标识、额外信息等。此外,还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等,分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。
HTML 属性
HTML属性为元素提供额外信息,格式为name=&quot;value&quot;,置于开始标签内。如&lt;a href=&quot;http://www.runoob.com&quot;&gt;,其中href为属性名,URL为值。属性值应加引号,推荐使用小写。
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性详解
HTML5引入了多种新的表单属性,使表单创建与验证更加便捷高效。新增的输入类型包括`email`、`url`、`tel`等,常用属性有`placeholder`、`required`等。表单元素如`&lt;form&gt;`可设置提交方法和目标URL,`&lt;button&gt;`及`&lt;input type=&quot;submit&quot;&gt;`用于提交。新元素`&lt;datalist&gt;`和`&lt;output&gt;`提供更多功能。HTML5还提供了内置表单验证机制,增强用户体验。
WK
|
28天前
|
移动开发 UED HTML5
HTML5新增了哪些表单属性
HTML5新增的表单属性包括:autocomplete(启用或禁用自动完成建议)、autofocus(自动聚焦)、form(关联表单外的表单元素)、formaction等重写版本(自定义提交行为)、height/width(设置图像输入尺寸)、list(指定可选列表)、min/max/step(设置数值范围)、multiple(多选文件/选项)、pattern(正则表达式验证)、placeholder(占位符提示)和required(必填校验)。这些新功能显著提升了表单的灵活性和用户体验,使数据输入更加准确有效。
WK
19 1
|
2月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
163 1
|
2月前
|
移动开发 数据管理 HTML5
Twaver-HTML5基础学习(22)层管理容器(LayerBox)、告警管理容器(AlarmBox)、列管理容器(ColumnBox)、属性管理容器(PropertyBox)
本文介绍了Twaver HTML5中的多种管理容器:层管理容器(LayerBox)、告警管理容器(AlarmBox)、列管理容器(ColumnBox)和属性管理容器(PropertyBox)。文章解释了这些容器的作用、如何获取它们,并提供了一些基本的操作方法。这些容器分别用于管理图层、告警、表格列和属性对象,是TWaver中数据管理和组织的重要部分。
34 1
|
19天前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
78 0
|
2月前
|
前端开发 JavaScript
html图像属性的高级用法
在HTML中,通过结合CSS、JavaScript及其他HTML元素,可以实现图像属性的高级用法,例如响应式图像、懒加载、图像映射、CSS滤镜、SVG图像、图像作为背景以及使用JavaScript动态更改图像。
|
2月前
|
前端开发
html图像属性详解
在 HTML 中,使用 `&lt;img&gt;` 标签插入图像。主要属性包括:`src` 指定图像路径,`alt` 提供替代文本,`width` 和 `height` 设置尺寸,`title` 显示额外信息,`loading` 控制加载方式(如 `lazy` 延迟加载),`class` 和 `style` 用于样式化,`usemap` 定义图像映射,`ismap` 表示服务器端映射。这些属性可组合使用以实现复杂效果。