每位高级Web工程师都应掌握的24个强大HTML属性!(一)

149 阅读10分钟

HTML属性有很多,除了一些基本属性外,还有许多有用且特别强大的属性;

本文将介绍24个强大的HTML属性,这些属性能让你的网站更具动态性和交互性,使用户感到更舒适和快乐。

一起来探索这24个强大的HTML属性吧!

1. Accept

Accept属性用于指定浏览器可以处理的MIME类型的列表。

添加图片注释,不超过 140 字(可选)

MIME类型是用于识别文档类型的标准。例如,text/html 表示一个HTML文档,image/jpeg 表示一个JPEG图像,依此类推。

通过在HTTP请求头中包含Accept属性,浏览器可以告诉服务器它可以接受哪些MIME类型的响应。基于这些信息,服务器可以选择最适当的响应类型并返回给浏览器。Accept属性的值是MIME类型的逗号分隔列表,可以使用通配符来表示一类MIME类型,例如 text/* 表示所有文本类型。

2. Autofocus

Autofocus属性用于在页面加载时自动将焦点设置到指定的元素上。

添加图片注释,不超过 140 字(可选)

Autofocus 属性可以应用到各种HTML元素上,例如文本框、按钮、下拉列表等。 在HTML5中,Autofocus 属性可以省略属性值,表示将焦点设置到第一个带有Autofocus属性的元素上。

当页面加载时,如果有带有 Autofocus 属性的元素,浏览器会自动将光标聚焦到该元素上,这样用户可以直接与元素交互,无需手动点击或使用 Tab 键切换焦点。

3. Input mode

Input mode 属性是用于指定文本框中输入内容类型的属性。

添加图片注释,不超过 140 字(可选)

它可以帮助浏览器更好地优化输入体验,例如在移动设备上自动弹出适当的虚拟键盘。

  • text: 默认值,表示输入任何文本。
  • none: 表示不需要输入。
  • tel: 表示输入电话号码。
  • url: 表示输入URL地址。
  • email: 表示输入电子邮件地址。
  • numeric: 表示输入数字。
  • decimal: 表示输入带小数点的数字。
  • search: 表示输入搜索关键词。

Input mode 属性在不同浏览器中的支持程度可能会有所不同。

因此,使用 Input mode 属性时需要进行兼容性测试。

4. Pattern

Pattern 属性是一个正则表达式模式,用于指定文本框中的输入内容。它可以帮助浏览器验证用户输入的内容是否符合指定的格式要求。

添加图片注释,不超过 140 字(可选)

如果用户输入的内容不符合Pattern属性所指定的正则表达式模式,浏览器将显示一个默认的错误信息。

Pattern属性的值必须是一个有效的正则表达式。 Pattern属性只能应用于可以输入文本的元素,例如文本框、文本字段和密码框。 Pattern属性不会阻止用户输入非法字符,但会在提交表单时验证输入内容是否满足指定的格式要求。 可以使用title属性自定义Pattern属性的错误消息。

Pattern 属性通常与 required 属性一起使用,以确保用户输入的内容符合指定的格式要求且不为空。例如,你可以使用 Pattern 属性来验证用户输入的邮政编码、电话号码、电子邮件地址等。

5. Required

Required是用于指定表单元素是否为必填的属性。

添加图片注释,不超过 140 字(可选)

如果一个表单元素设置了Required,在提交表单时,如果该元素的值为空,浏览器将阻止表单被提交,并提示用户填写该字段。

只能应用于表单元素,不能应用于其他HTML元素。 不验证用户输入的内容是否满足指定的格式要求,只验证元素是否为空。 不会阻止用户提交空格或空白字符,因此需要其他方式验证用户输入。 可以与 Pattern 属性一起使用,以验证用户输入的内容是否符合指定的格式要求。 可以与 Autofocus 属性一起使用,确保用户进入表单页面时,焦点自动在必填字段上。

必填属性经常与表单元素的 type 属性一起使用,例如文本框、下拉列表、单选框、复选框等。

6. Autocomplete

Autocomplete属性是用于指定表单元素是否启用自动完成功能的属性。

添加图片注释,不超过 140 字(可选)

Autocomplete 帮助用户更快地填写表单并减少了打字错误的机会。

on: 默认值,表示启用自动完成功能。 off: 表示禁用自动完成功能。 name: 表示使用表单元素的name属性作为自动完成的关键词。 email: 表示使用用户最近输入的电子邮件地址作为自动完成的关键词。 username: 表示使用用户最近输入的用户名作为自动完成的关键词。 current-password: 表示使用用户最近输入的密码作为自动完成的关键词。 new-password: 表示使用用户最近输入的新密码作为自动完成的关键词。 tel: 表示使用用户最近输入的电话号码作为自动完成的关键词。 address-level1: 表示使用用户最近输入的国家或地区名称作为自动完成的关键词。 address-level2: 表示使用用户最近输入的省份或州的名称作为自动完成的关键词。 address-level3: 表示使用用户最近输入的城市或地区名称作为自动完成的关键词。 address-level4: 表示使用用户最近输入的街道名称作为自动完成的关键词。 country: 表示使用用户最近输入的国家名称作为自动完成的关键词。

Autocomplete 属性在不同的浏览器中的支持程度可能会有所不同。因此,使用 Autocomplete 属性时需要进行兼容性测试。

7. Multiple

Multiple 属性是用于指定表单元素是否允许多选的属性。

添加图片注释,不超过 140 字(可选)

Multiple 属性通常应用于下拉列表、文件上传和复选框等表单元素上。

Multiple 属性只能应用于如下拉列表、文件上传和复选框等表单元素上,并不能应用于如单选框和文本框等表单元素上。 Multiple 属性的值必须是布尔值,即 true 或 false。 Multiple 属性的默认值为 false,表示不允许多选。 当 Multiple 属性的值为 true 时,下拉列表将显示为可多选的列表框,复选框将显示为可多选的复选框列表,文件上传将允许用户选择多个文件。 使用 Multiple 属性时,需要在后台程序中处理多选的值,例如使用数组来存储多选的值。

如果一个表单元素设置了Multiple属性,用户可以选择多个选项,而不仅仅是一个。

8. Download

Download 属性是用于在链接下载文件时指定文件名的属性。

添加图片注释,不超过 140 字(可选)

如果一个链接设置了 Download 属性,那么当用户点击该链接下载文件时,浏览器会将文件保存到本地,并使用 Download 属性指定的文件名来命名文件。

Download 属性的值可以是任何字符串,代表下载文件时使用的文件名。 Download 属性只能应用于a标签,不能应用于其他HTML元素。 Download 属性不会改变文件的实际名称,它只是在下载时使用指定的文件名。 Download 属性的值可以动态生成,例如使用JavaScript来生成文件名。 使用 Download 属性时,需要确保下载的文件是合法的,并且不侵犯他人的版权和隐私。

Download 属性通常用于a标签中,用于下载PDF、图片、音频、视频和其他文件。

9. Content editable

在HTML中,Contenteditable属性是用于指定一个元素是否可编辑的属性。

添加图片注释,不超过 140 字(可选)

Contenteditable属性的值可以是true、false或inherit。 Contenteditable属性的默认值为false,表示元素不可编辑。 当Contenteditable属性的值为true时,元素可编辑。 当Contenteditable属性的值为inherit时,元素的可编辑性从父元素继承。 Contenteditable属性不会改变元素的默认行为,例如a标签仍然可以跳转到其他页面。 在使用Contenteditable属性时,需要注意安全问题,以避免XSS攻击和恶意脚本注入。

如果一个元素设置了Contenteditable属性,那么用户可以在元素中输入文本、插入图片、修改样式等。Contenteditable属性通常应用于

等元素,用于实现富文本编辑器和可编辑表格等功能。

10. Readonly

在HTML中,Readonly属性是用于指定表单元素是否为只读的属性。

添加图片注释,不超过 140 字(可选)

Readonly属性的值必须是布尔值,true或false。 Readonly属性的默认值为false,表示表单元素是可编辑的。 当Readonly属性的值为true时,表单元素是只读的。 Readonly属性不会阻止用户通过JavaScript修改表单元素的值。 Readonly属性与Disabled属性不同,Disabled属性会禁用表单元素,使其无法提交数据。 在使用Readonly属性时,需要在后台程序中处理只读的值,例如使用隐藏字段来存储只读的值。

如果一个表单元素设置了Readonly属性,用户可以看到元素的值,但不能修改元素的值。Readonly属性通常应用于文本框、下拉列表和日期选择器等表单元素,以显示数据或防止用户修改数据。

11. Hidden

Hidden属性是用于指定一个元素是否隐藏的属性。

添加图片注释,不超过 140 字(可选)

Hidden属性的值必须是布尔值,要么是true,要么是false。 Hidden属性的默认值为false,表示元素不被隐藏。 当Hidden属性的值为true时,元素会被隐藏。 Hidden属性不同于CSS的display:none属性。display:none属性会完全从页面中移除元素,无法通过JavaScript或其他方法访问该元素。 在使用Hidden属性时,需要在后台程序中处理隐藏的值,例如使用隐藏字段来存储隐藏的值。

如果一个元素设置了Hidden属性,该元素将不会在页面上显示,但仍然存在于页面上,可以通过JavaScript等方式访问。Hidden属性通常应用于表单元素、按钮、图像等元素,以传递数据或控制页面行为,而不影响页面布局。

12. Spellcheck

在HTML中,Spellcheck属性是用于指定是否启用拼写检查的属性。

添加图片注释,不超过 140 字(可选)

Spellcheck属性的值必须是布尔值,true或false。 Spellcheck属性的默认值为false,表示元素不启用拼写检查。 当Spellcheck属性的值为true时,元素启用拼写检查。 Spellcheck属性的支持程度因浏览器而异,不同浏览器可能具有不同的拼写检查算法和字典。 在使用Spellcheck属性时,需要注意安全问题,以避免XSS攻击和恶意脚本注入。

如果一个元素设置了Spellcheck属性,那么当用户在元素中输入文本时,浏览器会自动检查拼写错误,并在不正确的单词下方显示红色波浪线。Spellcheck属性通常应用于文本框和文本字段等元素,以提高用户输入的准确性。