我们结合移动设备（手机和平板电脑）的特性，介绍HTML5中新增的语义化标签元素，以及在移动Web浏览器下Web页面布局的知识及例子。 在HTML5标准添加的新元素中，用于常见页面结 构的包括header footer footer nav aside aside article section hgroup 。 下面简单介绍一下这个元素： 1.header header>元素定义文档的页面组合，通 常是一些引导和导航信息，标签内通常包含 secti- on的头部信息，如h1~h6 或 hgroup等。 代码如下: ...
MutationObserver介绍 MutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力.该API设计用来替换掉在DOM3事件规范中引入的Mutation事件. Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。 Mutation Observer有以下特点：?它等待所有脚本任务完成后，才会运行，即采用异步方式 ?它把DOM变动记录封装成一个数组进行处理，而不是一...
Html5 的local storage 是通过浏览器在本地存储的数据。基本使用方法如下：JavaScript Code复制内容到剪贴板"text/javascript"> localStorage.firstName = "Tom"; alert(localStorage.firstName); 这样的话，就将数据保存到本地了，但是本地数据是以什么形式进行保存的呢，经过跟踪，发现在Chrome浏览器中，数据是以sqlite的数据库文件形式存储的。在windows下，是保存在C:\Documents and Settings\User Name\Loca...
效果图如下所示：查看演示效果 源码下载 HTML 建立一个HTML5页面，放置标签，设置音频文件源，设置循环播放。准备两张图片，分别表示开启和暂停背景音乐两种状态，可以点击。 XML/HTML Code复制内容到剪贴板audio id="music2" src="music.mp3" loop="loop">你的浏览器不支持audio标签。audio> a href="javascript:playPause();">img src="pause.gif" width="48" height="50" id="music_btn2" border="0">a> Javascript 我...
一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变，主要有如下： 1.HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变。 2.HTML5中，刻意不使用版本声明，一份文档将会适用于所有版本的HTML。 3.从HTML5开始，对于文件的字符编码推荐使用UTF-8。 4.HTML5确保了与之前HTML版本的最大程度的兼容性。 为了保证兼容性，需从元素说起，在HTML5.中，元素的标记可以省略。其体来说，元素的标记分为&ld...
HTML5是什么？ 狭义的HTML5 HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。 最近几年web前端开发领域最热的话题当属HTML5，HTML5从根本上改变了开...
效果图如下所示： 代码如下： XML/HTML Code复制内容到剪贴板> html lang="zh"> head> meta charset="UTF-"> meta http-equiv="X-UA-Compatible" content="IE=edge,chrome="> meta name="viewport" content="width=device-width, initial-scale=."> title>jQuery比bootstrap效果还帅的响应式模态窗口插件 - 何问起title>base target="_blank" /> link rel="stylesheet" href="http://hovertree.com/texiao/ht...
在传统的html中，某个文件的下载，是这样的： XML/HTML Code复制内容到剪贴板a href="=/files/abc1234564545.pdf">reporta> 而在HTML 5浏览器中，可以支持download属性了，如下： XML/HTML Code复制内容到剪贴板a href="=/files/abc1234564545.pdf" download="abc">reporta> download属性的好处在于，在用户下载文件的时候，显示在用户浏览器 中的“另存”为的文件显示框中，显示的是这个downloader属性中显示的 东...
如今基于Bootstrap框架的免费HTML5网站已经开始成为行业趋势。研究人员已经证实，Bootstrap是引领设计和开发行业趋势效果最为显著的。这就是为什么，开发商使用基于Bootstrap的HTML5模板来创建他们的网站的重要原因。在这篇文章中，我们展示了由一些极具经验和创意的设计者所设计的30个免费的HTML5模板，它们都能免费进行下载，你还可以在模版中重新添加新的类，进行再创作。 1、单页Bootstrap商业模板2、AppBox-免费的APP登录页面...
刚刚开始接触 HTML5 时，对它的标签很不适应，甚至一度有点反感。尤其是对 div、section、article 这几个标签，实在弄不清楚应该使用在什么场合下。div HTML Spec:The div element has no special meaning at all. 这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义，用作布局以及样式化或脚本的钩子(hook)。section HTML Spec: “The section element represents a generic section of a document or application. A...
WebSockets Web Sockets 是用于 Web 应用程序的新一代双向通信技术，运行在单一套接字之上，它通过 JavaScript 接口暴漏在 HTML5 兼容的浏览器中。 一旦取得 Web 服务器上的 Web Socket 连接之后，就可以通过调用 send() 方法从浏览器发送数据到服务器上，通过 onmessage 事件处理程序从服务器接收数据到浏览器中。 下面是创建一个新的 WebSocket 对象的 API。JavaScript Code复制内容到剪贴板var Socket = new WebSocket(url, [pr...
html5移动开发的出现让移动平台的竞争由系统平台转向了浏览器之间：移动端的IE、Chrome、FireFox、Safari，亦或是新出现的浏览器，谁能达到在移动端对HTML5更好的支持，谁就能在以后的移动应用领域占据更多的市场。更灵活、更方便的app使用及安装方式将成为HT]L5在移动平台上大放异彩的保障之一。下面列举HTML5适合移动应用开发的几大特性：1.离线缓存为HTML5开发移动应用提供了基础HTML5 Web Storage API可以看做是加强版的cookie...
这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。HTML代码XML/HTML Code复制内容到剪贴板div id="level"> div id="content"> div id="gears"> div id="gears-static">div> div id="gear-system-1"> ...
一、展示 因为前端上传文件是必须通过form表单的，不能使用ajax，这样的话一个移动页面放入一个type为file的input真心不怎么好看，如下图，很挫有没有 解决办法找了下，PC上有些是把这个input换成flash，采用jquery的工具库比如uploadify来做，但是移动端大部分浏览器是不支持flash的。所以最后采用的办法还是用form表单的形式，只是把这个form和input的透明度设置为0，让它们和准备显示的内容同时在一个div中，显示的内容可以做成...
DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取，让你可以在用户的访问记录中前进和后退。 从HTML5开始，我们可以开始操作这个历史记录堆栈。 1.History 使用back(),forward(),和go()方法可以在用户的历史记录中前进和后退 前进和后退 后退： 代码如下:window.history.back(); 这个方法会像用户点击了浏览器工具栏上的返回键一样。 同样的，也可以用以下方法产生用户前进行为： 代码如下:window.history.fo...