《HTML5移动应用开发入门经典》—— 2.2 HTML5的新属性

简介:

本节书摘来异步社区《HTML5移动应用开发入门经典》一书中的第2章,第2.2节,作者:【美】Jennifer Kyrnin,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 HTML5的新属性

HTML5移动应用开发入门经典
HTML5中的许多新属性是它们相关标签的扩展。可以通过一些新的event(事件)属性将脚本与Web页面事件关联起来。另外,还可以使用适用于所有HTML5元素的全局新属性。

在HTML中,属性出现在标签名称后,由空格分开,并介于“<”和“>”号之间。若该属性包含一个值,值通过等号被附加在属性上。若值中包括空格,需要用引号将整个值括起来。例如:

61482f490d9de903d7ab33bae415e232e74bad27

或:

42610e38a6c44869111db23d7e8cc762b85d4374

布尔值属性同样适用于HTML5,它们不需要值。若存在值,则应用该属性,否则,该属性不会被应用。例如:

1d9a31a0201a1da5478106061906ac74f9140e78

HTML 4中最有名的布尔值属性是checkboxe中的checked属性:

6775162a0dc532a5193fefc263c0933756717f9a

event(事件)属性对应页面加载后可能出现的事件。HTML5包括以下新事件属性。

onabort——操作中止时触发。
onbeforeonload、onbeforeonunload、onunload——在某一元素加载或卸载之前或同时触发。
oncontextmenu——打开菜单时触发。
ondrag、ondragend、ondragenter、ondragleave、ondragstart、ondrop——发生拖曳行为时触发。
onerrror及onmessage——发生错误或弹出信息时触发。
onscroll——用户滚动浏览器滚动条时触发。
onresize——调整元素大小时触发。

可以在几乎所有HTML5元素中使用这些事件属性,这使得Web应用程序对事件的响应更加灵活。

HTML5还增加了以下一些适用于几乎所有HTML元素的全局属性。

contenteditable
contextmenu
draggable
dropzone
hidden
spellcheck

可以使用contenteditable和spellcheck将一些元素设置成可通过浏览器编辑,而且浏览器可以在编辑过程中检查语法。第14章将详细介绍此类元素。

draggable及dropzone让元素变得可被拖曳,同时还提供结束拖曳时的放置区。第16章中将详细介绍如何在应用中使用拖曳功能。

可以通过contextmenu定义一个仅在右键单击元素时出现的菜单。第17章将详细介绍这个属性。

hidden属性和CSS中的display: hidden;作用相同,但可以通过它描述一个当前与页面不相关的元素。例如,仅在以特定方法填充完别的字段后才会用到的表单元素。这个特性可以增加页面的可访问性,因为隐藏元素无法被屏幕阅读器读取,但若该元素仅被CSS隐藏,则它可被读取。

相关文章
|
25天前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
25天前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
25天前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
26天前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
24天前
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空,适用于多种类型的 `&lt;input&gt;` 标签,如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔,常与`max`和`min`属性配合使用,适用于数字、日期等类型。例如,设置`&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;`可使输入值以3为单位递增或递减。
|
3月前
|
开发框架 Dart Android开发
移动应用开发中的创新之路:探索跨平台解决方案
【9月更文挑战第21天】在移动应用的海洋中,开发者们面临着一个不断变化的挑战——如何在多个操作系统上提供无缝的用户体验。本文将探讨跨平台开发的魅力与挑战,并深入分析Flutter框架如何成为现代开发者的利器。我们将通过实际代码示例,揭示Flutter简化开发流程、提高生产效率的秘密。从Dart语言的基础到热重载的便捷性,本文旨在为读者提供一次全面而深刻的跨平台开发之旅。
|
1月前
|
C# Android开发 虚拟化
C# 一分钟浅谈:MAUI 跨平台移动应用开发
.NET MAUI 是 Microsoft 推出的跨平台框架,支持 Windows、macOS、iOS 和 Android。本文从基础概念入手,探讨 MAUI 的常见问题、易错点及解决方案,并通过代码示例详细说明。涵盖平台特定代码、XAML 语法、数据绑定、性能优化和调试技巧等内容,帮助开发者更好地掌握 .NET MAUI。
183 55
|
2月前
|
开发框架 前端开发 Android开发
移动应用开发中的跨平台策略与实践
【9月更文挑战第34天】本文将深入探讨移动应用开发的跨平台策略,包括对React Native、Flutter和Xamarin等流行框架的比较。文章还将分享一些实用的跨平台开发技巧和最佳实践,帮助开发者在多个平台上高效地构建和维护应用。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和指导。
|
1月前
|
开发框架 数据安全/隐私保护 开发者
Flutter 是一款强大的跨平台移动应用开发框架,本文深入探讨了其布局与样式设计
Flutter 是一款强大的跨平台移动应用开发框架,本文深入探讨了其布局与样式设计,涵盖布局基础、常用组件、样式设计、实战应用、响应式布局及性能优化等方面,助力开发者打造精美用户界面。
43 7
|
1月前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
57 8