HTML
关注
分享
扫一扫
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
aiguangyuan
要全身心的投入，程序才会有些感觉！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
前端开发中经典的stick footer布局
前端开发中，会有这样一种布局，当页面内容不足一屏时，页脚在屏幕底部，当内容超过一屏时，页脚随着内容的增加而向下移动，即人们常说的的stick footer布局，如下图所示。实现这个布局的方案有多种，下面给大家介绍一种比较经典的实现方案。<!DOCTYPE html><html lang="en"> <head> <.........原创 2020-04-24 22:05:59 · 1035 阅读 · 0 评论 -
HTML中meta的基本知识
在写前端页面时，页面结构通常是由编辑器快速生成的，页面表头里有一个meta标签，这个标签有些什么作用呢？在MDN中他是这样定义的：meta是文档级元素，用来表示那些不能由其它 HTML 元相关元素（<base>、<link>,<script>、<style>或<title>）之一表示的任何元数据。meta 元素定义的元数据的类型：1.设置了 itemprop属性，meta元素提供用户定义的元数据。2.设置了ch......原创 2022-05-02 23:13:20 · 1533 阅读 · 0 评论 -
SVG滤镜波浪动画效果
今天给大家分享一个用SVG实现的滤镜波浪动画效果，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG滤镜波浪动画原创 2020-06-12 22:06:25 · 1019 阅读 · 1 评论 -
SVG实现圆形进度条
给大家分享一个用SVG实现圆形进度条的特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPE html><html lang="en"><head> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-06-01 23:50:20 · 1581 阅读 · 1 评论 -
使用SVG当背景做一个有个性的播放器
给大家分享一个使用SVG做背景的个性播放器，效果如下：当滚动鼠标时，爱心会放大，播放区域也会跟着放大。以下是代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht原创 2020-06-01 23:04:00 · 600 阅读 · 0 评论 -
WebSocket的运用
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据互相传送。现在，很多网站为了实现推送技术，所用的技术都......原创 2019-07-05 01:28:59 · 300 阅读 · 0 评论 -
SVG绘图表格统计
用SVG绘图写一个表格统计的效果，类似于百度图表工具Echarts实现的效果。实现效果如下：实现代码如下：<!DOCTYPE html><html><head lang="zh-cn"> <meta charset="UTF-8"> <title>SVG绘图表格统计</title> ......原创 2019-07-04 23:27:10 · 2304 阅读 · 0 评论 -
SVG绘制渐变颜色文字
H5提供了很多有意思的新特性，工作中用的比较少，但是这仍然不能阻碍我们对它的兴趣，先给大家上个图，如果要用CSS来写这个效果，如何才能实现呢？怎么样？这个文字效果不好实现吧，以上这个效果其实是用H5的SVG绘图实现的，下面是代码实现：<!DOCTYPE html><html><head lang="en"> <meta char......原创 2019-06-29 01:23:53 · 3258 阅读 · 4 评论 -
SVG绘制圆形的运用
运用SVG绘图写一个动画特效。动画效果如下：实现代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>SVG绘图——圆形</title> <style> body......原创 2019-06-29 00:33:25 · 1774 阅读 · 0 评论 -
Canvas绘制八卦图
运用Canvas绘图编写一个八卦图效果。最终效果如下：代码实现如下：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Canvas绘制八卦图</title> <style type="te......原创 2019-06-29 00:03:37 · 1322 阅读 · 0 评论 -
Canvas绘制飞机飞行
运用Canvas绘制一个飞机飞行动画。动画效果如下：实现代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Canvas绘制飞机飞行</title> <style> ......原创 2019-06-30 00:10:31 · 1624 阅读 · 0 评论 -
Canvas绘制坐标系
运用Canvas绘制一个基本的坐标系，练习一下路径绘制。实现效果如下：代码实现如下：<!DOCTYPE HTML><html><head lang="en"> <meta charset="UTF-8"> <title>Canvans绘制坐标系</title> <style......原创 2019-06-30 00:25:14 · 1339 阅读 · 0 评论 -
SVG绘图高斯模糊滤镜
运用SVG绘图实现一个模糊字体效果，比用CSS的阴影写出来的要好看的多。实现效果如下：实现代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>SVG绘图高斯模糊滤镜</title> <......原创 2019-06-30 00:49:37 · 851 阅读 · 0 评论 -
SVG绘制渐变对象
运用SVG实现一个渐变对象效果。实现效果如下：实现代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>SVG绘图渐变对象</title> <style> bo......原创 2019-06-30 19:55:09 · 467 阅读 · 0 评论 -
Web Worker 的运用
JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行.........原创 2019-07-05 22:10:19 · 677 阅读 · 0 评论 -
Canvas绘制炫酷的火焰风暴动画
今天给大家分享一个用Canvas写的火焰风暴动画，实现效果如下：怎么样，场面是不是很壮观，下面是代码实现，欢迎大家复制粘贴和吐槽。<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" con.........原创 2019-08-28 08:24:52 · 1068 阅读 · 0 评论 -
Canvas截取video上的第一帧作为封面
var canvas = document.createElement('canvas');var img = document.getElementById('img');const video = document.getElementById('video');video.setAttribute('crossOrigin', 'anonymous');canvas.width =...原创 2019-08-28 13:46:07 · 2556 阅读 · 0 评论 -
H5新特性拖拽更换图片
运用H5新特性拖拽API实现一个拖拽更换图片的效果。实现效果如下：代码实现如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>H5新特性拖拽更换图片</title> <style&g......原创 2019-06-28 23:42:35 · 1085 阅读 · 1 评论 -
Canvas特效动画
给大家分享一个用Canvas绘图写成的动画特效，动画的效果如下：以下是代码实现：<!DOCTYPE html><html><head> <title>Canvas特效动画</title> <style> canvas { background: #......原创 2019-06-28 00:22:18 · 6554 阅读 · 0 评论 -
HTML５新特性
1.HTML5新特性(1). 新的语义标签(2). 增强型表单(表单2.0)(3). 音频和视频(4). Canvas绘图(5). SVG绘图(6). 地理定位(7). 拖放API(8). Web Worker(9). Web Storage(10). Web Socket2.HTML5中表单的新特性(1).新的input type ........................原创 2018-12-27 12:49:14 · 1422 阅读 · 0 评论 -
Input输入框事件的应用
<input id="telephone" name="telephone" type="text" value="" maxlength="11" placeholder="请输入手机号" //主要用于校验输入完成后输入是否合法 onblur="check('telephone',this.value)" ...原创 2019-02-11 15:45:29 · 608 阅读 · 0 评论 -
Canvas绘制动画
给大家分享一个用Canvas写的"小人吃豆"的动画，效果如下：哈哈，实现代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Canvas绘制动画</title> <style&g......原创 2019-06-16 21:22:47 · 2296 阅读 · 0 评论 -
Canvas绘制环形进度条
给大家分享一个用Canvas写的环形进度条，实现从0%加载到75%的动画，静态效果图如下：实现动画的代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Canvas绘制环形进度条</title> ......原创 2019-06-16 21:42:31 · 967 阅读 · 0 评论 -
Canvas绘图拖拽
<!doctype html><html><head> <meta charset="utf-8"> <title>Canvas绘图拖拽</title> <style type="text/css"> * { margin: 0; ...原创 2019-06-16 22:00:17 · 1423 阅读 · 0 评论 -
Canvas绘制抽奖转盘
给大家分享一个Canvas绘制的转盘抽奖，点击开关开始转动时，转盘开始转动，转盘停止时指针指向的区域即为抽中的奖品，并显示在转盘中间，效果图如下：动画实的代码如下：<!DOCTYPE html><html><head> <style> canvas { background: #ee......原创 2019-06-16 22:46:52 · 1956 阅读 · 0 评论 -
HTML中百度地图的使用
<!DOCTYPE html><html><head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=ut...原创 2019-06-18 07:14:25 · 1685 阅读 · 0 评论 -
Canvas绘制鱼儿游水动画
实现一个canvas绘图的鱼儿游水动画，绘图的原理为通过定时器绘制图片不同的位置实现动画的效果。以下是动画效果： 以下是代码实现 ：<!doctype html><html><head> <meta charset="utf-8"> <title>Canvas绘制鱼儿游水动画</title......原创 2019-06-26 06:44:18 · 1514 阅读 · 0 评论 -
H5拖放删除运用
利用H5新特性拖放API实现在拖放删除功能，以下是静态效果，实现的功能为拖放下面三架飞机中的某一架飞机图片至垃圾桶上方释放时，被拖放的飞机图片从三架飞机里面删除。以下是代码实现<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title......原创 2019-06-26 07:10:05 · 1144 阅读 · 0 评论 -
H5新特性实现拖拽图片上传
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>H5新特性实现拖拽图片上传</title> <style> * { text-align: center;...原创 2019-06-26 08:27:43 · 1214 阅读 · 0 评论 -
H5拖拽上传进度条
<!doctype html><html><head> <meta charset="utf-8"> <title>H5拖拽上传进度条</title> <style type="text/css"> * { margin: 0; ...原创 2019-06-26 08:58:18 · 462 阅读 · 0 评论 -
H5拖放API相关触发事件
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>H5拖放API相关触发事件</title> <style> body { text-align: cen...原创 2019-06-26 21:30:22 · 301 阅读 · 0 评论 -
Canvas绘制音乐播放器
给大家分享一个用Canvas绘制音乐播放器的代码，主要向大家介绍在Canvas绘图中解决常见的两个问题。多个图片一起绘制时，如何处理好渲染完成时间差？如何给Canvas绘制的图片绑定事件？绘图效果如下：实现代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UT......原创 2019-06-27 10:42:11 · 1409 阅读 · 0 评论 -
Canvas实现图片拖拽效果
在前端开发中，一般图片拖拽有两种实现方案，一种是利用onmousemove这个方法在鼠标拖动时获取鼠标的坐标，然后根据坐标修改图片的位置即可，另外一种为利用canvas绘图实现拖拽的效果，当鼠标在移动时获取鼠标的位置，然后不断的清除画布，根据鼠标的位置重新绘制图片。 实现代码如下：<!DOCTYPE html><html><head lang=......原创 2019-06-27 15:23:55 · 7424 阅读 · 0 评论 -
Canvas动画限制图片运动范围
分享一个利用Canvas绘图的动画，并通过计算限制图片的运动范围，希望能够给大家一些启发。基本效果如下：实现代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Canvas动画限制图片运动范围</t......原创 2019-06-27 16:31:18 · 808 阅读 · 0 评论 -
H5新特性范围输入的运用
H5标准中引入了支持输入范围的input，有了这个属性，我们在写调整一些图片大小或是颜色时就可以用到这个属性，不用再用原生的JS去写一个拖拽效果了，可以很方便的实现人性化的用户操作，以下是一个拖动改变背景颜色的实例。代码实现如下：<!DOCTYPE html><html><head lang="en"> <meta charse......原创 2019-06-27 23:54:49 · 479 阅读 · 0 评论