HTML5
  • 实现图片懒加载的几种方法

    懒加载就是延时加载,即当对象需要用到的时候再去加载。本文就来为大家介绍几种实现图片懒加载的方法,希望对大家有一定的帮助。懒加载,顾名思义,在当前网页,滑动页面到能看到图片的时候再加载图片故问题拆分成两个:如何判断图片出现在了当前视口 (即如何判断我们能够看到图片)如何控制图片的加载方案一如何判断图片出现在了当前视口clientTop,offsetTop,clientHeight以及scrollTop各种关于图片的高度作比对这些高度都代表了什么意思?这我以前有可能是知道的,那时候我比较单纯,喜欢死磕。我现在想通了,背不过的东西就不要背了

    2020-10-29 0 0 0 0
  • 聊聊有趣的HTML5 Canvas!

    Canvas 是 HTML5 提供的一个用于展示绘图效果的标签. Canvas 原意为画布, 在 HTML 页面中用于展示绘图效果. 最早 Canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现。canvas 的使用领域游戏大数据可视化数据banner 广告多媒体模拟仿真远程操作图形编辑判断浏览器是否支持 canvas 标签varcanvas=document.getElementById('canvas')
    if(canvas.getContext){
    console.log('你的浏览器支持Canvas!')
    }else{
    console.log('你的浏览器不支持Canvas!')
    }canvas 的基本用法1、使用 canvas 标签, 即可在页面

    2020-10-27 0 0 0 0
  • 7个提升网页SVG文件可访问性的方案

    SVG是一种图像文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。本文就来为大家介绍7个提升网页SVG文件可访问性的方案。1、作为图片使用的 SVG 文件如果你的 SVG 是作为img的 src 引入的,务必为img添加role=img属性:imgsrc=https://s3-us-west-2.amazonaws.com/s.cdpn.io/163671/sa_logo.svg
    role=imgalt=SimplyAccessible

    ahref=#
    imgsrc=https://s3-us-west-2.amazonaws.com/s.cdpn.io/163671/sa_logo.svg
    role=imgalt=SimplyAccessible
    /a如果不加role=img,有些屏幕阅读器不会将img src=xxx.svg认

    2020-10-22 0 0 0 0
  • 先建立css还是html?

    很多朋友都有自己的习惯,有的人喜欢先写CSS,有的人喜欢先写HTML,那么网页布局最科学的写法流程是什么呢?对于一个新手而言,在有了一点html知识之后,对于CSS、DIV都感觉特别的疑惑,不知道这其中到底是什么联系?为什么用了CSS的网页不能像其它代码一样直观?html和css哪个先写?其实这些问题在我看完教程,但还没真正上手实践时的疑惑!等真正上手自己做时,我才发现应该是两者同时写!下面我们就来看一下写网页的流程:1、把站点建好,目录建好,比如建好文件夹css,images这两个是最其本的,然后新建一个.html空文件,一个.css空样式表,

    2020-10-21 0 0 0 0
  • html+css+js如何实现魔性舞蹈动画效果?(附代码)

    本篇文章给大家介绍一下使用html+css+js实现魔性舞蹈动画效果(附代码)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。使用html+css+js实现魔性的舞蹈,让我们燥起来!!!代码如下,复制代码即可使用:!DOCTYPEhtml
    html
    head
    metacharset=UTF-8
    titleTheLastExperience/title
    style
    html{
    overflow:hidden;
    }
    body{
    position:absolute;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background:#000;
    }
    canvas{
    position:absolute;
    width:100%;
    height:100%;
    background:#000;
    }
    /styl

    2020-10-19 0 0 0 0
  • 适合web开发人员的9个css工具

    不管你是一个多么有经验的开发人员,你都想让你的生活尽可能的简单。正确的工具可以帮助您完成此任务。你的能力取决于你使用的工具,所以花点时间挑选适合你需要的工具是明智的。在本文中,我将讨论每个web开发人员都可以使用的一些工具,以便使你的工作更轻松、更高效。1.Transition Generator有一个CSS属性有很多可能性,这让你很难记住所有的CSS属性,那就是 transition 属性。当你不确定你想要什么样的过渡,或者你只是想尝试其中一些过渡的时候,这个工具就很有用了。这个工具可以很容易地混合转换不同方面,比如持续时间和延迟。通过

    2020-09-21 0 0 0 0
  • 回流与重绘介绍

    引起DOM树结构变化,页面布局变化的行为叫回流,且回流一定伴随重绘。只是样式的变化,不会引起DOM树变化,页面布局变化的行为叫重绘,且重绘不一定会便随回流。本文及来为大家介绍一下回流与重绘。回流与重绘,会影响页面性能,每次这两个都会被同时提及,关系就好像KFC边上一定会有MC一样亲密的让人摸不到头脑。要理解回流与重绘,首先要明白浏览器请求回来之后发生了什么浏览器的渲染过程在页面加载时,浏览器渲染过程如下:解析HTML,生成DOM树,解析CSS,生成CSSOM树将DOM树和CSSOM树结合,生成渲染树(Render Tree)Layout(回流):根据

    2020-09-20 0 0 0 0
  • HTML5文件上传下载介绍

    HTML5 中提供的文件API在前端中有着丰富的应用,上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好,包括移动端,除了 IE 只支持 IE10 以上的版本。想要更好地掌握好操作文件的功能,先要熟悉每个API。FileList 对象和 file 对象HTML 中的input[type=file]标签有个 multiple 属性,允许用户选择多个文件,FileList对象则就是表示用户选择的文件列表。这个列表中的每一个文件,就是一个 file 对象。file 对象的属性:name : 文件名,不包含路径。type : 文件类型。图片类型的文件都会以 image/ 开头,可以由此来

    2020-09-16 0 0 0 0
  • HTML5 canvas画简单的叮当猫头

    html5的canvas是很强大的,下面本篇文章使用html5 canvas 实现一个简单的叮当猫头部。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。效果如下:代码如下:divclass=doraemon
    canvasid=facewidth=600height=1500您的浏览器不支持canvas/canvas
    /div
    script
    varface=document.getElementById('face').getContext(2d);
    face.arc(252,252,250,0,360*Math.PI/180);
    face.fillStyle='#07beea';//设置填充颜色
    face.fill();//填充
    face.lineWidth=2;//轮廓线宽度
    face.strokeStyle='#333';

    2020-09-15 0 0 0 0
  • HTML head元素中常用标签介绍

    head元素是所有头部元素的容器,head内的元素可以指示浏览器在何处可以找到样式表,提供一些信息等。head内常用的元素有title、base、link、meta、script及style。1、title标签定义文档的标题title元素在所有的HTML文档中都是必须的,它定义浏览器地址栏中显示的标题,实例如下!DOCTYPEhtml
    html
    head
    titleThisismyHTML/title
    /head
    /html2、base标签为页面上所有链接规定默认地址或默认目标(target)!DOCTYPEhtml
    html
    head
    titleThisismyHTML/title
    !--规定默认地址--
    basehref=http://www.baidu.com/base
    !--规定默认目标--

    2020-09-03 0 0 0 0
ots网络logo

OTS网络安全门户主要提供网络信息安全教程、文章、工具,让更多的小伙伴加入我们的社区一起学习。

技术支持: 建站ABC | 管理登录