2301_81726198的博客

原创 git常用忽略配置

DS_Storedist/yarn.lockmock.idea.vscode*.suo*.ntVS**.njsproj*.sln。

原创 webpack开发模式与生产模式（webpack --mode=development/production“, ）

（生产模式）是两种常见的构建环境配置，主要区别体现在构建速度、代码优化和调试支持等方面。在webpack配置文件中通过。

原创 NPM模块化总结

本地软件包：封装属性/方法，在当前项目中使用，例如：dayjs，lodash。* 概念：每个文件就是一个模块，独立作用域，按需加载，需使用特定语法导出导入。* 命名导入：import { 同名变量 } from '模块名或路径'* 全局软件包：封装工具/命令，在本机中使用，例如：nodemon。* 默认导入：import 变量名 from '模块名或路径'* 下载全局软件包：npm i 软件包名 -g。* 下载本地软件包：npm i 软件包名。

原创 认识_Promise 的状态

Promise 的状态改变有什么用：调用对应函数，改变 Promise 对象状态后，内部触发对应回调函数传参并执行。状态的英文字符串，可以理解为 Promise 对象内的字符串标识符，用于判断什么时候调用哪一个处理函数。注意：每个 Promise 对象一旦被兑现/拒绝，那就是已敲定了，状态无法再被改变。知道 Promise 对象如何关联的处理函数，以及代码的执行顺序。待定（pending）：初始状态，既没有被兑现，也没有被拒绝。为什么要了解 Promise 的三种状态？Promise 有哪三种状态？

原创 XMLHttpRequest的基础使用

【代码】XMLHttpRequest的基础使用。

原创 clientHeight(用于获取元素的可视高度)

返回元素内部的高度（以像素为单位），这个高度包括内容区域和内边距（padding），但不包括边框、滚动条和外边距。：它通常用于获取元素在屏幕上实际显示的高度，比如确定一个容器在不滚动的情况下能显示多少内容。是一个只读属性，你不能设置它的值。

原创 构造函数、对象原型、实例对象

只要有原型对象就用constructor,只要有对象就有__proto__构造函数、对象原型、实例对象三者关系。

原创 数组常见实例方法

原创 JS进阶-day1 作用域&解构&箭头函数

在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此。作用域链——>底层变量查找机制（先在当前函数作用域查找，如果找不到，就沿着作用域链向上级作用域查找，直到全局作用域）使用var关键字声明变量会有变量提升，所有var声明的变量提升到 当前作用域的最前面。概念：一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域。局部作用域——>函数作用域、块级作用域。2.只提升变量声明，不提升变量赋值。3.然后依次执行代码。

原创 Web-API-day4 DOM节点

parent.insertBefore(child,refChild) // insertBefore(插入的元素, 放到哪个元素的前面)看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html。查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html。查看基本使用流程 https://www.swiper.com.cn/usage/index.html。

原创 Web-API-day3 DOM事件进阶

实现：事件对象.target. tagName 可以获得真正触发事件的元素。mouseenter 和 mouseleave 没有冒泡效果 (推荐)，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事。mouseover 和 mouseout 会有冒泡效果。事件委托是利用事件流的特征解决一些开发需求的知识技巧。原理：事件委托其实是利用事件冒泡的特点。优点：减少注册次数，可以提高程序性能。注意：匿名函数无法解绑。

原创 Web-API-day2 间歇函数setInterval与事件监听addEvenListener

本文介绍了JavaScript中间歇函数和事件监听的基本用法。间歇函数setInterval()以毫秒为单位重复执行指定函数，可通过clearInterval()停止。事件监听使用addEventListener()方法，支持多种事件类型：鼠标事件（click、mouseenter等）、焦点事件（focus、blur）、键盘事件（keydown、keyup）以及表单输入事件（input）。

原创 VW(viewport width)

vw表示当前视口宽度的1%。1vw等于视口宽度的1%，100vw等。

原创 媒体查询（Media Query）

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询。使用 @media 查询，可以针对不同的媒体类型定义不同的样式。media feature 媒体特性 必须有小括号包含。@media 可以针对不同的屏幕尺寸设置不同的样式。only：指定某个特定的媒体类型，可以省略。and：可以将多个媒体特性连接到一起，相当于。用 @media 开头 注意@符号。not：排除某个媒体类型，相当于。mediatype 媒体类型。

