神明木佑-CSDN博客

原创相对路径与绝对路径：你需要知道的区别

因为在 Web 服务器上，网站的根目录是相对固定的，使用相对路径可以方便地在项目内部进行文件引用，并且当网站的部署位置发生变化时，只要整个项目的相对结构不变，文件引用就不会出错。在编写脚本或程序时，如果需要访问系统中固定位置的文件，如操作系统的配置文件、特定的系统库文件等，使用绝对路径可以保证程序在不同的运行环境中都能正确地找到所需文件。如果文件或目录的位置发生变化，或者整个文件系统的结构进行了调整，那么所有使用绝对路径的地方都需要进行修改，这在大型项目中可能会带来较大的工作量。

2025-05-30 01:00:00 249

原创那些难以维护、逻辑混乱或违反最佳实践的代码

表格布局 - 禁用<table>布局，使用Flex/Grid。eval()危险操作 → 严格使用JSON.parse()样式/脚本混写 - 严禁在HTML中内嵌CSS/JS代码。回调地狱 → Promise/async-await重构。嵌套地狱 - 过度使用无意义<div>，改用语义化标签。改进：分离结构、样式和行为（CSS 和 JS 文件）。（然后默默按下了Ctrl+S）”v-if/v-for混用 → 优先计算属性过滤。JS拼接HTML → 采用模板引擎。CSS模拟逻辑 → JS控制交互。

2025-05-28 20:35:00 163

原创 JavaScript 中 undefined 和 not defined 的区别

⚠️ 这是 JavaScript 的安全机制：typeof 对未声明变量返回 "undefined" 以防止报错，但这可能掩盖真正的引用错误。// "undefined" （特殊行为）"no-undefined": "warn" // 避免与 undefined 直接比较。// "undefined" （不会报错！typeof 检测 "undefined" "undefined"（特殊处理）类型：typeof undefined 返回 "undefined"

2025-05-28 20:32:42 350

原创 JavaScript输出数据的方法

console.error()用于输出错误信息，而console.warn()用于输出警告信息。console.info()用于输出普通信息，而console.debug()通常用于输出调试信息。console.log()是最常用的方法之一，用于在浏览器的控制台（Console）中输出信息。这对于调试和查看变量的值非常有用。console.table()方法可以将数组或对象以表格的形式在控制台中显示，这有助于以结构化的方式查看复杂数据。5. console.error() 和 console.warn()

2025-05-28 20:31:53 406

原创 ES6模块导出语法：export和export default的区别

export和export default都是将模块中的内容暴露给外部模块使用的关键字。在ES6中，export和export default是用于将模块中的内容暴露给外部模块使用的关键字。虽然它们都可以导出模块中的内容，但两者之间还是有些区别的。导入时使用不同：export导出的变量或函数必须和导入时使用的名称完全一致，而export default导出的默认值可以使用任何名称进行导入。导出时使用不同：export需要通过花括号指定要导出的变量或函数，而export default则直接导出一个默认值。

2025-05-13 17:28:31 141

原创原型和原型链

原型（Prototype）和原型链（Prototype Chain）是 JavaScript 中非常重要的概念，它们是 JavaScript 实现继承和共享属性和方法的核心机制。理解原型和原型链可以帮助你更好地掌握 JavaScript 的面向对象编程（OOP）特性。1. 原型（Prototype）什么是原型？在 JavaScript 中，每个对象都有一个隐藏的 [[Prototype]] 属性（可以通过 __proto__ 访问），它指向另一个对象，这个对象就是当前对象的原型。

2025-05-13 17:23:19 1016

原创 base64图片是什么？原理、优缺点是什么？

Base64图片是一种将图像数据编码为文本字符串的方法，通常用于将图像嵌入到网页或其他文档中，以减少HTTP请求或实现某些特定的需求。Base64编码的原理是将3个8位的字节转化为4个6位的字节，然后在6位的前面补两个0，形成8位一个字节的形式。为了保证所输出的编码位可读字符，Base64制定了一个编码表，以便进行统一转换。总的来说，Base64图片适用于在网页中嵌入小图像或者将二进制数据转换为文本格式进行传输的情况。但在大量图片的存储和传输或者需要保护敏感信息的情况下，不适合使用Base64编码。

