HTML / CSS大前端
前端开发基石：HTML/CSS/JavaScript 核心与开发环境
HTML5 语义化标签提升 SEO 与无障碍访问，CSS3 掌握选择器权重盒模型及 FlexGrid 布局响应式设计，JavaScript 理解变量作用域数据类型函数对象，配合 VS Code 插件与 Chrome DevTools 构建高效开发环境。内容涵盖前端三大基石的核心概念与实践示例，适合初学者夯实基础。
HTML5 语义化标签提升 SEO 与无障碍访问，CSS3 掌握选择器权重盒模型及 FlexGrid 布局响应式设计，JavaScript 理解变量作用域数据类型函数对象，配合 VS Code 插件与 Chrome DevTools 构建高效开发环境。内容涵盖前端三大基石的核心概念与实践示例，适合初学者夯实基础。
万丈高楼平地起，任何宏伟的前端工程都离不开最基础的三大核心技术：HTML、CSS 和 JavaScript。本篇将带你夯实这些基石，同时搭建高效的开发环境，为后续的进阶之路做好充分准备。
HTML 是网页的骨架，而 HTML5 带来的语义化标签让骨架更加清晰、可读。良好的语义化不仅有助于搜索引擎理解页面内容（SEO），还能提升代码的可维护性和无障碍访问性（a11y）。
在 HTML5 之前，我们常用 <div> 来划分页面区域，但 <div> 本身没有任何语义。HTML5 引入了一系列语义标签，让页面结构一目了然。
| 标签 | 含义 | 典型使用场景 |
|---|---|---|
<header> | 页眉 | 页面顶部、文章头部、logo、导航 |
<nav> | 导航链接 | 主导航菜单、侧边栏导航 |
<main> | 主要内容区域 | 每个页面唯一，包含核心内容 |
<article> | 独立的自包含内容 | 博客文章、新闻条目、评论 |
<section> | 主题性内容分组 | 文章的章节、页面的区块 |
<aside> | 侧边栏或补充内容 | 广告、相关链接、作者简介 |
<footer> | 页脚 | 版权信息、联系方式、站点地图 |
示例代码：一个典型的博客文章页面结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化 HTML 示例</title>
</head>
<body>
<header>
<h1>我的技术博客</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>理解 HTML5 语义化</h2>
<p>发布于 <time datetime="2025-03-17">2025 年 3 月 17 日</time></p>
</header>
<section>
<h3>为什么需要语义化？</h3>
<p>语义化标签让机器（如搜索引擎、屏幕阅读器）更好地理解内容结构...</p>
</section>
<section>
<h3>常用标签实践</h3>
<p>在本文中，我们介绍了 header, nav, main 等标签...</p>
</section>
<footer>
<p>标签：<a href="/tags/html">HTML</a>, <a href="/tags/semantic">语义化</a></p>
</footer>
</article>
<aside>
<h3>关于作者</h3>
<p>前端开发者，热爱分享技术。</p>
</aside>
</main>
<footer>
<p>© 2025 我的技术博客。保留所有权利。</p>
</footer>
</body>
</html>
SEO 小提示：
<h1> 到 <h6> 构建清晰的标题层级，搜索引擎会抓取这些作为页面重点。<meta name="description"> 提供页面摘要，影响搜索结果展示。可访问性（Accessibility，缩写 a11y）确保所有用户，包括残障人士（如视障、听障），都能正常使用网页。HTML5 语义标签已经提供了天然的 accessibility 支持，但有时我们需要借助 ARIA（Accessible Rich Internet Applications）来增强复杂组件的可访问性。
ARIA 的核心属性：
role：定义元素的角色，如 role="navigation"、role="search"。aria-label：为元素提供文本标签，用于屏幕阅读器。aria-labelledby：引用其他元素的 ID 作为标签。aria-hidden：隐藏屏幕阅读器不需要朗读的元素。示例：一个自定义的可访问按钮
<button aria-label="关闭" onclick="closeDialog()">X</button>
屏幕阅读器会朗读'关闭'而不是冰冷的'X'。在实际开发中，我们应优先使用原生 HTML 元素（如 <button>、<a>），因为它们自带可访问性。只有当必须模拟非标准组件（如自定义下拉框）时，才需引入 ARIA。
CSS 负责网页的视觉呈现。掌握选择器权重、盒模型、现代布局（Flex/Grid）以及响应式设计，是写出优雅样式的基础。
选择器权重：当多个规则同时作用于同一元素时，权重高的规则生效。权重计算规则（按优先级从高到低）：
!important（最高，应谨慎使用）style="..."）#header）.nav、[type="text"]、:hover）div、::before）*、+、>）示例：
/* 权重 (0,1,0) */
.nav {
color: blue;
}
/* 权重 (0,0,1) */
div {
color: red;
}
/* 内联样式 权重 (1,0,0) */
<div style="color: green;">文本</div> <!-- 实际显示绿色 -->
盒模型：每个元素都可以看作一个盒子，由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。标准盒模型中，width/height 只包含内容；而怪异盒模型（IE 盒模型）中，width/height 包含 content、padding、border。通过 box-sizing 切换：
/* 标准盒模型 */
.box {
box-sizing: content-box;
width: 200px;
padding: 20px;
/* 实际占用宽度 200 + 20*2 = 240px */
}
/* 怪异盒模型（推荐） */
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
/* 实际占用宽度仍为 200px（内容区被压缩为 160px） */
}
Flex 和 Grid 是目前最主流的布局方式，它们解决了传统 float 布局的诸多痛点。
| 特性 | Flexbox | Grid |
|---|---|---|
| 适用场景 | 一维布局（行或列） | 二维布局（同时控制行和列） |
| 主要属性 | display: flex | display: grid |
| 容器属性 | flex-direction, justify-content, align-items, flex-wrap | grid-template-rows, grid-template-columns, gap, justify-items |
| 项目属性 | flex-grow, flex-shrink, align-self | grid-row, grid-column, justify-self |
Flex 示例：实现水平垂直居中
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 1px solid #ccc;
}
.item {
width: 100px;
height: 100px;
background: deepskyblue;
}
Grid 示例：实现经典的圣杯布局（header, footer, 三列）
.grid-container {
display: grid;
grid-template-rows: auto 1fr auto; /* 三行：头部自适应，中间占满剩余，底部自适应 */
grid-template-columns: 200px 1fr 200px; /* 三列：左右固定 200px，中间自适应 */
min-height: 100vh;
}
.header {
grid-column: 1 / -1; /* 从第一列到最后一列，即横跨整个网格 */
background: #f0f0f0;
}
.footer {
grid-column: 1 / -1;
background: #f0f0f0;
}
.left {
background: #ccc;
}
.main {
background: #fff;
}
.right {
background: #ccc;
}
<div class="grid-container">
<header class="header">Header</header>
<aside class="left">Left Sidebar</aside>
<main class="main">Main Content</main>
<aside class="right">Right Sidebar</aside>
<footer class="footer">Footer</footer>
</div>
响应式设计的目标是让网页在不同设备上都能良好展示。
rem：相对于根元素（<html>）的字体大小。默认 1rem = 16px，可通过设置 html { font-size: 62.5%; } 将 1rem 变为 10px，方便计算。vw/vh：视口宽高的 1%。100vw 即视口宽度，100vh 为视口高度。常用于全屏元素。媒体查询：根据屏幕尺寸、分辨率等条件应用不同样式。
/* 当视口宽度小于等于 768px 时生效 */
@media (max-width: 768px) {
.sidebar {
display: none;
}
}
示例：移动优先的响应式卡片
.card {
width: 90%;
margin: 0 auto;
padding: 1rem;
}
@media (min-width: 600px) {
.card {
width: 50%;
}
}
@media (min-width: 1024px) {
.card {
width: 30%;
}
}
CSS 变量（自定义属性）让我们可以在样式表中复用值，并实现动态主题。
:root {
--primary-color: #3498db;
--spacing: 16px;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing) calc(var(--spacing) * 2);
}
calc() 函数允许在属性值中进行计算，支持混合单位。
.element {
width: calc(100% - 40px);
height: calc(100vh - 80px);
}
clamp() 函数返回一个区间内的值，非常适合流体排版：font-size: clamp(1rem, 5vw, 3rem); 表示最小 1rem，首选 5vw，最大 3rem。
JavaScript 赋予网页交互能力。我们不需要在一篇文章中穷尽所有细节，但必须掌握最核心的语法与概念。
变量声明：var、let、const 的区别。
var：函数作用域，存在变量提升（hoisting），可重复声明。let：块作用域，无提升（暂时性死区），不可重复声明。const：块作用域，声明常量（引用类型可修改属性，不可重新赋值）。变量提升示例：
console.log(a); // undefined（而不是报错）
var a = 5;
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
数据类型：原始类型（number, string, boolean, null, undefined, symbol, bigint）和引用类型（object, array, function）。
运算符：算术、比较、逻辑、赋值等。特别注意 == 与 === 的区别：== 会进行类型转换，=== 严格相等。
流程控制：if-else、switch、for、while 等。
const score = 85;
if (score >= 90) {
console.log('优秀');
} else if (score >= 60) {
console.log('及格');
} else {
console.log('不及格');
}
// for 循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
函数定义方式：
function sum(a, b) { return a + b; }const sum = function(a, b) { return a + b; };const sum = (a, b) => a + b;对象基础：
const person = { name: 'Alice', age: 25 };person.name 或 person['name']person.email = '[email protected]';const person = { greet() { console.log('Hi'); } };示例：结合函数与对象
function createUser(name, age) {
return {
name,
age,
isAdult() {
return this.age >= 18;
}
};
}
const user = createUser('Bob', 20);
console.log(user.isAdult()); // true
工欲善其事，必先利其器。一个高效、舒适的开发环境能极大提升编码体验。
VS Code 是目前最流行的前端编辑器，安装以下插件让开发事半功倍：
Live Server 使用：
Chrome 开发者工具是前端调试的利器，常用面板：
示例：使用 Console 调试
let count = 0;
function increment() {
count++;
console.log('当前计数：', count); // 在 Console 中查看输出
}
increment();
断点调试：在 Sources 面板找到 JS 文件，点击行号添加断点，刷新页面后代码会在断点处暂停，可以单步执行、查看变量。
本篇我们系统回顾了前端三大基石：
至此，你已经具备了前端开发的基本功。下一篇我们将深入 JavaScript 语言精髓，探讨作用域、闭包、原型链、异步编程等进阶概念，敬请期待！
思考题：
border-box 盒模型？let 和 const 的使用？
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online