html5
文章平均质量分 79
tianshizhimeng155
想从事WEB相关的职业,最好是web前端工程师!努力,追梦!
展开
-
HTML5之语义化标签
HTML5之语义化标签1. 新的页面结构以及宽松的语法规范 2. 语义化标签a) 页眉 i. 主要用于页面的头部的信息介绍,也可用于板块头部 l 页脚 页面的底部或者版块底部原创 2016-05-10 11:56:55 · 913 阅读 · 0 评论 -
HTML5之Web Workers
l 什么是worker?• JS的单线程(放入UI队列的个数,利用定时器解决)• 可以让web应用程序具备后台处理能力,对多线程的支持非常好。l WorkerAPI• newWorker(‘后台处理的JS地址’)• 利用postMessage传输数据• importScripts(‘导入其他JS文件’) 后台的js文件中能执行原创 2016-06-26 20:08:20 · 393 阅读 · 0 评论 -
HTML5之canvas基础
HTML5之Canvas1. Canvas默认的宽度为300px,高度为150px2. 要在标签上设置宽高 不然样式中的宽高是在原来比例上进行等比例缩放的3. 一般边框多出来一像素的原因:从开始的点向左,向右边分别延伸0.5像素,计算机会自动补为1px,所有看到的为2px当把开始的点设置为带0.5px的点,画出来的边框就为1px4. 填充样式和边框样式的绘制顺序会影响显原创 2016-06-26 21:45:08 · 412 阅读 · 0 评论 -
HTML5之canvas2
无标题文档body{ background:black;}#c1{ background:white;}window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.moveTo(200,200); //弧度原创 2016-06-26 22:23:05 · 401 阅读 · 0 评论 -
Canvas实例-简易祖玛
*{margin:0;padding:0;} body{background:black;} #div1{background:white;width:600px;margin:20px auto;} window.onload=function(){ var oC=docume原创 2016-06-29 21:39:25 · 1111 阅读 · 0 评论 -
HTML5之canvas3
body{ background:black;}#c1{ background:white;}window.onload = function(){ var oC =document.getElementById('c1'); var oGC = oC.getContext('2d'); var yImg = new Image(); yImg.onload原创 2016-06-27 20:04:07 · 455 阅读 · 0 评论 -
HTML5之canvas4
body{ background:black;}#c1{ background:white;}window.onload = function(){ var oC =document.getElementById('c1'); var oGC =oC.getContext('2d'); oGC.fillRect(0,0,100,100);原创 2016-06-28 21:17:08 · 765 阅读 · 0 评论 -
HTML5之canvas5
body{ background:black;}#c1{ background:white;}window.onload = function(){ varoC = document.getElementById('c1'); varoGC = oC.getContext('2d'); oGC.fil原创 2016-06-28 21:18:10 · 589 阅读 · 0 评论 -
3D轮播图
越努力越幸运-凡事老师*{margin:0px;padding:0px;}/*banner style*/.banner{width:989px;height:410px;margin:100px auto 0px;/*元素外边距*/position:relative;/*定位 相对定位 参照物*/}/*button style*/.banner .原创 2016-08-01 22:26:43 · 1668 阅读 · 0 评论 -
详细讲解HTML 5中视频和音频核心事件
【IT168 技术】HTML 5中的视频和音频中有不少核心的事件,其中有的比较容易理解,基本能从字面就解析了,比如“play”事件就很好理解。而其他有的事件则需要花费点心思,特别是“progress”事件。因此,在本文中,将带领读者研究HTML 5视频和音频中重要的事件,探究这些事件是应该在什么时候使用以及其中的重要相关属性。我们也将看下这些事件在当今不同浏览器中的差异。为了本文的测试,使用的浏览转载 2016-08-08 19:50:19 · 2194 阅读 · 0 评论 -
HTML5audio duration返回NaN问题及歌曲切换总时间改变问题
HTML5audio duration返回NaN问题使用JS写的话 我的解决方案:必须放到window.onload中原创 2016-08-07 21:01:05 · 8301 阅读 · 5 评论 -
HTML5之离线存储
applicationCache l 离线应用是什么?• 乘坐飞机、手机信号弱、去演讲的时候,可能没有网络,这个时候就可以采用离线应用。• 离线存储如何工作的?• l 离线存储的好处?• 没网的时候,可以正常访问• 快速相应页面,不必用多个HTTP占用资源带宽缓存的可以是任何 l 搭建离原创 2016-06-25 21:39:11 · 1576 阅读 · 0 评论 -
HTML5之Ajax跨域的问题和处理
请求的文件与当前的文件不在同一域下,ajax跨域请求 (1) 标准浏览器下:后端对访问源进行控制:设置一下:设置访问该资源的域 window.onload =function() { /* 在标准浏览器下,XMLHttpRequest对象已经是升级版本,支持了更多的特性,可以跨域了原创 2016-06-25 19:40:36 · 6025 阅读 · 0 评论 -
HTML5之窗口间通信
准备工作:虚拟主机相关配置 同域下窗口间通信的二种方式:1.iframe 2 window.open 同域下的窗口通信方式一:iframe1. iframe.html(1) 父级页面(1.iframe.html)通过点击按钮改变子级页面(2.iframe.html)的背景颜色/*我们可以通过js去访问被包含页面的DOM元素*/原创 2016-06-25 19:37:33 · 6842 阅读 · 0 评论 -
HTML5之表单
HTML5之表单Forms l 新的输入型控件• email : 电子邮箱文本框,跟普通的没什么区别– 当输入不是邮箱的时候,验证通不过– 移动端的键盘会有变化 • tel : 电话号码 • url : 网页的URL • search : 搜索引擎原创 2016-05-11 09:37:57 · 3206 阅读 · 0 评论 -
HTML5之新特性(选择器、class列表属性、JSON新方法、data自定义数据、延迟加载JS)
HTML5之新特性 l HTML5新特性的浏览器支持情况• http://www.caniuse.com/#index• l 新的选择器• querySelector 获取一个或一组中第一个元素 //document.getElementById();//document.getElementsByTagName()原创 2016-05-12 12:23:21 · 1576 阅读 · 0 评论 -
HTML5之历史管理
HTML5之历史管理l 前进,后退 触发历史管理 : 1.通过跳转页面 2.hash 3.pushState • onhashchange :改变hash值来管理 实例:随机选彩票无标题文档window.onload = function(){ varoInput = document.getElementById(原创 2016-05-13 15:56:53 · 631 阅读 · 0 评论 -
HTML5之拖放
HTML5之拖放 l 拖放事件• draggable:– 设置为true,元素就可以拖拽了• 拖拽元素事件 : 事件对象为被拖拽元素– dragstart , 拖拽前触发– drag ,拖拽前、拖拽结束之间,连续触发– Move的区别,move移动才触发,drag在开始到结束时(鼠标抬起)一直触发,不管移动–原创 2016-05-13 16:31:39 · 442 阅读 · 0 评论 -
html5本地存储localStorage 存储json对象存储格式问题
html5本地存储localStorage 存储json对象存储格式问题localStorage.setItem(att)会自动将att存储成字符串形式,如:var arr=[1,2,3];localStorage.setItem("temp",arr);typeof localStorage.getItem("temp");会返回StringlocalStorage.getI转载 2016-05-28 21:56:13 · 7782 阅读 · 1 评论 -
localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车
localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = "value"//存储变量名为key,值为value的变量 localStorage.getItem("key");//获取存储的变量key的值www.it165.net localStorage转载 2016-05-29 09:57:14 · 1839 阅读 · 0 评论 -
HTML5之地理信息
HTML5之地理信息l 地理位置• 经度 : 南北极的连接线• 纬度 : 东西连接的线l 位置信息从何而来• IP地址• GPS全球定位系统• Wi-Fi无线网络• 基站l 地理位置对象• navigator.geolocationl 单次定位请求 :getCurren原创 2016-05-08 20:23:43 · 1318 阅读 · 0 评论 -
HTML5之本地存储
HTML5之本地存储l Cookie• 数据存储到计算机中,通过浏览器控制添加与删除数据l Cookie的特点• 存储限制– 域名100个cookie,每组值大小4KB• 客户端、服务器端,都会请求服务器(头信息)• 本地存储也会请求服务器• 页面间的cookie是共享l Storage• sess原创 2016-05-08 22:33:16 · 1010 阅读 · 0 评论 -
HTML5之音频与视频
HTML5之音频与视频l 标签• audio 、video• sourcel 视频容器• 容器文件,类似于压缩了一组文件– 音频轨道– 视频轨道– 元数据:封面,标题,字幕等– 格式:.avi、.flv、.mp4、.mkv、.ogv等l 编解码器 • 原始的视频容器非常大,添加需编码,播放需解原创 2016-05-09 10:43:01 · 798 阅读 · 0 评论 -
HTML5音频与视频实例(带声音的导航、视频与canvas结合、自制播放器)
实例1:带声音的导航 无标题文档*{ margin:0; padding:0;}#ul1{ width:1000px; height:30px;}#ul1 li{ list-style:none; width:100px;height:30px; background:red; color:white; border:1px #000 solid; floa原创 2016-05-09 16:01:20 · 6375 阅读 · 0 评论 -
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条1 http://www.abc.com/test.mp3"controls> 标签属性:src:视频的URLposter:视频封面,没有播放时显示的图片preload:预加载autoplay:自动播放loop:循环播放controls:浏览器转载 2016-08-09 16:03:30 · 1835 阅读 · 0 评论