2025-05-12 18:22:10 209

原创解构赋值

【系统学习ES6】本专题旨在对ES6的常用技术点进行系统性梳理，帮助大家对其有更好的掌握，希望大家有所收获。ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构是一种打破数据结构，将其拆分为更小部分的过程。

2025-05-12 18:19:17 734

原创 CSS入门教程：新手快速掌握网页美化的秘诀

通过CSS，我们可以定义字体、颜色、布局、响应式设计等，让网页在不同设备上呈现出统一的外观。CSS盒模型是理解布局和定位的基础。一个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。本文将带你走进CSS的世界，教你如何轻松掌握网页美化的关键要点，让你的网页焕然一新。在这个例子中，p 是选择器，color 和 font-size 是属性，red 和 16px 是对应的值。<p>欢迎来到CSS的世界，让我们一起学习网页美化技巧，打造精美的网页。

2025-04-27 23:19:51 430

原创 HTML入门教程：新手快速掌握网页构建的关键要点

它通过一系列标签来描述网页的结构和内容，是网页设计与开发的基础。使用合适的标签来描述内容，有助于搜索引擎优化和屏幕阅读器的理解。本文将带你了解HTML的基本知识，教你快速掌握网页构建的关键要点。HTML标签可以拥有属性，属性提供了更多关于标签的信息。例如，img 标签的 src 属性用于指定图片的路径。示例：<img src="image.jpg" alt="描述">head 元素：包含文档的元数据，如标题、样式、脚本等。<p>这是一个简单的HTML示例。<h1>欢迎来到我的网页</h1>

2025-04-27 23:19:14 355

原创 JavaScript输出数据的方法

console.error()用于输出错误信息，而console.warn()用于输出警告信息。console.info()用于输出普通信息，而console.debug()通常用于输出调试信息。console.log()是最常用的方法之一，用于在浏览器的控制台（Console）中输出信息。这对于调试和查看变量的值非常有用。console.table()方法可以将数组或对象以表格的形式在控制台中显示，这有助于以结构化的方式查看复杂数据。5. console.error() 和 console.warn()

2025-04-27 23:18:00 263

原创运算符分为哪几类？哪些运算符常用作判断？简述运算符的优先级

例如：&（按位与）、|（按位或）、^（按位异或）、~（按位取反）、<<（左移）、>>（右移）‌。=、>、<、>=、<=，这些运算符用于比较两个值的关系，返回布尔值‌。‌其他运算符‌：包括成员访问运算符（.）、指针运算符（*、&）、范围解析运算符（::）等‌。、~、++、--、+（正号）、-（负号）、*（解引用）、&（取地址）‌。例如：=、+=、-=、*=、/=、%=‌。‌赋值运算符‌：=、+=、-=、*=、/=、%=‌。‌关系运算符‌：<、<=、>、>=‌。‌按位与运算符‌：‌。

2025-04-27 23:17:07 133

原创吐血整理！前端最恶心的 19 种代码屎山，你中招没？

遇到屎山不要怕，记住：“前人挖坑，后人填土，总有一天，青山绿水。对了，第20个屎山，谁来补充？

2025-04-01 15:01:42 1087

原创前端新手必知必会的20个基础知识点（HTML/CSS/JS）

- 推荐：延迟执行 -->box-sizing: border-box;/* 推荐：宽高包含padding和border */<img src="image.jpg" alt="描述文字" loading="lazy">/* 交叉轴对齐 *//* 子元素间距 */justify-content: space-between;/* 主轴对齐 *//* 彻底消失，不占空间 *//* 隐藏但占空间 *//* 内容宽度 *//* 透明但可交互 */.btn { } /* Class选择器 */

2025-03-29 16:07:07 406

原创前端页面的“三明治“结构：三层拆解一看就懂

