html5指南--1.html5全局属性（html5 global attributes）

　　今天开始一个全新的关于html5系列课程，是我读《The Definitive Guide to HTML5 》的学习笔记。我会把自己觉得里面不错的章节，或者有意义的内容进行整理，以供大家学习。

　　一个元素可以定义自己的属性，比如a标签定义href属性，这种叫局部属性（local attribute）。相对应的我们可以通过全局属性（global attribute）为所有元素设置共有的行为，当然你也可以为单独元素设置全局属性，只是这样做没有太大的意义。下面我将逐一介绍这些全局属性。

　　下面的例子在chrome浏览器中运行正常，有些例子firefox不能运行，其他浏览器我没有测试，所以建议大家使用chrome浏览器作为自己首选的html5浏览器。我没有把注意力放在浏览器的兼容问题上，而是把关注点放在学习和实现上。html5还在不断完善中，随着他的普及，我相信主流浏览器对他的支持会越来越好，到时候浏览器兼容问题会好很多。

　　1.accesskey

　　accesskey属性允许你设置一个或者多个键盘快捷键，这样你就可以选择页面上的元素了。我们看下面的例子：

<!DOCTYPE HTML>
<html>
<head><title>Example</title>
</head>
<body><form>Name: <input type="text" name="name" accesskey="n"/><p/>Password: <input type="password" name="password" accesskey="p"/><p/><input type="submit" value="Log In" accesskey="s"/></form>
</body>
</html>

　　在这个例子中，你就可以使用组合键选择页面中的元素了，比如在windows操作系统下，可以使用alt+XXX来选择某个元素。

运行效果：

　　2.class

　　这个属性我就不想多说什么了，就是一个对元素实现分组的功能，更多的时候是结合css使用，为不同组的元素设置不同的显示效果。

　　3.contenteditable

　　这是html5新增的属性，为html元素添加contenteditable属性，将其设置为true，允许用户编辑元素内容；设置为false，不允许用户编辑。

<!DOCTYPE HTML>
<html>
<head><title>Example</title>
</head>
<body><p contenteditable="true">It is raining right now</p>
</body>
</html>

　　4.contextmenu

　　contextmenu允许用户设置html元素的右键菜单，当用户触发的时候菜单会弹出。到目前为止还没有浏览器支持此属性。

　　5.dir

　　dir属性定义html元素文字的对齐方式，支持两个值，ltr（从左到右）和rtl（从右到左）。

<!DOCTYPE HTML>
<html>
<head><title>Example</title>
</head>
<body><p dir="rtl">This is right-to-left</p><p dir="ltr">This is left-to-right</p>
</body>
</html>

　　6.draggable

　　draggable是html5中实现html元素拖拽功能的属性，我们会在后面的课程中详细介绍。

　　7.dropzone

　　dropzone也是html5中实现html元素拖拽功能的属性，我们会在后面的课程详细介绍。

　　8.hidden

　　这个属性大家应该都比较熟悉，就是隐藏一个html元素。

　　9.id

　　这个属性应该大家都知道，他为html元素设置一个唯一标识，一个html页面中不允许存在相当id的元素。

　　10.lang

　　lang指定html元素内容所使用的语言。lang的值必须是一个有效的iso语言代码，你可以访问下面的地址了解更多详情，http://tools.ietf.org/html/bcp47。需要注意的是处理语言是一个相当复杂和有技术含量的事情。

<!DOCTYPE HTML>
<html>
<head><title>Example</title>
</head>
<body><p lang="en">Hello - how are you?</p><p lang="fr">Bonjour - comment êtes-vous?</><p lang="es">Hola - ¿cómo estás?</p>
</body>
</html>

　　11.spellcheck

　　当使用spellcheck属性的时候，浏览器会帮你检查html元素文本内容的拼写是否正确，只有当html元素可编辑的情况下，spellcheck属性才有意义。

<!DOCTYPE HTML>
<html>
<head><title>Example</title>
</head>
<body><textarea spellcheck="true">This is some mispelled text</textarea>
</body>
</html>

　　效果：（我用chrome没有运行出想要的效果，不知道为什么）

　　12.style

　　这个属性也不用过多介绍，为html元素设置css样式。

　　13.tabindex

　　tabindex允许你定义html元素使用tab键时的访问顺序。当tabindex设置为-1的时候，用户使用tab键该html元素将不会被选中。

<!DOCTYPE HTML>
<html>
<head><title>Example</title>
</head>
<body><form><label>Name: <input type="text" name="name" tabindex="1"/></label><p/><label>City: <input type="text" name="city" tabindex="-1"/></label></p><label>Country: <input type="text" name="country" tabindex="2"/></label></p><input type="submit" tabindex="3"/></form>
</body>
</html>

效果：

　　14.title

　　title可以为html元素提供附加信息，他经常用于显示提示信息。

<!DOCTYPE HTML>
<html>
<head><title>Example</title>
</head>
<body><a title="Apress Publishing" href="http://apress.com">Visit the Apress site</a>
</body>
</html>

效果：

　　今天的课程就到此为止了，希望这些内容对大家有帮助。

　　demo下载地址：Html5Guide.rar

转载于:https://www.cnblogs.com/softlover/archive/2012/09/04/2671127.html

html5指南--1.html5全局属性（html5 global attributes）相关推荐

html5表单新增验证属性,HTML5表单增强属性
email 此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果. url 要求输入格式正确的URL地址,Ope ...
《HTML5游戏编程核心技术与实战》一2.6 其他全局属性
本节书摘来异步社区<HTML5游戏编程核心技术与实战>一书中的第2章,第2.6节,作者: 向峰责编: 杨海玲,更多章节内容可以访问云栖社区"异步社区"公众号查看. 2 ...
html表单的常用属性有哪些,整理HTML5中表单的常用属性及新属性
这篇文章主要介绍了使用HTML5进行SVG矢量图形绘制的入门教程,包括基本图形的绘制和简单的渐变效果等介绍,注意旧版本IE对其的支持并不好,需要的朋友可以参考下 HTML5 新的表单属性 HTML5 ...
html5中有哪些新属性,整理HTML5中表单的常用属性及新属性
HTML5 新的表单属性HTML5 的和标签添加了几个新属性.新属性: autocomplete novalidate 新属性: autocomplete autofocus form forma ...
html5跟html4有什么区别,Html5和Html4的区别
html5解决了:web浏览器之间的兼容性很低.文档结构不明确等功能.一.Html5和Html4的区别 (1)语法的改变: 内容类型:文件名还是 .html或 .htm:文件类型还是 texttype ...
HTML5全局属性和事件
全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等.HTML5中又新增了一些特殊功能的全局属性和事件. 属性: HTML5属性能够赋给标签元素含义和语境,下面 ...
html5干货,干货：详解HTML5中常见的五大全局属性
HTML5中新增了"全部属性"的概念.所谓全局属性它是指可以对任何元素都可以使用的属性,今天为大家详细介绍三种常见的全局属性. contentEditable属性 contentE ...
html5写入唯一标识,id - 唯一标识符 - html5全局属性
id id全局属性定义唯一标识符(ID),该标识符在整个文档中必须是唯一的.其目的是在链接(使用片段标识符),脚本或样式(使用CSS)时标识元素. 示例 A normal, boring paragr ...
HTML5: 全局属性
出处:http://www.cnblogs.com/starof/p/4593741.html 全局属性:对于任何一个标签都是可以使用的属性. 一.data-* 在html5之前需要在html标签上添 ...

html5指南--1.html5全局属性（html5 global attributes）

html5指南--1.html5全局属性（html5 global attributes）相关推荐

最新文章

热门文章