HTML,HTML开发教程,HTML问题

JS版如何在前端网页中使用Markdown,解析markdown代码,ChatGpt返回数据解析

2023-07-31

ChatGPT返回数据在前端一直不展示，显示是乱的，我们可以把markdown语法文本转换为html代码，输出到浏览器前端可以使用HyperDown.js1、HyperDown.js码云下载地址：https://gitee.com/YuJian11/HyperDown2、使用方法：2.1、nodejs 中使用安装npm install hyperdown 使用HyperDown = require('hyperdown'); var parser = new HyperDown, ;;html = parser.makeHtml(markdownText); 2.2、浏览器中使用，直接引用Parser.js即可<script src="yourpath/hyperdown/Parser.js"></script> <script> var parser = new HyperDown, ;

解决苹果手机点击html网页输入框出现页面自动放大问题

2023-07-31

448 0

做好网站，发现苹果手机，点击输入框调起键盘之后，解网页被方法，出现这个问题是应为没有在meta标签设置好禁止放大的缘故解决苹果手机点击html网页输入框出现页面自动放大问题：原始配置：<meta name="viewport" content="width=device-width, initial-scale=1.0"> 正确配置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 说明：区别在于加入了maximum-scale=1.0, user-scalable=no"，使得缩放比例为1，这样在苹果手机上就不会自动放大

mobiscroll.custom2.17日期时间插件使用方法以及禁止选择之前的日期

2023-02-25

522 0

mobiscroll.custom插件用在移动端的日期选择上，受到广泛的前端开发者喜爱，以下是使用方法、时间日期限制，及插件参数使用;<!DOCTYPE html> ;<html lang="en"> ;<head> ;;<meta charset="UTF-8"> ;;<meta name="viewport" content="width=device-width, initial-scale=1.0"> ;;<meta http-equiv="X-UA-Compatible" content="ie=edge"> ;;<title>mobiscroll练习</title> ;;<link rel="stylesheet" type="" href="../06-mobiscoll插件案例/css/mobiscroll.custom-2.17.1.min.css">

WebUploader文件多次上传和删除无法上传文件的问题解决方法

2021-10-09

1620 0

WebUploader上传成功之后。移除文件，再次上传，选择了文件，但是没有渲染到页面上，博主想到的方法就是重置WebUploader状态//成功事件,;针对一个文件uploader.on('uploadSuccess', function (file, response) { uploader.removeFile(file); }); // 多文件下所有文件上传成功后调用;;;;;uploader.on('uploadFinished', function () { ;;//清空队列 ;;;uploader.reset(); }); 这样重置之后，就能继续选择文件上传了

H5网页实现打开页面自动播放背景音乐，以及点击关闭背景音乐

2021-09-10

7050 0

