在之前的一篇文章中，我们已经了解并介绍过了5种全局属性，在本篇文章中将会详细介绍更多的全局属性。希望对大家有所帮助。

1.class属性

在HTML5中可以使用class属性对元素指定CSS类选择器。CSS类选择器用于指定元素使用什么样式进行展示。使用class属性给＜span＞元素指定字体大小和颜色的代码如下图：

2.id属性

id属性规定了HTML元素在整个HTML文档中的唯一标识。id属性的语法如下：

＜element id="value"＞

在HTML文档中，可以使用id属性准确定位HTML元素，从而对元素进行各种操作。比如使用id属性给HTML元素设置样式的代码如下图：

3.title属性

title属性用于描述元素的信息，当用户将鼠标悬停到具有该属性的元素上时，会显示title的内容信息。代码和效果如下图：

4.style属性

style属性用于规定元素的行内样式，并覆盖任何全局的样式设定。像通过样式选择器设定文本的颜色为黄色，同时又通过style属性设定文本的颜色为蓝色，那么style属性将覆盖样式选择器，字体将显示为蓝色。代码及效果如下图所示：

5.accesskey属性

accessKey属性用于给HTML元素定义快捷键，以便获得焦点或激活元素。比如在一个HTML文档中有两个按钮，其中一个设置了快捷键，另一个没有设置，当按下快捷键时，获得焦点的按钮是有一个蓝色的边框的，代码及效果如下图所示

6.dir属性

dir属性规定了元素内容的排列方向。该属性对应三个值，如果是从左向右排列，则使用ltr；如果是从右向左排列，则使用rtl；如果要根据浏览器内容自动判断，则使用auto。代码及效果如下图：

7.contextmenu属性

contextmenu属性是HTML5中新增的属性，用于指定上下文菜单的数据源。当用户在指定位置单击鼠标右键时，弹出右键菜单，并显示菜单，可以显示多级菜单。不过较为可惜的是，目前只有Firefox浏览器实现了该功能。添加菜单的代码和效果如下图：

8.draggable属性

draggable属性是HTML5的一个新属性，用于设置是否可以进行拖曳。draggable的值是一个布尔值，当值为TRUE是可以进行拖曳；当值为FALSE时，不能进行拖曳。将鼠标停放在要拖曳的元素上，按下鼠标左键即可进行拖曳操作。拖曳一段文字的代码及效果如图：

在HTML5中更多的新增属性就到这里了，在下一篇文章中，将为大家介绍新增的主体结构元素。了解更多精彩资讯请加官方微信：pyyuanxing。祝大家生活愉快、身体健康。

TML5的强大之处不仅在于让网页元素更加灵活多变，更在于它可以很方便地实现各种网页动画特效，让你的网站更加富有现代化特色。就现在的浏览器而言，已经基本都支持HTML5了，所以这也方便了我们开发者免去了考虑浏览器兼容性的头疼问题。今天要分享一些令人难忘的HTML5炫酷动画，希望大家会喜欢。

分享之前我先推荐下我自己的web前端学习交流群：675498134，不管你是小白还是大神，我都欢迎你们过来学习交流，不定期分享干货，包括我自己整理的最新的前端资料和教程送给大家，欢迎初学和进阶中的小伙伴，一起学习一起交流，共同进步。

1、HTML5火球挡板碰撞动画游戏

今天我们要再来分享一款超酷的HTML5火球挡板碰撞动画游戏。屏幕上有一个火球在不停的运动，你可以移动鼠标滑动屏幕下方的挡板，火球碰撞到挡板后，即可反弹出去，这是个很有特色的HTML5游戏。

2、HTML5/CSS3圆盘秒表动画 秒表可暂停计时

今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画，秒表可以精确到0.001秒，并且可以在计时过程中暂停计时，同时秒表可以随时重置。

3、3D版HTML5模拟衣服撕扯动画

