HTML小技巧之——巧用<a>标签锚链接（#锚点链接 #页面特定位置 #锚点定位 #DOM定位 #hash路由中使用锚链接）HTML小技巧之——巧用<a>标签锚链接（#锚点链接 #页面特定位置 #锚点定位 #DOM定位 #hash路由中使用锚链接）
#作者：矩阵鱼
前端开发中，常遇到定位到页面某特定位置的需求，JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeeded()新api，来实现元素在界面中的可见。当然也可通过动态设置el.scrollT...[2021/5/6]
前端开发面试题 — html篇 - Red-Plum
正值跳槽的金三银四月，在四月的中旬之际，博主为大家整理了几篇前端面试题，希望不会太迟
1.Doctype作用？标准模式与兼容模式各有什么区别?
（1）<!DOCTYPE> 声明位于HTML文档中的第一行，处于 <html> 标签之前，告知浏览器的解析器用什么文档标准解析这...[2021/4/19]
如何使用JavaScript更改元素的类？
如何onclick使用JavaScript响应一个或任何其他事件来更改HTML元素的类？
如何onclick使用JavaScript响应一个或任何其他事件来更改HTML元素的类？
如何onclick使用JavaScript响应一个或任何其他事件来更改HT...[2021/4/19]
WEB前端第六十八课——H5新特性：Canvas案例（刮刮乐、小球动画，图片无缝滚动）
1.刮刮乐
案例目标：利用canvas绑定事件，模拟简单刮刮乐程序。
案例思路：在canvas画布上引入是否中奖背景图片，然后在图片上覆盖涂层，当鼠标点击
并移动时擦出路径上的涂层，显示中奖信息。
主要事件：onload，onmousedown，onmousem...[2021/4/19]
Html5调用企业微信的实现Html5调用企业微信的实现
前言
基于H5的页面调通 企业微信的API （已调通demo）
一、环境
企业微信管理员 添加应用 ，地址指向H5程序的地址。（企业微信通过内部游览器访问你自己发布出来的web端的手机项目，不做本文重点）
二、使用步骤
1.js引用
https: work.weixin.qq.co...[2021/4/19]
Canvas三种动态画圆实现方法说明(小结)Canvas三种动态画圆实现方法说明(小结)
前言
canvas是HTML5出来的绘图API容器，对于图形的处理非常强大，下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。
这里我个人总结了3种实现方法，大家可以参考一下。
方法一：arc()实现画圆
代码：
<!DO...[2021/4/19]
Html5新增了哪些功能
介绍
HTML5 是下一代的 HTML, 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
起步
HTML5 是 W3C 与 WHATWG 合作的结果。
为 HTML5 建立的一些规则：
新特性应该基于 HTML、CSS、DOM 以及 JavaSc...[2021/4/19]
几款流行的HTML5 UI框架比较(小结)
手机HTML5开发，大部分都使用现有的框架，这里简单比较几个流行的UI框架。作者比较一下几款流行的HTML5框架，个人意见，仅供参考。
（1）MUI
网址：http: dev.dcloud.net.cn/mui/
优点：MUI是数字dclound推出的一款流行框架，个人感觉,这是目前最好...[2021/4/12]
Canvas跟随鼠标炫彩小球的实现
跟随鼠标炫彩小球
canvas没有让我失望，真的很有意思
实现效果
超级炫酷
实现原理
创建小球
给小球添加随机颜色，随机半径
鼠标移动通过实例化，新增小球
通过调用给原型新增的方法，来实现小球的动画效果
通过定时器不...[2021/4/12]
前端开发五年，陷入迷茫
近期，心情一直波荡起伏，偶感自己过于矫情、过于无病呻吟，日子本很美好，却时不时的浮躁、不安、低落、迷茫。可认真想了想，并非是自己矫情、无病呻吟，而是自己从小到大憧憬的未来和现在太不匹配，又对自己目前工作是否能支撑的起自己的未来或是说自己的能力是否能够支撑的起自己的未来而感到迷茫。心知肚明，我...[2021/4/6]
WEB前端第六十七课——H5新特性：canvas图像绘制、裁切、样式、像素、绑定事件
1.图像绘制
在canvas中渲染图片，使用“drawImage()”方法。
drawImage()方法有三种形态：基础引入、图片缩放、切片。
⑴ 基础引入
语法：ctx.drawImage(img,x,y);
说明：参数img是一个image或c...[2021/4/6]
WEB前端第六十六课——H5新特性：canvas图形绘制WEB前端第六十六课——H5新特性：canvas图形绘制
1.canvas描述
canvas（画布）是H5提出的新标签，其目的是用于替代类似flash动画或游戏的插件，
能够极大地减少页面结构大小，提高页面响应速度。
说明：
⑴ canvas标签仅是一个图形容器，提供了一个可以绘制图像、图形的区域，可以实时渲染
...[2021/3/29]
html5实现可拖拽移动的悬浮图标的示例代码
h5 上经常会有这样的需求：
需要在页面上加上一个悬浮图标，大致是如下图的最终实现
但是往往按照设计稿是不会遮住主体区域的，但是实际上有时候偏偏会遮挡主体区域，但是为了更好的点击量，又不得不悬浮在页面上...
如果能让图标可拖拽移动，这样在遮住主体区域之后，用户可自由移动，这种方案及可...[2021/3/29]
前端Html5如何实现分享截图的示例代码
前言
这篇文章主要是介绍如何使用canvas实现分享截图，
刚开始以为通过canvas绘画分享图片并不难，但实际上在开发的时候还是遇到非常多的坑
例如：
①图片背景为透明
②分享图只有文字没有图片
③图片跨域问题
下面看例子：
分享图片、分享内容描述、标题、二维码都是通过请求接口动...[2021/3/29]
Html5页面播放M4a音频文件
业务场景：
手机app端录音，然后上传至后台服务器，前端从后台服务器获取录音，在PC端WEB页面播放。
实际问题：
首先app录音文件默认是m4a格式，而在PC端WEB H5页面，<audio>标签并没有明确写着支持m4a格式，如果app端生成的录音不做相关设置，而用默认设置，...[2021/3/29]
【HTML5】弃用标签与新增标签
NO.1 弃用标签
<acronym>
允许作者明确地声明一个字符序列,，它们构成一个单词的首字母缩写或简略语。
<applet>
标志着包含了Java的applet。
<basefont>
定义页面中文本的默认字体、颜色或尺寸。
...[2021/3/8]
Vue 绘制echarts 词云和 Highcharts 词云 - hero-seeVue 绘制echarts 词云和 Highcharts 词云 - hero-see
echarts绘制词云方法
echarts官网
第一步安装echarts依赖，通过npm获取echarts,npm install echarts --save,具体操作可以看echarts官网;
第二步安装echarts词云插件，npm install echarts-wordcloud -...[2021/3/8]
实现 3D 时间动画展示效果
搭建舞台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" conte...[2021/3/8]
HTML5拖拽文件上传的示例代码
上传文件
HTML5新增了文件API,提供客户端本地操作文件的可能.
我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间.
file类型的input表单新增了files属性,保存我们上传文件的信息,如果要实现多文件上传,可以设...[2021/3/8]
canvas绘制刮刮卡效果canvas绘制刮刮卡效果
本文实例为大家分享了canvas绘制刮刮卡效果的具体代码，供大家参考，具体内容如下
先上图
代码
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="风...[2021/3/8]
Vue和Element基础使用,综合案例学生列表实现Vue和Element基础使用,综合案例学生列表实现
知识点梳理
课堂讲义
1、Vue 快速入门
1.1、Vue的介绍
Vue是一套构建用户界面的渐进式前端框架。
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
特点 易用：在有HTML...[2021/3/1]
SpringBoot实现文件/图片的上传与下载SpringBoot实现文件/图片的上传与下载
导入依赖（pom.xml）
<!-- 上传下载需要设计到的jar包 -->
<dependency>
<groupId>commons-io</groupId>
&...[2021/3/1]
uni-app中封装统一请求函数（转载）
封装统一请求函数有利于项目的维护
整体功能简单实用，但小编遇到一个巨坑，项目中在vue文件使用跳转方法，url参数输入 "/" 后工具提示的路径为 "/page login/login",
但是在外部js文件中使用uni跳转的api，快捷提示的路径为 "/page login/login.v...[2021/3/1]
html5使用window.postMessage进行跨域实现数据交互的一次实战
背景
在一个App内嵌的H5中，产品希望在页面的下放设置一个区域，里面展示运营同学通过活动搭建平台生成的教学页面，页面由运营同学自己搭建、替换，产品同学希望H5中能完整展示这个教学页面的内容。
从业务需求上描述，就是一个H5（A页面）内需要通过iframe加载另一个H5页面（B页面）。但是从...[2021/3/1]
020_CSS3 - 清风（学习-踏实）
目录如何学习CSS什么是CSS发展史快速入门c 的优势三种CSS导入方式拓展：外部样式两种写法选择器基本选择器层次选择器结构伪类选择器属性选择器美化网页元素为什么要美化网页span标签：需要重点突出的文字，使用span套起来，单独设置样式字体样式文本样式超链接伪类和阴影列表样式背景渐变盒...[2021/2/22]
移动web开发-流式（百分比）布局
移动web开发流式布局
1.0 移动端基础
1.1浏览器现状
PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。
移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎...[2021/2/19]
魔改和上线你的合成大西瓜，最全教程！魔改和上线你的合成大西瓜，最全教程！
本文是从 0 到 1 的教程，让小白也能够魔改和上线发布属于你的合成大西瓜！
最近，一款名为『 合成大西瓜 』的游戏突然火了！看来真的是大家吃瓜吃太多了，这个小游戏深抓人心！
当然，游戏本身非常有趣，玩法简单，就是俄罗斯方块、2048、水果忍者的结合，控制水果的下落，相同的两...[2021/2/18]
HTML 5 详解之网页基本标签HTML 5 详解之网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
...[2021/2/18]
HTML 5 详解之链接标签HTML 5 详解之链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
...[2021/2/18]
Web 学"前"班
明确：前端是做什么的？
不管是前端还是后台工程师都是进行软件开发的；
1、软件的架构？
软件的架构：
C/S架构
B/S架构（前端）
1、C/S ==> 客户端（Client）/ 服务器（Server）
服务器：用...[2021/2/18]
HTML5新属性
一、HTML5 的新特性
HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改；
两个概念：
是一个新版本的 HTML 语言，定义了新的标签、特性和属性
拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascr...[2021/2/18]
HTML 5 详解之表单的初级验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的初级验证</title>
</head>...[2021/2/18]
搭建VUE项目框架(1) 从零开始
VUE简介
VUE优势
语法简单
使用方便
结构清晰
渐进式框架
VUE教程
安装部署与开发工具
基础语法
导入第三方插件
实战项目
部署服务器
VUE实战
element + vue + mes项目讲解
devex...[2021/2/18]
H5+ API 设置手机状态栏颜色以及沉浸式状态栏
设置状态栏背景颜色
plus.navigator.setStatusBarBackground(''#38c'');
设置状态栏文字颜色（只能设置黑或白 light -> 白色 dark -> 黑色 ...[2021/2/18]
搭建VUE项目框架(2) 创建项目
搭建开发环境
Node.js官方地址：https: nodejs.org/zh-cn/
下载安装版本：14.15.4长期支持版(LTS)
Visual Studio Code官网地址：https: code.visualstudio.com/
下载安装版本：Windows x64
...[2021/2/18]
HTML教程（看完这篇就够了）
HTML教程
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 在本教程中，您将学习如何使用 HTML 来创建站点。 ...[2021/2/18]
【HTML5】弃用标签与新增标签
NO.1 弃用标签
<acronym>
允许作者明确地声明一个字符序列,，它们构成一个单词的首字母缩写或简略语。
<applet>
标志着包含了Java的applet。
<basefont>
定义页面中文本的默认字体、颜色或尺...[2021/2/18]
Html5移动端网页端适配(js+rem)
业务场景：由于需求是适配两端屏幕，所以刚开始想的c 用rem写，但是还是会出现字体和布局不会等比缩放的情况，后来找到一种js代码针对根元素去做的缩放配置，加上rem和这个js的设置就能做到等比缩放。
下载插件，并修改比例 （如果ui尺寸是750就改50 375改25），修改完重启vscode
...[2021/2/18]
HTML5新增的元素表
HTML5新增的元素大全
新增多媒体元素
标签
描述
audio
定义音频内容
viedo
定义视频（video 或者 movie）
source
定义多媒体资源 <video> 和 <audio>
embed
定义嵌入的内容，比如插件
...[2021/2/1]
svg
内联SVG
什么是svg？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
SVG优势
...[2021/2/1]
canvas
canvas
利用canvas创建一个画布
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
默认情况下 <canvas> 元素没有边框和内容。
<canvas>的简单实例如下：
<canvas id="myCanvas"...[2021/2/1]
新增Input的type值
新增Input的type值
HTML5新增的input的type值表格
type
作用
color
color 类型用在input字段主要用于选取颜色
date
date 类型允许你从一个日期选择器选择一个日期
datetime
datetime 类型允许你选择一个日...[2021/2/1]
新增语义标签新增语义标签
新增语义标签
HTML5新增的语义标签
新增标签
标签语义
header
定义一个页面的页眉
nav
定义导航栏链接的部分
aside
定义页面主区域内容之外的内容，比如侧边栏
section
定义文档中的节（section、区段），section内应包含一组内容...[2021/2/1]
Video和Audio
Video和Audio
使用video显示视频
以下是一个显示视频的实例：
<video width="320" height="240" controls>
<source src="https: www.d18c4217.cn/myVideo/Gary.web...[2021/2/1]
Geolocation地理定位Geolocation地理定位
Geolocation地理定位
使用地理定位
下例是一个地理定位实例，可返回用户位置的经度和纬度：
const succe = res => {
const { latitude, longitude } = res.coords
console.log(`${longit...[2021/2/1]
Web储存
Web储存
储存客户端数据的对象
对象
生命周期
储存大小
与服务端通信
易用性
cookies
一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效
4K左右
每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
需...[2021/2/1]
微信小程序 发送模板消息的功能实现
背景
- 小程序开发的过程中，绝大多数会满足微信支付
- 那么，作为友好交互的体现，自然就会考虑到支付后的消息通知咯
- 所以，我的小程序项目也要求完成这个效果，so.分享一下自己的实现步骤，以方便道友们少踩点坑...
微信消息通知的区别：
1. 微信网页版、公众号的消息提...[2021/2/1]
vue-baidu-map覆盖层不动态刷新问题
之前写着部分功能的时候都正常，今天要调试测试下，运行看到这个画圆居然不刷新，上一次的圆还在界面上，只有双击地图放大操作，地图重绘的操作才去掉历史覆盖层。奇怪的很
我这是引用vue-baidu-map三方，用自定义控件，在地图上选点位置，并下拉设置半径范围。获取提交定位点...[2021/2/1]
typescript编写微信小程序-创建项目typescript编写微信小程序-创建项目
创建项目
在微信开发者工具创建项目,在语言中选择 TypeScript
改造项目
编辑 package.json 文件,修改 miniprogram-api-typings 和 typescript 版本
{
"name": "miniprogram-ts-quickstart...[2021/2/1]
详解如何将 Canvas 绘制过程转为视频
如果我们用Canvas实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas可以直接通过现代浏览器支持的 Media Streams API 来转成视频。
Canvas对象支持captureStream方法，这个方法会返回一个MediaS...[2021/2/1]
经验首页