HTML 全局属性

  HTML5 除了支持原有的全局属性之外,还添加了8个新的全局属性。

1、 id 属性规定元素的唯一 id

  id 属性规定 HTML 元素的唯一的 id。id 在 HTML 文档中必须是唯一的。id 属性可用作链接锚,通过 JavaScript(HTML DOM)或通过 CSS 可以为带有指定 id 的元素改变或添加样式。在 HTML5 中, id 属性可用于任何的 HTML 元素 ,它会验证任何HTML元素,但不一定是有用。在 HTML 4.01 中,id 属性不能用于:<base>, <head>, <html>, <meta>, <param>, <script>, <style> 和<title>。

  语法:<element(元素) id="id">

  属性值定义元素的唯一 id。命名规则:①:不能以数字开头,必须以字母 A-Z 或 a-z 开头。②:其后的字符可以为:字母(A-Za-z)、数字(0-9)、连字符("-")、下划线("_")、冒号(":") 以及点号(".")。③:值对大小写敏感。

2、class 属性规定元素的类名(className)

  class 属性定义了元素的类名。class 属性通常用于指向样式表的类,但是,它也可以用于 JavaScript 通过 HTML DOM 来修改 HTML 元素的类名。在 HTML5 中,class 属性可用于任何的 HTML 元素 ,它会验证任何HTML元素,但不一定是有用。在 HTML 4.01 中,class 属性不能用于:<base>, <head>, <html>,<meta>, <param>, <script>, <style> 和 <title>。

  语法:<element class="classname">

  属性值定义元素的类的名称。如需为一个元素规定多个类,可用空格分隔类名。 <span class="A B C">,HTML 元素允许使用多个类。命名规则:①:必须以字母 A-Z 或 a-z 开头。②:可以是以下字符: (A-Za-z),数字 (0-9),连字符 ("-") 和 下划线 ("_")。③:在 HTML 中, 类名是区分大小写的。

3、style 属性规定元素的行内样式(inline style)

  style 属性规定元素的行内样式。style 属性将覆盖任何全局的样式设定,例如在 <style> 标签或在外部样式表中规定的样式。在 HTML5 中,style 属性可用于任何的 HTML 元素,它会验证任何HTML元素,但不一定是有用。在 HTML 4.01 中,style 属性不能用于:<base>, <head>, <html>, <meta>, <param>, <script>, <style> 和 <title>。

  语法:<element style="style:value;">

  属性值定义一个或多个由分号分隔的 CSS 属性和值,例如: <p style="font-size:16px;color:blue;text-align:center;"></p>

4、title 属性规定元素的额外信息

  描述信息可在工具提示中显示,这些信息通常会在鼠标移到元素上时显示一段工具提示文本。在 HTML5 中, title 属性可用于任何的 HTML 元素 ,它会验证任何HTML元素,但不一定是有用。在 HTML 4.01 中,title 属性不能用于:<base>, <head>, <html>, <meta>, <param>, <script>, <style> 和 <title>。

  语法:<element title="text">

  属性值定义元素的提示文本。

5、lang 属性设置元素中内容的语言代码

  该属性规定元素内容的语言,在 HTML5 中, lang 属性可用于任何的 HTML 元素 ,它会验证任何HTML元素,但不一定是有用。在 HTML 4.01 中,lang 属性不能用于:<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, 和 <script>。

  语法:<element lang="language_code">

  属性值为语言代码,用于规定元素内容的语言代码。

6、dir 属性设置元素中内容的文本方向

  在 HTML5 中,dir 属性可用于任何的 HTML 元素,它会验证任何HTML元素,但不一定是有用。在 HTML 4.01 中,dir 元素不能用于:<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 和 <script>。

  语法:<element dir="ltr|rtl|auto">

  值描述:①:ltr 为默认值,从左向右的文本方向,正常显示。②:rtl 定义从右向左的文本方向。③:auto 定义让浏览器根据内容来判断文本方向,仅在文本方向未知时推荐使用。

