HTML
关注
分享
扫一扫
文章平均质量分 58
f
MINO吖
代码就是一门艺术.
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
弄清preload、prefetch、dns-prefetch、defer和async
preload和prefetch是现代浏览器对标签新增的rel值，用来加快页面资源（通常是css和js）的加载速度，改善用户体验。比如。网络上对于preload和prefetch的讲解其实很多，看起来也很专业，但是看完了还是一头雾水。这次我来讲解一下。之前常见的是引用css，比如，现在rel值由stylesheet换成了preload或prefetch，会有什么区别呢？在常用用法里无法加载js，只能加载css，但是如果使用prefetch和preload，就可以加载js。原创 2024-11-12 09:49:09 · 1799 阅读 · 0 评论 -
大屏可视化适配方案
核心思想：动态调整 HTML 根字体大小和 body 字体大小，结合百分比或vw/vh单位，实现容器宽高、字体大小、位移的动态适配。核心思想：通过将像素值（px）转换为视口宽度（vw）和视口高度（vh）来适配不同尺寸的屏幕，实时计算图表尺寸、字体大小等。缺点：在地图、Canvas 等带有交互的组件中，可能会出现点击事件错位问题，需针对性调整。核心思想：根据屏幕宽高比例动态缩放，代码简洁，几行代码即可实现适配。优点：基于比例缩放，能够灵活适应不同分辨率和屏幕尺寸。优点：实现简单，特别适合基本的大屏展示场景。原创 2024-09-11 13:35:38 · 1700 阅读 · 0 评论 -
a标签设置下载文件名无效解决方法
这种写法有个前提：href 的下载地址 和 当前网站地址 必须是。点击下载的时候，调用以上的 download 方法即可。属性，可以重置 文件名。如下代码，文件名重置为。的，否则download不生效。封装一个download方法。原创 2024-08-07 09:18:01 · 839 阅读 · 0 评论 -
前端实现打开新标签页后，再次定位到该标签页
A 页面点击某按钮打开了新的标签页 B，当新的标签页 B 未关闭且符合同源策略时，再次点击按钮，可以自动跳转到标签页 B。原创 2024-04-07 09:41:34 · 790 阅读 · 0 评论 -
如何在 HTML 中嵌套、引入其他的 HTML？
在日常开发中，书写的HTML页面往往不是独立或互不通用，通常是有些头部、尾部或者其他部分是公用的，但是HTML有不同JSP页面可以使用类似include这样的动作标记，所以接下来介绍二种HTML页面引入其他HTML页面的方法。原创 2024-02-27 10:10:56 · 3015 阅读 · 0 评论 -
前端src和href的区别
src，会暂停其他资源的处理，直到该资源加载、解析和执行完毕，将其所指向资源应用到当前内容。这也是为什么把js文件放在底部而不是头部发热原因。href，将资源解析成css文件，并行加载请求资源，不会阻塞对当前文档的处理。src，将其所指向的资源下载并应用到当前页面，常见的有script、img。href，超文本引用，用于建立文档与资源的联系，常用的有：link、a。src和href的作用都是用于请求资源。href，用于文档与资源之间确立联系。src，请求到的资源替换当前内容。3.浏览器的解析不同。原创 2023-08-16 11:14:56 · 370 阅读 · 0 评论 -
文字从左向右滚动实现
使用marquee标签即可实现动态效果；但是marquee被废弃了，这里就不推荐继续使用了使用动画实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name=".原创 2022-05-06 09:21:01 · 435 阅读 · 1 评论 -
父元素设置flex：1；子元素内容过程导致被撑开
<div class="box"> <div class="a"></div> <div class="b"></div></div>.box { display: flex;}.b { flex: 1; }.a {width: 100px;}正常两栏布局，但如果b得子元素太宽，会撑开b，导致a的宽度被挤小 将b的宽度设置为width: 0;，就可以解决...转载 2021-05-08 10:28:02 · 2751 阅读 · 0 评论 -
HTML img和picture使用实例
前言在用户界面中使用图像和动画已成为现代 Web 应用程序中的常见情况。尽管这些现代设计都致力于改善应用程序的用户体验，但如果这些图像在所有设备上都没有良好的响应，事情就会适得其反。作为开发人员，我们必须满足所有这些要求。但大多数时候，由于我们正在寻求更高级别的解决方案，因此会忽略一些可能会带来巨大影响的小事。在 picture 标签和 img 标签之间做选择可能是一个很小的决策，但如果你做出了正确的选择，就能改善用户体验和性能。img 标签现在已经不够优秀众所周知，很长一段时间以来，i原创 2021-04-11 16:41:44 · 1395 阅读 · 0 评论 -
解决HTML中div比其所包含的img高度高的问题
代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> *{原创 2020-07-27 20:13:07 · 852 阅读 · 0 评论 -
Web Component使用指南
组件是前端的发展方向，现在流行的 React 和 Vue 都是组件框架。谷歌公司由于掌握了 Chrome 浏览器，一直在推动浏览器的原生组件，即Web Components API。相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。自定义元素自定义元素是简单的用户自定义HTML元素。它们通过使用CustomElementRegistry来定义。要注册一个新的元素，通过window.customElements中一个叫define的方法来获取注册的实例。win..原创 2020-07-17 19:38:16 · 2668 阅读 · 0 评论 -
input、textarea设置光标位置 | ele.setSelectionRange()
点击按钮触发textarea的focus时，默认光标的位置在最左边；需求：focus时让光标的位置处于最右侧Code// HTML<button onclick="setPostion()">click</button><textarea id="textarea">123456789</textarea>//JSfunction setPosition() { let ctrl = document.getElement.原创 2020-06-22 18:58:41 · 6398 阅读 · 2 评论 -
ios移动端input输入框常见问题解决办法
1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的...原创 2020-03-29 16:21:09 · 7575 阅读 · 0 评论 -
Html5的video标签自动填充满父div的大小
想要video能自动填充慢父div的大小，只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可。object-fit语法object-fit属性的语法非常的简单：object-fit:fill | contain | cover | none | scale-downobject-fit取值说明obj...原创 2020-02-02 11:17:29 · 1749 阅读 · 0 评论 -
mp4视频 视频测试地址（在线MP4文件）
现成的视频资源，找了一圈 分享一下，预防下次使用。惊奇队长http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4http://vfx.mtime.cn/Video/2019/03/21/mp4/190321153853126488.mp4紧急救援http://vfx.mtime.cn/Video/2...原创 2020-02-02 11:11:06 · 10117 阅读 · 5 评论 -
使用css3的flex盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ height:500px; border:1px solid #222; display:flex;/*设为伸缩容器*/ flex-flow:row;...原创 2020-02-02 10:19:31 · 1096 阅读 · 0 评论 -
HTML5拖拽API 实现拖拽组件（React）
1.拖拽和释放定义： 拖拽：Drag; 释放：Drop;2.源对象和目标对象： 3.相关API: ondragstart:源对象开始被拖动 ondrag:源对象被拖动的过程中 ondragend:源对象被拖动结束 ondragenter:目标对象被源对象拖动进入 ondragover:目标对象被源对象悬浮在上面 ondragleave:...原创 2020-02-01 21:03:41 · 1312 阅读 · 5 评论 -
HTML boxShadow 单边阴影，双边阴影
box-shadow语法：x轴偏移值 y轴偏移值 模糊半径 阴影半径 || 颜色 insect，其中阴影半径可以为负值，意思是增加或减少指定数值的阴影半径正常阴影 box-shadow: 5px 5px 5px black;阴影半径为负值 box-shadow: 5px 5px 5px -5px black;阴影半径为正值 box-shadow: 5px 5px 5px 5p...原创 2018-12-08 17:31:38 · 1037 阅读 · 0 评论 -
img标签src引用网络图片，响应403的解决方法
在html页面加入<meta name="referrer" content="no-referrer">标签，就可以解决页面加载网络图片的问题，原因大概是网络安全的问题，别人的页面做了安全防护的问题。在html的head标签中加上：<meta name="referrer" content="no-referrer" /> <!--可以让img原创 2018-12-08 17:33:52 · 2698 阅读 · 0 评论 -
CSS清除浮动的8种方法
1.父级div定义 height<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .le...原创 2019-04-03 21:34:25 · 181 阅读 · 0 评论 -
BFC原理剖析
1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 2.BFC的生成上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，C...原创 2019-04-02 14:11:53 · 281 阅读 · 0 评论 -
Web Worker使用
Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。介绍通过使用WebWorker，我们可以在浏览器后台运行Javascript，而不占用浏览器自身线程。WebWorker可以提高应用的总体性能，并且提升用户体验。有两种WebWorkerWebworkers...原创 2019-04-02 20:23:04 · 769 阅读 · 0 评论 -
HTML 取消input自动提示
input 输入框有提示功能，当你之前输入过一些内容，你下次打入相关字符的时候，默认会有之前输入的一些相关的字符的提示，这个提示一般来说还是很好的，但是，有时候，我们想自己输入，不想要提示。如果不需要提示，则将 autocomplete设置为off即可，代码如下：<input type="text" autocomplete="off" />我们也可以自定义一些提示，代码...原创 2018-12-08 17:27:59 · 16701 阅读 · 1 评论