相信大家都见过一些H5邀请函，打开之后会自动播放音乐，屏幕有上角也会自动360度旋转图标，以下是简单的案例，大家可以参考。1、html部分代码：放置音乐、放置旋转按钮<div style="display: none;"> ;;<audio id="music1" src="music/EasyBreeze.mp3" controls> ;;;;<source src="music/EasyBreeze.mp3" type="audio/mpeg" /> ;;</audio> </div> <a href="javascript:;" class="closemusic rotates"></a> <style> ;;.closemusic{ ;;;;display: block; ;;;;width: 2rem; height: 2rem; ba

H5微信9宫格抽奖+概率设置

2021-09-10

2726 0

9宫格抽奖百度找了很久也没有找到可以设置中奖概率的，后面找到一篇文章，结合后端PHP设置的中奖概率。以下是个例子，供大家参考和使用。1、抽奖界面代码：<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status

h5基于cropper实现上传图片裁剪功能

2021-05-09

1368 0

基于cropper实现上传图片裁剪功能，保存原始图片尺寸分辨率，具体代码如下：<!DOCTYPE;html> <html> <head> ;;;;<meta;charset='UTF-8';/> ;;;;<meta;name="viewport";content="initial-scale=1,;width=device-width,;maximum-scale=1,;user-scalable=no"> ;;;;<meta;name="wap-font-scale";content="no"> ;;;;<meta;name="format-detection";content="telephone=no";/> ;;;;<title>66</title> ;;

h5画布canvas实现图片在线裁剪功能及案例

2021-05-09

1440 0

有时用户上传的图片尺寸和我们要求的尺寸不一样。这时就需要给上传图片加个裁剪功能。具体我们可以通过画布来实现：<html> ;;;;<head> ;;;;;;;;<meta;charset="utf-8";/> ;;;;;;;;<meta;name="viewport";content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no";/> ;;;;;;;;<title>上传图片裁剪</title> ;;;;</head> ;;;;;;;;<style;type="text/css"> ;;;;;;;;;;;;html,body{ ;;;;;;;;;;;;;

利用Reset CSS重置前端样式表

2021-04-27

1678 0

重置样式表的目标是减少浏览器在默认行高、页眉边距和字体大小等方面的不一致。第一种方法，可以使用css样式，对应官网：https://meyerweb.com/eric/tools/css/reset//*;http://meyerweb.com/eric/tools/css/reset/; ;;;v2.0;|;20110126 ;;;License:;none;(public;domain) */ html,;body,;div,;span,;applet,;object,;iframe, h1,;h2,;h3,;h4,;h5,;h6,;p,;blockquote,;pre, a,;abbr,;acronym,;address,;big,;cite,;code, del,;dfn,;em,;img,;ins,;kbd,;q,;s,;samp, small,;strike,;strong,;sub,;sup,;tt,;var, b,;u,;i,;center

前端网站html生成腾讯地图和卫星地图教程

2021-03-15

3871 0

前端html生成网站地图，除了使用百度地图外还可以使用腾讯地图来生成。使用百度地图案例，参考：网站如何创建百度地图显示地理位置以下是前端网站html生成腾讯地图和卫星地图教程，供新手参考：1、首先打开腾讯地图坐标拾取器：https://lbs.qq.com/tool/getpoint/index.html 2、复制坐标：23.124825,113.372164，如下图3、显示地图代码：<!DOCTYPE;html> <html> <head> ;;;;<meta;http-equiv="Content-Type";content="text/html;;charset=utf-8"> ;;;;<title>腾讯地图-地图参数使

网站如何创建百度地图显示地理位置

2020-11-20

2242 0

在做企业网站的时候，我们会放置一个地理位置，我们可以引用百度地图，来显示我们的店铺所在位置效果演示：操作步骤1、打开百度地图https://map.baidu.com/，搜索输入地址2、点击地址3、会出现如下视图4、点击分享5、复制我们想要的地址6、复制https://j.map.baidu.com/b8/S ，粘贴到我们的iframe框架代码中7、完整demo代码<!DOCTYPE;html> <html> <head> ;;;<meta;charset="UTF-8"> ;;;<title>地图演示</title> </head> <meta;content="width=device-width,initial-s

html页面加载好再进入网站功能实现

2019-10-08

2084 0

css代码：#loadingDiv{position:absolute;left:0;width:100%;top:0;background:#fff;z-index:10000} #loadingDiv;div{position:absolute;width:auto;height:105px;padding-left:215px;background:#fff;url(../images/loading.gif);no-repeat;center;center/50px;50px}js代码：var;_PageHeight;=;document.documentElement.clientHeight, ;; _PageWidth;=;document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px） var;_LoadingTop;=;_PageHeight;>;61;?;(_PageHeight;-

使用clipboard.js 实现复制隐藏文本的内容

2019-09-18

3467 0

一、起初是使用浏览器提供了 copy 命令。document.execCommand("copy")如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用; copy 命令，将文本复制到剪切板。但是 select() 方法只对 <input> 和 <textarea> 有效，对于 <p> 就不好用了<script> function;copyUrl();{ ;;;;$("#copyinput").select();;;//;选择对象; ;;;;document.execCommand("Copy");;//;执行浏览器复制命令; ;;;;alert("已复制到剪贴板！"); } <script>但是#copyinput不能

html选项卡封装案例及调用

2019-08-27

2060 0

选项卡在网页中经常会用到，以下是一个简单的案例封装。1、代码封装function;tabSwtich(m,c,a){ ;;;;var;change=function(i){ ;;;;;;;;;;;;m.each(function(index){ ;;;;;;;;;;;;;;;;index==i?$(this).addClass(a):$(this).removeClass(a); ;;;;;;;;;;;;});; ;;;;;;;;;;;;c.each(function(index){ ;;;;;;;;;;;;;;;;index==i?$(this).show():$(this).hide(); ;;;;;;;;;;;;}); ;;;;;;;;}; ;;;;m.each(function(i){ ;;;;;;;;$(this).mouseenter(function(){ ;;;;;;;;;;;;change(i); ;;;;;;;;}); ;;;;}) }2、调用方法：$(functi

自定义radio单选按钮样式

2019-06-06

2515 0

思路：1. 可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；2. 然后把真正的单选按钮隐藏起来；3. 最后把生成内容美化一下。<!DOCTYPE;html> <html> <head> <meta;charset="UTF-8"> <meta;content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0";name="viewport"> </head> <body> <p;class="tm2"> ;;;;<span>性别：</span> ;;;;<label;for="sex

图片延时加载jquery-lazyload.js的使用

2019-01-25

2748 0

细心的游客可能会发现，本网站加了图片延时加载，使用延迟加载在可提高网页下载速度。在某些情况下，它也能帮助减轻服务器负载。jquery-lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，以下是使用详解：附件：jquery-lazyload.js.txtimg标签：<img;data-original="/uploads/book/20190108/5b44a5cb123633242b4cba83ac87cdc1.jpg";alt="";>js代码：$(function();{;;;; $("img").lazyload({effect:;"fadeIn",placeholder:;"/images/4e8b6995-

prettify实现html页面黑色高亮代码

2017-06-18

2305 0

头部引入prettify样式和js：<link;href="/public/static/index/css/prettify.css";rel="stylesheet">;;;; ;;;; <script;src="/public/static/index/css/prettify.js"></script>给body加onload="prettyPrint()"方法<body;onload="prettyPrint()">底部script代码：<script>;;;; window.onload;=;function;();;;; {;;;;;; prettyPrint();;;;; };;;; $(function();{ ;;prettyPrint(); ;;$('pre').addClass

html当页面滚动到距顶部一定高度时某DIV自动隐藏和显示

2017-12-20

3732 0

当页面滚动到距顶部一定高度时某DIV自动隐藏和显示<script> $(function(){;; ;;var;height;=;$(".subMenu1").offset().top;;;//指定位置class ;;;$(window).scroll(function(){;; ;;;if($(window).scrollTop()>height){;; ;;;;$("#back").show();;;;;;;;;;;;;;; ;;;};; ;;;else{;; ;;;;$("#back").hide();;; ;;;};;; ;;});; ;; }) </script>

HTML5 video标签视频比例拉伸

2017-08-26

3668 0

HTML5 video标签视频比例拉伸项目中有碰到视频比例拉伸的需求，可以通过以下方法来实现视频的拉伸。<style> video;{ ;;;;object-fit:fill; ;;;;width:800px; ;;;;height:320px;}</style><h1>测试视频比例拉伸：</h1> <style> ;<video;src="http://7xnzpx.com1.z0.glb.clouddn.com/miaoxingren_360p.mp4";controls;autoplay;loop> </video>

手机端自适应字体大小和元素宽度自适应

2017-12-05

2070 0

以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义，media定义好之后，拿起键盘就是干。字体、宽高都用rem来定义，此方法略爽！@media;(min-width:0px){ ;;;;html{font-size:12px;}} @media;(min-width:;320px){ ;;;;html{font-size:12px;}} @media;(min-width:;340px){ ;;;;html{font-size:13px;}} @media;(min-width:;360px){ ;;;;html{font-size:14px;}} @media;(min-width:;380px){ ;;;;html{font-size:15px;}} @media;(min-width:;400px){ ;;;;html{fo