7、accesskey 属性设置访问元素的键盘快捷键

  accesskey 属性规定激活(使元素获得焦点)元素的快捷键。注意:在不同操作系统中不同的浏览器中访问快捷键的方式不同。但是,在大多浏览器中快捷键可以设置为另外一组组合。

  各种浏览器下 accesskey 快捷键的使用方法:

  ①:IE:按住 Alt 键,点击 accesskey 定义的快捷键(焦点将移动到链接),再按回车。

  ②:Chrome:按住 Alt 键,点击 accesskey 定义的快捷键。

  ③:FireFox:按住 Alt+Shift 键,点击 accesskey 定义的快捷键。

  ④:Safari:按住 Alt 键,点击 accesskey 定义的快捷键。

  ⑤:Opera:按住 Shift 键,点击 esc,出现本页定义的 accesskey 快捷键列表可供选择。

  在 HTML5 中, accesskey 属性可用于任何 HTML 元素,它会验证任何HTML元素。但不一定是有用。在 HTML 4.01 中,accesskey 属性可使用于:<a>, <area>, <button>, <input>, <label>, <legend> 和 <textarea>。

  语法:<element accesskey="character">

  属性值用于指定激活元素的快捷键。

8、tabindex 属性设置元素的 Tab 键控制次序

  tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。在 HTML5 中,tabindex 属性可用于任何的 HTML 元素,它会验证任何HTML元素,但不一定是有用。在 HTML 4.01 中,tabindex 属性可用于:<a>, <area>, <button>, <input>, <object>, <select> 和 <textarea>。

  语法:<element tabindex="number">。

  属性值为数值,用于规定元素的 tab 键控制顺序,1 是第一,依此类推。

下面是 HTML5 新添加的属性:

9、data-* 属性用于存储页面的自定义数据

  该属性用于存储私有页面后应用的自定义数据,可以在所有的 HTML 元素中嵌入数据。自定义的数据可以让页面拥有更好的交互体验,不需要使用 Ajax 或去服务端查询数据。

  data-* 属性由以下两部分组成:①:属性名不要包含大写字母,在 data- 后必须至少有一个字符。②:该属性可以是任何字符串。注意:自定义属性前缀 "data-" 会被客户端忽略。

  语法:<element data-*="somevalue">

  属性值是以字符串形式规定属性的值。

10、contenteditable 属性规定是否可编辑元素的内容

  contenteditable 属性指定元素内容是否可编辑。注意: 当元素中没有设置 contenteditable 属性时,元素将从父元素继承。

  语法:<element contenteditable="true|false">

  值描述:①:当值为 true 时候,元素是可编辑的。②:当值为 false 时,元素是不可编辑的。

11、contextmenu 属性指定一个元素的上下文菜单

  contextmenu 属性规定了元素的上下文菜单,当用户右击元素时将显示上下文菜单。contextmenu 属性的值是需要打开的 <menu> 元素的 id。

  语法:<element contextmenu="menu_id">

12、spellcheck 属性检测元素是否拼写错误

  spellcheck 属性规定是否对元素内容进行拼写检查。

  可对以下文本进行拼写检查:①:类型为 text 的 input 元素中的值,非密码。②:textarea 元素中的值。③:可编辑元素中的值。

  语法:<element spellcheck="true|false">

  值描述:①:当值为 true 时,规定应当对元素的文本进行拼写检查。②:当值为 false 时,规定不应对元素的文本进行拼写检查。

13、hidden 属性规定对元素进行隐藏

  如果使用该属性,则会隐藏元素,隐藏的元素不会被显示,可以对 hidden 属性进行设置,使用户在满足某些条件时才能看到某个元素,比如选中复选框,等等。然后,可使用 JavaScript 来删除 hidden 属性,使该元素变得可见。

  语法:<element hidden>

14、draggable 属性指定某个元素是否可以拖动

  draggable 属性规定元素是否可拖动。注意:链接和图像默认是可拖动的。

  语法:<element draggable="true|false|auto">

  值描述:①:当值为 true 时,元素是可拖动的。②:当值为 false 时,元素是不可拖动的。③:当值为 auto 时,使用浏览器的默认特性。

15、dropzone 属性指定是否将数据复制,移动,或链接,或删除

  dropzone 属性规定当被拖动的数据在拖放到元素上时,是否被复制、移动或链接。目前没有主流浏览器支持 dropzone 属性。

  拖动数据会导致被拖数据产生副本:<div dropzone="copy"></div>

  语法:<element dropzone="copy|move|link">

  值描述:①:当值为 copy 时,拖动数据会导致被拖数据产生副本。②:当值为 move 时,拖动数据会导致被拖数据移动到新位置。③:当值为 link 时,拖动数据会生成指向原始数据的链接。

