代码改变世界

querySelector()、 querySelectorAll()详解

2012-07-04 15:08 by 江苏黑马, 748 阅读, 0 推荐, 收藏,
摘要:在 传统的JavaScript开发中,查找DOM往往是开发人员遇到的第一个头疼的问题,原生的JavaScript所提供的DOM选择方 法并不多,仅仅局限于通过tag,name,id等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库。你可能会说为什么不适用库,那是很方便的,我的回答是,很多情况下,我们只需要使用一个简单的选择功能,完全没有必要引用整个库,那无非延长了页面加载时间。当前除了IE6和IE7,几乎所有主流浏览器都支持querySelector和querySelectorAll方法。使用它们,你可以像使用CSS选择器一样快速地 阅读全文

音频和视频

2012-06-29 13:38 by 江苏黑马, 624 阅读, 1 推荐, 收藏,
摘要:HTML5的audio和video元素代表这音频你和视频。这里有两个概念需要先理解一下。 视频容器:这里有个封装的概念。封装了音频轨道、视频轨道、元数据(视频封面、标题、子标题、字幕)。主流视频容器支持以下格式的视频文件:.avi、.flv、.mp4、.mkv和.ogg。 音频和视频编解码器:一组用来对音频和视频编码、解码以便能正常播放的算法。主流音频编解码器:AAC、MPEG-3和Ogg Vorbis。主流视频编解码器:H.264、VP8和Ogg Theora。目前除IE以外的主流浏览器都支持audio和video。使用HTML5audio和video的优势: 浏览器自带,因而无需安装... 阅读全文

Canvas API

2012-06-29 10:03 by 江苏黑马, 12067 阅读, 2 推荐, 收藏,
摘要:HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好;其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单。在网页上使用canvas元素时,它会创建一块矩形区域。默认情况下该矩形区域宽为300像素,高为150像素,但也可以自定义具体的大小或者设置canvas元素的其他特性。 1 <body> 2 <div> 3 <header> 4 <h1>index</h1> 5 </header> 6 <nav> 7 阅读全文

HTML5概述

2012-06-28 15:48 by 江苏黑马, 891 阅读, 2 推荐, 收藏,
摘要:对于我们要讨论的HTML5功能,不管现在支持情况如何,不久的将来肯定会变,因为HTML5发展的速度非常快。不用担心,我们会推荐一些非常好的在线资源,用以查看当前(以及将来)浏览器的支持情况。www.caniuse.com网站按照浏览器的版本提供了详尽的HTML5功能支持情况。若用户通过浏览器访问www.html5test.com的话,该网站会直接显示用户浏览器对HTML5规范的支持情况。此外,我们重点不是讨论使用某种模拟或者变通的方法让HTML5程序能够运行在旧浏览器上,而是着重关注HTML5规范本身,以及它的使用方法。也就是说,我们针对所讨论的每个API都会提供一些示例代码,开发人员可以直接 阅读全文

HTML5容易忽略的细节

2012-06-28 12:58 by 江苏黑马, 318 阅读, 0 推荐, 收藏,
摘要:细节一:重新定义<small>原来你可以利用<small>元素来创建与logo密切相关的副标题。不过,现在HTML5修改了这个用法,<small>元素被重新定义了,或者更恰当地说,它现在用来代表小字或其他边注(如,网站底部的版权声明)。不在需要脚本、链接类型很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性1 <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />2 <script type=”text/javascript” src=”pa 阅读全文

HTML5表单

2012-06-28 09:35 by 江苏黑马, 2080 阅读, 0 推荐, 收藏,
摘要:HTML5输入类型:search、url、email、tel、number、range、color、Date pickers (datetime,date, month, week, time,datetime-local)。由于当前浏览器支持效果不好,以下测试是在多个浏览器中的结果searchemailurlnumberrange datetelcolor代码: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="t 阅读全文

HTML5入门教程一

2012-06-27 16:43 by 江苏黑马, 3850 阅读, 0 推荐, 收藏,
摘要:1、HTML5新增基础语义标签 article aside figcaption figure footer header hgroup mark nav section time 下面一段代码展示了这些标签的使用场所 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>HTML5新增语义标签</title> 阅读全文