# 孙志锋的个人网站 - Sun Zhifeng's Personal Website 新码笔记是一个以html5,angular及node.js等全新代码创建的个人博客网站;本站主要记录个人在工作学习过程中一些前端设计及其前端开发领域的实例性知识注解,用于笔记以便巩固及对外分享的个人网站（sunzhifeng.com）。 ## 站点说明 - 规范站点：https://www.deathghost.cn/ - 首页 Markdown：https://www.deathghost.cn/index.md - Sitemap：https://www.deathghost.cn/sitemap.xml - 联系方式：me@deathghost.cn ## 主要页面 - [首页](https://www.deathghost.cn/)：最新文章、推荐文章、分类入口和站点导航。 - [首页 Markdown](https://www.deathghost.cn/index.md)：首页的文本版本，适合 AI 快速读取。 - [关于我](https://www.deathghost.cn/aboutMe)：作者简介、经历和联系方式。 - [关于我 Markdown](https://www.deathghost.cn/aboutMe.md)：关于页的文本版本。 - [手机号码测吉凶](https://www.deathghost.cn/numbers)：手机号码分析与选号页面。 - [手机号码测吉凶 Markdown](https://www.deathghost.cn/numbers.md)：号码页的文本版本。 ## 分类 - [HTML](https://www.deathghost.cn/catalog/html): HTML5语义标签布局 Markdown：https://www.deathghost.cn/catalog/html.md - [CSS](https://www.deathghost.cn/catalog/css): CSS3视觉结构优化控制 Markdown：https://www.deathghost.cn/catalog/css.md - [JavaScript](https://www.deathghost.cn/catalog/javascript): JavaScript行为效果交互 Markdown：https://www.deathghost.cn/catalog/javascript.md - [Angular](https://www.deathghost.cn/catalog/angular): SPA单页Web应用 Markdown：https://www.deathghost.cn/catalog/angular.md - [生活空间](https://www.deathghost.cn/catalog/life): 生活中的那点事 Markdown：https://www.deathghost.cn/catalog/life.md ## 近期文章 - [我的网站百度收录突然清零了](https://www.deathghost.cn/article/life/127) 2026年6月16日，deathghost.cn 在百度的 site: 收录突然清零。本文记录了从 robots.txt、noindex 标签、SSL 证书、301 重定向到百度搜索资源平台的完整排查过程，最终确认原因是百度 2026 年 6 月算法大更新导致低活跃独立站点被批量清理，并分享了应对思路与心态调整。 Markdown：https://www.deathghost.cn/article/life/127.md - [偏执的人心](https://www.deathghost.cn/article/life/126) 中国古代四大思想听起来高大上，其实就在你我身边。儒家教你做人，法家教你守规矩，道家劝你别折腾，墨家让你多帮人。 Markdown：https://www.deathghost.cn/article/life/126.md - [分享URL地址到微信朋友圈没有缩略图？](https://www.deathghost.cn/article/html/125) 分享URL网址到朋友圈啥时候支持og:image？还是说一直都支持的？一直也没在意，直到今天试了试我的鸿蒙系统应用分享，才…… Markdown：https://www.deathghost.cn/article/html/125.md - [糖宝 - 开启幼儿园生活模式](https://www.deathghost.cn/article/life/124) 时间真快，一转眼孩子都开始了幼儿园生活…… Markdown：https://www.deathghost.cn/article/life/124.md - [若有怜悯之心，何不学会给自己放生](https://www.deathghost.cn/article/life/123) 生活中的许多痛苦源于我们对事物的过度在意，而真正的解脱在于学会放下，顺其自然。通过心平气和的态度，我们可以更好地应对生活中的挑战，达到内心的宁静与健康。 Markdown：https://www.deathghost.cn/article/life/123.md - [回家：一场与回忆的久别重逢](https://www.deathghost.cn/article/life/122) 回家，不仅仅是一次空间的位移，更是一场与回忆的久别重逢。曾经的街巷、熟悉的旧物，都成了时光的注脚，承载着我们对过去的怀念和对未来的期许。 Markdown：https://www.deathghost.cn/article/life/122.md - [别跟生活较劲儿，过好咱这一辈子](https://www.deathghost.cn/article/life/121) 人生漫长，好多时候都自己跟自己过不去，被那些鸡毛蒜皮的事儿搅得心烦意乱，还老是在意别人咋看咱。尤其是感情这档子事儿，一旦搅和进去，那真是乱麻一团，根本分不清谁对谁错，也讲不出啥道理，就只剩满心的难受劲儿了。 Markdown：https://www.deathghost.cn/article/life/121.md - [JS原生的深拷贝API structuredClone()](https://www.deathghost.cn/article/javascript/120) 我喜欢新的，直接点的... Markdown：https://www.deathghost.cn/article/javascript/120.md - [释怀过往，悦己而往](https://www.deathghost.cn/article/life/119) 人生的下半场，善待自己，做个简单的人，少与人纠缠，不生气，不取悦，放下别人的错，解脱自己的心。 Markdown：https://www.deathghost.cn/article/life/119.md - [尊重差异，静候懂得](https://www.deathghost.cn/article/life/118) 每个人都怀揣独特梦想，彼此间存在差异是常态。强调不应强行改变他人，而是怀抱包容之心，尊重各自的追求，在岁月流转中，默默期许他人终能领悟生活真谛，懂得尊重他人梦想的重要，展现人性温暖与成长智慧。 Markdown：https://www.deathghost.cn/article/life/118.md - [戳破双标泡沫，化解目标冲突](https://www.deathghost.cn/article/life/117) 生活与职场仿若两个紧密交织的竞技场，日常相处、团队协作里，目标冲突催生的双标行径屡见不鲜。本文深入探讨这一现象，尝试寻找破解双标困境的方法，期望助力大家营造和谐共融的美好环境，让夫妻、同事间的相处回归正轨。 Markdown：https://www.deathghost.cn/article/life/117.md - [摒弃“小心思”，直面生活](https://www.deathghost.cn/article/life/116) 生活犹如一面镜子，复杂多变之际，不少人妄图以“小心思”走捷径、获私利，却不知他人洞若观火。本文深度剖析此现象，力倡真诚处世、踏实奋进，开启美好人生。 Markdown：https://www.deathghost.cn/article/life/116.md - [寻找一个自己的灵魂栖息地](https://www.deathghost.cn/article/life/115) 内心孤寂，渴望独处，在小区绿地、深夜窗边、街头等寻灵魂栖息地。 Markdown：https://www.deathghost.cn/article/life/115.md - [Web Worker 简单实例应用](https://www.deathghost.cn/article/javascript/114) 前端页面开发过程中或多或少会使用setInterval()与setTimeout()方法，这两天准备用它们做个简单的页面检测，谁料出现了问题... Markdown：https://www.deathghost.cn/article/javascript/114.md - [道中之法](https://www.deathghost.cn/article/life/113) 此道非道，此法非法。 Markdown：https://www.deathghost.cn/article/life/113.md - [CSS container容器查询](https://www.deathghost.cn/article/css/112) @container规则是CSS 根据指定容器尺寸发生变化时，在满足条件的情况下设置其内部元素样式。如同@media一般，不同的是@container针对容器元素，而@media针对的是浏览器窗口。 Markdown：https://www.deathghost.cn/article/css/112.md - [成年人的世界](https://www.deathghost.cn/article/life/111) 35岁以后的人生，走到了前不着村，后不着店的阶段；受到了委屈，也只能擦干眼泪，继续前行... Markdown：https://www.deathghost.cn/article/life/111.md - [当下状态皆因果](https://www.deathghost.cn/article/life/110) 后来，不懂爱的人慢慢懂了，懂爱的人却不敢再爱了，因果循环，都是命数。 Markdown：https://www.deathghost.cn/article/life/110.md - [取消页面再次加载后的滚动位置](https://www.deathghost.cn/article/javascript/109) 时常web页面中会用到或看到：history.forward()、history.back()或history.go(1)之类的操作，下面了解一个history另外一个属性 —— scrollRestoration 滚动恢复。 Markdown：https://www.deathghost.cn/article/javascript/109.md - [不要将生活、情感走到了底线](https://www.deathghost.cn/article/life/108) 最近情绪波动异常，寥寥几段不足成文，放空一下心灵。 Markdown：https://www.deathghost.cn/article/life/108.md - [学会倾听，先听Ta说](https://www.deathghost.cn/article/life/107) 沟通是事物之间发展变化的一个过程。在这个过程中总有一个或多个倾听者，就是因为有了这些倾听者，你才会不断的与Ta沟通交流。 Markdown：https://www.deathghost.cn/article/life/107.md - [HTML避免使用重复的SVG](https://www.deathghost.cn/article/html/106) Web页面中基本都会应用到图标这个元素，它不仅仅是页面的装饰元素，同时在视觉上可以简洁明了的引导用户进入相应的页面。起到一个潜意识交互作用。而在前端开发中最常见的方法就是使用 Font Icon 或 SVG Icon。 Markdown：https://www.deathghost.cn/article/html/106.md - [EyeDropper API - 启用浏览器吸管工具获取屏幕任意目标元素HEX色值](https://www.deathghost.cn/article/javascript/105) Photoshop、Illustrator等一些图形、图像设计软件都有一个吸管工具，作用就是拾取元素中某一位置的颜色，填充待作业的元素。Web开发中 HTML Input Color type 属性也可以做到类似效果，它类似Photoshop中前景色与背景色填色效果；那Web端有没有类似吸管工具的效果？ Markdown：https://www.deathghost.cn/article/javascript/105.md - [at 相对索引方法 - 查找元素](https://www.deathghost.cn/article/javascript/104) 查找数组元素是Web前端开发过程中常见的任务，如：查找数组中符合条件的元素或其下标。通常会通过find与findIndex方法查找元素与下标进行相应处理；以及查找数组中第一个元素或最后一个元素又或某一位置元素。 Markdown：https://www.deathghost.cn/article/javascript/104.md - [input[type=checkbox]与input[type=radio]颜色设置 - accent-color](https://www.deathghost.cn/article/css/103) Web前端开发中相信很多人面对表单元素都会将其原始样式重置或借助非表单元素来模拟表单控件，之所以这般操作，是因为表单控件显示取决于设备、操作系统和浏览器。为了达到UI风格的统一，不得已而为之。 Markdown：https://www.deathghost.cn/article/css/103.md - [CSS自定义属性 - 变量的声明与读取](https://www.deathghost.cn/article/css/102) 变量这个词在程序开发中基本都会用到，我们可以对其赋值，也可以存储且获取它。如果将其应用在CSS样式表中，又当如何呢？以前大家基本借助SCSS或LESS中变量定义亦或直接定义类。所以，今天看看原生CSS中如何自定义属性（即：CSS变量）应用。 Markdown：https://www.deathghost.cn/article/css/102.md - [:is() - 告别讨厌的选择器重复](https://www.deathghost.cn/article/css/101) 编写CSS时大部分人喜欢借用SCSS或LESS工具，想必大家也能体会到它的便捷性；同时也能感受到原始CSS编写时的麻烦。下面看看使用:is() CSS 伪类函数如何优雅处理重复父选择器的问题。 Markdown：https://www.deathghost.cn/article/css/101.md - [始终显示input标签在type值为number状态下的箭头](https://www.deathghost.cn/article/css/100) "number"类型的 元素用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。右侧末端将会有上下箭头可供鼠或手指对输入的数值进行增加或减少操作。 Markdown：https://www.deathghost.cn/article/css/100.md - [HTML ... 还有这操作？](https://www.deathghost.cn/article/html/99) 许多原生的HTML元素及其属性，我们在实际开发中很少应用，可能因为兼容及不统一性；但是，有些元素及其属性值得一览，实际项目开发过程中还是有一定的帮助。 Markdown：https://www.deathghost.cn/article/html/99.md - [分享一个免费录屏软件 - Captura](https://www.deathghost.cn/article/life/98) 平时工作中使用ScreenToGif做简单的屏幕录制图片或视频，素材太大速度有点慢。今天发现一个相对比较好用的屏幕录制软件；可操作导出视频、截图、Gif等格式，速度还挺快顺带分享一下，希望对你有用。 Markdown：https://www.deathghost.cn/article/life/98.md - [CSS 设置插入光标形状与颜色](https://www.deathghost.cn/article/css/97) 当你在一个文本框或某种应用中输入文字时,总有一个光标来显示你将要输入文字的位置。大部分的光标都为一个小竖线闪动状态；我们在使用计算机过程中，有些场景下光标还有短下划线或块状式样的，下面看看如何通过CSS定义插入指针的形状与颜色…… Markdown：https://www.deathghost.cn/article/css/97.md - [CSS filter 滤镜 - 快速设置页面深色主题模式](https://www.deathghost.cn/article/css/96) 手机设置中的深色模式、后台管理系统中的主题切换以及有些网站中的明暗主题样式切换等都是一种视觉上的处理。作用也就是让用户可以在不同的光线环境下自主选择，同时也是对眼睛的一种放松。 Markdown：https://www.deathghost.cn/article/css/96.md - [使用CSS :target 伪类实现Drawer抽屉弹窗与Modal模态对话框](https://www.deathghost.cn/article/css/95) Web应用中时常会看到一些弹窗，如抽屉(侧滑弹窗)与模态对话框之类组件，通常我们会通过JavaScript实现其显示与否，下面看看通过CSS伪类:target如何实现。 Markdown：https://www.deathghost.cn/article/css/95.md - [使用了HTML标签中的 download 属性，却出现了意外](https://www.deathghost.cn/article/html/94) 我们都知道HTML5新增了download属性，此属性指示浏览器下载 URL 而不是导航到它，提示用户将其保存为本地文件。以前看到过此属性，一直以来页面中却很少使用到，今天在项目中应用到此属性，却出现了意外... Markdown：https://www.deathghost.cn/article/html/94.md - [:fullscreen设置元素在全屏模式下的CSS样式](https://www.deathghost.cn/article/css/93) 全屏API可以让Web前端开发人员通过JavaScript轻松控制浏览器全屏模式的进入与退出，如同按下F11键一样的效果。这篇文章不谈JavaScript，看看CSS如何设置在处于全屏模式下元素的样式。 Markdown：https://www.deathghost.cn/article/css/93.md - [Intl.NumberFormat数字格式化应用](https://www.deathghost.cn/article/javascript/92) Web前端开发过程中常会对后端传递过来的数值类型的对象进行格式化处理，以便用户更好的阅读。例如：数据统计里的数值、货币、百分比、角度、字节、面积、质量、温度、长度、容量及一些符合单位等数据类型进行处理转换。所以下面看看关于Intl.NumberFormat对象对这些数值如何处理。 Markdown：https://www.deathghost.cn/article/javascript/92.md - [Intl.ListFormat对象 根据语言环境进行列表格式化](https://www.deathghost.cn/article/javascript/91) Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。下面这篇文章了解下关于Intl.ListFormat对象，针对列表元素进行数据格式化。 Markdown：https://www.deathghost.cn/article/javascript/91.md - [后来](https://www.deathghost.cn/article/life/90) 两年过去了，后来听说，那根蜡烛又被点燃了，可那个人再也没见过。 Markdown：https://www.deathghost.cn/article/life/90.md - [剪贴板 navigator.clipboard API 异步读写](https://www.deathghost.cn/article/javascript/89) Web开发人员在实际工作中多少会遇到与用户剪贴板进行交互，以便实现用户体验需求。剪贴、复制、粘贴这几个操作也是计算机操作中常常会使用的几个功能按键。前端开发人员第一个想到的就是document.execCommand()方法，下面看看新的API方法，它的出现就是为了取代document.execCommand()方法。 Markdown：https://www.deathghost.cn/article/javascript/89.md - [Angular自定义预加载策略](https://www.deathghost.cn/article/angular/88) 预加载是介于直接加载与懒加载的一种方式。懒加载是为了降低初始化所需时间，预加载是为了提升即将进入路由模块时间。 Markdown：https://www.deathghost.cn/article/angular/88.md - [Angular CDK 工具包 Clipboard 剪贴板](https://www.deathghost.cn/article/angular/87) Web页面中偶尔会使用到快捷复制功能操作，更常见的可能是后台数据管理项目中。如用户姓名、电话与地址，因布局结构设计，不便于一次性复制这些数据，这时就需要一个复制按钮（小图标）进行操作。下面看看Angular工具里的Clipboard包应用。 Markdown：https://www.deathghost.cn/article/angular/87.md - [CSS text-combine-upright 竖行横书组合](https://www.deathghost.cn/article/css/86) 我们都知道竖书成行，自右向左换行是古文中的一种书写方式。那么在CSS中writing-mode就定义了文本在水平或垂直方向上排列方式。下面我们通过writing-mode这个属性定义一个“竹简”书写方式，同时如果在竖行文本中穿插阿拉伯数字时又当如何？ Markdown：https://www.deathghost.cn/article/css/86.md - [关于 CSS函数min()、max()与clamp()的使用](https://www.deathghost.cn/article/css/85) 随着响应式设计的发展且日益细化，CSS本身也在不断发展，并为前端开发者提供了更多的选择与控制权；对于我们而言归功于现代浏览器的支持。下面了解如何使用这些受支持的CSS函数控制元素的大小进而满足前端工程师在实际项目中的应用。 Markdown：https://www.deathghost.cn/article/css/85.md - [String.prototype.replaceAll 替换字符串新方法](https://www.deathghost.cn/article/javascript/84) 通常我们使用JavaScript处理字符串的时候会使用replace方法。String.prototype.replace(searchValue, replacement)指定字符串及所需替换为某一字符串，最后返回一个被替换过的字符串。那么，接下来看看关于replaceAll()方法。 Markdown：https://www.deathghost.cn/article/javascript/84.md - [数字的诱惑 - 手机号码之手机靓号、情侣号码与手机号码测吉凶](https://www.deathghost.cn/article/life/83) 手机号码通常是由11位数字组成，当有规律的排列，顺口或有多个重复排列，组合循环等最受欢迎，称之为手机靓号；换号 - 网上选号、买号、手机号码测吉凶 - 百万精选手机靓号，移动、联通、电信手机情侣靓号、豹子号、生日号、老板号、炸弹号、商旅号、顺子号、回文号、风水号应有尽有！ Markdown：https://www.deathghost.cn/article/life/83.md - [Angular 组件交互 ngOnChanges 监听某一属性值变更](https://www.deathghost.cn/article/angular/82) 我们在实际项目中会拆分各个功能模块，以便页面复用，避免重复工作。那么，这里就涉及到组件之间的交互问题。例如常使用的，输入型数据绑定、setter截听、ngOnChanges()截听以及通过创建引入服务来通讯。这篇文章着重看下关于ngOnChanges()方法监听数据变更。 Markdown：https://www.deathghost.cn/article/angular/82.md - [你是一名演员也是一位导演](https://www.deathghost.cn/article/life/81) 人生虽如戏，却不是在演戏！人生道路上，你既是一名演员，也是一位导演。自导自演的人生均由自己掌控；在这部“人生”的剧本里，想扮演一个什么样的角色呢？ Markdown：https://www.deathghost.cn/article/life/81.md - [延迟加载IFRAME](https://www.deathghost.cn/article/html/80) IFRAME是HTML标签，在当前 HTML 文档中嵌入另一个文档。有关详情请查阅文档，这里我们先了解关于在浏览器中的延迟加载（懒加载）特性。 Markdown：https://www.deathghost.cn/article/html/80.md - [MutationObserver监听DOM变更应用](https://www.deathghost.cn/article/javascript/79) MutationObserver接口提供了实时检测DOM属性或节点变更时调用。犹如单页面应用中的数据双向绑定监听其数据变更一般。只要属性或节点变更，就执行其他操作。 Markdown：https://www.deathghost.cn/article/javascript/79.md - [CSS background-repeat 背景图的重复方式](https://www.deathghost.cn/article/css/78) 我们都知道background-repeat 是 CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复，今天看看另2个属性值效果。 Markdown：https://www.deathghost.cn/article/css/78.md ## 给 AI 抓取器的提示 - 引用网页时优先使用规范 HTML URL。 - 需要紧凑文本内容时，优先读取同路径的 Markdown alternate URL。 - Markdown alternate 已通过 HTML link 标签和 HTTP Link 头暴露。 - 搜索结果页属于查询结果，不建议索引；文章、分类、首页和关于页更适合作为长期知识入口。