CSS核心概念解析：层叠、优先级与继承
目录一、CSS 的层叠规则什么是层叠？冲突规则理解优先级代码示例：优先级的比较二、继承在 CSS 中的作用什么是继承？理解继承的工作原理控制继承重设所有属性值三、理解层叠资源顺序优先级什么是层叠资源顺序？代码示例：层叠资源顺序的应用!important 的使用四、理解级联层的顺序什么是级联层？代码示例：级联层的顺 ...
CSS样式化美化网页table表格指南
目录一、典型的 HTML 表格二、样式化我们的表格1、基本样式2、间距和布局三、简单的排版1、字体和文本对齐2、颜色样式四、综合练习题题 1: 创建一个自定义的产品表格题 2: 设计一个学生成绩表格总结表格是网页设计中不可或缺的元素，用于展示数据和信息。通过CSS可以对表格进行美化和功能性强化，包括设置边框、背景色、文 ...
HTML5 WebSocket 详解及使用
1.WebSocket 是什么？
WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议。（双向通信协议）
2.WebSocket 的作用？
实现客户端与服务器之间的双向通信，允许服务端主动向客户端推送数据。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并 ...
css特效 - 按钮hover文字上下滑动
目录核心代码html 代码css 部分代码完整代码如下html 页面css 样式页面渲染效果当鼠标悬浮按钮上方时，利用伪元素和定位来实现伪元素块上下滑入和滑出的交互效果。
此效果适用于较大的按钮入口，如主页 banner 处按钮，也可以放在当作首屏当作一个大 banner 作为视觉效果等场景。
核心代码部分，简要说明了写法思路；完整代 ...
html5文本标签
标题文本 h1、h2、h3、h4、h5、h6
其中 h1、h2、h3是比较常用的。h3、h4、h5、h6相对来说用的会少一点，除非结构层次比较深才会使用。
段落文本 p
<p>这是一个段落<p/>
强调文本 strong 和 em
尽量避免使用b代替strong，使用i代替em。它们表示的含义不一样
<strong>strong表示文本的重要性,浏览器会对strong标签内容加粗</ ...
让你的网页动起来:Javascript+CSS拖曳盒子指南
让我为大家带来一个小案例吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
...
vue3 使用 html5-qrcode 实现扫描二维码功能
1. 安装
npm安装
npm install --save-dev html5-qrcode
或直接引入
<script src="https://unpkg.com/html5-qrcode" type="text/javascript">
2. 引入
根据需求自定义渲染 QR scanning UI 的容器。
<div id="reader" width="600px"></div>
引入 Html5Qrcode
// 简单模式（使用默认用户界面）
import {Html5QrcodeScan ...
前端常用的性能实用优化方法有哪些?
目录移动端性能优化：图片优化：1、CSS sprites2、压缩图片3、尽量避免重设图片大小4、图片尽量避免使用DataURL5、图片懒加载JavaScript相关优化1、把脚本放在页面底部2、使用外部JavaScript和CSS3、压缩JavaScript和CSS4、减少DOM操作5、js开销缩短解析时间6、v8编译原理（代码优化）7、v8内部优化8、对象优化(迎合v8进行 ...
padding、border会把div撑大的解决方法
目录盒子模型的组成：box-sizing下的盒子模型calc()的运用所有HTML元素都可以看作盒子。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。因为Div添加了padding、border，Div的实际宽度=Div的初始固定值+边距值+边框值
...
100套大数据可视化炫酷大屏Html5模板
100 套大数据可视化炫酷大屏 Html5 模板
项目背景：由于自己公司项目里面用到一个数据可视化大屏页面，自己网上各种谷歌百度，发现资源良莠不齐，而且大多数都是收费的，甚至一个页面一收费的那种，前前后后自己不管是付费的还是免费的收集了不少，于是自己打算整理下，免费分享给大家，以免大家再走冤枉路。如果大家有珍 ...
html中CSS:hover选择器改变子元素、同级元素、就近元素的样式
目录定义：基础用法：进阶用法:使用a 控制其他块的样式：使用a控制a的兄弟元素 c(同级元素)：使用a控制a的就近元素d：总结一下：鼠标悬浮覆盖元素后，以前使用js的mouseover和mouseout添加监听事件可以实现交互。现在可以使用CSS中的:hover选择器提高性能。:hover选择器可以针对不同的HTML元素，在鼠标悬停时改变元素（也可 ...
Bootstrap的CSS样式全面使用介绍
目录1、基本设置（1）使用 HTML5 文档类型。（2）响应移动设备。2、网格（Grid）（1）Bootstrap 网格系统（Grid System）（2）container（3）使用 Grid（4）举例：3、文本处理（1）small 属性 、<small> 标签（2）常用文本属性（3）补充文本属性（4）<abbr> 标签 （5）列表4、表格（1）常用表格标签（2）<table>常用属性（ ...
新的HTML标签<search>详解
目录如何运作看法本文介绍了一种新的HTML元素搜索方法，并提供了一个实用的工具来帮助开发者快速找到所需的元素。这对于那些需要处理大量HTML元素的开发者来说是非常有用的。文章还通过提供一些常见元素的用法示例，帮助开发者更好地理解和应用这些元素。在众多元素中找到特定的元素。为了解决这个问题，文章介绍了一种新的 ...
html5
html5
HTML5简介
什么是HTML5
HTML5是新一代的HTML标准，2014年10月由万维网联盟（W3C）完成标准制定。
官网地址：
W3C
WHATWG
HTML5在狭义上是指新一代的 HTML 标准，在广义上是指：整个前端。
HTML5优势
针对JavaScript，新增了很多可操作的接口。
新增了一些语义化标签、全局属性。
新增了多媒体标签，可以很好的 ...
引用字体时图标无法显示_字体文件不存在问题
目录使用CDN后字体图片不显示问题IIS中字体文件不存在问题IIS添加MIME类型 nginxApache最近一个项目，css,js等静态资源做了cdn部署，浏览网站时发现font awesome字体图标通通不能正常显示。只有一些奇怪的符号。浏览器控制台报错信息：font-face引用字体跨域。
使用CDN后字体图片不显示问题
1. 查看字体文件路径，跟UR ...
HTML clearfix清除浮动讲解
一、浮动的概念
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
二、浮动的影响
1. 浮动会导致父元素高度坍塌
父元素中有子元素，并且父元素没有设置高度，子元素在父元素中浮动，结果必然是父元素 ...
深入理解z-index的工作原理和应用技巧
目录前言1、z-index2、层叠上下文3、层叠水平4、层叠顺序5、创建层叠上下文小结前言
最近参与某前端项目架构改造，发现项目中滥用z-index，设置的值有几十种并且不统一。在对项目的z-index进行梳理和统一过程中也深入学习了一下z-index，并撰写成文，希望也能帮助到陌生的你。
1、z-index
z-index属性是什么？这里可参考MDN ...
HTML5中的document.visibilityState
在 HTML5 中，文档对象（即 document 对象）具有一个 visibilityState 属性，该属性表示当前文档对象的可见性状态。
visibilityState 可能的取值有以下三种：
- visible ：表示文档当前处于激活状态，即当前选项卡处于前台或当前窗口处于屏幕最上层。- hidden ：表示文档当前处于非激活状态，即当前选项卡处于后台或当 ...
HTML中link标签属性详解
在HTML中，link标签是一个自闭合元素，通常位于文档的head部分。它用于建立与外部资源的关联，如样式表、图标等。link标签具有多个属性，其中rel和href是最常用的。
rel属性定义了当前文档与链接资源之间的关系。常见的rel属性值有：
stylesheet：表示链接到一个外部CSS样式表。icon：表示链接到网站的图标，如favicon。
hr ...
关于HTML5的img标签
目录HTML5 <img> 标签如何插入图像：浏览器支持标签定义及使用说明HTML 4.01 与 HTML5之间的差异HTML 与 XHTML 之间的差异属性全局属性事件属性尝试一下 - 实例支持的图像格式与 CSS 的交互HTML5 <img> 标签
如何插入图像：
实例
HTML5 <img>标签用于向网页中添加相关图片。
<img src="smiley-2.gif" alt="Smiley ...