一、先看三层结构全家福1. 结构层（HTML）→ "毛坯房骨架"核心作用：搭建网页的钢筋水泥结构定义内容的摆放位置（哪里是客厅、卧室）告诉浏览器这里有什么内容（文字/图片/按钮）常用工具：<div>、<p>、<h1>、<ul>、<img>等HTML标签。

2025-03-29 16:06:28 948

原创 2分钟理解JavaScript严格模式，避开这些常见陷阱

JavaScript的严格模式（Strict Mode）是ECMAScript 5引入的一项重要特性，旨在让代码运行更安全，同时避免一些常见的编程错误。通过简单地在脚本或函数的开头添加声明，我们就可以启用这一模式。

2025-03-24 14:45:00 308

原创 10个JavaScript一行代码，解决90%的开发难题

在JavaScript开发过程中，我们经常会遇到一些看似复杂但实际上可以通过简洁的代码解决的问题。下面分享10个JavaScript一行代码技巧，解决日常开发中的常见难题。

2025-03-24 12:00:00 223

原创在登录点击浏览器返回上一页，不会返回锁屏和首页

锁屏和框架一样，不过锁屏和框架他们两个还有一个值如果这个值为1就跳转框架，否则跳转锁屏，在登录页的时候要把这个值改为1。在框架判断是否有登录存储这个值，如果没有弹出窗提示用户，清空存储跳转到登录页。在登录成功的时候，存储登录接口返回的值。

2025-03-20 14:07:54 174

原创视频录制秘籍：打造超一流技术讲解视频

要自己先写一个大纲，进行自己需要讲解的内容捋一个思路，在进行讲解的时候根据自己写的大纲进行讲解，在讲解的时候还需要对难点进行讲解，在讲解代码之前可以给的代码多写几个注释，方便讲解，不会卡顿，在看项目讲解的时候要把自己使用的方法讲解出来，比如说讲解搜索功能的时候，你是使用什么方法进行搜索的，我是使用flter进行搜索的，然后如果讲解到同一个的功能，把其中需要注意的点讲出来，比如接口请求，传递参数，等等讲解出来，在讲解的时候要挑几个重要的功能进行详细的讲解，具体如何实现使用了什么方法，进行讲解，对了在讲解项目之

2025-03-20 13:33:49 175

原创必看！高效实用的 jQuery 校验技巧大揭秘

如果是不只判断输入框或者下拉框的值是否为空，还要判断它的内容是否是正确的，可以使用onchange事件先判断是否有内容如果有内容，在判断内容是否正确，因为需要改变效验的内容所以我们直接使用函数封装，把它的这个内容接过来进行拼接显示。如果是只判断输入框或者下拉框的值是否为空，可以使用onchange事件传this使用jqurey的方法显示效验。

2025-03-20 11:22:05 228

原创 JavaScript 排班系统实战：从代码剖析到应用详解

点击设置排班事件，里面的时间是调用的插件。上午号源下午号源输入的判断。上午开关和下午开关的判断。

2025-03-20 10:35:05 184

原创深入解析二级联动科室选择器的实现与应用：从原理到实践的全面探索

定义一个名为 DepartmentSelector 的类，用于创建科室选择器实例构造函数，在创建实例时会自动调用，接收一个包含配置选项的对象初始化配置选项，使用传入的 options 对象中的值，如果某个选项未传入，则使用默认值// 接口请求的 URL// 请求接口所需的令牌// 用户 ID// 选择联动容器的 ID，默认为 'select_linkage'// 输入框的 ID，默认为 'float'// 一级选择框的类名，默认为 'first_select'

2025-03-20 09:49:57 198

原创 JavaScript事件机制详解

JavaScript中的事件模型是指当用户与网页进行交互时，浏览器会触发不同类型的事件，开发者可以通过添加事件监听器来响应这些事件。事件流是描述事件在页面元素中传播的过程，从窗口对象开始，逐级向下传播到最具体的元素，然后再逐级向上冒泡回到窗口对象。在上面的例子中，我们首先获取了一个按钮元素，然后通过addEventListener方法为按钮的点击事件和鼠标悬停事件添加了两个事件监听器。最后，我们展示了如何删除事件监听器。可以通过addEventListener或者直接在HTML元素的属性中添加事件监听器。

