html全局属性是什么-前端问答-PHP中文网

首页

web前端

前端问答

html全局属性是什么

青灯夜游

Nov 17, 2021 pm 04:14 PM

html全局属性

在html中，全局属性是指可以用来配置所有元素共有行为、可以用在任何一个元素身上的属性。常用全局属性有：class、hidden、id、lang、style、title、dir、contenteditable等等。

html全局属性是什么

本教程操作环境：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 机制的按键组合因平台而异，具体如下：

浏览器 / 平台	Window	Linux	Mac
Firefox	Alt + Shift + key	Alt + Shift + key	Control + Alt + key
Internet Explorer	Alt + key	N/A	N/A
Google Chrome	Alt + key	Alt + key	Control + Alt + key
Safari	Alt + key	N/A	Control + Alt + key
Opera	同 Google Chrome	同 Google Chrome	同 Google Chrome

关于 accesskey 这个全局属性的详解，可以看一下 HTML accesskey 属性与 web 自定义键盘快捷访问

2、class 属性

class 属性用来将元素归类，这个就无需多言了。

3、contenteditable 属性

contenteditable 是 HTML5 中新增加的属性，，其用途是让用户能够修改页面上的内容。

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

如上例，p 元素的 contenteditable 属性值设置为 true 时，用户可以单击文字编辑内容。设置为 false 时禁止编辑。

4、dir 属性

dir 属性用来规定元素中文字的方向。有效值有两个：ltr(从左到右)、rtl(从右到左)。

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

5、draggable 属性

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

6、dropzone 属性

dropzone 属性是 HTML5 支持拖放操作的方式之一，与 draggable 属性搭配使用。

7、id 属性

id 属性用来给元素分配一个唯一的标识符。这个也无需多言。需要说明的一点是，id 属性还可以用来导航到文档中的特定位置。

8、hidden 属性

hidden 是个布尔属性，表示相关元素当前不需要关注，浏览器对它的处理方式是隐藏相关元素（隐隐想起来控制一个元素的展示隐藏的时候，会自定义一个 hidden 类，然后在里面写隐藏样式），具体也可以看一下这篇介绍 HTML5 的 hidden 属性

6f574f79ccc2f895a2e51d0401cc27d1
ee3d63f9cbc9be5695d18b5080a3f00a这个元素将会被隐藏16b28748ea4df4d9c2150843fecfba68

9、lang 属性

lang 属性用于说明元素内容使用的语言。lang 属性必须使用有效的 ISO 语音代码，使用这个属性的目的在于，让浏览器调整其表达元素内容的方式，比如在使用了文字朗读器的情况下正确发音。

39c87677280c9973f7ecd9791c64b8f5
e388a4556c0f65e1904146cc1a846beeHello - how are you?94b3e26ee717c64999d7867364b1b4a3

10、spellcheck 属性

spellcheck 属性用来表明浏览器是否应该对元素的内容进行拼写检查，这个属性只有用在用户可以编辑的元素上时才有意义。 spellcheck 属性可以接受的值有两个：true 和 false。至于拼写检查的实现方式则因浏览器而异。

0d25d7a5acf52748808055d0fa5834af
 6a31621d8eb28844267d5eee0b2c6bb8This is some lalalala text40587128eee8df8f03d0b607fe983014

11、style 属性

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 的 Country 输入框第一个被选中，接着焦点会跳到 Name 输入框，最后是 submit 提交。tabindex 设置为 - 1 的元素不会在用户按下 Tab 键后被选中。

13、title 属性

title 属性提供了元素的额外信息，浏览器通常用这些东西显示工具条提示，这个在一些展示不全的文本标题也经常使用。

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

14、contextmenu 属性

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

15、data-* 属性

为元素增加自定义属性

16、translate 属性

元素和子孙节点内容是否需要本地化

推荐教程：《html视频教程》

以上是html全局属性是什么的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

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

html内部的反应：集成了动态网页的JavaScriptApr 16, 2025 am 12:06 AM

要将React集成到HTML中，需遵循以下步骤：1.在HTML文件中引入React和ReactDOM。2.定义一个React组件。3.使用ReactDOM将组件渲染到HTML元素中。通过这些步骤，可以将静态HTML页面转化为动态、交互式的体验。

反应的好处：性能，可重用性等等Apr 15, 2025 am 12:05 AM

React受欢迎的原因包括其性能优化、组件复用和丰富的生态系统。1.性能优化通过虚拟DOM和diffing机制实现高效更新。2.组件复用通过可复用组件减少重复代码。3.丰富的生态系统和单向数据流增强了开发体验。

反应：创建动态和交互式用户界面Apr 14, 2025 am 12:08 AM

React是构建动态和交互式用户界面的首选工具。1)组件化与JSX使UI拆分和复用变得简单。2)状态管理通过useState钩子实现，触发UI更新。3)事件处理机制响应用户交互，提升用户体验。

React与后端框架：比较Apr 13, 2025 am 12:06 AM

React是前端框架，用于构建用户界面；后端框架用于构建服务器端应用程序。React提供组件化和高效的UI更新，后端框架提供完整的后端服务解决方案。选择技术栈时需考虑项目需求、团队技能和可扩展性。

HTML和React：标记与组件之间的关系Apr 12, 2025 am 12:03 AM

HTML和React的关系是前端开发的核心，它们共同构建现代Web应用的用户界面。1)HTML定义内容结构和语义，React通过组件化构建动态界面。2)React组件使用JSX语法嵌入HTML，实现智能渲染。3)组件生命周期管理HTML渲染，根据状态和属性动态更新。4)使用组件优化HTML结构，提高可维护性。5)性能优化包括避免不必要渲染，使用key属性，保持组件单一职责。

反应与前端：建立互动体验Apr 11, 2025 am 12:02 AM

React是构建交互式前端体验的首选工具。1)React通过组件化和虚拟DOM简化UI开发。2)组件分为函数组件和类组件，函数组件更简洁，类组件提供更多生命周期方法。3)React的工作原理依赖虚拟DOM和调和算法，提高性能。4)状态管理使用useState或this.state，生命周期方法如componentDidMount用于特定逻辑。5)基本用法包括创建组件和管理状态，高级用法涉及自定义钩子和性能优化。6)常见错误包括状态更新不当和性能问题，调试技巧包括使用ReactDevTools和优

React和前端堆栈：工具和技术Apr 10, 2025 am 09:34 AM

React是一个用于构建用户界面的JavaScript库，其核心是组件化和状态管理。1)通过组件化和状态管理简化UI开发。2)工作原理包括调和和渲染，优化可通过React.memo和useMemo实现。3)基本用法是创建并渲染组件，高级用法包括使用Hooks和ContextAPI。4)常见错误如状态更新不当，可使用ReactDevTools调试。5)性能优化包括使用React.memo、虚拟化列表和CodeSplitting，保持代码可读性和可维护性是最佳实践。