随笔 - 54,  文章 - 0,  评论 - 0,  阅读 - 13074

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>
复制代码

运行效果如图所示:

 

posted on   心有所信方能行远  阅读(160)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示