你的位置:首页 > 网页设计

[网页设计]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 >

  属性值定义元素的类的名称。如需为一个元素规定多个类,可用空格分隔类名。 <span >,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 >

  属性值定义一个或多个由分号分隔的 CSS 属性和值,例如: <p ></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 属性规定元素内容是否要翻译。可使用 替代。目前没有主流浏览器支持 translate 属性。

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

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