html5 | 易学教程

浏览器数据库 IndexedDB 入门教程

阅读更多关于浏览器数据库 IndexedDB 入门教程

一、概述随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。 IndexedDB 具有以下特点。（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。（2）异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比

移动端悬浮球可拖拽可点击效果

阅读更多关于移动端悬浮球可拖拽可点击效果

需求：拖拽松开时，x轴方向，离哪近吸附到哪边 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>移动端可拖拽效果</title> <style> .ball { position: fixed; line-height: 2.75rem; width: 2.75rem; height: 2.75rem; padding: .5rem; text-align: center; border-radius: 99px; color: #fff; /*border: 1rem solid transparent;*/ background-color: #00bc12; background-clip: padding-box; text-decoration: none; top: 13em; } </style> </head> <body> <div style="height: 2000px;">拖拽效果测试，PC浏览器访问，需打开控制台进入移动模式。</div> <a href="https://blog.csdn.net/qq

HTML5 拖放

阅读更多关于 HTML5 拖放

本节我们学习 HTML5 中的拖放，拖放是一种常见的特性，也就是抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。拖放事件拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。被拖动元素的相关事件如下所示：事件描述 ondragstart 用户开始拖动元素时触发 ondrag 元素正在拖动时触发 ondragend 用户完成元素拖动后触发容器相关事件如下所示：事件描述 ondragenter 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover 当被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave 当被鼠标拖动的对象离开其容器范围内时触发此事件 ondrop 在一个拖动过程中，释放鼠标键时触发此事件如何实现元素的拖放我们通过上述的拖放事件来实现将下图“你好，侠课岛”，拖放到上面的矩形框中的演示效果：首先创建一个HTML文本，用于测试代码，如下所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5学习(9xkd.com)</title> <style type="text/css"> .div1{ width:200px; height:100px; padding:20px

Web前端兼容性指南

阅读更多关于 Web前端兼容性指南

一、Web前端兼容性问题一直以来，Web前端领域最大的问题就是兼容性问题，没有之一。前端兼容性问题分三类：浏览器兼容性屏幕分辨率兼容性跨平台兼容性 1、浏览器兼容性问题第一次浏览器大战发生在上个世纪90年代，微软发布了IE浏览器，和网景公司的Netscape Navigator大打出手，1998年网景不得不将公司卖给AOL。没有了对手的IE不思进取，W3C标准支持发展缓慢，为以后的IE兼容性灾难埋下了伏笔。到2004年，IE的市场份额达到95%，但在此之后IE的份额逐步遭其他浏览器蚕食，主要包括Firefox，Chrome，Safari和Opera。. 2001年8月27日，微软发布IE6，时隔五年直到2006年才发布了IE7。2009年3月19日，经历了众多测试版后，IE8最终发布，虽然IE8针对旧版IE在多方面做了很大改进，但在HTML5、CSS 3等标准支持方面仍落后于其他浏览器对手。这三个版本的IE是所有兼容性问题的最大根源，堪称前端噩梦。 IE6、7、8不支持HTML5、CSS3、SVG标准，可被判定为“极难兼容” IE9不支持Flex、Web Socket、WebGL，可被判定为“较难兼容” IE10部分支持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容” IE11部分支持Flex、WebGL，可被判定为“较易兼容” IE6

HTML5中的audio在手机端和微信端的不能自动播放

阅读更多关于 HTML5中的audio在手机端和微信端的不能自动播放

再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流量所设置的通常解决方法是给一个交互事件：标签: < audio loop src = " /photo/aa.mp3 " id = " audio " autoplay preload = " auto " > 该浏览器不支持audio属性</audio> 解决方法: //--创建页面监听，等待微信端页面加载完毕触发音频播放 document . addEventListener ( 'DOMContentLoaded' , function ( ) { function audioAutoPlay ( ) { var audio = document . getElementById ( 'audio' ) ; audio . play ( ) ; document . addEventListener ( "WeixinJSBridgeReady" , function ( ) { audio . play ( ) ; } , false ) ; } audioAutoPlay ( ) ; } ) ; //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放 document . addEventListener (

HTML5中是否有minlength验证属性？

阅读更多关于 HTML5中是否有minlength验证属性？

问题： It seems the minlength attribute for an <input> field doesn't work. 似乎 <input> 字段的 minlength 属性不起作用。 Is there any other attribute in HTML5 with the help of which I can set the minimal length of a value for fields? HTML5中是否还有其他属性可以帮助我设置字段值的最小长度？解决方案：参考一： https://stackoom.com/question/h8o6/HTML-中是否有minlength验证属性参考二： https://oldbug.net/q/h8o6/Is-there-a-minlength-validation-attribute-in-HTML5 来源： oschina 链接： https://my.oschina.net/u/4438370/blog/4411011

前端HTML5+CSS3静态页面开发-京东首页

阅读更多关于前端HTML5+CSS3静态页面开发-京东首页

前端html5+css3静态页面开发-京东首页项目介绍（1）京东首页项目由html + css 布局完成页面，对前端基础知识的入门及掌握有非常好的提升效果，本项目旨在教授HTML和CSS的基础知识，提升基础技能，使用的工具可以是简单的代码编辑工具，这里使用VSCode(Visual Studio Code)进行项目代码的编辑。（2）VSCode的下载地址：https://code.visualstudio.com/,根据自己的电脑下载对应的版本，按照默认的安装进程将工具安装好。项目相关知识点 HTML + CSS 盒子模型 + 浮动 + 定位部分H5标签和C3属性项目演示图实现步骤（1）将所用到的图片插入项目的images文件夹中，京东图标导入项目中。（2）将所用到的外部样式文件 normalize.css放入项目的css文件夹中。（3）将所需要导入的字体文件font文件导入项目中。导入后的项目如图：（图片中的笔记文件是小编自己记录的笔记，大家可以不创建笔记文件）引入css样式我们要注意的是，引入外部css时，路径一定要写正确，否则将没有css样式修饰。注：meta标签中charset指定了编码格式，descroption是页面内容描述，Keywords是搜索引擎搜索页面的关键字，title标签是页面标题。引入字体样式css部分。代码如下：

HTML5可以从事的工作有哪些？

阅读更多关于 HTML5可以从事的工作有哪些？

HTML5可以从事的工作有哪些？你了解吗？首先我们有必要了解一下HTML5前端工程师的岗位需求与薪资待遇。这是某招聘网站上一公司对HTML5前端工程师的岗位需求： 1、负责主线产品App及Web系统、推广活动等前端页面的开发和优化。 2、精通HTML5/CSS3,JS,Ajax等Web开发技术。 3、熟悉HTML5+CSS3+JS编程,熟悉各种前端调试工具;熟悉JS性能优化。 4、熟悉JQ等主流的JS库,了解其运行机制;熟悉前端MVC架构。 5、熟悉各种浏览器的兼容性调试。再来说一下HTML5前端工程师的薪资待遇。 1、职位月薪：跨度较大，初级七八千的有，中高级月薪数万的也不在少数。 2、保险：五险一金+房补 3、其他福利：年底双薪、年终分红、加班补助、全勤奖、带薪年假、员工旅游了解了HTML5前端工程师的岗位需求与薪资待遇之后，我们不妨再来了解一下HTML5前端工程师可以从事哪些工作? 1、相关的研究类机构这类机构很多都比较轻松，研究成果也不一定能转化为成果。挣钱靠的是资历，对于刚毕业的应届生来说薪资会比较低。不过，这种公司适合不想竞争但很想深入研究一些课题的人员。 2、互联网类型的公司与企业这类公司主营的项目一般不同，但是在这类的公司中一般会有比较大的发展空间，而且薪资待遇也会比较高。在这类公司中，需要本人有很强的技术能力以及项目开发能力。这类的公司适合那种敢于竞争

前端后端傻傻分不清楚，这里给你答案

阅读更多关于前端后端傻傻分不清楚，这里给你答案

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。多数后端开发人员从事于构建工作应用程序背后的实际逻辑。前后端需要相互配合，共同完成一个项目。那到底什么是前端？什么是后端呢？接下来小编带你一起来了解前端与后端技术的区别。一、什么是前端开发？ 1、前端概念前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。 2、前端特点前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。 3、前端主要技术：HTML、CSS、JavaScript 这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。（1）HTML 指的是超文本标记语言 (Hyper Text Markup Language)

WebSockets与服务器发送的事件/ EventSource

阅读更多关于 WebSockets与服务器发送的事件/ EventSource

问题： Both WebSockets and Server-Sent Events are capable of pushing data to browsers. WebSockets 和服务器发送事件都能够将数据推送到浏览器。 To me they seem to be competing technologies. 在我看来，它们似乎是竞争技术。 What is the difference between them? 它们之间有什么区别？ When would you choose one over the other? 您何时会选择一个？解决方案：参考一： https://stackoom.com/question/LnZc/WebSockets与服务器发送的事件-EventSource 参考二： https://oldbug.net/q/LnZc/WebSockets-vs-Server-Sent-events-EventSource 来源： oschina 链接： https://my.oschina.net/stackoom/blog/4328876

订阅 html5