我的HTML会说话——从实用出发,谈谈HTML的语义化

2015-12-21
阅读 3 分钟
6.3k
与同为代码构筑的系统(例如残疾人士阅读器以及搜索引擎爬虫等)沟通,帮助其快速、准确达到目的。由于这类系统与人类的智能相比起来实在有限,因此需要协定好通过什么样的方式来进行沟通,而W3C的决议就是语义化HTML的标准了。

记一段SPA的SEO历程:Html5 History Api 大显神通!

2015-12-10
阅读 3 分钟
7.2k
想当年,我做了一个新媒体网站项目(AIISPO,已下线)。跟普通资讯网站不一样的是,老板要求PC端前台的文章阅读模式一定得是瀑布流+模态框。瀑布流指的是以瀑布流的形式将文章罗列出来,而模态框则指的是点击瀑布流中代表文章的某个文块时,直接在当前页面弹出模态框来显示文章正文。

localstorage 必知必会

2015-12-09
阅读 3 分钟
33k
localstorage在浏览器的API有两个:localStorage和sessionStorage,存在于window对象中:localStorage对应window.localStorage,sessionStorage对应window.sessionStorage。localStorage和sessionStorage的区别主要是在于其生存期。

记离线缓存(manifest)一大坑,断定其只适用于静态网站或离线应用

2015-12-09
阅读 1 分钟
5.4k
今天看了离线缓存(manifest)方面的资料,兴冲冲地就想给自己的网站用上。待我把代码都写好部署上服务器,并测试过OK的时候,在SegmentFault刷了一把manifest方面的问答,才发现这个大坑:manifest除了缓存manifest.appcache文件所指定的资源外,还必定会缓存当前的html页面。

html5系列:notification api升级——从webkitNotifications到Notification

2015-12-02
阅读 2 分钟
5k
最近又鼓捣起两年前做的一个chrome扩展,想要跑起来却发现报错了,看了下console,首先是indexedDB报错,说是window.webkitIndexedDB已经被废弃了,用window.indexedDB代替后,就没再报错了,看来我这chrome 46的indexedDB api只是改了个更通用的名称,还是比较厚道的,所以,这里就不详述了。真正出问题的是桌面通知,c...

如何在使用新技术前评估其浏览器兼容性

2015-12-02
阅读 1 分钟
2.7k
这里向大家推荐两个网站:caniuse.com以及html5test.com,大家在使用新技术前,可以在这两个网站上看看浏览器的支持情况,看看自己能不能接受,同时也考虑一下能不能优雅降级。

html5系列:form 2.0 新表单属性

2015-12-02
阅读 2 分钟
3k
这个属性用来开启或关闭表单的“自动完成”功能(属性值为"on"表示开启,为"off"表示关闭),不填的话就看浏览器的默认值了。在我的经验中,往往更多是利用autocomplete="off"来关闭“自动完成”的,因为有一些跟安全相关的字段(例如账号、邮箱地址等),是不希望透露给第三者知道的。autocomplete属性适用于 <form> ...

html5系列:form 2.0 新数据类型

2015-12-02
阅读 2 分钟
2.6k
输入方式:对比起以前只能用键盘敲的input:text,现在已经有调用日历/时钟的,有调用调色板的,有拉滑动条的……总体来说就是让你可以更懒更准确地进行输入。

html5系列:form 2.0 新结构

2015-12-02
阅读 2 分钟
2.7k
以往的一个form表单,结构比较死板,所有的form元素都必须处在<form>和</form>之间才有效,这会造成一些麻烦,比如说:像bootstrap这种使用<div>来控制布局的框架,<form>放在哪都很尴尬;另外,目前的web 2.0,UI比较丰富,为了布局或其它的原因,表单元素之间可能充斥着大量非表单相关的元素...

利用DataURL技术在网页上显示图片

2015-12-02
阅读 1 分钟
4.6k
DataURL是一种对文件进行编码,并将编码后的内容嵌入及呈现在另一个文件中的规范/协议。目前DataURL用得最多的领域是把图片文件转化成DataURL(此时,这个DataURL就是这个图片的所有内容)并在网页上利用<img>直接输出,而非给<img>指定文件路径让浏览器另行下载。

伪主动触发input:file的click事件

2015-12-02
阅读 1 分钟
16.2k
从前,input:file是不能主动触发click事件的,据说是安全方面的考虑。因此,在美化input:file的时候就麻烦了,最通用的方案是,制作一个经过美化后的<button>,然后把input:file调整好尺寸,覆盖在<button>上方,然后再设置 opacity: 0;,如此一来,用户看到的是<button>,点击的却其实是input:file。

利用html5 file api读取本地文件(如图片、PDF等)

2015-12-02
阅读 3 分钟
30.6k
在html4的年代,我们如果要在网页上呈现一张用户本地的图片,需要用户先把图片上传到服务器,再根据服务器提供的图片地址把图片下载下来,才能把图片在网页上呈现出来。这一来二往,起码已经费了两倍于这张图片的流量了,更别说服务器为了存储这张图片所花费的资源以及用户上传错了图片的冤枉成本(因为在html4时代,用...

推荐一个用于压缩图片的JS插件:localResizeIMG

2015-12-02
阅读 1 分钟
24.7k
首先说到,为嘛要压缩图片,这需求一般出现在需要上传照片(尤其是移动端)的情况下,现在手机拍出来的照片随随便便就是好几兆,无论3/4G还WIFI要上传都很吃力,而且实际上也用不着这么大呀,一般压缩到个一百几十k就够用了。因此,我们需要在用户选好照片(可能是从相册中选择也可能是直接拍摄,看我博客的另一篇文章:...

device's media capture mechanism,利用input:file调用设备的照相机/相册、摄像机、录音机

2015-12-02
阅读 2 分钟
8.7k
HTML Media Capture作为一个候选的建议方案,尚未定稿,即未被W3C完全认可,还处于不断更新的状态,截至目前为止,HTML Media Capture的最新版本是2014年6月版。