原创 Flex布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局。

原创 CSS3盒子模型

【代码】CSS3盒子模型。

原创 CSS背景图

【代码】CSS背景图。

原创 Web-API-day1 DOM 文档对象模型

自定义属性 // 1. 获取元素// 2. 获取自定义属性值

原创 JS声明变量

2.建议数组和对象使用const来声明（因为对象是引用类型，里面存续的是地址，只要地址不变就不会报错）3.若基本数据类型的值或者引用类型的地址发生变化的时候，需要用let。1.声明变量优先使用const,若发现变量以后要修改，再改为let。

原创 CSS3-3D转换

3D旋转rotated3d(x,y,z,deg) x,y,z是矢量，用1或0表示，表示是否旋转。三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的,y轴:垂直向下注意 :y下面是正值，上面是负值。z轴:垂直屏幕注意:往外面是正值，往里面是负值。x轴:水平向右注意:x右边是正值，左边是负值。-----这个属性很重要。

原创 CSS3动画

【代码】CSS3动画。

原创 CSS3 2D转换

translate最大的优点就是不会影响其他元素的位置。对行内标签没有效果！translate(50%,50%)移动的距离是盒子本身的一半。

原创 网站TDK三大标签SEO优化

meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配。<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判。家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物。

原创 LOGO SEO优化

logo设计需兼顾SEO优化与用户体验，关键步骤包括：1.使用h1标签提升搜索引擎权重；2.嵌入返回首页的链接并设置logo背景；3.隐藏链接文字可采用text-indent移出或font-size归零的方法；4.添加title属性提供鼠标悬停提示。这些技巧既满足搜索引擎收录要求，又保持页面美观性。

原创 CSS3的新特性

box-sizing:content-box 盒子大小为width+padding+border。但是这个元素属于行内元素，before、after必须有content属性。box-sizing：border-box 盒子大小就是width。

原创 HTML5的新特性

音频标签和视频标签使用方式基本一致浏览器支持情况不同谷歌浏览器把音频和视频自动播放禁止了我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以(可以通过JavaScript解决)视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性。

原创 css用户样式

描述。

原创 前端精灵图sprites的使用(通过移动背景图片位置）

一旦精灵图加载完成，所有包含的图像元素都能立即显示。使用精灵图可以合并为一个请求，来提高页面加载速度。浏览器加载每个图像都需要单独的http请求。特别适合包含许多小图标、按钮的网站。

原创 overflow溢出

【代码】overflow溢出。

原创 浮动float产生原来的目的是做文字环绕

原创 定位问题position

1.relative相对对位：占有原来的位置。以浏览器为准定位进行移动top/left/right/bottom2.absolute绝对定位：不占有原来的位置（脱标）如果没有祖先元素或者祖先元素没有定位，以浏览器为准定位；如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位祖先元素为参考点移动位置；加了绝对定位的盒子不能通过margin：0 auto垂直水平居中，但可以通过算法居中3.fixed固定定位：不占有原先的位置（脱标）。以浏览器的可视窗口进行定位，跟父元素没有任何关系，不随滚动条滚动

原创 CSS属性书写顺序

3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-world。1.布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式）4.其他属性（css3）：content/cursor/border-radius/box-shadow/text-shadow。

原创 DAY2-study

border-style:solid(实线）/dashed(虚线）/dotted(点线边框)继承来的样式权重为0，无论父元素选择器权重多高。border-width //边框粗细。border-color //边框颜色。

原创 day1学习

CSS中的display属性用于控制元素的显示方式，常见属性包括： block：块级元素，独占一行，可设置宽高，如div、h1等。 inline：行内元素，可在一行显示多个，但无法直接设置宽高，如span、a等。 inline-block：行内块元素，兼具行内和块级特性，可设置宽高，如img、input等。 none：隐藏元素，不占据空间。 flex：弹性布局，用于创建灵活的布局结构，如justify-content和align-items控制对齐方式。 这些属性为网页布局提供了多样化的控制方式。