借助 Custom Highlight API，我们可以在无需修改 DOM 就能定位文本并为其应用样式，获取类似浏览器原生查找的体验。

一、行内元素、块元素、空元素 行内元素：span、img、input... 块级元素：div、footer、header、h... 空元素：br、hr... 元素之间的转换问题： display：in

作为一名前端开发者，我们一定都遇到过这样的需求：实现一个占满整个屏幕的欢迎页、弹窗蒙层或者一个 fixed 定位的底部菜单。 直觉告诉我们，这很简单，给它一个 `height: 100vh` 就行了

全面梳理优化：固定尺寸稳住CLS；首屏LCP图提优先级、禁用懒加载；用AVIF/WebP与w+sizes做响应式；首屏外懒加载与异步解码；配合content-visibility与预加载。

在前端开发的日常工作中，移动端适配是一个必绕不开的技术难题。随着不同手机尺寸、分辨率、像素密度的爆炸式增长，如果不进行适配，就会出现「iPhone 显示刚好，安卓一塌糊涂」的尴尬局面 😅。所以，想要在

📚 目录 HTML基础篇 CSS选择器篇 CSS布局篇 CSS动画篇 响应式设计篇 浏览器兼容性篇 性能优化篇 🎯 HTML基础篇 1. HTML5新增的语义化标签有哪些？ 答案： 详解： HTML5

Vue 开发者可能都注意到，UnoCSS 的讨论频率越来越高。它不像 Tailwind 那样有营销声势，不像 Windi 那样起得早，却在 2024 年之后逐渐“渗透”进越来越多的 Vue 项目中。很

你见过猫偷懒吗？图片也能！本篇用段子和代码，教你让网页图片“按需现身”，性能飞升，体验爆表，前端人的快乐源泉！😎

你是否想过，网页中那些炫酷的图片、文件下载、本地预览功能背后，隐藏着怎样的“黑科技”？这一切的秘密，都藏在一个被誉为 HTML5 王者对象的神器——Blob 之中。

什么是影子DOM? ​ 影子DOM 是 Web Components 标准套件中的一项关键技术。它允许你将一个隐藏的、独立的 DOM 树附加到一个常规的 DOM 元素上。 你可以把它想象成一个“DOM

...通常都有一些炫酷的效果 比如这样的 这样的 还有这样的 哎等等，你发现没有，后面两张的窗口长得很相似，只是第二张比较矮，第三张比较高，那么是不是要做两张素材来支持这种形式呢？...

那些年，我们被 HTML 折磨的日子 还记得刚开始学前端的时候吗？写一个简单的导航栏，要手动敲几十行代码： 手都敲酸了有木有！😭 而且一不小心少写个闭合标签，浏览器就给你脸色看。

过去我们总说“设计与实现之间有鸿沟”。设计师在 Figma 中交付精美的 UI，前端开发却要手动把它们翻译成 HTML/CSS，费时又容易跑偏。 但今天，借助 Figma Dev Mode + VS

你有没有想过，网页上那些炫酷的游戏、动态数据图表、甚至在线涂鸦板，是怎么实现的？其实它们背后都藏着一个 “神级工具”——HTML5 的<canvas>标签。这个看似简单的画布，能让你用代码画出任何东西

现代 JavaScript 不再依赖臃肿的第三方库，而是提供了 Intl API——这是一种强大的原生方案，可轻松处理国际化需求。它无声地提醒着我们：Web 真正具备了全球属性。

在 CSS 世界里，边框不只是 border 一条路。你可能一直用 border 写边框，hover 时元素宽度变化、渐变边框做不出来……其实，现在有更酷、更灵活的方式来实现边框效果。

Modal弹窗，可以说是我们前端UI界面里的“标配”了。但这个组件，恰恰是团队里代码质量的“重灾区”。 我见过太多用div手写的弹窗了：z-index满天飞、焦点管理一塌糊涂、背景页面还能滚动、Esc

✨利用 CSS 蒙版与 JavaScript 动态变量，实现鼠标跟随、滚轮缩放与自然闪烁的聚光灯效果。

前端世界里有很多看似“直白”的属性，比如 position: sticky，听起来像是“粘住某个位置”——只要设置好就能吸附在页面某个位置上，滚动时一动不动。 结果实际开发中你可能经历过以下崩溃三连：