HTML
关注
分享
扫一扫
文章平均质量分 53
HTML
高先生的猫
求知若渴，虚心若愚。
展开
-
js打印去除浏览器的默认的页眉页脚
js打印去除浏览器的默认的页眉页脚原创 2022-09-28 10:06:45 · 581 阅读 · 0 评论 -
js获取文件名后缀
有时候我们需要通过文件名或者路径，得到该文件的后缀名（扩展名），可以通过如下几种方式进行截取。例如文件名为:var name="xxxxx.txt";方式一：subtring()使用subtring() 截取字符串，对于文件名中会出现多个点的很有用，从最后一个点的地方截取。var suffix = name.substring(name.lastIndexOf("."));//.txt/*只获取后缀*/var suffix =name.substring(name.lastIndex原创 2022-04-26 13:46:01 · 30290 阅读 · 0 评论 -
html5中details标签作用
html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。标签定义及使用说明<details> 标签规定了用户可见的或者隐藏的需求的补充细节。<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。<details> 元素的内容对用户是不可见的，除非设置了 open 属性。用法一般情况下，details用来对显示在页面的原创 2022-04-24 12:00:10 · 3894 阅读 · 1 评论 -
CSS 实现新拟态(Neumorphism) UI 风格
新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。原生名词有几个叫法，Neumorphism / soft ui，翻译过来是新拟态或者是软ui。国内的翻译叫，新拟物风格。Neumorphism，是New +Skeuomorphism的组合词。按照我个人的通俗理解，就是将界面的一部分凸起来，另一部分凹下去，形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」新拟态 UI 风格与扁平、原创 2021-09-16 11:38:45 · 697 阅读 · 0 评论 -
CSS 实现新拟态(Neumorphism) UI 风格
新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。原生名词有几个叫法，Neumorphism / soft ui，翻译过来是新拟态或者是软ui。国内的翻译叫，新拟物风格。Neumorphism，是New +Skeuomorphism的组合词。按照我个人的通俗理解，就是将界面的一部分凸起来，另一部分凹下去，形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」新拟态 UI 风格与扁平、原创 2021-08-13 10:07:35 · 1560 阅读 · 0 评论 -
在打开网站的时，总是提示“是否需要翻译”
在打开网站的时，总是提示“是否需要翻译”，想要阻止网页打开时弹出上面的翻译窗口，有两种设置方式：1 在html文件的head标签中添加meta标签 推荐：<meta name="google" content="notranslate" />2 设置html标签lang属性为zh-CN<html lang="zh-CN">...原创 2021-08-11 20:37:57 · 2323 阅读 · 0 评论 -
移动端 针对横屏竖屏的优化
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <t...原创 2021-06-11 11:30:17 · 304 阅读 · 0 评论 -
HTML5的离线储存怎么使用，它的工作原理是什么?
离线缓存的目的是当浏览器处于离线状态或网络连接较慢时，利用应用程序缓存机制让web程序能在离线状态下正常访问。使用离线缓存技术一般是为了让用户在：离线状态也能正常访问 提高访问速度 减轻服务器响应压力实现离线缓存，目前主要使用 Service Workers方案，而文后提到的manifest属性方案已弃用，建议不要使用，这里只是作为了解。历史方案：利用manifest属性实现App Cache（已弃用）一般具有window.applicationCache对象的浏览器才支持该特性。该方案原创 2021-06-08 09:18:27 · 1377 阅读 · 0 评论 -
textarea高度自动撑开_实现textarea高度自适应
textarea高度自适应，textarea高度自动增高，textarea高度自动撑开，本文通过复制textarea的html给另外一个元素pre,由于设置pre自动展开，所以不会存在有滞留的感觉，交互效果较好。技术原理textarea高度自适应是一个比较常用的前端开发效果。在新浪微博的输入框中也有这个效果，不过它那个效果不怎么好看，高度展开有点延迟，可能是通过给高度赋值scrollHeight.而下面这个则是通过复制textarea的html并另外一个元素pre,由于设置pre自动展开，所..原创 2021-06-08 09:18:23 · 3177 阅读 · 0 评论 -
h5 秒开方案大全
老板说 , 页面打开速度过慢? 页面加载性能不达标? 下面我们来看下各个大厂和团队的秒开经典方案，有没有一款适合你去探索？本页面会列举和总结偏向与客户端结合的 hybrid 秒开方案，纯前端方案也会部分提及。常用的加速方法说起 H5 性能优化方案，是个老生常谈的话题，通常的 web 优化方法，基本围绕在资源加载和html渲染两个方面。前者针对首屏，后者针对可交互。资源优化上，我们总的方向是围绕更小的资源包上，比如常见的：压缩、减包、拆包、动态加载包及图片优化上。html渲染上总的方向是更...原创 2021-01-06 11:20:50 · 322 阅读 · 0 评论 -
javascript原生判断DOM是否加载完毕执行方法
readyStatedocument.readyState 返回当前文档的状态，属性如下：uninitialized 还未开始加载 loading 加载中 interactive 已加载，文档与用户可以开始交互 complete 加载完成DOMContentLoaded当 DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flashonload当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完..原创 2021-01-06 11:19:41 · 1649 阅读 · 0 评论 -
用 JS 一次获取 HTML 表单的所有字段 ？
问：如何用js一次获取html表单的所有字段 ？考虑一个简单的html表单，用于将任务保存在待办事项列表中： <form> <label for="name">用户名</label> <input type="text" id="name" name="name" required> <label for="description">简介</label> <input ty...原创 2020-12-15 15:51:06 · 589 阅读 · 0 评论 -
输入框获取焦点时value值隐藏与失去焦点时显示
实现需求：1）输入框获得焦点，提示内容消失，边框过渡动画变色2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框过渡动画变色代码<input type="text" value="邮箱/ID/手机号" style="font-family:-apple-system, sans-serif; color: #999; outline: none; border: 1px solid #eee; transition: .5s ease;" />.原创 2020-12-11 15:54:21 · 1341 阅读 · 1 评论 -
如何实现 textarea 的 autoHeight 功能
这个功能还比较常见，用来获取文本的长宽（避免了计算不准的问题），主要用于实现 textarea 自动变长。可以看到在我们使用 textarea 的时候，有时候需要感知内容的高度，然后动态撑开。（elementUI 的 textarea 就提供了 autosize 的功能。）那我们也想实现这样的功能应该怎么办呢？获取内容，然后统计字符个数估算。中文算两个，英文算一个。但是还是有问题的，比如说非等宽字体。聪明的读者已经看到了我们中间的div效果，就是我们想要的高度。也是 eleme...原创 2020-12-11 15:53:30 · 1849 阅读 · 0 评论 -
html实现邮箱发送邮件_js发送邮件至指定邮箱功能
在前端开发中，JavaScript并没有提供直接操作Email邮箱的功能方法，但是遇到这样的需求，我们应该如何实现js发送邮件至指定邮箱功能呢？下面列举能够在通过前端实现邮件发送的几种方式：方式一：利用a标签的href属性<a href="mailto:sample@fly63.com?subject=test&cc=sample@hotmail.com&subject=主题&body=内容">send mail</a>这种方式需要客户...原创 2020-12-11 15:49:05 · 10954 阅读 · 1 评论 -
css设置margin-top失效及解决办法
在web网站开发中，有时候我们给html元素设置的margin-top或margin-bottom属性，但是无效，并没有取到任何作用,这是什么原因呢?常出现两种情况:一、兄弟元素之间margin-top失效先看下面代码：<div> <div class="box1"> float: left </div> <div class="box2"> clear:both; margin-top:20px; </div...原创 2020-11-19 15:45:21 · 952 阅读 · 0 评论 -
前端PDF文件转图片方法
第一步：先下载pdfjs，网址：PDF下载地址，再引入到项目中，我是标签直接引用的<script src="pdfjs/build/pdf.js"></script><script src="pdfjs/build/pdf.worker.js"></script>第二步：html代码添加两行代码，一个是canvas用来绘图，一个是img用来最后展示转换后的pdf图片<body> <img :src="im..原创 2020-11-19 15:42:40 · 3634 阅读 · 3 评论 -
移动端1px解决办法
最近在写移动端 H5 应用，遇到一个值得记录下来的点。现在从它的由来到实现，我们来聊一下移动端 1px，说 1px 不够准确，应该说成 1物理像素。在讲原理之前，先跟大家说一个概念，就是设备像素比DPR(devicePixelRatio)是什么DPR = 设备像素 /css像素(某一方向上)这句话看起来很难理解，可以结合下面这张图（1px在各个DPR上面的展示），一般我们h5拿到的设计稿都是750px的，但是如果在DPR为2的屏幕上，手机的最小像素却是要用2 * 2px来进行绘制，这也就导...原创 2020-11-19 15:38:33 · 370 阅读 · 0 评论 -
Js移动端自适应代码_rem布局
rem 是css的长度单位，它是相对于 <html> 元素的 font-size 的相对值。假设html{ font-size: 20px; }，那么 1rem 就等于 20px。js代码rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ?...原创 2020-09-29 14:33:49 · 1023 阅读 · 0 评论 -
10个快速优化Web性能的手段
优化网站的性能需要花费大量的时间，并且如果要根据自己的需求进行优化则花费的时间可能更多。在本文中，我将向你展示 10 个快速优化 Web 性能的手段，能在 5 分钟内用于你自己的网站。这些捷径对你的代码库或服务器配置几乎没有什么影响。它们简单且容易实现，无需详细了解它们的原理，并且能够对你的性能产生重大影响。1. 使用文本压缩使用文本压缩，可以最大程度地减少通过网络传输的字节数。有几种压缩算法。 gzip 是最受欢迎的，但 Brotli 是一种更新甚至更好的压缩算法。如果要检查服务器是否支.原创 2020-09-29 14:33:08 · 872 阅读 · 0 评论 -
Js实现canvas截取视频第一屏为预加载图片
首先需要新建video标签，用于放置需要截取的视频文件，然后js获取video标签并监听它的 loadeddata 事件，这里简单说下video的事件有哪些？为什么使用loadeddata来获取第一帧。video的事件video.addEventListener('loadeddata', consoleString.bind(video, 'loadeddata')) // 当前帧加载完毕video.addEventListener('loadedmetadata', consoleSt.原创 2020-09-29 14:27:58 · 1020 阅读 · 0 评论 -
前端实现.md文件转换成.html文件
.md文件是markdown的一种标记语言，和html比较起来，更简单快捷，主要体现在：标记符的数量和书写上。标记符的数量：html文档需要用到数量繁多的标记符，再辅以css来控制样式和排版，而markdown文档只需要四个基本的标记符号就能完成同样的事。标记符的书写：HTML文档内容需要同时标记开始和结束这是一个网页，而markdown文档则只要在开始位置标记即可# 这是一个md文档。下面介绍如何实现将.md文件转换成.html文件。方式一：使用i5ting_toc插件需要先安装n.原创 2020-09-29 14:24:17 · 2626 阅读 · 0 评论 -
iframe父子传参通信
在最近的项目里面,用到了不少关于iframe父子传参通信的相关操作,记录一下,虽然很简单,但是确实十分有用的;iframe通信可以分为2种,跨域和非跨域两种.分别说明;有一点很重要,iframe是可以给name 属性的;给上name 属性可以省下一些代码;非跨域 父调子//父页面<button class="b" id="b">点击</button><iframe src="a.html" name='child' id="f"></ifra.原创 2020-09-11 11:37:54 · 855 阅读 · 0 评论 -
CSS 高级布局技巧
随着 IE8 逐渐退出舞台，很多高级的css特性都已被浏览器原生支持，再不学下就要过时了。用:empty区分空元素兼容性：不支持 IE8假如我们有以上列表：<div class="item">a</div><div class="item">b</div><div class="item"></div>我们希望可以对空元素和非空元素区别处理，那么有两种方案。用:empty选择空元素：...原创 2020-09-11 11:32:51 · 260 阅读 · 0 评论 -
textarea高度自适应的两种方案
方案一html5 Textarea 元素1. 自动获得焦点点击编辑自动获得焦点后光标跳转到了最前面，why?查文档MDN，textarea元素存在selectionEnd和selectionStart的属性用来表示选中的文本开始位置和结束位置，DOM接口实例是htmlTextAreaElement， 它具有setSelectionRange方法，用来选中输入框中的文本，用法：TextAreaElement.setSelectionRange(selectionStart, se...原创 2020-09-11 11:28:10 · 3152 阅读 · 0 评论 -
移动端-webkit-overflow-scrolling:touch属性导致页面卡住
故事的起因是，在一个多列表的页面上，页面在iOS11，跟iOS10中会发生页面卡住，不能进行滚动。然后就怀疑是自己的样式写的出了问题，就一直排查定位元素的样式，怎么都找不到问题所在。但还是本着追根溯源的精神，定位到根元素的样式上有一个-webkit-overflow-scrolling: touch;的样式属性；然后查了一下该属性：-webkit-overflow-scrolling属性控制元素在移动设备上是否使用滚动回弹效果.auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立...原创 2020-09-04 14:49:10 · 5535 阅读 · 0 评论 -
HTML中src和href之间的区别
简单来说 src 就是 “我想加载这个资源”，而 href 就是 “我想和这个资源建立关联”src 主要用于元素替换，href 用于和相关文档和外部资源建立相关链接。href 属性说明本地Web资源和定义的资源建立了链接。如：<link href="style.css" rel="stylesheet"/>浏览器知道这个资源是一个样式表，解析到这个元素时不会停止，但是渲染页面可能会停止，因为浏览器需要样式规则就渲染页面。浏览器不会将css文件内容加载进style tag。因此原创 2020-09-01 10:46:00 · 786 阅读 · 0 评论 -
css表格文字不换行怎么设置？
很多时候，我们在项目开发中会出现，单元格内容由于太多导致的换行问题，让表格显得非常的丑陋。下面我们来看一下使用css设置表格内文字不换行的方法。css可以通过为表格table与td标签设置white-space:nowrap;样式使表格内文字不换行。代码如下：/*让单元格内容过多时也不换行*/#datasTablediv table td{white-space: nowrap;}white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如...原创 2020-08-26 10:43:13 · 2171 阅读 · 0 评论 -
HTML引入文件的绝对路径、相对路径、根目录
什么是绝对路径？绝对路径指的是文件的真正路径，使用绝对路径链接外部资源，如：图片、超级链接、flash、音频、视频等等。代码如下：1、引入网络上的资源：<imgsrc="http://完整的URL描述地址">2、引入电脑本地的绝对路径，如D盘下images文件夹里名称为“aaa.jpg”的图片：<imgsrc="D:/images/aaa.jpg">使用绝对路径必须输入完整的描述路径，这种方法指向的链接目标地址清晰明确，但有个缺点就是一旦文件被移动或删..原创 2020-08-25 10:37:27 · 5442 阅读 · 0 评论 -
解决老版本IE不兼容rgba的问题
我们一般写一个半透明的div，只需要给这个div设置如下的属性即可：background:rgba(255,255,255,0.5);但是如果遇上 IE8 就有点蛋疼了。因为 IE8 不支持rgba( )。rgba 的含义，r 代表 red ，g 代表 green ，b 代表 blue ，红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a 代表透明度。比如rgba(255，255，255，0.5)就是透明度为 0.5 的白色。如果做到兼容 IE8 ，要用到 IE...原创 2020-08-25 10:34:35 · 980 阅读 · 0 评论 -
HTML5视频标签 video 的 poster 属性
<video>标签定义视频，比如电影片段或其他视频流，可以放置视频资源，并添加视频控件。支持的浏览器：Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持<video>标签。注：Internet Explorer 8 以及更早的版本不支持<video>标签。简单的html5视频：视频加载失败时会显示标签内的文字。<videosrc="movie.ogg"con...原创 2020-08-25 10:31:02 · 17160 阅读 · 1 评论 -
CSS如何将图像转换为模糊图像？
在css中，可以使用filter属性来模糊处理图像；filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。语法：filter: blur()属性值：● blur()：给图像设置高斯模糊，值越大越模糊。如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。示例１：使用filter: blur()来模糊图像原图：<!DOCTYPE html> <html> <head> &l.原创 2020-08-25 10:29:30 · 220 阅读 · 0 评论 -
HTML的＜Object＞标签怎么用？
<object>标签是一个html标签，用于在网页中显示音频，视频，图像，PDF和Flash等多媒体；它通常用于嵌入由浏览器插件处理的Flash页面元素，如Flash和Java项目。它还可以用于在html页面内显示另一个网页。<object>标签可以和<param>标签一起使用以定义各种参数。当浏览器不支持指定的数据时，写入<object>和<object>标签中的任何文本都被视为备用文本。<Object>标签支持html的所有原创 2020-08-28 14:47:50 · 2867 阅读 · 0 评论 -
总结几个移动端H5软键盘的大坑
1、部分机型软键盘弹起挡住原来的视图解决方法：可以通过监听移动端软键盘弹起Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。true，表示元素的顶部与当前区域的可见部分的顶部对齐 false，表示元素的底部与当前区域的可见部分的尾部对齐Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。此方法是.原创 2020-08-24 11:06:42 · 1339 阅读 · 0 评论 -
浅谈XML和JSON的区别
1.XML介绍XML 指可扩展标记语言（EXtensible Markup Language） XML 是一种标记语言，很类似html XML 的设计宗旨是传输数据，而非显示数据 XML 标签没有被预定义。您需要自行定义标签。 XML 被设计为具有自我描述性。 XML 是 W3C 的推荐标准2.jsON介绍jsON(JavaScriptObject Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScriptPro...原创 2020-08-24 10:50:14 · 762 阅读 · 0 评论 -
js禁止浏览器保存用户密码
Step1：在html中，除了要用的密码框以外，额外添加一个密码框，设置为隐藏<input type = "password" name="myPassword" style="display:none;"/>注意：添加的用来干扰的密码框，必须在有用的密码框的上面，上面任何地方都行，就是不要在下面。Step2：把我们要用的密码框的type写成text类型，这样就不会被认为是密码框<input type = "text" name="myPassword"/.原创 2020-08-20 10:26:10 · 4154 阅读 · 1 评论 -
在网页中添加动画，使用WOW.js来实现
页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意,刚知道wow.js这个插件，之前写的类似滚动时页面效果都是自己用jQuery写的，现在有了插件，开发更加快捷有效了【用法】在做项目中，有时需要做到滚动条滑到某个位置时，才能显示动画，wow.js插件可以很好的解决问题下面说明一下怎么使用这个插件：1、wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css2、在最底部引用wow.js或者wo.原创 2020-08-20 10:22:58 · 444 阅读 · 0 评论 -
前端开发人员的10个安全建议
Web安全是前端开发人员经常忽略的主题。当我们评估网站的质量时，我们通常会查看性能，seo友好性和可访问性等指标，而网站抵御恶意攻击的能力却常常被忽略。即使敏感的用户数据存储在服务器端，后端开发人员也必须采取重要措施来保护服务器，但最终，保护数据的责任在后端和前端之间共享。虽然敏感数据可能被安全地锁在后端仓库中，但前端掌握着前门的钥匙，窃取它们通常是获得访问权限的最简单方法。后端和前端之间共同承担保护用户数据的责任。恶意用户可以采取多种攻击手段来破坏我们的前端应用程序，但是幸运的是，我们只需使用几个原创 2020-08-19 11:40:45 · 558 阅读 · 0 评论 -
浏览器的Event Loop
进程与线程进程和线程都是CPU工作时间片的一个描述。进程描述了CPU在运行指令及加载和保存上下文所需的时间，放在应用上来说就代表了一个程序。线程是进程中的更小单位，描述了执行一段指令所需的时间。js是单线程执行的。把这些概念放到浏览器中来说，当你打开一个Tab页面，其实就是创建了一个进程，一个进程中可以有多个线程，比如渲染线程、js引擎线程、HTTP请求线程等等。当你发起一个请求时，其实就是创建了一个线程，当请求结束后，该线程可能就会被销毁。在js运行的时候可能会阻止UI渲染，这说明了两个线程是原创 2020-08-19 11:38:51 · 231 阅读 · 0 评论 -
input禁止输入的方法以及区别
1： readonly规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。<input type="text" value="哈哈哈" readonly="readonly">2：disabled 被禁用的 input 元素可复制，不能接收焦点,设置后文字的颜色会变成灰色。无法与 <input type="hidden"> 一起使用。<input type="text" value="哈哈哈"...原创 2020-08-19 11:29:59 · 331 阅读 · 0 评论