# 孙志锋的个人网站 - Sun Zhifeng's Personal Website

新码笔记是一个以html5,angular及node.js等全新代码创建的个人博客网站;本站主要记录个人在工作学习过程中一些前端设计及其前端开发领域的实例性知识注解,用于笔记以便巩固及对外分享的个人网站（sunzhifeng.com）。

Canonical: https://www.deathghost.cn/

Keywords: DeathGhost, 孙志锋, sunzhifeng.com, 新码笔记, 个人博客, 个人网站, 前端, 前端开发, web前端, web前端开发, 前端笔记, 前端工具, JSON格式化, 图片压缩, EMOJI 搜索, 手机号码测试, 设计, 开发, 博客, 个人博客网站, 前端博客, HTML, HTML5, CSS, CSS3, JavaScript, ECMAScript, JS, Angular, Node.js, 前端框架, 全栈开发

## Recommended

- [CSS 设置插入光标形状与颜色](https://www.deathghost.cn/article/css/97)
  2021-06-10 21:40:33 - 当你在一个文本框或某种应用中输入文字时,总有一个光标来显示你将要输入文字的位置。大部分的光标都为一个小竖线闪动状态；我们在使用计算机过程中，有些场景下光标还有短下划线或块状式样的，下面看看如何通过CSS定义插入指针的形状与颜色……

## Latest

- [分享URL地址到微信朋友圈没有缩略图？](https://www.deathghost.cn/article/html/125)
  2025-11-25 21:43:58 - 分享URL网址到朋友圈啥时候支持og:image？还是说一直都支持的？一直也没在意，直到今天试了试我的鸿蒙系统应用分享，才……
- [JS原生的深拷贝API structuredClone()](https://www.deathghost.cn/article/javascript/120)
  2025-01-25 13:35:28 - 我喜欢新的，直接点的...
- [Web Worker 简单实例应用](https://www.deathghost.cn/article/javascript/114)
  2023-09-04 19:43:06 - 前端页面开发过程中或多或少会使用setInterval()与setTimeout()方法，这两天准备用它们做个简单的页面检测，谁料出现了问题...

## HTML

HTML5语义标签布局

- [分享URL地址到微信朋友圈没有缩略图？](https://www.deathghost.cn/article/html/125)
  2025-11-25 21:43:58 - 分享URL网址到朋友圈啥时候支持og:image？还是说一直都支持的？一直也没在意，直到今天试了试我的鸿蒙系统应用分享，才……
- [HTML避免使用重复的SVG](https://www.deathghost.cn/article/html/106)
  2022-04-24 23:19:20 - Web页面中基本都会应用到图标这个元素，它不仅仅是页面的装饰元素，同时在视觉上可以简洁明了的引导用户进入相应的页面。起到一个潜意识交互作用。而在前端开发中最常见的方法就是使用 Font Icon 或 SVG Icon。
- [HTML ... 还有这操作？](https://www.deathghost.cn/article/html/99)
  2021-07-13 20:02:29 - 许多原生的HTML元素及其属性，我们在实际开发中很少应用，可能因为兼容及不统一性；但是，有些元素及其属性值得一览，实际项目开发过程中还是有一定的帮助。

## CSS

CSS3视觉结构优化控制

- [CSS container容器查询](https://www.deathghost.cn/article/css/112)
  2023-02-28 19:12:24 - @container规则是CSS 根据指定容器尺寸发生变化时，在满足条件的情况下设置其内部元素样式。如同@media一般，不同的是@container针对容器元素，而@media针对的是浏览器窗口。
- [input[type=checkbox]与input[type=radio]颜色设置 - accent-color](https://www.deathghost.cn/article/css/103)
  2021-10-15 22:16:11 - Web前端开发中相信很多人面对表单元素都会将其原始样式重置或借助非表单元素来模拟表单控件，之所以这般操作，是因为表单控件显示取决于设备、操作系统和浏览器。为了达到UI风格的统一，不得已而为之。
- [CSS自定义属性 - 变量的声明与读取](https://www.deathghost.cn/article/css/102)
  2021-09-17 21:19:04 - 变量这个词在程序开发中基本都会用到，我们可以对其赋值，也可以存储且获取它。如果将其应用在CSS样式表中，又当如何呢？以前大家基本借助SCSS或LESS中变量定义亦或直接定义类。所以，今天看看原生CSS中如何自定义属性（即：CSS变量）应用。

## JavaScript

JavaScript行为效果交互

- [JS原生的深拷贝API structuredClone()](https://www.deathghost.cn/article/javascript/120)
  2025-01-25 13:35:28 - 我喜欢新的，直接点的...
- [Web Worker 简单实例应用](https://www.deathghost.cn/article/javascript/114)
  2023-09-04 19:43:06 - 前端页面开发过程中或多或少会使用setInterval()与setTimeout()方法，这两天准备用它们做个简单的页面检测，谁料出现了问题...
- [取消页面再次加载后的滚动位置](https://www.deathghost.cn/article/javascript/109)
  2022-06-11 12:40:44 - 时常web页面中会用到或看到：history.forward()、history.back()或history.go(1)之类的操作，下面了解一个history另外一个属性 —— scrollRestoration 滚动恢复。

## Angular

SPA单页Web应用

- [Angular自定义预加载策略](https://www.deathghost.cn/article/angular/88)
  2021-01-07 20:52:43 - 预加载是介于直接加载与懒加载的一种方式。懒加载是为了降低初始化所需时间，预加载是为了提升即将进入路由模块时间。
- [Angular CDK 工具包 Clipboard 剪贴板](https://www.deathghost.cn/article/angular/87)
  2020-12-22 22:08:08 - Web页面中偶尔会使用到快捷复制功能操作，更常见的可能是后台数据管理项目中。如用户姓名、电话与地址，因布局结构设计，不便于一次性复制这些数据，这时就需要一个复制按钮（小图标）进行操作。下面看看Angular工具里的Clipboard包应用。
- [Angular 组件交互 ngOnChanges 监听某一属性值变更](https://www.deathghost.cn/article/angular/82)
  2020-09-08 20:23:40 - 我们在实际项目中会拆分各个功能模块，以便页面复用，避免重复工作。那么，这里就涉及到组件之间的交互问题。例如常使用的，输入型数据绑定、setter截听、ngOnChanges()截听以及通过创建引入服务来通讯。这篇文章着重看下关于ngOnChanges()方法监听数据变更。

## 生活空间

生活中的那点事

- [偏执的人心](https://www.deathghost.cn/article/life/126)
  2026-02-16 11:52:29 - 中国古代四大思想听起来高大上，其实就在你我身边。儒家教你做人，法家教你守规矩，道家劝你别折腾，墨家让你多帮人。
- [糖宝 - 开启幼儿园生活模式](https://www.deathghost.cn/article/life/124)
  2025-03-04 22:08:44 - 时间真快，一转眼孩子都开始了幼儿园生活……
- [若有怜悯之心，何不学会给自己放生](https://www.deathghost.cn/article/life/123)
  2025-02-08 22:08:07 - 生活中的许多痛苦源于我们对事物的过度在意，而真正的解脱在于学会放下，顺其自然。通过心平气和的态度，我们可以更好地应对生活中的挑战，达到内心的宁静与健康。