HTML/html5 - 教程之家

232浏览

0评论

快速使用svg画出精美动画！

经常在Codepen上看到大侠们用SVG画出不可思议的动画，我一直很好奇他们是怎么运作的，总觉得这需要对SVG有足够透彻的了解，并且自己画出那些SVG图案，才有办法让他动起来。但其实不...

2021-02-14

126浏览

0评论

你可能会忽略但有用的 HTML 标签（总结）

随着对 JavaScript 框架和库的依赖越来越深，很多人对 HTML 的重视程度降低了。这就导致了我们无法充分利用 HTML 的很多功能，这些功能可以大大的增强网站功能。另外通过编写语...

2021-02-14

117浏览

0评论

Canvas在超级玛丽游戏中的应用详解

前言在上一篇文章中, 我们基于DOM体系构建了超级玛丽, 那么在本篇文章中我们使用canvas对整个架构进行升级, 从而提升游戏的视觉体验。有需要的同学可以查看源码学习.线...

2021-02-08

99浏览

0评论

html 5经典书籍分享学习H5必备

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成...

2021-02-05

118浏览

0评论

使用HTML和CSS实现的标签云效果(附demo)

标签云的效果在博客和网站上不难见到，它其实就是带有超链接的某些关键字，为了达到强调主题的作用。通常出现概率比较大或者受欢迎的标签文字显示比较大，相反的就显示的小。来...

2021-02-04

89浏览

0评论

Html5移动端网页端适配(js+rem)

业务场景：由于需求是适配两端屏幕，所以刚开始想的css用rem写，但是还是会出现字体和布局不会等比缩放的情况，后来找到一种js代码针对根元素去做的缩放配置，加上rem和这个js的设置...

2021-02-04

81浏览

0评论

canvas版人体时钟的实现示例

不知道老网民们还记不记得这个魔性的时钟插件：作为网上冲浪十数载的网虫，不久前看到这个图瞬间破防，直接梦回10年前的QQ空间，感叹一下岁月蹉跎、时光荏苒、青春不在、不胜唏嘘。...

2021-01-30

82浏览

0评论

HTML中的标签textarea的属性有哪些

HTML中的标签textarea的属性有：1、cols，垂直列。在没有做样式表设置的情况下，它表示一行中可容纳下的字节数。例如cols=60，表示一行中最多可容纳60个字节，也就是30个汉字。另外要...

2021-01-28

96浏览

0评论

在HTML中限制input 输入框只能输入纯数字的实现

限制 input 输入框只能输入纯数字1、onkeyup = "value=value.replace(/[^\d]/g,'')"使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母...

2021-01-28

82浏览

0评论

h5页面背景图很长要有滚动条滑动效果的实现

最近做项目过程中，老大提了个很奇葩的要求背景图铺满页面，他要求有滚动条可以滑动，他给我讲的思路是用js 获取背景图片的高，在获取当前窗口的高，两者比较，当窗口的高小于背景图片...

2021-01-28

119浏览

0评论

html+css实现充电水滴融合特效代码

先看效果：前言：这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯css）实现：定义标签，有三个水滴盒子，一个圆圈盒子显示数字，一个最底层盒子：<div class="kuang">...

2021-01-28

80浏览

0评论

html+css实现响应式卡片悬停效果

话不多，看效果先：卡片悬停，响应式卡片，简约效果。实现：1. 定义标签，.kapian为最底层盒子，然后两个子盒子一个放图片，一个放文本： <div class="kapian"> <div class="tu">...

2021-01-28

67浏览

0评论

html+css+js实现导航栏滚动渐变效果

先看效果：实现：1.定义导航栏的文字标签：<div class="tou"> <sapn class="logo"> 北极光。</sapn> <ul class="biao"> <li><a href="#"><a href="#">主页<...

2021-01-28

117浏览

0评论

块级元素和行内元素有什么区别

块级元素和行内元素的区别有：1、行内元素可以与其他行内元素并排；块级元素独占一行，不能与其他任何元素并列；2、行内元素不能设置宽高，默认的宽度就是文字的宽度；块级元素能设置宽...

2021-01-27

145浏览

0评论

HTML5适合的情人节礼物有纪念日期功能

前言利用HTML5，css，js实现爱心树以及纪念日期的功能网页有播放音乐功能以及打字倾诉感情的画面，非常适合情人节送给女朋友具体的HTML代码具体只要修改代码里面的男某某和女...

2021-01-26

284浏览

0评论

详解如何将 Canvas 绘制过程转为视频

