在之前的一篇文章中，我們已經了解并介紹過了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有很濃厚的興趣了呢？如果有的話可以給小編點個播關注，多多轉載文章