《HTML5范例宝典》全部案例资源-CSDN文库

共993个文件

html：403个

gif：249个

jpg：134个

HTML5

范例宝典

源码

需积分: 9 151 浏览量 2018-05-08 10:46:34 上传评论收藏 56.99MB ZIP 举报

《HTML5范例宝典》是一本专注于HTML5实践应用的书籍，包含了丰富的实例，旨在帮助读者深入理解和掌握HTML5的各种新特性和功能。这本书共分为16个章节，每个章节都围绕一个或多个主题展开，通过实际的代码示例来讲解HTML5的技术要点。 1. **HTML5基础**：这一部分可能涵盖HTML5的基本结构、元素和语义化标签，如<header>、<nav>、<article>和<footer>等，这些都是构建现代网页的重要组成部分。 2. **表单控制**：HTML5引入了新的表单元素和属性，如<input type="date">、<input type="range">，以及required、pattern等属性，提高了用户体验和数据验证能力。 3. **Canvas绘图**：Canvas是HTML5中的一个强大特性，允许通过JavaScript进行动态图形绘制。读者可以学习到如何在Canvas上绘制线条、形状、图片，甚至是动画。 4. **SVG矢量图**：与Canvas相比，SVG更适合于创建复杂的图形和图标，其优点在于图形可以无损缩放。书中可能包含如何创建、编辑和操作SVG元素的方法。 5. **Web存储**：HTML5提供了本地存储机制，如localStorage和sessionStorage，用于在浏览器中持久化数据，这在实现离线应用和增强用户体验方面具有重要意义。 6. **Web Workers**：这一技术用于在后台线程中执行任务，提高网页的性能和响应速度，特别是在处理大量数据或复杂计算时。 7. **Web Socket**：实时通信是HTML5的一大亮点，Web Socket允许建立持久的双向通信连接，为实时应用如聊天室、游戏等提供了可能。 8. **Audio/Video多媒体**：HTML5提供了原生的音频和视频播放支持，通过<audio>和<video>标签，可以直接在网页中嵌入媒体内容，无需依赖Flash等插件。 9. **Geolocation定位**：通过HTML5的Geolocation API，网页可以获取用户的地理位置信息，为开发地图应用、周边服务等提供了便利。 10. **拖放功能(Drag and Drop)**：HTML5的拖放API使得用户可以方便地在网页元素之间拖放内容，提高了交互性。 11. **离线应用(Offline App)**：利用App Cache和Service Worker，开发者可以构建能够在离线状态下运行的应用，提升用户体验。 12. **Web Components**：这是一个强大的特性，允许自定义可重用的HTML元素，促进了代码的模块化和复用。 13. **CSS3新特性**：书中可能结合HTML5讲解CSS3的新选择器、过渡效果、动画和响应式设计等内容，帮助美化和优化网页布局。 14. ** Accessibility**：HTML5强化了无障碍访问特性，如ARIA属性和语义化标签，使网页对残障人士更加友好。 15. **Progressive Web App (PWA)**：PWA是利用HTML5和其他现代技术构建的渐进式增强型应用，它们具有接近原生应用的体验和离线工作能力。 16. **最佳实践与跨浏览器兼容**：书中可能会介绍如何编写兼容多种浏览器的HTML5代码，以及在实际开发中遵循的最佳实践。通过《HTML5范例宝典》中的实例源码，读者不仅可以了解这些知识点的理论，还能亲手实践，从而更深入地理解并掌握HTML5的精髓。每一个章节的源码都是一个宝贵的资源，可以帮助读者在实际项目中灵活运用这些技术，提升开发水平。

资源推荐

资源详情

资源评论

收起资源包目录

《HTML5范例宝典》全部案例（993个子文件）

2.ani 3KB

aa.avi 10.34MB

bg.bmp 276KB

bg1.bmp 146KB

reset.css 4KB

css.css 3KB

style.css 2KB

css1.css 2KB

css.css 2KB

style.css 2KB

css.css 2KB

style.css 2KB

css1.css 2KB

css5.css 1KB

css1.css 1KB

in.css 1KB

css6.css 1KB

css1.css 776B

css.css 748B

css.css 745B

style.css 623B

in.css 520B

style.css 460B

css.css 444B

css3.css 443B

css.css 391B

css.css 341B

style.css 341B

css.css 337B

css1.css 326B

css2.css 297B

css.css 286B

css.css 240B

css.css 218B

css.css 217B

css1.css 193B

css.css 186B

css.css 130B

css.css 125B

css.css 101B

font.css 31B

.DS_Store 6KB

houtai.gif 195KB

bg.gif 133KB

middle.gif 78KB

middles.gif 78KB

index_04.gif 69KB

215.gif 67KB

middle.gif 59KB

01.gif 50KB

center_bbsdetail.gif 22KB

center_orderdetail.gif 22KB

center_checkout.gif 22KB

center_cart.gif 22KB

center_sellsort.gif 22KB

center_searchresult.gif 22KB

center_goodsdetail.gif 22KB

center_newgoods.gif 22KB

center_sale.gif 22KB

center01.gif 22KB

center_order.gif 22KB

bbss.gif 21KB

bbs.gif 21KB

shop_18a.gif 20KB

bbs2.gif 20KB

center_checkout.gif 20KB

center_empty.gif 20KB

manage_goodsdetail.gif 18KB

center.gif 17KB

center_type.gif 17KB

shop_18.gif 16KB

zc_01.gif 13KB

top.gif 12KB

zc_03.gif 11KB

play_02.gif 11KB

tetris.gif 11KB

clock.gif 10KB

bg_h.gif 10KB