如果我们用Canvas实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas可以直接通过现代浏览器支持的 Media Streams API...

2021-01-26

126浏览

0评论

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

135浏览

0评论

浅析HTML5页面元素及属性

一.列表元素1.ul元素ul为无序列表，各个列表项之间没有顺序级别之分，通常是并列的，排序不分先后。
语法为：<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...</u...

2021-01-21

171浏览

0评论

详解如何解决H5开发使用wx.hideMenuItems无效果不生效

情况：引入SDK 的签名不报错与调试工具生成的结果也是一模一样，但是使用hideMenuItems没有小效果，不会报错。解决方式：把要执行的wx.hideMenuItems()放到wx.ready这里面就有生效...

2021-01-21

85浏览

0评论

html5如何生成验证码

思路介绍：可以利用html5的canvas标签先生成画布，然后在画布上利用随机数字生成验证码，背景用随机颜色和杂乱的直线来代替。高级方法：利用表单插件属性绑定验证码数据(json)可以...

2021-01-20

194浏览

0评论

利用html来制作一个简单美观的购物车界面

首先来展示一下购物车界面：这个页面只是实现了其布局视图，没有使用js或者jquery相关语言，在博主看来是比较利于我们将其加入到自己的程序中的
以下是相关代码：index.html<!DOCTY...

2021-01-20

126浏览

0评论

HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题

问题记录： 20210118，记录一下一个小问题，收到来自同事的bug反馈，说我们的H5页面，在微信内置浏览器下显示有问题，然后丢了个图过来，发现里面文字很大，文字的位置也有点偏移，立刻...

2021-01-19

145浏览

0评论

html设置背景图片全屏

html设置背景图片全屏的方法：1.新建一个html文档。设置一下HTML的框架，然后把图片设置在同一个文件夹里面。2.加入<style type="text/css"></style>，这样可以有样式设置。因为...

2021-01-18

101浏览

0评论

HTML5 drag和drop具体使用详解

简介拖拽（Drag/Drop）是一个很普遍、很常用的操作，即抓取一个对象后，放到想要放的地方。在H5中，拖拽是一个标准操作，任何元素都可以拖拽！！但是！！想要实现拖拽，需要添加拖拽属性。H5...

2021-01-18

110浏览

0评论

Html5 new XMLHttpRequest()监听附件上传进度

本文主要介绍new XMLHttpRequest()监听附件上传进度，解决优化loading长时间加载，用户等待问题一、存在问题经测试发现，new XMLHttpRequest()在附件上传请求中，WIFI关闭切4G上传，...

2021-01-15

99浏览

0评论

HTML5 canvas实现的静态循环滚动播放弹幕

本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕，分享给大家，具体如下：使用方法和API语法如下：canvasBarrage(canvas, data);其中：canvascanvas 表示我们的 <canvas> 画布...

2021-01-05

207浏览

0评论

html制作图文混排效果

图片属性介绍：hspace 和 vspace 属性可以设置图像周围的空间。hspace 属性可设置或者返回图片的 hspace 属性值。hspace 属性指定图像的左边缘和右边缘的空白（设置图片与文本...

2020-12-30

220浏览

0评论

html5实现调用摄像头并拍照功能

我们知道通常情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候才执行，这其...

2020-12-28

129浏览

0评论

html转pdf截图保存功能的实现

使用技术itext.jar : 将byte文件输入流转换为图片，pdf等html2canvas.js ：将html页面区域截图为base64编码的图片资源java+js1. 准备资源itext.jar
www.baidu.comhtml2canvas...

2020-12-23

91浏览

0评论

html5+css3之制作header实例与更新

上次，我们形成了两种header的布局，一种flexbox，一种float，最后与身边做重构的同事交流下来，选择了float的布局。事实上布局的选型不需要我关注，我的参与或者一些意见多数是自我提...

2020-12-22

144浏览

0评论

Bootstrap怎么实现遮罩层效果？（代码示例）

效果图如下：1、点击打开遮罩层按钮2、弹出一个隐藏的p源码下载地址：http://download.csdn.net/detail/u014175572/9564824实现代码如下：<!DOCTYPE html><html> <head> <meta...

2020-12-21

139浏览

0评论

html/css中行内元素和块级元素的区别是什么

行内元素和块级元素的区别1、行内元素不会占据整行，在一条直线上排列，都是同一行，水平方向排列；　　块级元素会占据一行，垂直方向排列。2、块级元素可以包含行内元素和块级元素...

