全局属性有哪些(全局标准属性和全局事件属性)

lxf2023-08-28 12:00:01

在html中,全局属性是指可用于配置所有元素的通用行为并可用于任何元素的属性。常见的全局属性有:class、hidden、id、lang、style、title、dir、contenteditable等等。

全局属性有哪些(全局标准属性和全局事件属性)

本教程的操作环境:windows7系统,HTML5版本,Dell G3电脑。

局部属性:有些元素可以指定自己的属性,称为局部属性。例如,link元素有六个本地属性:href、rel、hreflang、media、type和sizes。

全局属性:可以用来配置所有元素的通用行为。这个属性称为全局属性,可以在任何元素上使用。

1.accesskey属性

使用accesskey属性设置一个或多个快捷键,用于选择页面上的元素。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta > <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML全局属性测试</title> </head> <body> <form action=""> <p> Name: <input type="text" > </p> <p> Password: <input type="password" > </p> <p> Name: <input type="submit" > </p> </form> </body> </html>

在上面的例子中,三个input元素添加了accesskey属性,这样你就可以在Mac下用快捷键Control+Alt(Option)+n访问Name的输入框。用于触发accesskey机制的组合键因平台而异,如下所示:

浏览器/平台火狐浏览器微软公司出品的web浏览器谷歌浏览器旅行队歌剧
窗户Linux操作系统苹果个人计算机
Alt + Shift +键Alt + Shift +键Control + Alt + key
Alt +键不适用的不适用的
Alt +键Alt +键Control + Alt + key
Alt +键不适用的Control + Alt + key
使用谷歌浏览器使用谷歌浏览器使用谷歌浏览器

关于accesskey全局属性的详细解释,可以看看HTML accesskey属性和web自定义键盘快捷键访问。

2.类别属性

class属性用于对元素进行分类,这一点不言而喻。

3.内容可编辑属性

Contenteditable是HTML5中的一个新属性,它的目的是让用户能够修改页面上的内容。

<body> <!-- contenteditable属性应用 --> <p contenteditable="true">设置为 true 是可编辑的</p> </body>

如上例所示,当p元素的contenteditable的属性值设置为true时,用户可以单击文本来编辑内容。当设置为false时,禁止编辑。

4.目录属性

dir属性用于指定元素中文本的方向。有两个有效值:ltr(从左到右)和rtl(从右到左)。

<!-- dir属性应用 --> <p dir="ltr">从左到右</p> <p dir="rtl">从右到左</p>

5.可拖动属性

draggable属性是HTML5支持拖放操作的方式之一,用来表示一个元素是否可以拖放。

6.dropzone属性

dropzone属性是HTML5支持拖放操作的方式之一,它与draggable属性一起使用。

7.id属性

id属性用于为元素分配唯一的标识符。这个就不用说什么了。应该注意,id属性也可以用于导航到文档中的特定位置。

8.隐藏属性

Hidden是一个布尔属性,表示相关元素目前不需要关注。浏览器通过隐藏相关元素来处理(当你隐约记得要控制一个元素的显示和隐藏时,你会自定义一个隐藏类,然后在里面写一个隐藏样式)。具体还可以看一下HTML5的隐藏属性。

<!-- hidden属性应用 --> <div hidden>这个元素将会被隐藏</div>

9.语言属性

lang属性用于描述元素内容使用的语言。lang属性必须使用有效的ISO语音代码。使用此属性的目的是让浏览器调整其表示元素内容的方式,例如使用文本阅读器时的正确发音。

<!-- lang属性应用 --> <p>Hello - how are you?</p>

10、拼写检查属性

拼写检查属性用于指示浏览器是否应该对元素的内容进行拼写检查。该属性只有在用于用户可以编辑的元素时才有意义。spellcheck属性可以接受两个值:true和false。至于拼写检查的实现,因浏览器而异。

<!-- spellcheck属性应用 --> <textarea >This is some lalalala text</textarea>

11.样式属性

style属性用于直接在元素上定义CSS样式,这个就不做过多描述了。

12.tabindex属性

HTML页面的键盘焦点可以通过按Tab键在元素之间切换。tabindex属性可用于更改默认的传输顺序。

<!-- tabindex属性应用 --> <form action=""> <label>Name: <input type="text" ></label> <label>City: <input type="text" ></label> <label>Country: <input type="text" ></label> <input type="submit" value="" tabindex="3"> </form>

上面代码的效果是,在按Tab键的过程中,先选中tabindex为1的国家输入框,然后焦点会跳转到姓名输入框,最后提交。用户按tab键后,Tabindex设置为-1的元素将不会被选择。

13.标题属性

title属性提供了关于元素的附加信息,浏览器通常使用这些信息来显示工具栏提示,这也常用于一些显示效果不佳的文本标题。

<!-- title属性应用 --> <a href="https://qiqihaobenben.github.io/" title="我的个人网站">qiqihaobenben.github.io</a>

14.上下文菜单属性

自定义鼠标右键弹出菜单的内容

15,数据-*属性

向元素添加自定义属性

16.翻译属性

元素和后代节点的内容需要本地化吗?

推荐教程:html视频教程

以上是html的全局属性是什么的细节。更多信息请关注AdminJS.cn其他相关文章!

adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 在Adminjs.cn中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!