HTML5的全局属性是指在HTML5的任何元素中都可以使用的属性。
draggable元素
draggable元素用来定义页面中的元素是否可以拖动,该属性有2个值:true和false,默认为false,当值为true时表示元素选中之后可以进行拖动操作,否则不能拖动。
下面通过一个案例对draggable属性的用法进行演示:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>draggable元素的使用</title> 6 </head> 7 <body> 8 <h3>元素拖动属性</h3> 9 <article draggable="true">这些文字可以被拖动</article> 10 可拖动的图片<img src="鸟巢.webp" draggable="true" /> 11 </body> 12 </html>
运行效果如图所示:
hidden元素
在HTML5中,大多数元素都支持hidden属性,该属性有两个属性值:true和false。当hidden属性取值为true时,对应元素将会被隐藏,反之则会显示。
元素中的内容是通过浏览器创建的,页面装载后允许使用JavaScript脚本将该属性取消,取消后该元素变为可见状态,同时元素中的内容也及时显示出来。
spellcheck属性
spellcheck属性主要针对Input元素和textarea文本输入框进行设置,对用户输入的文本内容进行拼写和语法检查。
spellcheck属性有2个值:true(默认值)和false,值为true时检测文本输入中的值,反之不检测。
下面通过一个案例对spellcheck元素做演示:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>spellcheck元素的使用</title> 6 </head> 7 <body> 8 <h3>输入框语法检测</h3> 9 <p>spellcheck属性值为true<br/> 10 <textarea spellcheck="true">html5</textarea> 11 </p> 12 <p>spellcheck属性值为false<br/> 13 <textarea spellcheck="false">html5</textarea> 14 </p> 15 </body> 16 </html>
运行效果如图所示:
contenteditable属性
contenteditable属性规定是否可编辑元素的内容,但是前提是该元素必须可以获得鼠标指针焦点并且其内容不是只读的。
在HTML5之前的版本如果直接在页面上编辑文本需要编写比较复杂的JavaScript代码,但是在HTML5中只要指定该属性的值即可。该属性有两个值(true和false)。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>contenteditable元素的使用</title> 6 </head> 7 <body> 8 <h3>可编辑列表</h3> 9 <ul contenteditable="true"> 10 <li>列表1</li> 11 <li>列表2</li> 12 <li>列表3</li> 13 <li>列表4</li> 14 </ul> 15 </body> 16 </html>
运行效果如图所示:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战