html5
关注
分享
扫一扫
iteye_2245
这个作者很懒，什么都没留下…
展开
-
html5之bdi标签
前言： 本文内容部分来自w3school的： http://www.w3school.com.cn/html5/tag_bdi.asp 个人积累学习用，感谢！ 正文： bdi 允许设置一段文本，使其脱离其父元素的文本方向设置 可选属性： dir： ...原创 2013-04-17 15:15:48 · 752 阅读 · 0 评论 -
浅析html5的dataset
前言： 很多时候，我们在操作页面某些元素的时候，需要存储一些数据，一般大家很常见的方式都会设置一些自定义属性，比如： 微博feed list里面的图片放大： 大家看到有一个自定义的key------action-data，里面存储了一些数据。 那问题来了： 自定义属性命名有没有规范或者标准？？获取自定义属性的值咋搞...2012-12-12 18:23:01 · 167 阅读 · 0 评论 -
html5之embed标签
HTML5 embed 标签 ------ 定义嵌入的内容，比如插件。 <embed src="***.swf"/> <embed>标签必须有src属性html5新增标签 从人人登陆看到的一个例子： <embed src="http://jebe.xnimg.cn/20130222/...原创 2012-12-03 14:33:38 · 148 阅读 · 0 评论 -
style新的属性 scoped
本文收录一个style的新属性：scoped ---- 启用限定作用范围的样式表 看看兼容性：http://caniuse.com/#search=scoped 扩展阅读： 来自：汤姆大叔的博客 http://www.cnblogs.com/TomXu/archive/2011/12/13/2269129.html...原创 2013-12-14 17:33:23 · 220 阅读 · 0 评论 -
html5 form的novalidate属性
HTML5 form的 novalidate属性 novalidate属性规定当提交表单时候，不对其进行验证。 <form novalidate="novalidate"> 本文主要来自：http://www.w3school.com.cn/html5/att_form_novalidate.asp...原创 2013-12-13 21:31:57 · 996 阅读 · 0 评论 -
初探html5的Notification
本文主要认知一下html5的Notification 1、浏览器支持情况： 目前chrome 5+支持Desktop Notification window.webkitNotifications 2、相关api 获取访问权限window.webkitNotifications.checkPermission() 该api返...原创 2012-11-13 18:39:33 · 95 阅读 · 0 评论 -
《JavaScript高级程序设计》触摸事件
本文来自《JavaScript高级程序设计》阅读笔记 iOS版Safari新增了一些专有事件，因为iOS设备没有鼠标和键盘。 1、触摸事件： touchstart 当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发touchmove 当手指在屏幕上滑动时候连续触发，可以用preventDefault阻止touche...2012-11-12 16:00:34 · 100 阅读 · 0 评论 -
video标签支持的视频格式
前面有一篇简单记录了一下video标签相关的东西，这篇简单看一下三种视频格式： Ogg 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件...2012-11-05 18:17:08 · 424 阅读 · 0 评论 -
Geolocation API初探
HTML5 中引入了定位相关的Geolocation，下面简单探究一下： 在织梦上看到了一张图，很清楚地介绍了我们一般获取位置信息的方式，并做了简单对比： 作为新的标准下的api，我们要了解的还是这样的套路： 1、如何判断浏览器支持： !!navigator.geolocation; 2、浏览器支持列表： IE9+FF3.5+...原创 2012-11-03 19:40:40 · 91 阅读 · 0 评论 -
main元素
main元素： 来自：HTML5.1(draft) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main...原创 2013-08-03 11:52:50 · 206 阅读 · 0 评论 -
介绍一下x-webkit-speech -------实现语音输入
其实大家都能从一淘啊或者淘宝相关的产品里面看到这样的输入框： 好奇的人都会查看源码看看到底是什么东东？ 里面有两个东东： 1、x-webkit-speech 目前只有Chrome 11+的支持 属性和事件介绍： lang <input type="text" x-webkit-speech la...2012-05-08 19:14:49 · 415 阅读 · 0 评论 -
link之dns-prefetch
先看一段代码： <link rel="dns-prefetch" href="//hostname.com" /> 可以提示浏览器进行dns预解析原创 2013-07-08 13:40:25 · 294 阅读 · 0 评论 -
获取head元素
先上一段jquery 1.7.1版本的代码片段： if(s.crossDomain){ var script, head = document.head || document.getElementsByTagName("head")[0] || document.documentElement; ................2012-09-17 15:21:13 · 1221 阅读 · 0 评论 -
html5新属性之download
最近也很多人关注了这个属性，我个人测试了一番，探探究竟。 html: <a href="http://www.skycn.com/ipinfo/d_hao123.php?f=KuGousetup.zip" download="酷狗">酷狗</a> 直接点击后的效果： 测试报告： FF 15.0不支持读取downl...2012-08-29 11:04:05 · 113 阅读 · 0 评论 -
丢弃shiv的外链依赖吧
很久之前，我们都是直接采用shiv来规避低版本浏览器不支持新语义化标签， 但是慢慢地，大家也开始丢弃它的外链远程方式，直接页面内嵌。 百度知道版本：<!--[if lte IE 8]> <script> (function(){ var e = "abbr,article,aside,audio,canvas,dat...原创 2013-05-20 20:08:28 · 75 阅读 · 0 评论 -
html5之FileReader接口
此篇主要是介绍一下HTML5的FileReader接口 1、FileReader接口的作用： 用来把文件读入内存，并且读取文件中的数据。 2、支持情况 FF3.6+| Chrome6+ /*检测方式*/if(typeof FileReader == 'undefined'){ //不支持}else{ //支...原创 2012-04-16 21:38:04 · 144 阅读 · 0 评论 -
html5之文件api
这篇主要是探讨一下HTML 5的文件API 1、FileList对象与file对象 FileList对象表示用户选择文件的列表，在HTML 5中，加了multiple属性，file控件允许放置多个文件。控件内的每一个用户选择的文件都是一个file对象FileList对象是这些file对象的列表file对象有两个属性：name属性表示文件名，不包括路径 |...2012-04-16 20:42:40 · 78 阅读 · 0 评论 -
初探一下html5的performance相关
前言： 本文部分内容来源于http://w3c-test.org/webperf/specs/NavigationTiming/ 以及一些互联网资料 个人做积累学习用，感谢！ 正文： window下面引入了一个新的对象： 下图为本人chrome返回： 已实现草案定义的接口的浏览器： IE9+Chrome11...2012-12-28 13:46:58 · 152 阅读 · 0 评论 -
重新认识html&5
本文内容来自于"为之漫笔"的译文《html5设计原理》，个人做积累学习用！ 先说说HTML: HTML 最早从2.0版本开始，没有1.0版本，从前有一个HTML Tags的文档----非官方的规范HTML2.0 不是出自W3C之手，是由IETF(Internet Engineering Task Force)因特网工程任务组制定的从第三个版本开始往后，W3C，万维网联盟（...2013-01-04 17:48:26 · 86 阅读 · 0 评论 -
初识meta的viewport
设置viewport： <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> width --------- 控制viewport的宽度，可以设置一...原创 2013-01-16 12:01:54 · 107 阅读 · 0 评论 -
html5之datalist标签
前言： 本文部分内容来自w3school：http://www.w3school.com.cn/html5/tag_datalist.asp 个人积累学习用，感谢！ 正文： datalist标签 ------------ 定义选项列表，与input原始配合使用，定义input可能的值 ...原创 2013-04-17 15:14:59 · 108 阅读 · 0 评论 -
html5之meter标签
前言： 本文部分内容来自w3school：http://www.w3school.com.cn/html5/html5_meter.asp 个人积累学习用，感谢！ 正文： meter ----------- 定义度量 属性： high 什么...原创 2013-04-17 15:14:35 · 226 阅读 · 0 评论 -
html5之dialog标签
前言： 本文部分内容来自w3school：http://www.w3school.com.cn/html5/html5_dialog.asp 个人积累学习用，感谢！ 正文： dialog标签 ------------ 定义对话 实例： <dialog&g...原创 2013-04-17 15:14:10 · 171 阅读 · 0 评论 -
fullScreen API
本文只是贴出一下兼容列表： 移动端一片红啊！！！！！原创 2013-04-11 11:42:31 · 112 阅读 · 0 评论 -
html5 button的form属性
本文来自：http://www.w3school.com.cn/html5/att_button_form.asp button有form属性 ------------------ 位于表单之外的提交按钮： <button type="submit" form="nameform">提交按钮</button> ...原创 2013-04-11 11:35:34 · 191 阅读 · 0 评论 -
Data URI
前言： 本文部分内容来自 《随网之舞的Data URI 和 MHTML》 本人做积累学习用，感谢作者！ 正文： data:[<MIME-type>][;base64],<data> MIME-type：嵌入数据的MIME，形式：[type]/[subtype]；比如png：image/pngbas...原创 2013-03-05 18:13:41 · 163 阅读 · 0 评论 -
在线检测相关
如何判断当前浏览器的在线或离线状态？//onLine只读属性，返回true或者falsewindow.navigator.onLine online/offline事件 我们很多时候需要当状态发生变化的时候知道，online|offline事件触发在body元素上，按顺序冒泡 ...原创 2013-03-05 14:16:36 · 113 阅读 · 0 评论 -
离线存储 application cache
离线与缓存： 网页缓存依赖网络的存在，而离线应用在离线状态下仍然可用网页缓存主要缓存当前网页相关内容，也仅限当前页面的读取；离线应用主要缓存文件，只要设置缓存的文件，都能在离线状态下读取该文件 设备支持情况： 使用js来判断： if(window.applicationCache){ //支持的进来...原创 2013-03-05 10:57:06 · 116 阅读 · 0 评论 -
html5 右键菜单案例
contextmenu属性 html5中，元素新增这个属性 <div contextmenu="myMenu">可以通过contextmenu指定对应id，右键我试试哈</div> 然后就用到menu 标签了，别忘了设置type为context： <menu id="myMenu" type="context"...原创 2013-03-04 13:05:01 · 647 阅读 · 0 评论 -
html5 之menu标签
HTML5 menu标签 定义菜单列表。 属性： autosubmit true | false 如果为true，那么当表单控件改变的时候自动提交label menulabel ...原创 2013-03-04 12:10:28 · 197 阅读 · 0 评论 -
ios5新特性部分整理
本文整理一下ios5对HTML5的支持情况： 亲自试验了一下，确实原生展示ui很赞。 支持type="date"支持type="datetime"支持type="time"支持type="month"支持type="range" 支持type="number" 对非number输入会主动清空，而且只清空原创 2013-02-21 16:56:19 · 127 阅读 · 0 评论 -
设置type="range"为vertical
如何设置type=“range”为vertical？ 默认是horizontal的 -webkit-appearance:slider-vertical; 扩展阅读： http://swatelier.info/at/forms/range.asp http://stackoverflow.com/questions/500...原创 2013-02-21 16:56:04 · 314 阅读 · 0 评论 -
IE10支持HTML5的输入类型
IE10对部分输入控件进行了触控优化： type="email" type="url" type="tel"原创 2013-02-20 11:47:29 · 147 阅读 · 0 评论 -
pageshow与pagehide
本文部分内容来自《Javascript高级程序设计》，个人记录学习用！ bfcacheback-forward cache(往返缓存)目前ff和opera支持用户在使用浏览器的前进后退时候，可以加速页面转换的速度pageshow在页面显示的时候触发重新加载页面的时候，在load之后触发对于bfcache中的页面，会恢复到原来状态事件中...原创 2013-02-19 16:18:48 · 263 阅读 · 0 评论 -
html5的预加载
FF下： <link rel="prefetch" href="**.jpeg" /> 官网地址：https://developer.mozilla.org/en-US/docs/Link_prefetching_FAQFF3.5+支持 Chrome下： <link rel="prerender" href="***....原创 2013-02-19 12:04:19 · 132 阅读 · 0 评论 -
严格模式探究
探究一下严格模式，也是我个人一直推崇的，简单记录一下。 在ECMAScript5引入了strict mode ----------- 方便更快地调试出错误 如何使用："use strict"; 兼容性： http://caniuse.com/#feat=use-strict 去除with ...原创 2013-01-18 17:32:42 · 208 阅读 · 0 评论 -
html5之spellcheck属性
HTML5 spellcheck属性 针对input(type="text")与textarea这两个文本输入框提供的一个新属性 对用户输入的文本内容进行拼写和语法检查 spellcheck是一个布尔值的属性，true|false 元素的readOnly属性或disabled属性设置为true,则不执行拼写检查 除IE之外，FF|Chrome|...原创 2012-04-16 20:36:13 · 1990 阅读 · 1 评论 -
html5之designMode属性
designMode属性 用来指定整个页面是否可编辑，当页面可编辑时候，页面上任何支持contentEditable属性的元素都变成可编辑状态。 只能在Js被编辑修改 该属性有两个值 ---- "on" (页面可编辑)| "off" (页面不可编辑) document.designMode = "on"; IE8出于安全考...2012-04-15 19:33:38 · 2846 阅读 · 0 评论 -
关于html5的一些技巧
个人学习，简单记录。 1、关于Doctype 对于html5，我们在声明doctype的时候只要写出-----必须出现在文件的第一行。 <!DOCTYPE html> 2、不再需要指定脚本、链接的类型 对于html5，我们定义link和script标签的时候不再需要指定type <link rel="s...2012-02-23 10:50:35 · 70 阅读 · 0 评论 -
简单讲讲html常用新标签
1、header和nav标签 ----header用来定义页面头部的内容，而nav可以定义导航内容，nav在一个页面可以多次使用。 <header id="page-header"> <!-- 包含logo和nav部分 --> <div id="logo"> <a href="/">&a2012-02-23 10:49:52 · 110 阅读 · 0 评论