从零开始学前端：HTML、CSS、JavaScript 完整教程
前言 前端开发是构建网页和 Web 应用的技术集合。它的三大支柱是： 技术 角色 类比 HTML 内容与结构 建筑的骨架 CSS 样式与布局 建筑的装修 JavaScript 交互与逻辑 建筑的水电系统 读完本文，你将能够从零搭建一个完整的个人网页。每个知识点都配有可直接运行的代码示例。 第一部分：HTML HTML（HyperText Markup Language）不是编程语言，而是标记语言——用标签来描述内容。 1.1 一个最小的 HTML 页面 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个网页</title> </head> <body> <h1>你好，世界！</h1> <p>这是我的第一个 HTML 页面。</p> </body> </html> 逐行解释： <!DOCTYPE html> — 声明这是 HTML5 文档 <html lang="zh-CN"> — 页面根元素，lang 告诉浏览器页面语言 <head> — 元数据区：字符集、视口、标题，不显示在页面上 <body> — 可见内容区，你看到的一切都在这里 <h1> — 一级标题（Heading 1），有 h1~h6 六个级别 <p> — 段落（Paragraph） 1.2 常用文本标签 <!-- 标题层级 --> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <!-- 段落与换行 --> <p>这是一个段落。HTML 会忽略代码中的换行， 连续空格也会被合并为一个。</p> <p>另一个段落。<br>这是 br 标签产生的换行。</p> <!-- 文本强调 --> <p>这是 <strong>加粗强调</strong>，这是 <em>斜体强调</em>。</p> <p>这是 <mark>高亮标记</mark>，这是 <del>删除线</del>。</p> <p>行内代码：<code>console.log('hello')</code></p> <!-- 引用 --> <blockquote> <p>任何足够先进的技术，都与魔法无异。——阿瑟·克拉克</p> </blockquote> 1.3 链接与图片 <!-- 超链接 --> <a href="https://example.com">访问 Example</a> <a href="https://example.com" target="_blank">新标签页打开</a> <a href="#section-2">跳转到页面内的 section-2</a> <a href="mailto:hello@example.com">发送邮件</a> <!-- 图片 --> <img src="photo.jpg" alt="一张照片的描述" width="400" height="300"> <img src="photo.jpg" alt="" loading="lazy"> <!-- 懒加载 --> alt 属性很重要：当图片加载失败时显示替代文字，也是屏幕阅读器读给视障用户的内容。loading="lazy" 让图片在即将进入视口时才加载，提升页面性能。 ...