响应式设计与媒体查询：一套代码，适配所有屏幕
一、为什么需要响应式设计？1.1 一个页面，千种屏幕打开你的博客，分别在以下设备上查看： 设备 典型宽度 使用场景 手机（竖屏） 375px 地铁上刷文章 手机（横屏） 812px 看视频、看代码 平板 768px - 1024px 沙发上阅读 笔记本 1366px - 1440px 日常办公 台式显示器 1920px+ 多窗口并行 超宽屏 2560px+ 专业工作站 截至 2025 年，全球超过 55% 的 Web 流量来自移动设备。如果一个网站只在桌面端好看，等于放弃了超过一半的用户。 1.2 两种策略：自适应 vs 响应式在响应式设计成为主流之前，存在两种思路： 策略 做法 缺点 自适应（Adaptive） 为手机和桌面各写一套页面（如 m.example.com） 维护两套代码，成本翻倍 响应式（Responsive） 一套 HTML/CSS，根据屏幕尺寸自动调整布局 需要对 CSS 有更深入的理解 响应式设计是 Ethan Marcotte 在 2010...
Flexbox 弹性布局实战：告别浮动，拥抱现代 CSS 布局
一、从"痛苦的浮动"到"丝滑的弹性"1.1 回到那个用 float 布局的年代在 Flexbox 诞生之前，CSS 布局主要依赖 float 和 position。这些属性最初并非为复杂布局设计——float 的本意是让文字环绕图片。 但前端开发者硬是用它们做出了多栏布局、导航栏、卡片网格……代价是各种 hack 技巧： 123456789101112131415161718/* 旧时代的"圣杯布局"——每个前端都经历过 */.left { float: left; width: 200px;}.right { float: right; width: 200px;}.main { margin: 0 200px; /* 避开左右浮动元素 */}/* 还得写 clearfix 清除浮动…… */.clearfix::after { content: ""; display: table;...
CSS 盒模型与基础样式：给网页穿上得体的衣服
一、CSS 是什么：网页的"视觉设计师"在系列第一篇文章中我们建立了这个类比： 技术 角色 HTML 结构骨架——定义"是什么" CSS 视觉表现——定义"长什么样" JavaScript 交互行为——定义"能做什么" CSS（Cascading Style Sheets，层叠样式表）的职责就是把浏览器默认的"素颜"HTML 变成你想要的任何视觉效果。 先看一个直观对比——同样一份 HTML，不加 CSS 和加了 CSS 的差异： 1234<!-- 没有 CSS：浏览器默认样式——黑白分明，毫无美感 --><h1>我的博客首页</h1><p>欢迎来到我的技术博客。</p><a href="#">阅读更多</a> 1234<!-- 有了 CSS：字体、颜色、间距、背景——焕然一新 --><h1...
JavaScript 表单交互与现代化重构：从原生弹窗到优雅交互
一、引言：从需求出发1.1 典型场景设想一个最简单的交互需求：用户在输入框中填入自己的名字，点击提交按钮后，页面向用户打个招呼。 这是 Web 开发中最基础的用户交互模式——获取输入 → 处理数据 → 给出反馈。尽管需求简单，但从代码质量的角度看，实现方式却有"能用"和"优雅"的天壤之别。 1.2 原始代码还原以下是初学者常写出的第一版代码。它能跑，但存在诸多值得推敲的地方： 123456789101112131415161718192021222324<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>打招呼</title></head><body> <form id="greetingForm"> <label...
HTML5 语义化入门：使用语义化标签构建个人博客首页
一、HTML 是什么：网页的"结构骨架"很多人初学前端时，会问："HTML 是一门编程语言吗？" 答案很明确：不是。 HTML 的全称是 HyperText Markup Language（超文本标记语言）。它没有变量、没有循环、没有条件判断——它唯一的职责，就是描述网页的内容结构。 一个恰当的类比是盖房子： 技术 类比 角色 HTML 钢筋水泥框架 结构骨架——哪里是墙、哪里是门、哪里是窗 CSS 装修涂料 视觉表现——颜色、字体、布局、动画 JavaScript 水电智能家居 交互行为——点击响应、数据加载、动态渲染 理解这个分工至关重要：HTML 负责"是什么"，CSS 负责"长什么样"，JavaScript 负责"能做什么"。三者各司其职，混乱分工是前端代码腐化的起点。 1.1 "语义化"是什么？为什么重要？在早期 Web 开发中，页面结构大量依赖 <div> 和 <span>...
