HTML全局属性

最近看了一下html的属性,发现还是有很多新增的属性相对较陌生,下面根据W3Cschool整理一下。

HTML元素的意义与语境可以通过HTML属性来描述。
HTML中的全局属性对任何HTML元素有效。
HTML5新属性:

属性 描述
accesskey 访问元素的键盘快捷键。
class 规定元素的类名(classname) 。
contenteditable(new) 是否可编辑元素内容。
contextmenu(new) 指定一个元素的上下文菜单,当用户右击该元素,出现上下文菜单
data-*(new) 用于存储页面的自定义数据。
dir 设置元素中的内容文本方向。
draggable(new) 指定某个元素是否可以拖动。
dropzone(new) 指定某个元素是否可以拖动。
hidden(new) hidden属性规定元素进行隐藏。
id 规定元素的唯一id
lang 设置元素内容的语言代码。
spellcheck(new) 检查元素是否拼写错误。
style 规定元素的行内样式(inline style)
tabindex 设置元素的Tab键控制次序。
title 规定元素的额外信息(可在工具提示中显示)
translate(new) 指定是否一个元素的值在页面载入时是否需要翻译。

实例:

accesskey(设置快捷键 语法:<element accesskey = "character">)

<a href = "http://www.baidu.com" accesskey = "h">众里寻她,千百度。</a>
</hr>
<a href = "//www.greatytc.com/" accesskey = "a" title = "hello jianshu">你好啊,简书!</a>
注:在不同操作系统中不同的浏览器访问的快捷键方式不同
以windows的为例子:

Internet Explorer Chrome Firefox Safari Opera
Windows Alt+accesskey Alt+accesskey Alt+Shift+accesskey Alt+accesskey versions<=12 or older:Alt+Shift+accesskey version>=15 or new Alt+accesskey

提示:特殊操作
1.IE下,按住Alt键,点击accesskey定义的快捷键(焦点将移动到链接处),再按回车。
2.Opera下, 按住Shifth,点击Esc,将会出现本页面定义的accesskey快捷键列表可供选择。

HTML 4.01与HTML5之间的差异

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

class(定义元素的类名 语法<element class = "class| class1 calss2">)

<p class = "imporant">我:你是我最重要的人。</p>
<p calss = "normal">女神:谢谢啊,你是个好人(发好人卡!)</p>
<p class = "important">小花:你也是我最重要的人。</p>

calssname命名规则:
1.必须以字母A-Z或者a-z开头
2.可以是以下字符:字母(A-Za-z),数字(0-9),横杆("-"),下滑线("_")
3.在HTML中,类名是区分大小写的

HTML 4.01与HTML5之间的差异

HTML5:class可以用于html任何元素(它会验证任何html5。但不一定是有用的)
HTML 4.01: class不能用于:<base>,<head>,<html>,<meta>,<param>,<script>,<style>和<title>。

contenteditable(定义元素是否可编辑 语法:<element contenteditable = "true|false">)

<p contenteditable = "true">来啊,大爷快来点我啊,啪,爸爸的爸爸叫爷爷,爸爸的妈妈叫奶奶...</p>
注意:该属性可继承,即当元素中没有设置contenteditable属性时,元素将从父元素继承。

HTML 4.01与HTML5之间的差异

HTML5:ccontenteditable 属性是 HTML 新增的。
HTML 4.01: 无该属性。

contextmenu(右击元素显示上下文菜单 语法:<element contextmenu = "menu_id">)

<div contextmenu="mymenu">
<menuitem label="Refresh"></menuitem>
<menuitem label="Twitter"></menuitem>
</div>
注:目前主流浏览器都不支持该属性,menu_id是指需要打开的<menu>元素的id。

HTML 4.01与HTML5之间的差异

HTML5:contextmenu属性是 HTML 新增的。
HTML 4.01: 无该属性。

data-(嵌入自定义数据 语法:<element data-="somevalue">)

<ul>
<li data-animal-type="bird">我是鸟</li>
<li data-animal-type="fish">我是鱼</li>
<li data-animal-type="spider">我是蜘蛛</li>
</ul>

定义和用法

data-* 属性用于存储私有页面后应用的自定义数据。
data-* 属性可以在所有的 HTML 元素中嵌入数据。
自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。
data-* 属性由以下两部分组成:
属性名不要包含大写字母,在 data- 后必须至少有一个字符。
该属性可以是任何字符串
注意: 自定义属性前缀 "data-" 会被客户端忽略。

HTML 4.01 与 HTML5之间的差异

data-* 属性是 HTML5 新增的。

dir(决定文本方向 语法<element dir="ltr|rtl|auto">)

<p dir="rtl">文本方向从右到左!</p>
<p dir="ltr">文本方向从左到右!(默认)</p>
<p dir="auto">让浏览器根据内容来判断文本方向。仅在文本方向未知时推荐使用。</p>

HTML 4.01 与 HTML5之间的差异

HTML5 :任何的 HTML 元素 (它会验证任何HTML元素。但不一定是有用)。
HTML 4.01不能用于: <base>,'</br>', <frame>, <frameset>, '</hr>', <iframe>, <param>, 和 <script>。

draggable(是否可拖动 语法<element >)

未完待续。。。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • accesskey accesskey 属性规定激活(使元素获得焦点)元素的快捷键。 百度 即按alt+z可以打开...
    masai12138阅读 4,280评论 0 0
  • HTML5 新属性 accesskey [规定激活(使元素获得焦点)元素的快捷键] 例子 百度 注意 在不...
    飞过的沙阅读 1,679评论 0 0
  • 不知不觉中,在学习前端的路已经一年了,但对于HTML部分的总结确实是没有做到位,现在进行相关知识笔记的总结,也算是...
    QinRenMin阅读 2,607评论 0 1
  • 以下几个属性是所有 HTML 元素通用的/共有的,可以在所有 HTML 元素(甚至是那些没有在本规范中定义的那些元...
    咚门阅读 4,304评论 0 0
  • accesskey 设置快捷键,提供快速访问元素如aaa在windows下的firefox中按alt + shif...
    贞贞姐阅读 5,563评论 0 4

友情链接更多精彩内容