手把手教你实现属于自己的玫瑰花
这段代码通过 HTML 和 CSS 的结合，创建了一个动态的花朵效果，展示了 CSS 动画和定位的强大功能。 演示效果 HTML&CSS .flower 设置花朵的位置和布局。position: relative; 相对定位。top: 80px; 和 left: 20px; 调整花朵的位置。 .flower .petal 设置花瓣的样式。position: absolute; 绝对定位。background color: #d52d58...
你知道的H5屏幕的适配方案有哪些？
1\. @media媒体查询适配 利用html标签为基准，然后用rem设配页面 2\. 插件postcss pxtorem 他是postcss插件 配置如下： 在我们的 文件里面，你可以自由的使用 ，在打包的时候 插件，他会自动将 转化成 3\. 利用js动态修改根元素的 利用js，无论视口宽度如何变化，页面元素都会根据基准值动态调整大小，确保良好的适配效果。在加上px转化为rem的技术更是提高了适配的灵活性。 工具函数 app 组件使...
前端面试题汇总之HTML篇（含答案）
1、什么是 DOCTYPE(⽂档类型)，有何作用 （1） 解释（是什么） DOCTYPE是是HTML5的文档声明,一种标准 的 。 （2）DOCTYPE的作用包括： 1. 告知浏览器使用哪个HTML版本 ：定义和声明HTML文档的类型和版本, 告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档 ，例如， 声明表示文档是基于HTML5的。不同的HTML版本可能具有不同的语法和功能支持，因此DOCTYPE有助于...
4种方法实现html 页面内锚点定位及跳转
项目中经常会出现点击跳转锚点的方法，比如给一个a标签一个href=“#锚点”，然后要跳的锚点给个id=“锚点”，这样就实现简单的跳转，但是这样在url地址栏后面都会出现一个诸如www.geekjc.com/#锚点，然后你点击给一次后退都是退回上一个选择的锚点url，这里总结4个跳转锚点的方法。 第一种方法 也是最简单的方法是锚点用标签，在href属性中写入div的id。如下： 这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果...
Cookie与Session傻傻分不清楚
一、Cookie与 的区别 Cookie和Session都是用于在Web应用程序中跟踪用户的状态的机制。 Cookie和Session都是用于跟踪用户状态的机制 虽然Cookie和Session都可以用于存储用户的数据，可用于跟踪用户身份和行为 ， 但它们的工作方式/实现方式有所不同，具有不同的优缺点。 1.1 Cookie 1.1.1 Cookie是什么？ Cookie是一种存储在用户计算机上的小文件，用于跟踪用户的身份和行为。 Co...
H5新特性有哪些？
H5拥有6种新特性 1. 语义化标签，例如header，footer，section，article等 语义化标签的作用：提升页面的阅读性(结构性增强)，更有利于SEO，对于使用屏幕阅读器的人来说会更友好(有明显的语气差别，例如strong标签内的内容会重读)； 2. 新增媒体元素，audio、video audio和video标签能够很容易的输出音频或视频流，提供便利的获取文件信息的API 更多详细属性参考 3.用于绘画的canvas...
什么是响应式设计？响应式设计的基本原理是什么？如何做？
简介 我这么理解：响应式布局就是一个网站能够兼容多个设备，可以根据屏幕的大小自动调整页面的展示方式以及布局，我们不用为每一个设备做一个特定的版本。响应式网站的特点： 同时适配PC+平板+手机等 网站的布局会根据视口来调整模块的大小和高度 响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理来设置差异化的css样式 一、是什么？ 响应式网站设计（Responsive Web Design）是一种网络页面设计布局，页面的设计与开发...
前端性能优化 - 用RAIL模型分析性能
RAIL是一个以用户为中心的性能模型，它把用户的体验拆分成几个关键点（例如，tap，scroll，load），并且帮你定义好了每一个的性能指标。 有以下四个方面： Response Animation Idle Load <img width="676" height="245" src="../../ resources/1734894ee7aaf2b6 tplv t2oaga2asx 2e5a8010c5bb40479.webp"/...
网站图片加载慢怎么优化
一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？ <a id="t1" </a <a id="1 Sprites 2" </a 1、使用 Sprites 图片技术 它将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用 CSS 技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，可以减少了整个网页的图片大小，并且利用 能很好地减少网页的 请求，从而大大的提高页面的性能。...