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

相关文章
|
1月前
|
数据采集 移动开发 搜索推荐
HTML基础-HTML5新增语义标签:解锁网页结构新维度
【6月更文挑战第5天】本文介绍了HTML5的语义标签,旨在提升网页结构化和可访问性。核心语义标签包括`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`、`&lt;section&gt;`、`&lt;aside&gt;`、`&lt;footer&gt;`、`&lt;figure&gt;`和`&lt;figcaption&gt;`。常见问题包括滥用标签作布局工具、忽略`&lt;main&gt;`、不恰当嵌套和忽视辅助功能。
|
1月前
|
移动开发 HTML5
html5为什么只需要写<!doctype html>? 一共有多少种Doctype文档类型?
html5为什么只需要写<!doctype html>? 一共有多少种Doctype文档类型?
22 0
|
1月前
|
存储 移动开发 前端开发
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
31 0
|
2月前
|
移动开发 搜索推荐 HTML5
尚硅谷html5+css3(1)html相关知识
尚硅谷html5+css3(1)html相关知识
|
2月前
|
移动开发 Android开发 iOS开发
ios标准页面调用HTML5页面和HTML5调用ios的函数
ios标准页面调用HTML5页面和HTML5调用ios的函数
34 0
|
5天前
|
前端开发 JavaScript Android开发
移动应用开发的未来:跨平台框架的崛起
随着移动设备在现代社会的普及,移动应用开发已成为技术创新和商业战略的关键领域。本文将探讨移动应用开发的最新趋势,特别是跨平台框架如何重新定义开发者的工作方式,并分析这些变化对移动操作系统生态的影响。通过深入分析Flutter、React Native等流行框架的案例,我们将揭示这些工具如何提高开发效率,降低成本,并促进更广泛的创新。
|
23小时前
|
机器学习/深度学习 前端开发 开发者
探索移动应用开发的未来:跨平台框架与原生开发的较量
【7月更文挑战第26天】随着智能手机和平板电脑的普及,移动应用开发已经成为软件开发中增长最快的领域之一。本文将深入探讨移动应用开发的现状与未来趋势,重点对比分析跨平台框架与原生开发的优劣,以及它们如何影响开发者的选择和最终用户体验。通过案例研究和技术演进的分析,我们将揭示在快速变化的移动市场中保持竞争力的关键策略。
7 2
|
1天前
|
人工智能 缓存 搜索推荐
移动应用开发的未来趋势:跨平台框架与AI的融合
【7月更文挑战第26天】在数字化时代,移动应用已成为人们生活的一部分。随着技术的不断进步,移动应用开发领域也迎来了新的变革。本文将探讨移动应用开发的未来趋势,重点关注跨平台框架的发展和人工智能(AI)技术的融合。我们将分析这些技术如何改变移动应用的开发流程、提升用户体验,并预测它们对未来市场的影响。通过深入讨论,本文旨在为读者提供对移动应用开发未来方向的洞察。
5 1
|
2天前
|
人工智能 Android开发 开发者
探索移动应用开发的未来:跨平台框架与原生技术的较量
随着移动设备成为我们生活中不可或缺的一部分,移动应用的开发也迎来了前所未有的挑战和机遇。本文将深入探讨移动应用开发的两大主流技术——跨平台框架与原生开发,通过对比分析它们的优势与局限性,揭示未来移动应用开发的趋势。文章还将讨论如何结合这两种技术以优化开发流程,提高应用性能和用户体验,为开发者提供实用的指导和建议。
|
4天前
|
Dart 前端开发 JavaScript
移动应用开发的未来:跨平台框架与原生性能的融合
【7月更文挑战第23天】在移动应用开发的不断演进中,开发者面临着选择高效、多平台兼容的开发工具与维护应用性能和用户体验之间的挑战。本文将探讨当前移动应用开发的趋势,特别是如何通过跨平台框架实现代码复用,同时保持接近原生应用的性能。我们将评估Flutter、React Native等流行框架的优势与局限,并讨论未来可能的技术革新方向。