2020-12-21

298浏览

0评论

li是行内元素吗

li是行内元素？li不是行内元素；ul和li都是块级元素。因为ul和li标签的高度，行高以及外边距和内边距都可控制；且可以容纳内联元素和其他块级元素。块级元素(block element)，和其对...

2020-12-21

119浏览

0评论

Html5+CSS3+EL表达式问题小结

最近一直做关于装修的一个项目，后台功能实现很快，但是前台界面展示确实遇到不少的问题。问题1、下拉框选择不管用，选中之后没有变。如图当我选择其他的选项时，不发生任何变化。...

2020-12-20

108浏览

0评论

html5+CSS3的编码规范

黄金定律不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。语法1.用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方...

2020-12-19

146浏览

0评论

html input是什么

HTML <input>标签<input> 标签规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变，取决于 type 属性。<input> 元素在 <form> 元素中使用，用来声明允许用户...

2020-12-18

108浏览

0评论

浅谈网页中提升SVG文件可访问性的几种方法

SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。本文就来为大家介绍7个提升网页SVG文件可访问性的方案。1、作为图片使用的 SVG 文...

2020-12-17

86浏览

0评论

简洁自适应404页面HTML好看的404源码

演示图如下：HTML代码片段：<!DOCTYPE HTML><html> <head> <title>404</title> <meta charset="utf-8" /> <meta name="viewport" content="width=devi...

2020-12-16

158浏览

0评论

前端使用canvas生成盲水印的加密解密的实现

为了保障信息安全，防止重大信息泄露，并且能够锁定泄露用户，需要对页面展示的图片加入当前用户信息的盲水印，即最终图片外观看起来和原图一样，但是经过解码以后可以识别出水印信...

2020-12-16

92浏览

0评论

HTML中什么是内联元素？

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，而display属性为inline的元素就是行内元素。内联元素(inline...

2020-12-16

121浏览

0评论

HTML5新增了哪些input类型及其属性？

HTML5中新增的input类型及其属性HTML4.01中，input的类型只有text、button、password、submit、radio、checkbox和hidden（隐藏域）。H5中新增了一些类型，使用起来更加方便，包括： co...

2020-12-16

108浏览

0评论

html语法和css语法之间有什么区别

html语法和css语法的区别1、HTML由围绕内容的标签组成。而CSS由一条或多条声明和选择器组成.html语法示例如下：<div>内容</div>css语法示例：div{font-size:12px;}CSS 规则由两...

2020-12-15

150浏览

0评论

利用html5实现图片的淡入淡出效果

目的：实现图片的淡入淡出效果具体代码如下：<!doctype html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-sc...

2020-12-15

140浏览

0评论

HTML5 body设置全屏背景图片的示例代码

用什么代码实现？不允许有白色底色产生，因为手机高度不一样设计图要标准（750）确认是背景图（通屏底图）应用场景：移动端宣传页面或者活动页面错误的写法：加到div中结合图片设置min-heig...

2020-12-14

157浏览

0评论

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

182浏览

0评论

HTML表格跨行跨列操作(rowspan、colspan)

一般使用<td>元素的colspan属性来实现单元格跨列操作，使用<td>元素的rowspan属性来实现单元格的跨行操作。colspan属性规定单元格可横跨的列数，所有浏览器都支持colspan属性。...

2020-12-14

162浏览

0评论

HTML外部样式表如何引入CSS样式

链入式是把所有的样式放在一个或多个外部样式表文件中，这个文件是以 css 为扩展名的，通过 link 标签，将外部样式表（css命名的外部样式文件）链接到html文档中，这样可以把结构和...

2020-12-14

108浏览

0评论

如何使用canvas绘制可移动网格的示例代码

本文主要介绍了如何使用canvas绘制可移动网格的示例代码，分享给大家，具体如下：效果说明这个是真实项目中遇到的需求，我把它抽离出来，屏蔽了那些业务相关的东西，仅从代码角度来考虑...

2020-12-14

130浏览

0评论

html+css3实现的登录界面

实现效果先用html搭建个基本框架<body><div class="container"> <section id="content"> <form action=""> <h1>Login Form</h1> <div> <input type="text" placeho...

2020-12-14

137浏览

0评论

浅谈HTML文件引入外部CSS文件时路径的写法总结

一. 引入外部css文件的基本样式用< link>标签引入外部样式表，其中通常要写两个属性：href属性表示css文件的路径 rel=“stylesheet” 描述了当前页面与href所指定文...

2020-12-14

热门文章