2025-03-09 22:08:07 196

原创 CSS动画与过渡效果

和过渡是用来创建网页元素动态效果的技术。动画是指元素从一个状态平滑过渡到另一个状态，而过渡是指元素在某个状态下的属性值平滑地变化。元素上时，背景颜色会平滑地过渡到蓝色，过渡时间为1秒，并使用。在上述例子中，当鼠标悬停在。

2025-03-09 22:06:34 221

原创 HTML 标签语义化指南：让网页更易读

这些标签可以提供更多的语义信息，有助于搜索引擎理解网页内容，并为使用辅助技术的用户提供更好的访问体验。等语义化标签，清晰地定义了页面的结构，并提供了更多的语义信息。可以用于包裹新闻、博客帖子、论坛帖子等独立的文本内容，也可以用于包裹独立的页面组件。每个页面应该只有一个 <main> 标签，用于包裹页面的主要内容部分。提升搜索引擎优化（SEO）：搜索引擎能够更好地理解页面的结构和关键内容，提高网页在搜索结果中的排名。改善可访问性：屏幕阅读器等辅助技术可以更准确地解读页面结构和内容，提供更好的浏览和导航体验。

2025-03-09 22:02:32 296 1

原创 JavaScript 函数初体验

函数体中的代码将这两个参数相加，并将结果存储在局部变量 sum 中。通过将 5 和 10 作为参数传递给函数，我们调用了该函数，并将返回的结果存储在变量 result 中。通过函数，可以将代码分解成较小的部分，每个部分都有特定的功能，并且可以在需要时进行调用。其中，functionName 是函数的名称，参数是函数需要接收的输入值。通过编写和调用函数，可以使代码更加模块化和可重用，减少重复的代码，并提高代码的可读性和可维护性。这里的参数是实际传递给函数的值，与函数定义中的参数对应。

2025-03-09 22:00:46 198

原创 datalist 是什么？以及作用是什么？

用户可以在输入时从这些选项中选择，但也可以输入不在列表中的其他值。<input list="browsers" name="browser" id="browser">：这里的 list 属性关联了 datalist 元素的 id，即 browsers。datalist 元素的主要作用是提供一个友好的用户界面，帮助用户快速地从预定义的选项中选择值，而不需要手动输入。<datalist id="browsers">：datalist 元素的 id 属性值必须与 input 元素的 list 属性值相匹配。

2025-02-27 20:16:41 461

原创什么是回调函数

在上面的例子中，fetchData函数模拟了一个异步操作，并在2秒后调用传递给它的回调函数processData。回调函数是指在某个函数执行完毕后，将另一个函数作为参数传递给它，并在特定情况下调用该函数。定时任务：在定时任务的场景下，我们可以使用回调函数来执行预定的操作。处理异步操作：当我们需要处理异步操作（例如网络请求或文件读取）时，回调函数可以帮助我们在操作完成后执行相应的代码。高阶函数：回调函数通常用于构建高阶函数，这些函数接受其他函数作为参数，并根据不同的需求执行不同的操作。

2025-02-27 20:15:00 161

原创什么是原型，有什么用？

原型是JavaScript实现继承的基础，它构成了JavaScript中对象之间的链式关系。1. **属性和方法的继承**：当我们访问对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会沿着原型链向上查找，直到找到对应的属性或方法。3. **构造函数与实例**：在JavaScript中，构造函数的`prototype`属性指向了一个对象，这个对象就是实例的原型。4. **动态性**：可以通过修改原型对象，动态地为已存在的对象添加新的属性和方法，这对于类似继承和扩展的需求非常有用。

2025-02-26 22:42:29 183

原创 ES6更新的内容中什么是proxy

Proxy 是 ES6（ECMAScript 2015）中引入的一个新的内置对象，用于定义某些操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。通过创建一个对象的 Proxy，你可以控制对这个对象的访问，包括读取属性、设置属性、枚举属性、函数调用等。处理器对象可以定义零个或多个捕获器（trap），这些捕获器是定义在处理器对象上的特定函数，用于拦截并处理目标对象上的操作。Proxy 是一个非常强大的特性，它允许开发者以声明式的方式拦截和修改对象的操作，从而提供了高度的灵活性和控制力。

