HTML5
xiongzhengxiang
这个作者很懒,什么都没留下…
展开
-
你必须知道的28个HTML5特征、窍门和技术
前端的发展如此之迅猛,一不留神,大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话,可以把本文的内容作为必须了解的热身课程。一、新的Doctype//zxx:”doctype”中文意思指“文档类型”仍在使用麻烦的,不可能记得住的XHTML文档类型?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML转载 2011-11-30 18:53:31 · 1443 阅读 · 0 评论 -
为什么要使用responsive web design
1 url 统一2 方便seo3 网站都要迭代,维护一个的成本,比维护n个的成本小得多4 用户需要完整的内容,而非针对mobile 裁剪的内容译文:http://mobile.smashingmagazine.com/2013/02/14/responsive-web-design-planning-future/原创 2013-04-16 09:42:17 · 724 阅读 · 0 评论 -
移动端 viewport 概念介绍
移动浏览器移动设备比桌面设备屏幕小很多,如果把桌面浏览器viewport的概念照搬过来会出现什么后果?假设流动布局的网站,一般给侧栏设置width:30%,那么假设移动浏览器宽高是320*480,那么这个侧栏实际拥有的宽度只有不到100px,放几个字都不够,这会让你的网站显得很糟糕,一大票在桌面浏览器结构良好的网页在移动浏览器上都会惨不忍睹。移动浏览器的设计者就希望移动设备原创 2013-05-28 12:25:51 · 944 阅读 · 0 评论 -
html5 保存文件
利用浏览器做一个工具时,往往操作的对象就是文件本身,我们需要打开文件,然后对文件进行处理,最后,将处理后的数据,以文件的形式保存起来那么:我们怎么保存文件呢?以下提供两个方案 :1 大家都不陌生,我们在浏览器上经常使用,单击一个链接,启动下载,如下:function createDownloadLink(dataUrl,fileName){ var save_link原创 2013-05-30 18:53:43 · 3211 阅读 · 0 评论 -
Deep dive into the murky waters of script loading
IntroductionIn this article I’m going to teach you how to load some JavaScript in the browser and execute it.No, wait, come back! I know it sounds mundane and simple, but remember, this is h转载 2013-06-19 09:33:33 · 1100 阅读 · 0 评论 -
增强网站可访问性的25种方法
随着web使用量的增加和人们网络意识的增强,可访问性(或“通用设计”)变得更加重要。可访问性不仅取决于一个网站的代码,还受网站设计和内容的影响,这就是为什么可访问性、标准和可用性关系如此紧密。网页无障碍是一个庞大的课题,已自成一个领域。 但不要被它吓到。无障碍并不是非常难以实施。它并不会像一些人想象的会有碍美观或影响交互。这是一种高明的(smart)设计和开发方式。让我们来看看建立转载 2013-07-15 17:38:28 · 3217 阅读 · 0 评论 -
web标准—可用性、可维护性、可访问性
一直听说过web标准的可用性、可访问性、可维护性,但是具体的定义,我还是不是很清楚,今天总结下,理清一下思维。 在Web前端开发界,有三个词经常被提及:可用性(Usability)、可访问性(Accessibility)和可维护性(Maintainability)。可用性指的是:产品是否容易上手,用户能否完成任务,效率如何,以及这过程中用户的主观感受可好,是从用户的角度来看产品的质量。转载 2013-07-15 17:44:06 · 879 阅读 · 0 评论 -
css3 动画结束事件
getTransitionEvent = function () { var t, type, supported = false, el = document.createElement("fakeelement"), transitions = { "WebkitTransition" : "w原创 2013-07-18 17:37:06 · 1360 阅读 · 0 评论 -
web aria 例子
Making Images AccessibleThe standard tag supports an alt attribute that provides an alternative, textual description of the image. That description is important for accessible websites, as users wi原创 2013-07-26 17:06:18 · 806 阅读 · 0 评论 -
写工具的一些链接
chrome extension 提交::https://chrome.google.com/webstore/developer/update原创 2013-08-06 16:29:04 · 560 阅读 · 0 评论 -
svg 使用图片做背景
SVG Fill PatternsBy Jakob JenkovShare on Facebook Connect with me: SVG fill patterns are used to fi转载 2013-10-16 14:28:35 · 5515 阅读 · 0 评论 -
chrome devtool extension debug 方法
需要调试的页面,写到options_page 属性中{ "name": "Sample", "version": "0.1.0", "description": "Sample DevTools Extension", "devtools_page": "devtools.html", "options_page": "panel.html", "manifest_ve原创 2014-02-13 16:46:59 · 2164 阅读 · 0 评论 -
mobile组件开发有哪些不一样的
手机端组件开发,同pc上,有很多共同点,也有很多不同点共同点:1 组件实现功能一致,对外暴露接口一致不同点:1 考虑的浏览器兼容性不一样2 对html5 和 css3 支持不一样3 性能要求不一样。手机上,cpu 、内存性能同pc还有很大差距,这样在手机上要更关注性能一些4 手机屏幕丰富多彩,这样就要求组件构建的时候,考虑到responsive design5 可以原创 2014-04-30 17:30:47 · 696 阅读 · 0 评论 -
pc 调试手机页面的方法
第一种 利用chrome自带功能1 打开手机的USB Web debugging in Chrome Beta for Android这个实验室功能2 将装有Chrome 的Android手机通过USB插入到你的电脑上3 进入电脑的Chromium浏览器的chrome://inspect里,即可看到pc控制手机浏览器的界面。点击inspect ,即可像本地调试一样,原创 2014-04-28 17:10:13 · 1324 阅读 · 0 评论 -
display table 布局 和box 布局同样的内容
参考:原创 2014-10-24 20:28:33 · 614 阅读 · 0 评论 -
webkit 浏览器,多行省略
@media all and (-webkit-transform-3d) { .sc_structure_doc .sc_title { white-space:normal; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient: vertical; }}原创 2014-10-30 14:23:18 · 1017 阅读 · 0 评论 -
Detect Orientation Change on Mobile Devices
Unless your mobile application allows for only portrait or only landscape views, there's a good chance you will need to adjust a few things. Even if you've built your layouts in a fluid fashion, you m转载 2013-01-31 19:31:51 · 1050 阅读 · 0 评论 -
手机Web开发 jQuery 获取屏幕高度、宽度
jQuery 获取屏幕高度、宽度做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下。alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度转载 2013-01-29 17:33:05 · 20888 阅读 · 0 评论 -
前端开发牛逼人的blog
张克军 http://hikejun.com/blog/玉伯 http://hi.baidu.com/bujichong/blog李松峰 http://www.cn-cuckoo.com/阮一峰 http://www.ruanyifeng.com/blog/archives.html田永强(朴灵)(淘宝):xxx元彦 http://www.alloyte原创 2011-09-15 09:46:49 · 1027 阅读 · 0 评论 -
Microdata – HTML5之语义扩展
语义网是一个梦想:互联网上所有的内容都是数据,这些数据和现实世界的具体事物相关,各个应用程序和设备都可以识别和使用这些数据。HTML标签本身在不断朝着语义化方向发展,但是这些标签数量有限,远远不能满足需求,于是一些其他的技术出来,用来增强和扩展语义。大部分网页都是以HTML格式被呈现的,而前端攻城师每天接触的都是HTML文件,于是我们编写的代码直接影响着语义网的发展…^^*…这个话说的有点大了转载 2011-12-08 09:20:36 · 2242 阅读 · 0 评论 -
htm5 基础函数的作用
1. translate(80,80)的意思就是说以x=80,y=80的这个像素点作为(0,0)坐标,以后的坐标都是相对于这个标准的。2. rotate(90 * Math.PI / 180) 按顺时针旋转90度。原创 2011-12-09 18:27:22 · 473 阅读 · 0 评论 -
How to Draw with HTML 5 Canvas
转自:http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/转载 2011-12-11 09:34:10 · 495 阅读 · 0 评论 -
html5 canvas tree draw
var tree = { canvas: '', ctx: '', height: 0, width: 0, spread: 0.6, drawLeaves: true, leavesColor:'', leaveType: this.MEDIUM_LEAVES转载 2011-12-11 20:29:16 · 1521 阅读 · 0 评论 -
Understanding save() and restore() for the Canvas Context
At first, I had a hard time grasping the purpose and use of the save()and restore() methods of the canvas’ 2d context. It’s really very simple and here are some examples that can help you understand i转载 2011-12-12 21:00:37 · 679 阅读 · 0 评论 -
HTML5 canvas画的摇摆的树
Tree cssass.com提醒您:ie9以下用户请一边惭愧去吧 var con=document.getElementById("pad").getContext('2d'); con.strokeStyle = '#0f0'; con.lineWidth=1.8; var Tree=functio转载 2011-12-09 14:57:57 · 1239 阅读 · 0 评论 -
html5 语言标签重构布局
1. 新的Doctype声明XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明。HTML5的Doctype声明很短,看到这个声明相信你马上就能记住,不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模原创 2012-04-01 14:40:08 · 965 阅读 · 0 评论 -
史无前例的 HTML5 资源参考指南
尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 JavaScript 或 Flash 实现的东西。这里收集了学习 HTML5 的 175 个参考资源,包括教程,框架,示例等。基本上算是 HTML5 葵花宝典了吧?1、基础教程转载 2012-05-15 19:02:59 · 999 阅读 · 0 评论 -
canvas 绘图的步骤
1 得到canvas的dom节点 var demo=document.getElementById('cs');2 得到canvas 节点对应的2d绘图环境 var context=demo.getContext('2d');3 可以开始绘图了... 绘制线的函数 画一条线,可以简单的用 context.moveTo(100原创 2012-06-15 23:17:37 · 795 阅读 · 0 评论 -
HTML5设计原则
打个广告,请有意向加入腾讯的前端,将简历发送至mzxbupt@gmail.com“Be conservative in what you send; be liberal in what you accept. –The Robustness principle”“对于自己输出要严格; 对于他人的输入要灵活. –鲁棒性原则”一切从鲁棒性原则说起, 把鲁棒性原则放在第一转载 2012-06-01 09:51:54 · 1370 阅读 · 0 评论 -
HTML 5布局编码---基本布局框架
非常详细,参见以下两个链接转自:http://blog.sina.com.cn/s/blog_4a3789a70100jjul.htmlhttp://blog.sina.com.cn/s/blog_4a3789a70100jk24.html转载 2012-04-01 17:24:58 · 1290 阅读 · 0 评论 -
web app 是什么?
Web Apps的特性Web apps可以和电子表格,文档编辑器一样复杂,也可以和待做事项管理器一样简单。不管它是什么,它都必须完成某些事情。Web App重新定义了“上网”的含义;web已经成了网站和应用的混合。下面是用来区分web apps和网站的三点要素:1.一个web应用提供了很好的用户体验,让用户能很容易地完成任务,并利用了设备本地的一些性能。2.一个we转载 2012-08-21 18:53:42 · 1080 阅读 · 0 评论 -
Raphaël 学习
1 fire a event 的方法场景:当我们要显示调用某个元素的事件时raphael 对象保存了一个事件数组,数组元素的name属性表示事件的类型,数组元素的f方法,表示对应事件类型的所有绑定的方法。如下,触发click 事件的方法function triggerClick(element) { for(var i = 0, len = element.events.原创 2012-09-13 11:41:09 · 949 阅读 · 0 评论 -
comet 方法大集合 一看就懂
對 Comet 的懵懂記得兩年多前,第一次看到 Gmail 中的 GTalk 覺得很好奇:「咦?線上聊天且是 Google 的熱門系統,只用傳統的 AJAX 應該會操爆伺服器吧?」很幸運的,當時前公司內部的 Tech Talk 就有位同事分享這個叫 Comet 的技術、是種「為了讓瀏覽器與伺服器頻繁溝通所使用的技術、主要的瓶頸在於 WWW 伺服器上。」但因為工作沒有用到這類的需转载 2012-11-15 09:43:05 · 1052 阅读 · 0 评论 -
touch click 的关系
#1 - Clicking and Tapping - the "Natural" Order of ThingsThe first problem is that touch interfaces typically try to emulate mouse clicks - obviously, since touch interfaces need to work on appl转载 2015-01-07 09:36:17 · 585 阅读 · 0 评论