main.gif 10KB

bg1.gif 10KB

bg.gif 10KB

共 993 条

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>水果老虎机</title> <link type="text/css" href="css.css" rel="Stylesheet" /> <style type="text/css"> * { font-size:12px; font-family:宋体; margin:0; padding:0; } </style> <script type="text/javascript"> function LHJ(id) { this.frameid = id; this._doc = document; this._config = { cardwidth: 66, cardheight: 66, betcardwidth:87, betcardheight:87, margin:5, runboxlength:4, runloop:4, maxbet:99 }; this._piecelist = []; this._multitype = { "b_bar":100, "s_bar":50, "b_seven": 40, "b_star":30, "b_watermelons":25, "b_alarm":20, "b_coconut":15, "b_orange":10, "b_apple":5, "small":2, "cha":0 }; this._piecelistposition = {}; this._piecelistmulti = {}; this._piecelisttype = {}; this._money = 0; this._total = 20; //默认为20分 this._startbox = 1; //上次结果，此次的起点 this._endbox = 1; //这是这次的结果 this._jumpnum = 1; //这些需要算出来 this._currentshowlist = [1]; //状态值 this._isfirstbet = true; this._isrun = false; //定时器 this._interval = null; this._mainDiv = null; this.frame = { "piece": {"bg":null,"run":null}, "bet": null }; this._self = this; var i; for (i = 1; i < 25; i++) { this._piecelist.push(i); } } LHJ.prototype.$ = function(id) { if (!this._doc) { this._doc = document; } if (id && typeof (id) === "string") { return this._doc.getElementById(id); } return null; }; // 判断obj是否为数组 LHJ.prototype.isArray = function(obj) { return Object.prototype.toString.call(obj) === '[object Array]'; } // 判断e是否在数组arr中 LHJ.prototype.in_Array = function(arr, e) { for (var i = 0; i < arr.length; i++) { if (arr[i] == e) return true; } return false; } //生成随机数 LHJ.prototype.rand = function(min, max) { return parseInt(Math.random() * (max - min + 1) + min); } LHJ.prototype._getWinNum = function() { var r = this.rand(1, 100); var b = 2; if (r == 100) { //大Bar 1/100 b = 24; } else if (r > 97) { //小Bar 2/100 b = 23; } else if (r >= 95 && r <= 97) { //大77 3/100 b = 12; } else if (r >= 90 && r <= 94) { //大星星 5/100 b = 16; } else if (r >= 84 && r <= 89) { //大西瓜 6/100 b = 4; } else if (r >= 76 && r <= 83) { //大铃铛 8/100 var ar = this.rand(1, 2); switch (ar) { case 1: b = 22; break; case 2: b = 10; break; } } else if (r >= 68 && r <= 75) { //大椰子1 8/100 var ar = this.rand(1, 2); switch (ar) { case 1: b = 3; break; case 2: b = 15; break; } } else if (r >= 59 && r <= 68) { //大桔子1 10/100 var ar = this.rand(1, 2); switch (ar) { case 1: b = 21; break; case 2: b = 9; break; } } else if (r >= 44 && r <= 58) { //苹果 15/100 var ar = this.rand(1, 4); switch (ar) { case 1: b = 1; break; case 2: b = 7; break; case 3: b = 13; break; case 4: b = 19; break; } } else if (r >= 36 && r <= 43) { //CHA 8/100 var ar = this.rand(1, 2); switch (ar) { case 1: b = 6; break; case 2: b = 18; break; } } else { //小东西 var ar = this.rand(1, 7); switch (ar) { case 1: b = 2; break; case 2: b = 5; break; case 3: b = 8; break; case 4: b = 11; break; case 5: b = 14; break; case 6: b = 17; break; case 7: b = 20; break; } } return b; } LHJ.prototype._getpieceinfo = function(i, j) { switch (i + "-" + j) { case "0-0": return { "type":"orange","css": "b_orange", "list": 21, "multi": "b_orange" }; case "0-1": return { "type": "alarm", "css": "b_alarm", "list": 22, "multi": "b_alarm" }; case "0-2": return { "type": "bar", "css": "s_bar", "list": 23, "multi": "s_bar" }; case "0-3": return { "type": "bar", "css": "b_bar", "list": 24, "multi": "b_bar" }; case "0-4": return { "type": "apple", "css": "b_apple", "list": 1, "multi": "b_apple" }; case "0-5": return { "type": "apple", "css": "s_apple", "list": 2, "multi": "small" }; case "0-6": return { "type": "coconut", "css": "b_coconut", "list": 3, "multi": "b_coconut" }; case "1-0": return { "type": "alarm", "css": "s_alarm", "list": 20, "multi": "small" }; case "2-0": return { "type": "apple", "css": "b_apple", "list": 19, "multi": "b_apple" }; case "3-0": return { "type": "cha", "css": "cha", "list": 18, "multi": "cha" }; case "4-0": return { "type": "star", "css": "s_star", "list": 17, "multi": "small" }; case "5-0": return { "type": "star", "css": "b_star", "list": 16, "multi": "b_star" }; case "6-0": return { "type": "coconut", "css": "b_coconut", "list": 15, "multi": "b_coconut" }; case "6-1": return { "type": "coconut", "css": "s_coconut", "list": 14, "multi": "small" }; case "6-2": return { "type": "apple", "css": "b_apple", "list": 13, "multi": "b_apple" }; case "6-3": return { "type": "seven", "css": "b_seven", "list": 12, "multi": "b_seven" }; case "6-4": return { "type": "seven", "css": "s_seven", "list": 11, "multi": "small" }; case "6-5": return

评论收藏

内容反馈