快速使用svg画出精美动画！
经常在Codepen上看到大侠们用SVG画出不可思议的动画，我一直很好奇他们是怎么运作的，总觉得这需要对SVG有足够透彻的了解，并且自己画出那些SVG图案，才有办法让他动起来。但其实不...
2021-02-14
你可能会忽略但有用的 HTML 标签（总结）
随着对 JavaScript 框架和库的依赖越来越深，很多人对 HTML 的重视程度降低了。这就导致了我们无法充分利用 HTML 的很多功能，这些功能可以大大的增强网站功能。另外通过编写语...
2021-02-14
Canvas在超级玛丽游戏中的应用详解
前言在上一篇文章中, 我们基于DOM体系构建了超级玛丽, 那么在本篇文章中我们使用canvas对整个架构进行升级, 从而提升游戏的视觉体验。 有需要的同学可以查看 源码 学习.线...
2021-02-08
html 5经典书籍分享 学习H5必备
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成...
2021-02-05
使用HTML和CSS实现的标签云效果(附demo)
标签云的效果在博客和网站上不难见到，它其实就是带有超链接的某些关键字，为了达到强调主题的作用。通常出现概率比较大或者受欢迎的标签文字显示比较大，相反的就显示的小。 来...
2021-02-04
Html5移动端网页端适配(js+rem)
业务场景：由于需求是适配两端屏幕，所以刚开始想的css用rem写，但是还是会出现字体和布局不会等比缩放的情况，后来找到一种js代码针对根元素去做的缩放配置，加上rem和这个js的设置...
2021-02-04
canvas版人体时钟的实现示例
不知道老网民们还记不记得这个魔性的时钟插件：作为网上冲浪十数载的网虫，不久前看到这个图瞬间破防，直接梦回10年前的QQ空间，感叹一下岁月蹉跎、时光荏苒、青春不在、不胜唏嘘。...
2021-01-30
HTML中的标签textarea的属性有哪些
HTML中的标签textarea的属性有：1、cols，垂直列。在没有做样式表设置的情况下，它表示一行中可容纳下的字节数。例如cols=60，表示一行中最多可容纳60个字节，也就是30个汉字。另外要...
2021-01-28
在HTML中限制input 输入框只能输入纯数字的实现
限制 input 输入框只能输入纯数字1、onkeyup = "value=value.replace(/[^\d]/g,'')"使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母...
2021-01-28
h5页面背景图很长要有滚动条滑动效果的实现
最近做项目过程中，老大提了个很奇葩的要求背景图铺满页面，他要求有滚动条可以滑动，他给我讲的思路是用js 获取背景图片的高，在获取当前窗口的高，两者比较，当窗口的高小于背景图片...
2021-01-28
html+css实现充电水滴融合特效代码
先看效果：前言：这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯css）实现：定义标签，有三个水滴盒子，一个圆圈盒子显示数字，一个最底层盒子：<div class="kuang">...
2021-01-28
html+css实现响应式卡片悬停效果
话不多，看效果先：卡片悬停，响应式卡片，简约效果。实现：1. 定义标签，.kapian为最底层盒子，然后两个子盒子一个放图片，一个放文本： <div class="kapian"> <div class="tu">...
2021-01-28
html+css+js实现导航栏滚动渐变效果
先看效果：实现：1.定义导航栏的文字标签：<div class="tou"> <sapn class="logo"> 北极光。</sapn> <ul class="biao"> <li><a href="#"><a href="#">主页<...
2021-01-28
块级元素和行内元素有什么区别
块级元素和行内元素的区别有：1、行内元素可以与其他行内元素并排；块级元素独占一行，不能与其他任何元素并列；2、行内元素不能设置宽高，默认的宽度就是文字的宽度；块级元素能设置宽...
2021-01-27
HTML5适合的情人节礼物有纪念日期功能
前言利用HTML5，css，js实现爱心树 以及 纪念日期的功能 网页有播放音乐功能 以及打字倾诉感情的画面，非常适合情人节送给女朋友具体的HTML代码具体只要修改代码里面的男某某和女...
2021-01-26
详解如何将 Canvas 绘制过程转为视频
如果我们用Canvas实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas可以直接通过现代浏览器支持的 Media Streams API...
2021-01-26
html table呈现个人简历以及单元格宽度失效的问题解决
正确的实现代码如下：<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <title>个人简历</title></head><body> <table width="800" border="1" align...
2021-01-24
浅析HTML5页面元素及属性
一.列表元素1.ul元素ul为无序列表，各个列表项之间没有顺序级别之分，通常是并列的，排序不分先后。
语法为：<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...</u...
2021-01-21
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
情况：引入SDK 的签名不报错与调试工具生成的结果也是一模一样，但是使用hideMenuItems没有小效果，不会报错。解决方式：把要执行的wx.hideMenuItems()放到wx.ready这里面就有生效...
2021-01-21
html5如何生成验证码
思路介绍：可以利用html5的canvas标签先生成画布，然后在画布上利用随机数字生成验证码，背景用随机颜色和杂乱的直线来代替。高级方法：利用表单插件属性绑定验证码数据(json)可以...
2021-01-20
利用html来制作一个简单美观的购物车界面
首先来展示一下购物车界面：这个页面只是实现了其布局视图，没有使用js或者jquery相关语言，在博主看来是比较利于我们将其加入到自己的程序中的
以下是相关代码：index.html<!DOCTY...
2021-01-20
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
问题记录： 20210118，记录一下一个小问题，收到来自同事的bug反馈，说我们的H5页面，在微信内置浏览器下显示有问题，然后丢了个图过来，发现里面文字很大，文字的位置也有点偏移，立刻...
2021-01-19
html设置背景图片全屏
html设置背景图片全屏的方法：1.新建一个html文档。设置一下HTML的框架，然后把图片设置在同一个文件夹里面。2.加入<style type="text/css"></style>，这样可以有样式设置。因为...
2021-01-18
HTML5 drag和drop具体使用详解
简介拖拽（Drag/Drop）是一个很普遍、很常用的操作，即抓取一个对象后，放到想要放的地方。 在H5中，拖拽是一个标准操作，任何元素都可以拖拽！！ 但是！！ 想要实现拖拽，需要添加 拖拽属性。H5...
2021-01-18
Html5 new XMLHttpRequest()监听附件上传进度
本文主要介绍new XMLHttpRequest()监听附件上传进度，解决优化loading长时间加载，用户等待问题一、存在问题经测试发现，new XMLHttpRequest()在附件上传请求中，WIFI关闭切4G上传，...
2021-01-15
HTML5 canvas实现的静态循环滚动播放弹幕
本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕，分享给大家，具体如下：使用方法和API语法如下：canvasBarrage(canvas, data);其中：canvascanvas 表示我们的 <canvas> 画布...
2021-01-05
html制作图文混排效果
图片属性介绍：hspace 和 vspace 属性可以设置图像周围的空间。hspace 属性可设置或者返回图片的 hspace 属性值。hspace 属性指定图像的左边缘和右边缘的空白（设置图片与文本...
2020-12-30
html5实现调用摄像头并拍照功能
我们知道通常情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候才执行，这其...
2020-12-28
html转pdf截图保存功能的实现
使用技术itext.jar : 将byte文件输入流转换为图片，pdf等html2canvas.js ：将html页面区域截图为base64编码的图片资源java+js1. 准备资源itext.jar
www.baidu.comhtml2canvas...
2020-12-23
html5+css3之制作header实例与更新
上次，我们形成了两种header的布局，一种flexbox，一种float，最后与身边做重构的同事交流下来，选择了float的布局。事实上布局的选型不需要我关注，我的参与或者一些意见多数是自我提...
2020-12-22
Bootstrap怎么实现遮罩层效果？（代码示例）
效果图如下：1、点击打开遮罩层按钮2、弹出一个隐藏的p源码下载地址：http://download.csdn.net/detail/u014175572/9564824实现代码如下：<!DOCTYPE html><html> <head> <meta...
2020-12-21
html/css中行内元素和块级元素的区别是什么
行内元素和块级元素的区别1、 行内元素不会占据整行，在一条直线上排列，都是同一行，水平方向排列； 块级元素会占据一行，垂直方向排列。2、 块级元素可以包含行内元素和块级元素...
2020-12-21
Html5+CSS3+EL表达式问题小结
最近一直做关于装修的一个项目，后台功能实现很快，但是前台界面展示确实遇到不少的问题。 问题1、下拉框选择不管用，选中之后没有变。如图当我选择其他的选项时，不发生任何变化。...
2020-12-20
html5+CSS3的编码规范
黄金定律不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。语法1.用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方...
2020-12-19
html input是什么
HTML <input>标签<input> 标签规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变，取决于 type 属性。<input> 元素在 <form> 元素中使用，用来声明允许用户...
2020-12-18
浅谈网页中提升SVG文件可访问性的几种方法
SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。本文就来为大家介绍7个提升网页SVG文件可访问性的方案。1、作为图片使用的 SVG 文...
2020-12-17
简洁自适应404页面HTML好看的404源码
演示图如下：HTML代码片段：<!DOCTYPE HTML><html> <head> <title>404</title> <meta charset="utf-8" /> <meta name="viewport" content="width=devi...
2020-12-16
前端使用canvas生成盲水印的加密解密的实现
为了保障信息安全，防止重大信息泄露，并且能够锁定泄露用户，需要对页面展示的图片加入当前用户信息的盲水印，即最终图片外观看起来和原图一样，但是经过解码以后可以识别出水印信...
2020-12-16
HTML中什么是内联元素？
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，而display属性为inline的元素就是行内元素。内联元素(inline...
2020-12-16
HTML5新增了哪些input类型及其属性？
HTML5中新增的input类型及其属性HTML4.01中，input的类型只有text、button、password、submit、radio、checkbox和hidden（隐藏域）。H5中新增了一些类型，使用起来更加方便，包括： co...
2020-12-16
html语法和css语法之间有什么区别
html语法和css语法的区别1、HTML由围绕内容的标签组成。而CSS由一条或多条声明和选择器组成.html语法示例如下：<div>内容</div>css语法示例：div{font-size:12px;}CSS 规则由两...
2020-12-15
利用html5实现图片的淡入淡出效果
目的：实现图片的淡入淡出效果具体代码如下：<!doctype html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-sc...
2020-12-15
HTML5 body设置全屏背景图片的示例代码
用什么代码实现？不允许有白色底色产生，因为手机高度不一样设计图要标准（750）确认是背景图（通屏底图）应用场景：移动端宣传页面或者活动页面错误的写法：加到div中结合图片设置min-heig...
2020-12-14
html中使用vue-router的示例代码
引入vue和vue-router<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>完整的示例<!D...
2020-12-14
HTML表格跨行跨列操作(rowspan、colspan)
一般使用<td>元素的colspan属性来实现单元格跨列操作，使用<td>元素的rowspan属性来实现单元格的跨行操作。colspan属性规定单元格可横跨的列数，所有浏览器都支持colspan属性。...
2020-12-14
HTML外部样式表如何引入CSS样式
链入式是把所有的 样式 放在一个或多个 外部样式表文件 中，这个文件是以 css 为扩展名的，通过 link 标签，将外部样式表（css命名的外部样式文件）链接到html文档中，这样可以把结构和...
2020-12-14
如何使用canvas绘制可移动网格的示例代码
本文主要介绍了如何使用canvas绘制可移动网格的示例代码，分享给大家，具体如下：效果说明这个是真实项目中遇到的需求，我把它抽离出来，屏蔽了那些业务相关的东西，仅从代码角度来考虑...
2020-12-14
html+css3实现的登录界面
实现效果先用html搭建个基本框架<body><div class="container"> <section id="content"> <form action=""> <h1>Login Form</h1> <div> <input type="text" placeho...
2020-12-14
浅谈HTML文件引入外部CSS文件时路径的写法总结
一. 引入外部css文件的基本样式用< link>标签引入外部样式表，其中通常要写两个属性：href属性表示css文件的路径 rel=“stylesheet” 描述了当前页面与href所指定文...
2020-12-14