16、translate 属性指定是否一个元素的值在页面载入时是否需要翻译

  translate 属性规定元素内容是否要翻译。可使用 class="notranslate" 替代。目前没有主流浏览器支持 translate 属性。

  语法:<element translate="yes|no">

  值描述:①:当值为 yes 时,规定元素内容需要翻译。②:当值为 no 时,规定元素内容不需要翻译。

时间: 2024-12-05 04:32:43

HTML 全局属性的相关文章

简说全局属性

今天导师教我们input里面的hidden属性,他具有隐藏的效果. 我想起我以前上网查资料,有一个全局属性也是hidden.为了交作业,这次就说说我用过也比较常用的全局属性吧(全局属性是指所有的标签元素都能用的属性). 接上面话,hidden的全局属性也是一样有隐藏效果(IE不能支持). 接着是class和id,这两个路人皆知(前者可以多个使用的样式选择器,后者是唯一选择器). 配合前面的style样式属性,用class和id确定某个元素,加上样式以处理布局和效果. Accesskey是快捷键属

html5全局属性

全局属性:对于任何一个标签都是可以使用的属性. 一.data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据,可能是会写<form role="xxx">,但这是种非常不规范的方式. 也正是因为有这种自定义属性的需求,在html规范里增加了自定义属性data-*属性.html5中开发人员可自定义任何想要的属性,只要加上前缀data-,通过这种方式避免与未来的html版本冲突. <form data-type="comment"

HTML全局属性

HTML全局属性 New 标记为HTML5新增属性事件. 属性 描述 accesskey 设置访问元素的键盘快捷键. class 规定元素的类名(classname) contenteditableNew 规定是否可编辑元素的内容. contextmenuNew 指定一个元素的上下文菜单.当用户右击该元素,出现上下文菜单 data-*New 用于存储页面的自定义数据 dir 设置元素中内容的文本方向. draggableNew 指定某个元素是否可以拖动 dropzoneNew 指定是否将数据复制

HTML5全局属性(一)

NEW:HTML 5 中新的全局属性. 属性 描述 accesskey 规定访问元素的键盘快捷键 class 规定元素的类名(用于规定样式表中的类). contenteditable 规定是否允许用户编辑内容. contextmenu 规定元素的上下文菜单. dir 规定元素中内容的文本方向. draggable 规定是否允许用户拖动元素. dropzone 规定当被拖动的项目/数据被拖放到元素中时会发生什么. hidden 规定该元素是无关的.被隐藏的元素不会显示. id 规定元素的唯一 ID

HTML5全局属性和事件

全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等.HTML5中又新增了一些特殊功能的全局属性和事件. 属性: HTML5属性能够赋给标签元素含义和语境,下面的全局属性可用于任何 HTML5 元素. 属性 描述 contenteditable 规定是否允许用户编辑内容. contextmenu 规定元素的上下文菜单. draggable 规定是否允许用户拖动元素. dropzone 规定当被拖动的项目/数据被拖放到元素中时会发生什么. hidden 规定

自学HTML5第一天(认识HTML5的全局属性)

contextmenu 属性 规定 <div> 元素的上下文菜单.上下文菜单会在用户右键点击元素时出现.列子: <div contextmenu="mymenu"> <menu type="context" id="mymenu"> <menuitem label="Refresh"></menuitem> <menuitem label="Twitt

H5 新特性之全局属性 三

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全局属性</title> <script>// window.document.designMode="on"; </script></head><body><form data-type

HTML的16个全局属性

目录 [1]accesskey [2]class [3]dir [4]id [5]lang[6]style [7]tabindex [8]title [9]contenteditable [10]contentmenu [11]data-* [12]draggable [13]dropzone [14]hidden [15]spellcheck [16]translate 前面的话 在HTML中,属性能表达相当丰富的语义,而且属性也会额外提供很多实用的功能,HTML共支持16个常见的全局属性.

html5 转义实体字符 元数据 跳转 全局属性 id class lang style

实体 Html 实体就是把特殊字符通过代码显示出来, 比如, <>在浏览器会识别为标签,不能正常显示, 这是你就需要安如<去表达左尖括号. 元数据 2. 声明字符编码 3.模拟http表头字段 跳转页面 全局属性 id    配合css js 表示式样 页面内唯一性 class         class 属性用来给元素归类, 通过文档中某一个或者多个元素同时设置css样式 id用"#"连接样式 class 用"."来连接样式 contentedi