还记得很早以前向大家分享的这款HTML5 Canvas模拟衣服撕扯动画吗？这绝对是一款非常具有创意而且很好玩的HTML5动画。今天我们来分享一下它的3D版本，在原来的基础上，衣服布料呈3D环形显示，你同样可以用鼠标拖拽衣服，不过和之前不同的是，鼠标左键用来拖拽衣服，鼠标右键用来切割衣服，失去了之前鼠标用力程度和衣服破碎程度的关系，似乎功能上有所缺失，但是HTML5 3D功能还是不错的。

4、纯CSS3实现超酷的磁带动画

记得之前分享过一款HTML5磁带式古典播放器，效果相当震撼。这次我们要用纯CSS3来实现一个超酷的磁带动画特效。首先用纯CSS3绘制了一个磁带的外观，还是相当逼真的，然后用CSS3的动画属性实现了磁带的旋转，就像在播放歌曲一样，如果配合HTML5的音频播放功能，就和那个磁带播放器差不多了。

5、HTML5仿Apple Watch时钟动画

Apple Watch刚刚发布不久，就已经有国外的大牛将其时钟表盘界面用HTML5模仿出来了，并且这款HTML5仿Apple Watch的时钟是动态的，可以根据本地时间实时更新指针数据。时钟的界面非常华丽，确实有苹果的风格，HTML5也的确非常强大。

6、纯CSS3和SVG鼠标滑过灯泡发光特效

这次要分享一款利用纯CSS3和SVG实现的灯泡发光效果，我们只需要将鼠标滑过灯泡，整个灯泡就会出现发光发亮的动画特效，效果相当逼真。CSS3的运用，让灯泡外围有一层淡淡的光晕。并且在灯光点亮和熄灭的时候有淡入淡出的效果。

7、HTML5动感的火焰燃烧动画特效

这又是一款基于HTML5的超炫动画特效，是一款动感的火焰燃烧动画效果。这款HTML5动画火焰燃烧非常逼真，之前我们也分享过一些其他的HTML5火焰燃烧动画，比如：HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画。一般像这样的HTML5动画都是基于Canvas的，今天的这款也不例外。

8、CSS3图片倾斜效果 可倾斜四个角度

今天我们再来分享一款CSS3图片特效，它可以让网页上的图片倾斜任意的角度，其实在CSS3中实现图片的倾斜非常简单，我们并不需要利用复杂的JS计算各种角度，只要用CSS3的transition属性即可完成图片的倾斜效果，非常简单，具体实现大家可以看DEMO演示。

分享到这里就告一段落了，学习web前端的朋友可以来我的群，群里每天都有对应资料学习：675498134，欢迎初学和进阶中的小伙伴。

HTML5神秘的面纱，即将被揭开。

废话不多说，直接进入正题。HTML5一些新特性不得不令我们折服。

下面这些都是用HTML5实现的，大家如果觉得好的话，分享一下，让更多的人去了解HTML5神秘的色彩

1. HTML5模拟微信打飞机

这是一个HTML5 模拟微信打飞机的游戏，只需用鼠标滑动即可移动。。

想必大家已经玩多了，那在这里敢不敢证明自己，留下游戏截图呢

2. HTML5实现烟花绽放炫酷特效

利用HTML5实现烟花特效，默认随机绽放烟花，当鼠标左击移哪放哪。

3.HTML5中国象棋游戏 自定义象棋难度

棋类游戏在桌面游戏中已经非常成熟，中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色，我们不仅可以选择中国象棋的游戏难度，而且可以切换棋盘的样式。程序写累了，喝上一杯咖啡，和电脑对弈几把吧，相信这HTML5中国象棋游戏的实现算法你比较清楚。

4.HTML5超级玛丽游戏重体验 HTML5游戏经典

还记得小时候一起玩过的超级玛丽冒险游戏吗？是的，那是我们小时候很火的一款游戏，今天老外利用HTML5技术让超级玛丽可以在网页上跑了，HTML5版的超级玛丽虽然没有原版的功能强大，但是如果你有兴趣，完全可以把它写完善了。HTML5真的很强大，HTML5游戏方面更是犀利。

看完是不是觉得HTML5有很浓厚的兴趣了呢？如果有的话可以给小编点个播关注，多多转载文章