![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5
文章平均质量分 81
chengqiuming
这个作者很懒,什么都没留下…
展开
-
前端开发和前端开发工具
一 前端开发前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可,到了2010年,互联网开始全面进入移动时代,前端开发的工作越来越重要。最初所有的开发工作都是由后端工程师完成的,随着业务越来越繁杂,工作量变大,于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来,形成了前端开发。二 vscode的使用1 中文界面配置首先安装中文插件:Chinese (Simplified) Language Pack for原创 2020-11-21 13:21:31 · 259 阅读 · 1 评论 -
HTML拾遗
目录一链接标签二行内元素和块元素三视频和音频四页面结构分析五iframe内联框架一链接标签1点睛<a href="path" target="目标窗口位置"></a>path:链接路径target:链接在哪个窗口打开。常用值:_self,_blank2类型 文本超链接 图像超链接 锚链接 功能性链接(邮件链接、QQ链接) 3关于QQ链接的QQ推送功能4代码代码1&...原创 2020-07-12 15:42:24 · 213 阅读 · 0 评论 -
DIV布局与效果实战
DIV布局与效果实战参考https://blog.csdn.net/jiary5201314/article/details/38336559实战1代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>测试DIV</title> </head> <body>..原创 2020-07-05 22:26:16 · 627 阅读 · 0 评论 -
跨浏览器拖动HTML元素
一 代码HTML代码: 拖放效果 <div style="position:absolute; left:120px; top:150px; width:250px; border:1px solid black;"> <div style="background-color:#416ea5;原创 2017-11-22 10:36:14 · 502 阅读 · 0 评论 -
DOM模型转发事件应用
一 介绍DOM提供了dispatchEvent方法用于事件的转发,该方法属于Node对象,因此DOM的每个Node都可以调用该方法,从而将事件直接转发到本节点。 二 代码 转发事件 // 第一个按钮被单击时的事件处理函数 var rd = function(evt) { docum原创 2017-11-22 10:36:03 · 393 阅读 · 0 评论 -
DOM模型事件传播机制应用
一 介绍DOM模型事件传播先后沿着两个方向传播:在第一阶段,也就是事件捕获阶段,事件从最顶层的对象依次向下传播,因此先触发顶层对象的事件处理函数,然后依次向下,直到传播到事件所发生的最底层对象;接着进入第二阶段,也就是事件冒泡阶段,事件传播一直向上溯,直到最顶层对象。DOM模型事件传播机制模型如下图 DOM为Event对象提供了stoppropagation()方法,该方法能阻止原创 2017-11-22 10:35:51 · 498 阅读 · 0 评论 -
跨浏览器访问事件的方法
一 介绍1、DOM事件模型和IE事件模型访问事件对象的方式完全不同,因此需要写一个跨浏览器的程序。2、实现跨浏览器的通常做法是:将事件处理函数绑定到DOM对象的属性上。 二 代码 跨浏览器访问事件 按钮 // 定义一个形参evt var clickHandler = function(evt) { // 对于D原创 2017-11-22 10:35:39 · 586 阅读 · 1 评论 -
判断浏览器在线状态
一 介绍为了判断浏览器的在线状态,HTML 5提供了两种方法来检测是否在线。1、navigator.onLine属性:该属性可返回当前是否在线。如果返回true,则表示在线,如果返回false,则表示离线。当网络状态发生变化时,该值也会随之变化。2、online/offline事件:如果开发者需要在网络状态发生变化时立刻得到通知,则可以通过HTML 5的online/offline事件原创 2017-11-22 10:37:13 · 1024 阅读 · 0 评论 -
使用Web Worker创建多线程应用
一 介绍HTML5 Web Workersweb worker是运行在后台的JavaScript,不会影响页面的性能。什么是 Web Worker当在HTML页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时web wo原创 2017-11-22 10:37:24 · 450 阅读 · 0 评论 -
嵌套Worker线程应用
一 应用1、前台JS脚本先启动一个Worker线程,该Worker线程负责收集该范围内的所有质数。2、程序把收集到的所有质数再次提交给另外一个Worker线程统计出指定的质数。 二 代码1、calPrime.html 计算质数 #show { width:400px; background-color:#ddd; border-c原创 2017-11-22 10:37:36 · 431 阅读 · 0 评论 -
Worker子线程之间的数据交换应用
一 应用1、第一条Worker线程负责收集指定范围内的质数。2、第二条Worker线程负责从指定范围的质数中随机抽取指定数量的质量。 二 代码1、calPrime.html 计算质数 #show { width: 400px; background-color: #ddd; border-collapse:原创 2017-11-22 10:38:00 · 773 阅读 · 0 评论 -
跨文档消息传递应用
一 应用source.html程序调用window的open方法打开一个新的窗口,接下来程序即可调用新窗口对应的window对象的postMessage向该文档发送消息。 二 代码1、source.html 跨文档发送消息 var send = function() { // 打开一个新窗口 var target原创 2017-11-22 10:38:10 · 361 阅读 · 0 评论 -
HTML5 WebSocket简介
HTML5 WebSocketWebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通原创 2017-11-22 10:38:22 · 296 阅读 · 0 评论 -
跨文档发送JSON消息实现图书选择
一 应用该实例允许用户打开一个页面来选择图书,当用户选择了合适的图书之后,再把用户选择的图书传回主页面。该应用是用JSON消息发送的。 二 代码1、viewBook.html 选择图书 var chooseBook = function() { // 打开一个新窗口 var targetWin = window.原创 2017-11-22 10:38:32 · 519 阅读 · 0 评论 -
DOM取消事件默认行为应用
一 介绍DOM提供了preventDefault方法来取消事件对象的默认行为。 二 代码 阻止默认行为 友情链接: 疯狂Java联盟 var killClicks = function(event) { // 取消事件的默认行为 event.preventDefault(); alert("超原创 2017-11-22 10:36:22 · 951 阅读 · 0 评论 -
基于Web Storage的客户端留言板
一 代码 客户端留言板 table { border-collapse: collapse; } td , th{ border: 1px solid #888; padding: 4px; } 客户端留言板 留言内容 留言时间原创 2017-11-22 10:36:43 · 395 阅读 · 0 评论 -
WebSocket实战
一服务端代码package lee;import java.io.IOException;import java.util.Set;import java.util.concurrent.CopyOnWriteArraySet;import java.util.concurrent.atomic.AtomicInteger;import javax.websocket.*;...原创 2019-09-07 10:35:03 · 159 阅读 · 0 评论 -
IE浏览器的事件冒泡机制
一 介绍1、当浏览者在页面上执行了某个动作,页面上实际上有多个元素可以响应该事件,假如单机页面的某个按钮,该按钮又处于元素之内,则实际上用户既单机了该按钮,也单击了元素。2、IE中的事件传递方向是从事件发生的对象开始,然后依次向该对象所在的父节点传递。这种传递方式是从下向上传递的,因此这种事件的传递机制又称为冒泡。3、下面应用说明了这种机制的用法 二 冒泡机制代码原创 2017-11-22 10:35:18 · 1192 阅读 · 0 评论 -
使用navigator对象的geolocation获取地理位置
一 介绍HTML5为navigator新增了一个geolocation属性,这个属性是一个Geolocation对象,通过该对象获取浏览者的地理位置。下面应用示范了geolocation的用法。 二 代码 var geoHandler = function(position) { var geoMsg = "用户的所在的地理位置信息是:"; geoM原创 2017-11-22 10:34:22 · 2305 阅读 · 0 评论 -
利用DOM节点关系访问HTML元素
一 介绍一旦获取了某个元素,由于元素实际与DOM树的某个节点对应,因此我们完全可以利用节点之间的父子关系、兄弟关系来访问HTML元素。下面应用利用节点关系访问HTML元素。 二 代码 根据节点关系访问HTML元素 /* 定义改变背景色的CSS,表示被选中的项 */ .selected { background-color原创 2017-11-22 10:33:19 · 685 阅读 · 0 评论 -
删除表格的行或单元格
一 介绍删除表格的指定表格行使用HTMLTableElement对象的如下方法:deleteRow删除表格行的指定单元格使用HTMLRowElement对象的如下方法:deleteCell 二 代码删除表格的行和格<input id="delrow" type="button" value="删除表格最后一行" onclick="delr原创 2017-11-22 10:33:07 · 583 阅读 · 0 评论 -
谷歌浏览器查看HTML文档和DOM视图的对应关系
一 打开谷歌浏览器,按照下图步骤打开【开发者工具】。 二 观察下图,DOM模型中的各个DOM节点,与HTML文档中各个HTML元素正好一一对应。 大小: 49.3 KB原创 2017-11-22 10:32:58 · 2894 阅读 · 0 评论 -
HTML5的音频和视频监听器应用
一 介绍1、和元素有不少监听事件,因此可以绑定这些事件的监听器。2、本应用实现的ontimeupdate事件的监听器。3、通过ontimeupdate事件绑定监听器可以实时监控音频、视频的播放位置。 二 代码 视频播放 视频播放 您的浏览器不支持video元素秒 var bn = document.ge原创 2017-11-22 10:32:46 · 1122 阅读 · 0 评论 -
HTML5的video元素和audio元素兼容性
一 介绍因为各浏览器对音频和视频的支持互不相同,开发者可能希望为和元素指定多个媒体源,此时可以借助子元素来实现。 二 代码 音频播放 音频播放 三 运行结果 四 运行说明只要该浏览器支持audio元素,无论该浏览器是支持OGG Vobis压缩格式,还是支持MP3原创 2017-11-22 10:32:21 · 1103 阅读 · 0 评论 -
DOM复制节点
一 介绍复制节点可以使用cloneNode()方法来实现。cloneNode()方法用来复制节点。obj.cloneNode(deep)deep:该参数是一个Boolean值,表示是否为深度复制。深度复制是将当前节点的所有子节点全部复制,当值为true时表示深度复制。当值为false时表示简单复制,简单复制只复制当前节点,不复制其子节点。 二 应用复制节点,本示原创 2017-11-22 10:32:11 · 4014 阅读 · 0 评论 -
构建web离线应用
一 构建步骤1、搭建web服务器2、给元素增加manifest属性3、编辑manifest文件。 二 代码核心代码:1、HTML文件(index.html)manifest="index.manifest">name="author"content="Yeeku.H.Lee(CrazyIt.org)"/>http-equiv="Content-原创 2017-11-22 10:37:05 · 472 阅读 · 0 评论 -
Web Storage结构化存储实现更复杂的本地留言板
一 介绍Web Storage结构化存储的实现步骤如下:1、存储结构化数据1.1:把结构数据封装在JSON对象中。1.2:把JSON对象转换为字符串后再进行保存。2、读取结构化数据2.1:读取JSON格式的字符串。2.2:通过JSON对象的属性来提取。 二 代码 客户端留言板 table { border-原创 2017-11-22 10:36:53 · 347 阅读 · 0 评论 -
使用WebSocket实现多人实时聊天
一 应用本应用使用WebSocket实现多人实时聊天 二 代码客户端代码 使用WebSocket通信 // 创建Web Socket对象 var webSocket = new WebSocket("ws://127.0.0.1:30000"); webSocket.onopen = function() {原创 2017-11-22 10:38:44 · 2476 阅读 · 0 评论 -
使用WebSocket进行通信的简单应用
一 应用打开一个页面,将向服务器发送一段字符串,并通过onmessage事件监听器来接受服务器返回的消息。 二 代码客户端代码 使用WebSocket通信 // 创建Web Socket对象 var webSocket = new WebSocket("ws://127.0.0.1:30000"); // 当WebSock原创 2017-11-22 10:38:54 · 814 阅读 · 0 评论 -
cookie关键技术
一 cookie是在服务端创建。二 cookie是保存在浏览器端,存放路径如下截图。三 cookie的生命周期可以设置,如果不设置生命周期,当浏览器关闭时,cookie就消亡。四 cookie可以被同一台机器的多个浏览器共享。五 可以把cookie看成一张表,表字段由(名字,值)组成。六 如果服务器端创建的两个cookie重名,后创建的cookie会替换先创建的cooki原创 2017-04-12 10:45:56 · 267 阅读 · 0 评论 -
Flash
一 介绍Macromedia Flash起初是作为嵌入到网页上基于小型动画而诞生的,现在已经成长为一个可以制作整个网站和Web应用的开发环境了。Flash已经不在是单纯的动画制作工具,而是完整的针对Web应用的开发环境。Flash动画,是使用Macromedia特有的Flash和Flash MX开发环境创建的。由于它的普通性,现在大部分浏览器都搭载了Flash插件,也就是说大部分用户无需手原创 2017-04-12 10:46:59 · 557 阅读 · 0 评论 -
谷歌浏览器内置抓包工具
1、在谷歌浏览器中找到【开发者工具】,寻找方法如下截图。2、访问一个网页,出现了抓包结果,抓包截图如下。 大小: 33.7 KB原创 2017-04-12 10:46:05 · 34184 阅读 · 0 评论 -
Canvas 位图填充
一 位图填充方法1、调用createPattern方法创建位图填充,该方法返回一个CanvasPattern对象。2、将CanvasPattern对象赋值给CanvasRenderingContext2D的fillStyle或StrokeStyle属性。二 代码 位图填充 位图填充 <canvas id="mc" width="400原创 2017-04-12 10:54:44 · 950 阅读 · 0 评论 -
Canvas 圆形渐变
一 介绍渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下是设置Canvas圆形渐变的方法:createRadialGradient(x,y,r,x1,y1,r1) - 创建一个圆形渐变。当我们使用渐变对象,必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.使用渐变,设置fi原创 2017-04-12 10:54:36 · 5145 阅读 · 0 评论 -
HTML5 简介
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 简单易学。一 什么是 HTML5HTML5 是下一代 HTML 标准。HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而,大部分现代浏览器原创 2017-04-12 10:54:17 · 255 阅读 · 0 评论 -
Canvas 线性渐变
一 介绍渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下用来设置Canvas的线性渐变:createLinearGradient(x,y,x1,y1) - 创建线条渐变。当我们使用渐变对象,必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1。使用渐变,设置fillStyle或原创 2017-04-12 10:54:27 · 1978 阅读 · 0 评论 -
HTML5的video元素应用
一 介绍HTML5 元素是一个HTML5元素,在HTML4中是非法的,但在所有浏览器中都有效。该元素使用非常简单,举例如下 二 代码 视频播放 视频播放 您的浏览器不支持video元素 三 运行结果原创 2017-04-12 10:55:39 · 447 阅读 · 0 评论 -
HTML5的audio元素应用
一 介绍HTML5 元素是一个HTML5元素,在HTML4中是非法的,但在所有浏览器中都有效。该元素使用非常简单,举例如下 二 代码 音频播放 音频播放 您的浏览器不支持audio元素 三 运行结果原创 2017-04-12 10:55:31 · 636 阅读 · 0 评论 -
Canvas 输出位图
一 介绍toDataURL()是canvas中将图片的二进制格式转为dataURL格式使用的方法。dataURL是将数据按base64进行编码,它是一种保存二进制的方式。下面通过这种方法输出位图。 二 代码 位图输出 位图输出 <canvas id="mc" width="360" height="280" style="原创 2017-04-12 10:55:21 · 1140 阅读 · 0 评论 -
Canvas 像素处理之高亮处理
一 定义和用法getImageData()方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。注意:ImageData对象不是图像,它规定了画布上一个部分(矩形),并保存了该矩形内每个像素的信息。对于ImageData对象中的每个像素,都存在着四方面的信息,即RGBA值:R - 红色(0-255)G - 绿色(0-255)B - 蓝色(0-255)A原创 2017-04-12 10:55:12 · 2748 阅读 · 0 评论