《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隐藏,则它可被读取。

相关文章
|
10天前
HTML标记 和标记的属性
【8月更文挑战第28天】HTML标记 和标记的属性。
17 1
|
11天前
HTML元素(HTML Elements)的属性
【8月更文挑战第27天】HTML元素(HTML Elements)的属性。
21 2
|
16天前
|
移动开发 HTML5
HTML5页面元素及属性
【8月更文挑战第23天】HTML5页面元素及属性。
30 4
|
7天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
31 0
|
14天前
|
移动开发 前端开发 JavaScript
HTML5 中 `id` 属性和 `class` 属性的区别
【8月更文挑战第24天】
12 0
|
1天前
|
前端开发 JavaScript C#
移动应用开发中的跨平台框架解析
【9月更文挑战第5天】在移动应用开发领域,跨平台框架因其“一次编写,处处运行”的便利性而受到开发者的青睐。本文将深入探讨几种流行的跨平台框架,包括React Native、Flutter和Xamarin,并比较它们的优势与局限。我们将通过代码示例揭示这些框架如何简化移动应用的开发过程,同时保持高性能和良好的用户体验。无论你是新手还是有经验的开发者,这篇文章都将成为你了解和选择跨平台框架的宝贵资源。
30 19
|
11天前
|
Dart API 开发者
探索移动应用开发的未来:跨平台框架与原生系统的协同
【8月更文挑战第27天】在移动应用的宇宙中,跨平台框架如同星辰般璀璨,它们承诺着高效、统一的开发体验。然而,在这耀眼的光芒下,原生系统的细节和深度却往往被忽视。本文将深入探讨跨平台框架与原生系统之间的微妙平衡,揭示如何在追求效率的同时保持对原生特性的尊重和利用。通过分析Flutter等框架的案例,我们将一窥未来移动应用开发的可能路径,并理解为何在跨平台的光辉下,原生系统的价值依然不减。
|
10天前
|
移动开发 开发框架 C#
跨平台移动开发王者之战:Xamarin对决Uno Platform,谁将主宰.NET的未来?
【8月更文挑战第28天】Xamarin和Uno Platform是.NET生态下的两大跨平台移动开发框架。Xamarin自2011年起成为.NET的重要组成部分,使用C#实现高度代码共享。Uno Platform则是较新的框架,支持C#和XAML,并能将代码编译为WebAssembly,兼容Web平台。两者在代码共享、性能、社区支持及平台兼容性方面各有优势。Xamarin在性能和生态上更为成熟,Uno Platform则在Web兼容性方面表现出色。开发者可根据项目需求和技术栈选择合适的框架。
25 3
|
9天前
|
前端开发 Android开发 iOS开发
移动应用开发中的跨平台策略与系统选择
【8月更文挑战第29天】在移动应用领域,开发者面临多种操作系统和设备的选择。本文将探讨如何在移动应用开发中实施跨平台策略,并深入分析不同移动操作系统的特点及其对开发的影响。我们将通过比较iOS和Android两大主流平台,了解它们各自的优势和局限性,并提供实用的建议来帮助开发者做出明智的系统选择。
|
11天前
|
机器学习/深度学习 人工智能 算法
探索软件测试的未来:自动化与AI的融合之路移动应用开发的新纪元:从原生到跨平台
【8月更文挑战第27天】在软件开发的世界中,测试是确保产品质量的关键步骤。随着技术的不断进步,传统的手动测试方法正逐渐被自动化和人工智能(AI)技术所取代。本文将探讨自动化测试的现状与挑战,并展望未来AI如何重塑软件测试领域,同时提供实用的代码示例,引领读者一窥自动化测试的未来趋势。

热门文章

最新文章

下一篇
DDNS