HTML5进阶学习
文章平均质量分 81
在该专栏中进行HTML5标签的进阶学习与使用,通过对一些心标签的使用,进行开发一些有趣的案例
suwu150
业精于勤,荒于嬉;行成于思,毁于随;磨刀不误砍柴工。
展开
-
微任务和宏任务的区别及具体场景
比较难理解的应该是代码块2,同步执行的按顺序执行就好了,在输出同步任务X1,输出微任务X2后,因为setTimeout又是一个宏任务,所以会被排到所有的宏任务之后,所以就会在7,8的后面出现打印。微任务和宏任务皆为异步任务,它们都属于一个队列,主要区别在于他们的执行顺序,Event Loop的走向和取值。那我们在 宏任务2中的宏任务 X3,X4,X5后面再添加一个宏任务,最终的结果会排列到后面执行。宏任务与微任务之间的执行顺序(同步任务->微任务->宏任务)的执行顺序去检查,会慢慢深入人心的。原创 2023-03-01 22:56:09 · 1173 阅读 · 0 评论 -
h5 Canvas实现圆形时间倒计时进度条
在项目中,我们会遇到需要显示进度条或者倒计时的功能,我们今天就来实现一下。一、效果展示二、准备文件在开发canvas程序时,我们通常需要准备静态html和需要引用的js文件即可,这次我们使用的静态html模板如下:1.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible原创 2021-03-21 16:44:56 · 2129 阅读 · 2 评论 -
解决 canvas 在高清屏中绘制模糊的问题
我们继续,举例来说,假设 devicePixelRatio 的值为 2 ,一张 100×100 像素大小的图片,在 Retina 屏幕下,会用 2 个像素点的宽度去渲染图片的 1 个像素点,因此该图片在 Retina 屏幕上实际会占据 200×200 像素的空间,但是我们总的像素点只有100×100,这就相当于图片被放大了一倍,因此图片会变得模糊。因此,要做 Retina 屏适配,关键是知道当前屏幕的设备像素比,然后将 canvas 放大到该设备像素比来绘制,然后将 canvas 压缩到一倍来展示。原创 2019-07-30 10:35:00 · 9498 阅读 · 5 评论 -
h5 Canvas转换为图片格式并下载
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。如果画布的高度或宽度是0,那么会返回字符串“data:,”。如果传入的类型非“image/png”,但是返回的值以“data:image/png”开头,那么该传入的类型...原创 2019-06-05 00:03:05 · 7707 阅读 · 0 评论 -
m3u8格式视频源列表
平时,需要测试m3u8格式视频的播放,会使用一些可用的播放源,整理在这里: const sourceList = [ { name: 'cctv1', src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8' }, { name: 'cctv2', src: 'http://ivi.bupt.edu.cn/hls/cc...转载 2019-05-19 17:41:15 · 102208 阅读 · 4 评论 -
h5 Canvas正多边形绘制
在之前文章中,我们使用线段进行绘制过矩形,使用arc,arcTo绘制过圆弧和圆形,但是Canvas还能够进行绘制其他图形,比如三角形、六边形、八边形等.这篇文章主要就是说明如何绘制多边形.JS效果如下:上述代码,我们进行绘制了一组根据时间进行变化的生成的多边形,通过方法drawHorizontalAxis绘制横向坐标轴,方法drawVerticalAxis绘制纵向坐标轴,通过方法getPolygonPoints进行计算获取多边形中所有的点,进行为后面连线时连接点作准备工作,通过createPo原创 2019-03-23 14:18:16 · 2516 阅读 · 0 评论 -
前端开发中布局形式
布局我们可以把网页理解成是由一个个盒子排列组合而成的,那么盒子之间又是怎么排列布局的呢?网页常见的布局方式大概有五种:普通文档流布局、浮动布局(Float)、绝对布局(Absolute)、弹性布局(Flex)、网格布局(Grid)。普通文档流布局默认的布局方式,由块级元素(display: block)和行内元素(display: inline)等组成,元素之间按照从左到右,从...原创 2018-06-03 01:09:46 · 1355 阅读 · 0 评论 -
JavaScript进阶学习
事件分离: 实现事件与标签的分离,通过单独获取标签,然后添加方法进行解决,如下面所示代码: window.onload = function () { // 在这里进行获取标签的事件 var oBtn = document.getElementById('btn'); oBtn.onclick = function () { // 进行其他操作 }}原创 2017-11-20 12:01:30 · 929 阅读 · 0 评论 -
如何把多个js函数绑定到事件上面
在给网页加一些特效时,经常要加入“onload”事件,即在网页加载完后执行某事件,例如:<body onload=”alert(‘欢迎光临!’)”,但这样做有个大的缺陷,事件会在网页完全下载完后才会执行,包括网页中的静态资源(图片或Flash等),如果网页中的图片比较大或有很多图,可能还没等网页完全下载完网友已经点击链接到其它网页去了,这样这个事件就没有执行了。 这时我们会想到用“window.o原创 2017-12-29 11:59:37 · 2558 阅读 · 0 评论 -
scrollWidth,clientWidth,offsetWidth在各浏览器中的兼容性和区别测试
参考链接 为了测试同一代码在不同浏览器中区别,首先统一了环境,设置所有系统分辨率为800×600,试验使用如下面所示:html>head> meta charset="utf-8"> title>Mtitle> style> #input { border: 11px solid blue; width: 100px; height: 100px;原创 2017-11-22 22:08:13 · 5608 阅读 · 0 评论 -
各种浏览器的Hack写法(chrome firefox ie等)
如下面所示代码,将会在火狐浏览器和谷歌浏览器中有不同的表现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; height: 300px;原创 2017-10-23 19:15:20 · 1826 阅读 · 0 评论 -
如何使用js实现图片轮播
要说起js的轮播功能,已经是有很多成熟的方法,在这里,这个算法确实好:看看下面的代码实现吧:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>爱你,我的星星</title></head>&l...原创 2017-06-04 01:57:24 · 3860 阅读 · 0 评论 -
盒子模型
盒子模型网页就是由许多个盒子通过不同的排列方式堆积而成,网页上每个元素都被浏览器看成是一个矩形的盒子,这个盒子由元素的内容,填充,边框,边界组成。默认盒子边框背景色透明,默认看不到盒子) 盒子模型 margin 外边距,定义区块外边界与上级元素距离的属性,值为长度 padding 内边距(填充),是设置区块的内边距的属性,是边框和元素内容之间的间隔距离 border 边框(注意边框是有内外俩条边界的) wid转载 2016-10-15 21:39:05 · 1359 阅读 · 0 评论 -
常见CSS(层叠样式表)介绍
CSS(cascading style sheet,层叠样式表) CSS(cascading style sheet,层叠样式表)是描述文档怎么样被呈现的语言,使用CSS可以对HTML文档进行描述。语法: 1)CSS属性和值之间用冒号分隔 2)CSS属性之间用分号分隔(建议每个属性后都书写分号) 3)CSS的值有多个的时候使用空格分隔 每个HTML元素都包含有一个style属性,使转载 2016-10-15 20:51:37 · 1401 阅读 · 0 评论 -
h5 Canvas圆弧与圆形的绘制
圆和圆弧是图形中基本图形之一.在Canvas中,CanvasRenderingContext2D对象提供了两个方法(arc()和arcTo())来绘制圆和圆弧。仅难了解角度和弧度之间的关系是不够的,我们还需要知道怎么使用JavaScript来实现角度和弧度之间的换算。一个π大约是3.141592653589793,在JavaScript中对应的是Math.PI。那么角度和弧度之间的换算:同样的:为了方便计算和使用,可以将其封装成JavaScript函数:比如我们要将30deg转换成rad,可以直接使用:原创 2019-02-27 21:57:00 · 2349 阅读 · 0 评论 -
h5 Canvas线段的绘制
在Canvas中,线段也是路径中的一种,被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个方法。通常创建线条的方法是moveTo()和lineTo()方法,但是要使线性路径出现在canvas之中,我们必须使用上面提到的stroke()方法创建线条const canvas = document.getElementByI...原创 2019-02-27 16:04:53 · 1629 阅读 · 0 评论 -
h5 Canvas矩形的绘制
h5 Canvas矩形的绘制1.绘制矩形api在Canvas中提供了绘制矩形的API:fillRect(x, y, width, height):绘制一个填充的矩形strokeRect(x, y, width, height):绘制一个矩形的边框clearRect(x, y, width, height):清除指定矩形区域,让清除部分完全透明除此之外还可以通过Canvas中Canv...原创 2019-02-26 16:05:43 · 9697 阅读 · 0 评论 -
h5 Canvas时钟制作
canvas可以说是html5中最强大的元素之一下面我们就使用canvas来进行绘制一个时钟在绘制之前,我们需要知道需要绘制的元素都有哪些,其中包括钟最外边的圆圈、钟表上的数字、钟表上的指针,还有定时器下面确定使用的html页面:1.h5Clock.html&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;原创 2019-02-25 12:47:44 · 803 阅读 · 0 评论 -
博客网站页面的实现(html)
博客网站页面的实现(html)今天使用框架技术,table以及div技术实现了一个博客页面,使用的是静态html实现,实现了整体框架,使用css样式进行了页面的装饰,对于部分具体功能还有待完善,一下就是各个页面的介绍完整页面下载:完整代码一、首页当我们点击左侧边框内容时,在右下角能够进行内容的显示二、问答 我们能够通过超链接的方式进行页面的关联,也可以访问到远程地址三、招聘在添加简历这一栏,我们能够进行直接在表格上进行内容的添加,修改时也是同样的方法实现四、科技五、极客六、最新资讯七、我的消息原创 2016-10-15 13:29:53 · 9577 阅读 · 2 评论 -
html基本语法
可以使用.html与.htm作为html文件的后缀名(扩展名) 可以使用任意文本编辑器创建HTM标签标签用来标记内容 标签使用"<",">"包围标签分为成对标签和单标签一个元素通常是由一个开始标签,内容,其他元素以及一个结束标签组成的与元素相关的特性称为属性,属性由键值对组成<元素名 属性名="值1" 属性名="值2"></元素名> 大多数元素都可以使用的属性。 id class 标识一类元素 style 样式title 描述信息元素名和属性名都不区分大小写 4)文档结构档类型声明: 版本转载 2016-10-15 15:38:47 · 877 阅读 · 0 评论 -
html简单标签介绍
html标签介绍1)块级(block)标签<div></div>特点独占一行h6 标题 1)有字体大小的设置2)文本有加粗强调设置 3)上下文之间有较大间距 p 段落1)独占一行2)上下文之间具有距离ul li (无序列表)1) 配合使用) ul li都独占一行空间3) ul 上下文之间有很大空间4) li与列表的样式显示(默认点状),并且由文本缩进<ul><li>列表1</li><li>列表2</li>/ul>ol li (有序列表)<ol><li>列表1</li>li>列表2</li></ol> dl转载 2016-10-15 16:08:42 · 688 阅读 · 0 评论 -
常用HTML标签详细介绍
超链接 从一个web资源到另外一个web资源的连接绝对路每个网页都有一个唯一的地址,称为URI 统一资源定位符,也称为该网页的绝对路径 http://ip:port/目录/文件名相对路径相对于当前文档所在的路径)a 超链接未访问:和用户没有任何交互已选择 :当鼠标放在上面时就算是选中已访问 :点击后的状态 <a href="">内容显示</a>2)link 文档关系连接 只能出现在head标签中,定义了当前文档和另一个资源之间的联系。 通常用于链接到外部样式表 <link rel="stylesh转载 2016-10-15 16:50:27 · 1132 阅读 · 0 评论 -
html中表格的高级部分学习
1.表格thead,tbody, // 表格中特有的方法: table.tBodies[0].rows[2].cells[1].innerHTML //上面内容是获取所有的tBody数组 隔行变色:采用取模的方式 增加和删除行:createElement(‘tr/td’)和appendChild();–先删父级后追加 搜索:大小不敏感,多关键词搜索(str.sear原创 2017-11-22 00:05:36 · 424 阅读 · 0 评论 -
html实时效果查看的实现
html实现实时查看效果的功能 1.如下面代码,将能够打开新页面查看我们在文本输入域中的代码效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>M</title> <script type="text/javascript"> window.onload = function () {原创 2017-11-22 14:55:51 · 13186 阅读 · 0 评论 -
HTML中如何实现更换网页皮肤
在QQ空间中或者其他网站中有很多一键换肤的功能,今天也进行实现一个简答的换肤。1.实现思路 在实现换肤功能时,我们应该注意到,大部分换肤功能页面中的内容是没有发生变化的,变化的只是背景样式的改变,有的页面中组件位置的调整,所以,实现只需要对同一个页面进行不同样式的替换即可,也就是说,我们有多少皮肤,就得有多少样式。2.具体实现首先,我们需要进行准备一个固定的html页面,命名为i原创 2017-10-22 22:02:29 · 7891 阅读 · 1 评论 -
html5实现电子签名并下载
1.效果如下所示效果: 2.代码首先需要下载插件,插件位置如下所示: 链接: https://pan.baidu.com/s/1snqhXWL 密码: wpn8 解压之后将文件放在js文件夹中,如下面路径./js/html2canvas.min.js 如下所示代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <met原创 2018-01-19 16:11:32 · 16128 阅读 · 0 评论 -
h5 canvas多边形(蜘蛛图)的画法
蜘蛛图的画法: 在开始之前,我们需要知道canvas是如何进行图像的绘制,canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。 在矩形区域的画布上,控制其每一像素,JavaScript 来绘制 2D图形,逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加图像。 * 注意!!!canva原创 2017-10-16 15:54:10 · 4462 阅读 · 0 评论