
10.HTML5知识笔记
HTML5知识笔记
图解AI
致力于:机器学习、深度学习、数据分析、算法、架构、C/C++、Rust、HTML5/webApp、Go、Python、Lua...
展开
-
[js点滴]JavaScript之Cookie/Session机制详解01
一 基本概念会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话。 常用的会话跟踪技术是Cookie与Session。1).Cookie通过在客户端记录信息确定用户身份2).Session通过在服务器端记录信息确定用户身份。那么他们的工作机制是什么样的呢?那又该什么时候用Cookie,很么该用Session,这里给大家详细说明一下.二.Cookie机制在程序中,会话跟原创 2016-11-18 13:59:25 · 7647 阅读 · 1 评论 -
[js点滴]JavaScript瀑布流实现技巧及原理
基本结构 每一张图片,外层是不可见的box,中间是可见的pic装着img,要求盒子宽度固定。距离控制 要使多个盒子间隙相同时,指定向左浮动并且设定box的上左内边距即可,因为box不可见,实现的效果就类似于pic互相间隔开。排列规则 先固定第一行,然后按照第一行的宽高,将后续图片插入上一行最短的图片下面。 获取文档宽度和每个盒子宽度(此处取第一个盒子),然后相除获得一行排列盒子的个数原创 2016-11-09 22:01:53 · 5108 阅读 · 0 评论 -
[js点滴]JavaScript瀑布流实现技巧
基本结构 每一张图片,外层是不可见的box,中间是可见的pic装着img,要求盒子宽度固定。距离控制 要使多个盒子间隙相同时,指定向左浮动并且设定box的上左内边距即可,因为box不可见,实现的效果就类似于pic互相间隔开。排列规则 先固定第一行,然后按照第一行的宽高,将后续图片插入上一行最短的图片下面。 1. 获取文档宽度和每个盒子宽度(此处取第一个盒子),然后相除获得一行原创 2016-11-09 21:57:39 · 4950 阅读 · 0 评论 -
[js点滴]JavaScript之懒加载概念
<script type="text/javascript"> /* 1.图片懒加载 图片懒加载也叫图片延迟加载. 2.图片懒加载运用范围 2.1 图片比较多的一些网页 美丽说这类网站 2.2 或者一些导购网站 例如淘宝,京东 3.图片懒加载步骤 1.image中src放一张占位图原创 2016-11-09 21:46:04 · 4858 阅读 · 0 评论 -
[js点滴]JavaScript中Image对象操作实例
<script type="text/javascript">// window.onload = function(){ var body = document.getElementsByTagName("body")[0];// 1.创建Image对象//第一种方式 var img = new Image('300','300');//第二种方式/原创 2016-11-08 23:26:41 · 12437 阅读 · 0 评论 -
[js点滴]常见的事件位置属性
1.常见的事件位置属性 e.pageX——相对整个页面的坐标 注意:IE6、IE7、IE8无该属性 e.layerX——相对当前坐标系的border左上角开始的坐标 注意:在opera、IE6、IE7、IE8中这个属性,而IE8以上表示相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离 e.offsetX——相对当前坐标系的border左上原创 2016-11-06 21:31:39 · 5451 阅读 · 0 评论 -
[js动画]js动画框架总结
*1.startMove(target) 匀速运动框架 *2.startMove(target,obj) 多物体同一属性变化 *3.startMove(target,obj,attr)多物体不同属性框架 *4.startMove(target,obj,attr,func) 链式运动框架 *5.startMove(obj,原创 2016-11-02 20:08:06 · 5357 阅读 · 1 评论 -
[js运动动画]运动之匀速运动框架
//匀速运动框架//1.定义定时器var timer = null;function yunsu(target,obj){// 第一个参数:目标值// 第二个参数:运动的物体//2.清除定时器 clearInterval(timer);//3.设置循环 timer = setInterval(function(){//4.设置速度 var speed = 0;原创 2016-11-01 08:29:54 · 4437 阅读 · 0 评论 -
[js点滴]JavaScript字符串常见方法总结
// 1.创建字符串 // 1.1 字面量创建 var str1 = "hello world";// 1.2 构造函数创建字符串对象 var str2 = new String("hello world");/* 2.String.fromCharCode()方法 1.该方法中的参数是一系列unicode的码点(例如:'\u0012' 码点:0012),返回对应的字符原创 2016-10-26 22:18:32 · 4897 阅读 · 0 评论 -
[js点滴]JavaScript关于函数总结
/*1.函数的概念 函数就是实现某一功能的代码片段. 2.函数的分类 a.预定义函数(系统函数) b.自定义函数 函数又称之为方法 3.函数定义 function 函数名(参数1,参数2,参数3,...){ 函数主体 } 注意两点: a.function为关键字,用来原创 2016-10-26 22:16:59 · 4465 阅读 · 0 评论 -
[js点滴]JavaScript事件详解01
Event对象 目录事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件,本节介绍DOM的事件编程。EventTarget接口DOM的事件操作(监听和触发),都定义在EventTarget接口。Element节点、document节点和window对象,都部署了这个接口。此外,XMLHttpRequest、AudioNode、AudioContext等浏览器内置对原创 2016-11-13 14:11:05 · 5053 阅读 · 0 评论 -
[js点滴]JavaScript事件传播02
事件的传播传播的三个阶段当一个事件发生以后,它会在不同的DOM节点之间传播(propagation)。这种传播分成三个阶段: 第一阶段:从window对象传导到目标节点,称为“捕获阶段”(capture phase)。 第二阶段:在目标节点上触发,称为“目标阶段”(target phase)。 第三阶段:从目标节点传导回window对象,称为“冒原创 2016-11-13 14:21:06 · 4716 阅读 · 0 评论 -
[js点滴]JavaScript事件Event对象03
Event对象事件发生以后,会生成一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象。Event对象本身就是一个构造函数,可以用来生成新的实例。event = new Event(typeArg, eventInit);Event构造函数接受两个参数。第一个参数是字符串,表示事件的名称;第二个参数是一个对原创 2016-11-13 14:22:33 · 4866 阅读 · 0 评论 -
[js点滴]JavaScript之cookie技术
运用JS设置cookie、读取cookie、删除cookie JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,同样需要使用原创 2016-11-18 00:44:29 · 7365 阅读 · 0 评论 -
[js点滴]JavaScript之WebSocket 技术
概述HTTP协议是一种无状态协议,服务器端本身不具有识别客户端的能力,必须借助外部机制,比如session和cookie,才能与特定客户端保持对话。这多多少少带来一些不便,尤其在服务器端与客户端需要持续交换数据的场合(比如网络聊天),更是如此。为了解决这个问题,HTML5提出了浏览器的WebSocket API。WebSocket的主要作用是,允许服务器端与客户端进行全双工(full-duplex)原创 2016-11-18 00:26:27 · 12769 阅读 · 0 评论 -
[js点滴]JavaScript自定义事件和时间模拟10
除了浏览器预定义的那些事件,用户还可以自定义事件,然后手动触发。// 新建事件实例var event = new Event('build');// 添加监听函数elem.addEventListener('build', function (e) { ... }, false);// 触发事件elem.dispatchEvent(event); 上面代码触发了自定义事件,该事件会层层向原创 2016-11-13 15:58:14 · 5473 阅读 · 0 评论 -
[js点滴]JavaScript事件详解大纲
事件讲解1.[js点滴]JavaScript事件详解012.[js点滴]JavaScript事件传播023.[js点滴]JavaScript事件Event对象034.[js点滴]JavaScript之鼠标事件045.[js点滴]JavaScript之键盘事件056.[js点滴]JavaScript之拖拽事件067.[js点滴]JavaScript之触摸事件078.[js点滴]JavaScript之文原创 2016-11-13 14:40:51 · 6080 阅读 · 0 评论 -
[js点滴]JavaScript之文档事件08
文档事件beforeunload事件,unload事件,load事件,error事件,pageshow事件,pagehide事件以下事件与网页的加载与卸载相关。(1)beforeunload事件beforeunload事件在窗口将要关闭,或者网页(即document对象)将要卸载时触发。它可以用来防止用户不小心关闭网页。根据标准,只要在该事件的回调函数中,调用了event.preventDefaul原创 2016-11-13 14:30:16 · 6217 阅读 · 0 评论 -
[js点滴]JavaScript之触摸事件07
触摸事件触摸API由三个对象组成。 Touch TouchList TouchEventTouch对象表示触摸点(一根手指或者一根触摸笔),用来描述触摸动作,包括位置、大小、形状、压力、目标元素等属性。有时,触摸动作由多个触摸点(多根手指或者多根触摸笔)组成,多个触摸点的集合由TouchList对象表示。TouchEvent对象代表由触摸引发的事件,只有触摸屏才会引发这一类事件。很多时原创 2016-11-13 14:28:56 · 5442 阅读 · 0 评论 -
[js点滴]JavaScript之拖拽事件06
拖拉事件拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里。拖拉的对象有好几种,包括Element节点、图片、链接、选中的文字等等。在HTML网页中,除了Element节点默认不可以拖拉,其他(图片、链接、选中的文字)都是可以直接拖拉的。为了让Element节点可拖拉,可以将该节点的draggable属性设为true。<div draggable="tr原创 2016-11-13 14:27:52 · 8249 阅读 · 0 评论 -
[js点滴]JavaScript之键盘事件05
键盘事件键盘事件用来描述键盘行为,主要有keydown、keypress、keyup三个事件。 keydown:按下键盘时触发该事件。 keypress:只要按下的键并非Ctrl、Alt、Shift和Meta,就接着触发keypress事件。 keyup:松开键盘时触发该事件。 下面是一个例子,对文本框设置keypress监听函数,只允许输原创 2016-11-13 14:25:35 · 6071 阅读 · 0 评论 -
[js点滴]JavaScript之鼠标事件04
鼠标事件事件种类鼠标事件指与鼠标相关的事件,主要有以下一些。(1)click事件click事件当用户在Element节点、document节点、window对象上,单击鼠标(或者按下回车键)时触发。“鼠标单击”定义为,用户在同一个位置完成一次mousedown动作和mouseup动作。它们的触发顺序是:mousedown首先触发,mouseup接着触发,click最后触发。下面是一个设置click事原创 2016-11-13 14:24:11 · 7610 阅读 · 0 评论 -
[js点滴]JavaScript关于数组的方法总结
// 1.数组的写法// 1.1字面量写法 var arr = [1,2,3,4,5];// 1.2 构造函数写法 var arr1 = new Array(2);//创建一个长度为2的一个数组对象// 1.3 不加new关键字写法 var arr2 = Array(2);//创建一个长度为2的一个数组对象 var arr3 = new Array();/原创 2016-10-26 22:14:19 · 4476 阅读 · 0 评论 -
[人工智能]人工智能、机器学习和深度学习三者之间的关系
人工智能、机器学习和深度学习之间区别 文章摘要: 搞清三者关系的最简单方法,就是把它们想象成一个同心圆,其中人工智能最大。 本文由挚原创 2016-10-23 10:29:15 · 17996 阅读 · 0 评论 -
[webGL学习]基于three.js构建WebGL实例第六讲
演示地址 今天我们继续webGL的课程。 今天我们开始另一个主题,我们将使用sprites和纹理动画。 如果你不知道,sprites只是图像,可以附加到对象上。 这些sprites图像总是与我们的相机正交。 Three.js为sprites - THREE.SpriteMaterial提供了一个库,以及一个特殊的一些方法 - THREE.Sprite。 在本教程中,我们还将学习如何使用sprit原创 2016-10-13 08:39:54 · 7638 阅读 · 4 评论 -
[webGL学习]基于three.js构建WebGL实例第五讲
今天,我们将继续学习webgl(three.js)这门课程,今天我们将向您展示如何以三种不同的方式为您的场景创建一个美丽的环境(天空盒):立方天空盒 侧面),球形天空盒(单周围纹理)和球形着色器天空盒(无纹理)。 我们会用到下面一些比较特殊的属性:反射,折射和类似soapbubble的对象。一般结构 现在我们可以开始,首先,定义一般结构:var lesson5 = { scene:原创 2016-10-11 17:20:15 · 8887 阅读 · 1 评论 -
[webGL学习]基于three.js构建WebGL实例第四讲
今天我们继续我们的课程webGL 的学习,在该课程中我们将向大家展示如何给一个场景添加一个3D文字,如何设计出二维形状,把3D模型加载在OBJLoader现场。但这个过程是非常困难的.下面就具体来看一下.HTML代码这部分还是跟之前的一样.<!DOCTYPE html><html lang="en" > <head> <meta charset="utf-8" />原创 2016-10-10 22:11:50 · 6433 阅读 · 0 评论 -
[响应式布局]响应式布局技巧
一理解几种布局的概念1、静态布局(Static Layout) 即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分; 意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置; 对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.。2、自适应布局(Adaptive Layout) 自适应布局(Ada原创 2016-10-09 01:39:08 · 6789 阅读 · 0 评论 -
[webGL学习]基于three.js构建WebGL实例第三讲
大多程序员在刚开始理解3D(webGL)的知识时,通常对三维空间可能理解的比较困难,你也可能有困难理解不同的光线是如何工作的,或轴甚至如何位于空间。 今天,我会帮你处理这些问题。three.js所拥有一切必要的手段来为这个 - 帮手。在今天的例子中,我已经准备好为你工作的所有现有佣工示范:ArrowHelper,AxisHelper,BoundingBoxHelper,CameraHelp原创 2016-10-07 13:20:58 · 8946 阅读 · 0 评论 -
[webGL学习]基于three.js构建WebGL实例第二讲
我们来继续来学习 WebGL 的 three.js 库。 今天做些不一样的东西(如 MeshBasicMaterial,MeshLambertMaterial 和 MeshPhongMaterial),尽量使用各种参数(color,opacity,ambient,emissive,specular),讲解如何制作纹理和凹凸映射的使用。HTML代码<!DOCTYPE html><html la原创 2016-10-07 12:47:13 · 6055 阅读 · 2 评论 -
[webGL学习]基于three.js构建WebGL实例第一讲
我们主要做些的基本功能:创建一个场景,相机,渲染器,控制器(OrbitControls)。我们也将创建简单的定向光,加上一些对象(不同的几何形状)的阴影。为了使事情更快,我们决定采取一个最流行的WebGL框架——three.js。为什么使用three.js? 事实上,它是开源的JavaScript框架,它也是增长最迅速的和讨论很热烈的引擎 。在这里,已经准备了很多会用到的东西,从基本的点和向量,到做原创 2016-10-06 23:22:36 · 7753 阅读 · 0 评论 -
[知识点滴]解决js跨域的几种方法
此文章学习借鉴了一些其他前端同学的文章,自己做了个实践总结以下的例子包含的文件均为为 http://www.a.com/a.html 、http://www.a.com/c.html 与 http://www.b.com/b.html,要做的都是从a.html获取b.html里的数据1.JSONPjsonp是利用script标签没有跨域限制的特性,通过在src的url的参数上附加回调函数名字,然后服原创 2016-09-29 22:35:17 · 5477 阅读 · 0 评论 -
[移动应用]跨平台开发框架
看了Flutter,NativeScript,React Native跨平台框架。使用其中React Native使用过,写过一些demo,在iOS和安卓上UI体验感还可以,而NativeScript体验过,感觉也非常不错,与React Native比较像。Flutter没有用过,据说也可以,性能要优于NativeScript,React Native。但是Flutter需要学习另外一门...原创 2019-04-10 12:17:28 · 4018 阅读 · 0 评论 -
[知识总结]HTML5布局之flex布局总结
一 布局几种方式 1.静态(自然)布局(没有任何(float,position等)修饰的布局) 2.浮动布局(float) 3.定位布局(position) 4.弹性布局(flex) 5.栅格布局(就是把网页的宽度分成固定的相同宽度,然后列出各种可能的组合,以便页面在进行呈现时能够进行快速的布局,通常12等分或24等分)弹性布局 概念原创 2016-10-14 12:39:15 · 8939 阅读 · 3 评论 -
[知识总结(转)]flex布局语法篇
Flex 布局教程:语法篇 <p class="vcard author">作者: <a class="fn url" href="http://www.r原创 2016-10-16 07:33:38 · 6028 阅读 · 1 评论 -
[知识总结(转)]flex布局实例篇
Flex 布局教程:实例篇我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明,本节的HTML模板一律如下。<div class="box">原创 2016-10-16 09:59:10 · 4871 阅读 · 0 评论 -
[js移动端交互]移动端交互大纲篇
day01.基础事件1)touchstart介绍及使用2)touchmove介绍及使用3)touchend介绍及使用4)案例分析day02.event对象1)取消默认事件 2)阻止冒泡3)防止文字选中和阻止默认菜单4)鼠标事件延迟5)事件点透问题6)案例分析day03.touchEvent1)touches介绍及使用2)changedTouches介绍及使用3)targetT原创 2016-10-22 10:47:40 · 4948 阅读 · 0 评论 -
[js点滴(转)]JavaScript中的this陷阱的最全收集--没有之一
当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程、事件驱动、面向对象等一堆词语,但是如果真的让你解释一下这些概念,可能真解释不清楚。有句话这么说:如果你不能向一个6岁小孩解释清楚一个东西,那么你自己也不懂这个东西。这句话或许有点夸张,但是极其有道理。个人觉得,如果需要掌握一门语言,掌握它的API只是学了皮毛,理解这门语言的精髓才是重点。提及JavaScript的精髓,thi原创 2016-10-21 23:50:53 · 4947 阅读 · 0 评论 -
[js点滴]JavaScript中的作用域及作用域链的意义和解释
一.作用域 简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有:1.全局作用域 在代码中任何地方都能访问到的对象拥有全局作用域,一般来说以下几种情形拥有全局作用域:2.局部作用域 和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域称为函原创 2016-10-21 01:15:32 · 4627 阅读 · 0 评论 -
[js点滴]JavaScript排序算法汇总
排序算法是将一系列的值按照顺序进行排列的方法。冒泡排序简介 冒泡排序(Bubble Sort)是最易懂的排序算法,但是效率较低,生产环境中很少使用。它的基本思想是: 依次比较相邻的两个数,如果不符合排序规则,则调换两个数的位置。这样一遍比较下来,能够保证最大(或最小)的数排在最后一位。 再对最后一位以外的数组,重复前面的过程,直至全部排序完成。 由于每进行一次这个过程,原创 2016-10-20 22:37:35 · 4873 阅读 · 0 评论