2025-02-26 22:41:54 244

原创 HTML 新手易犯的标签属性设置错误

滥用target="_blank"属性：将所有链接的目标设为_blank会在新标签页中打开链接，这可能会导致用户在不知情的情况下打开大量新标签页，影响用户体验。正确的做法是只在需要新标签页打开的链接上使用该属性，并在标签中添加适当的提示，让用户知道链接会在新标签页打开。应该根据内容的含义使用正确的语义化标签，比如使用<h1>来表示页面的主标题，<p>来表示段落等。忽略对无障碍性的考虑：新手可能会忽略对无障碍性的考虑，如未为图像添加适当的alt属性、未为表单元素添加标签等。

2025-02-20 19:51:02 477

原创 HTML 图像标签使用陷阱

错误地设置图像大小：可以通过设置width和height属性来指定图像的显示大小，但是一些新手可能会错误地设置了不合适的大小值，导致图像在页面上显示过大或过小，从而破坏了页面的布局。引入错误的图像文件格式：在指定图像路径时，需要确保文件路径正确，并且引入的图像文件是正确的格式（如.jpg、.png等）。如果引入了错误的图像文件格式，图像将无法在浏览器中显示。总之，新手在使用<img>标签时需要注意设置alt属性、正确指定图像路径、正确选择图像文件格式，并且合理考虑图像大小对网页性能的影响。

2025-02-20 19:50:31 121

原创 CSS 伪类和伪元素的混淆

伪类（pseudo-class）是用于选择元素的特定状态或条件的关键词，表示元素在特定状态下的样式。常见的伪类有:hover（当鼠标悬停在元素上时）、:active（当元素被激活时）、:focus（当元素获得焦点时）等。1. 伪元素（pseudo-element）是用于在元素的特定位置插入内容的关键词，表示元素的某个部分的样式。常见的伪元素有::after（在元素内容之后插入内容）、::before（在元素内容之前插入内容）等。它们的作用是相似的，都用于对元素进行样式修饰，但它们的使用方式和语法有所不同。

2025-02-17 21:27:20 176

原创 JavaScript 类型转换的意外

在JavaScript中，类型转换是将一个数据类型转换为另一个数据类型的过程。它可以是显式的，即通过使用特定的转换函数或操作符来实现，也可以是隐式的，即由JavaScript引擎自动完成。为了避免这些错误，新手应该注意理解JavaScript中的类型转换规则，并在比较不同类型的值或进行数学运算时确保类型一致。字符串转换：使用String()函数或toString()方法可以将其他类型的值转换为字符串类型。新手常犯的错误之一是在比较不同类型的值时没有预期到自动类型转换的结果。

2025-02-17 21:25:59 421

原创什么是原型，有什么用？

原型是JavaScript实现继承的基础，它构成了JavaScript中对象之间的链式关系。1. **属性和方法的继承**：当我们访问对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会沿着原型链向上查找，直到找到对应的属性或方法。3. **构造函数与实例**：在JavaScript中，构造函数的`prototype`属性指向了一个对象，这个对象就是实例的原型。4. **动态性**：可以通过修改原型对象，动态地为已存在的对象添加新的属性和方法，这对于类似继承和扩展的需求非常有用。

2025-01-17 07:57:33 192

原创 http和https分别是什么？区别是什么？

HTTP协议通常承载于TCP协议之上，有时也承载于TLS或SSL协议层之上，这个时候，就成了我们常说的HTTPS。HTTP不提供任何加密，它是明文传输的，因此数据在传输过程中可能被窃取或篡改。而HTTPS使用SSL/TLS加密所有传输的数据，因此数据在传输过程中是安全的，不易被窃取或篡改。HTTPS开发的主要目的是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。HTTP和HTTPS是两种常见的网络协议，用于在Web上进行数据传输。3.端口：HTTP的默认端口是80，而HTTPS的默认端口是443。

2025-01-17 07:56:03 2785

空空如也

空空如也