首页 web前端 H5教程 HTML5新增属性:五种全局属性的介绍

HTML5新增属性:五种全局属性的介绍

Jul 27, 2018 pm 03:30 PM

在HTML5中新增了一个HTML中没有的属性:全局属性。顾名思义,全局属性就是指任何元素都可以使用的属性,接下的文章内容我们就将介绍五种常用的全局属性。

contentEditable属性

contentEditable是由微软开发。被其他浏览器反编译并投入应用的一个全局属性。它的主要功能是是否允许用户编辑元素的内容,被编辑元素必须是获得鼠标焦点的元素,而且在点击后要提供一个插入符号,提示用户该元素中内容允许编辑。contentEditable属性是一个布尔值属性,可以指定为ture或false。该属性还有一个隐藏属性的inherit状态,为true是允许用户编辑;为false时元素不能被用户编辑;没有指定时则由inherit状态决定,如果父元素是可编辑的,该元素也是可编辑的。支持contentEditable属性元素有A、DD、DIR、DIV、BUTTON、FORM、DL、DT、FONT、DFN、hn、CODE、ABBR等。

u=4036612533,4202649998&fm=173&app=25&f=JPEG.jpg

designMode属性

designMode属性主要功能是指定整个页面是否可编辑,页面可编辑时,页面中任何支持contentEditable属性的元素都变成了可编辑状态。designMode属性有两个值“on”和"off"。属性为“on”时,页面可编辑;属性为“off”时,页面不可编辑。不过各个浏览器支持情况也不一样,IE8不支持designMode属性,IE9支持designMode属性,fixfox和Opera浏览器支持designMode属性、Chrom和Safari浏览器在内嵌frame支持designMode属性。

hidden属性

在HTML5中所有的元素允许使用hidden属性。它类似input元素中的hidden属性,使元素处于不可见状态。hidden属性设置为ture,元素处于不可见状态;hidden属性设置为false时元素处于可见状态。

spellcheck属性

spellcheck属性主要是针对input元素和textarea这两个文本输入框提供的新属性,它的功能是对输入内容进行拼写和语法检查。它有个特殊的地方,就是必须声明属性值true或者false。如果元素是readonly属性或者disabled属性为true,不执行拼写检查。Firfox、IE、Chrome、Safari等浏览器都支持该属性。

tabindex属性

tabindex在程序开发概念,是指不断敲击Tab键让窗口或页面中控件获得焦点,对窗口的控件进行遍历,每个控件的tabindex表示第几个被访问的。之前这个属性在编辑网页很有用,现在是根据元素所在位置决定遍历顺序,所以就不需要了。不过tabindex拎一个作用,只有链接元素与表单元素可以通过按键获得焦点。如果对元素使用了tabindex属性后,也能让元素获得焦点,执行focus()语句时,可以让元素获得焦点了。但是这样会出现一个问题,元素会通过tab获得焦点,而这时候我们不想让该元素获得焦点这不是我们想要的结果。

把元素的tabindex值设定为负数后就可以解决这个问题了。tabindex为负值时,可以通过编程的方式让元素获得焦点,但按下Tab键该元素就不能获得焦点了,这在复杂的页面是非常有用的。HTML5中巧妙运用该属性发挥了很大的作用。

相关推荐:

HTML5新增属性

html5新增的属性和废除的属性简要概述_html5教程技巧

以上是HTML5新增属性:五种全局属性的介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

h5项目怎么运行 h5项目怎么运行 Apr 06, 2025 pm 12:21 PM

运行 H5 项目需要以下步骤:安装 Web 服务器、Node.js、开发工具等必要工具。搭建开发环境,创建项目文件夹、初始化项目、编写代码。启动开发服务器,使用命令行运行命令。在浏览器中预览项目,输入开发服务器 URL。发布项目,优化代码、部署项目、设置 Web 服务器配置。

H5页面制作究竟指什么 H5页面制作究竟指什么 Apr 06, 2025 am 07:18 AM

H5 页面制作是指使用 HTML5、CSS3 和 JavaScript 等技术,创建跨平台兼容的网页。其核心在于浏览器解析代码,渲染结构、样式和交互功能。常见技术包括动画效果、响应式设计和数据交互。为避免错误,应使用开发者工具调试;而性能优化和最佳实践则包括图像格式优化、减少请求和代码规范等,以提高加载速度和代码质量。

h5怎么制作点击图标 h5怎么制作点击图标 Apr 06, 2025 pm 12:15 PM

制作 H5 点击图标的步骤包括:在图像编辑软件中准备方形源图像。在 H5 编辑器中添加交互性,设置点击事件。创建覆盖整个图标的热点。设置点击事件的操作,如跳转页面或触发动画。导出 H5 文档为 HTML、CSS 和 JavaScript 文件。将导出的文件部署到网站或其他平台。

什么是H5编程语言? 什么是H5编程语言? Apr 03, 2025 am 12:16 AM

H5不是独立编程语言,而是HTML5、CSS3和JavaScript的集合,用于构建现代Web应用。1.HTML5定义网页结构和内容,提供新标签和API。2.CSS3控制样式和布局,引入动画等新特性。3.JavaScript实现动态交互,通过DOM操作和异步请求增强功能。

H5页面制作适合哪些应用场景 H5页面制作适合哪些应用场景 Apr 05, 2025 pm 11:36 PM

H5(HTML5)适合应用于轻量级应用,如营销活动页面、产品展示页面和企业宣传微网站。它优势在于跨平台性和丰富的交互性,但局限性在于复杂的交互和动画、本地资源访问和离线功能。

h5怎么制作弹窗 h5怎么制作弹窗 Apr 06, 2025 pm 12:12 PM

H5 弹窗制作步骤:1. 确定触发方式(点击式、时间式、退出式、滚动式);2. 设计内容(标题、正文、行动按钮);3. 设置样式(大小、颜色、字体、背景);4. 实现代码(HTML、CSS、JavaScript);5. 测试和部署。

H5页面制作是前端开发吗 H5页面制作是前端开发吗 Apr 05, 2025 pm 11:42 PM

是的,H5页面制作是前端开发的重要实现方式,涉及HTML、CSS和JavaScript等核心技术。开发者通过巧妙结合这些技术,例如使用<canvas>标签绘制图形或使用JavaScript控制交互行为,构建出动态且功能强大的H5页面。

如何使用地理位置API处理用户位置隐私和权限? 如何使用地理位置API处理用户位置隐私和权限? Mar 18, 2025 pm 02:16 PM

本文讨论了使用GeOlocation API管理用户位置隐私和权限,并强调要求权限,确保数据安全性并遵守隐私法律的最佳实践。

See all articles