前言：为什么选择HTML5前端开发？

在当今数字化时代，前端开发已成为IT行业中最热门和最具前景的职业之一。HTML5作为现代Web开发的基石，不仅定义了网页的结构，还与CSS3和JavaScript一起构成了前端开发的三大核心技术。通过系统学习HTML5前端开发，你将能够创建响应式、交互性强且用户体验优秀的网站和Web应用，这在移动互联网时代具有巨大的市场需求。

本课程将从零基础开始，逐步深入到高级技术，通过实战项目帮助你掌握核心技能，最终提升职场竞争力。无论你是完全的编程新手，还是希望提升技能的开发者，本课程都将为你提供清晰的学习路径和实用的开发技巧。

第一部分：HTML5基础入门

1.1 HTML5概述与基本结构

HTML5是超文本标记语言的第五次重大修订，它引入了许多新特性，如语义化标签、多媒体支持、Canvas绘图、本地存储等。首先，我们需要了解HTML5文档的基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个HTML5页面</title>
</head>
<body>
    <!-- 页面内容将在这里编写 -->
    <header>
        <h1>欢迎来到HTML5世界</h1>
    </header>
    <main>
        <p>这是一个基础的HTML5文档结构示例。</p>
    </main>
</body>
</html>

详细说明：

  • <!DOCTYPE html>：声明文档类型为HTML5，这是HTML5的标准声明方式。
  • <html>：根元素，包含整个HTML文档，lang属性指定语言为中文。
  • <head>：包含文档的元数据（metadata），如字符编码、视口设置、标题等。
  • <meta charset="UTF-8">：指定字符编码为UTF-8，确保中文等字符正常显示。
  • <meta name="viewport" ...>：移动端视口设置，确保页面在移动设备上正确缩放。
  • <title>：定义浏览器标签页上显示的标题。
  • <body>：包含所有可见内容，如文本、图像、链接等。
  • 语义化标签：HTML5引入了<header>、<main>、<footer>等标签，使代码更具可读性和SEO友好。

1.2 HTML5常用标签与语义化

HTML5强调语义化，使用合适的标签可以提升代码的可维护性和可访问性。以下是一些常用标签的示例：

<!-- 文本内容标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一个段落，用于包含文本内容。</p>
<em>强调文本（斜体）</em>
<strong>重要文本（加粗）</strong>

<!-- 链接和图像 -->
<a href="https://www.example.com" target="_blank">访问示例网站</a>
<img src="images/logo.png" alt="网站Logo" width="200" height="100">

<!-- 列表 -->
<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
</ul>
<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
</ol>

<!-- 表单元素 -->
<form action="/submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email">
    
    <button type="submit">提交</button>
</form>

<!-- 语义化结构标签 -->
<header>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
    <aside>
        <h3>侧边栏</h3>
        <p>附加信息</p>
    </aside>
</main>
<footer>
    <p>&copy; 2024 我的网站</p>
</footer>
</html>

详细说明：

  • 文本标签：<h1>到<h6>用于标题，<p>用于段落，<em>和<strong>用于强调。
  • 链接与图像：<a>标签创建超链接，href指定URL，target="_blank"在新标签页打开；<img>标签显示图像，src指定路径，alt提供替代文本（对可访问性很重要）。
  • 列表：<ul>无序列表（圆点），<ol>有序列表（数字），每个列表项用<li>。
  • 表单：<form>包含输入元素，action指定提交地址，method指定HTTP方法（GET/POST）；<label>与<input>关联，提升可用性；<input>的type属性有text、password、email等；required属性表示必填。
  • 语义化结构：<header>通常包含logo和导航，<nav>用于导航菜单，<main>是主要内容区域，<article>是独立文章，<aside>是侧边栏，<footer>是页脚。这些标签有助于搜索引擎理解和屏幕阅读器解析。

1.3 HTML5表单增强

HTML5为表单引入了新的输入类型和属性，简化了验证和用户体验：

<form id="registrationForm">
    <!-- 新输入类型 -->
    <label for="date">出生日期：</label>
    <input type="date" id="date" name="date">
    
    <label for="color">选择颜色：</label>
    <input type="color" id="color" name="color">
    
    <label for="range">音量：</label>
    <input type="range" id="range" name="volume" min="0" max="100" value="50">
    
    <label for="search">搜索：</label>
    <input type="search" id="search" name="search" placeholder="输入关键词...">
    
    <!-- 验证属性 -->
    <label for="age">年龄（18-100）：</label>
    <input type="number" id="age" name="age" min="18" max="100" required>
    
    <label for="phone">电话号码：</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{11}" placeholder="11位数字">
    
    <!-- datalist 提供输入建议 -->
    <label for="browser">选择浏览器：</label>
    <input type="text" id="browser" name="browser" list="browsers">
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Safari">
        <option value="Edge">
    </datalist>
    
    <!-- 输出元素 -->
    <output id="volumeOutput">50</output>
    
    <button type="submit">注册</button>
</form>

<script>
    // 简单的JavaScript来更新输出
    document.getElementById('range').addEventListener('input', function() {
        document.getElementById('volumeOutput').value = this.value;
    });
    
    // 表单验证示例
    document.getElementById('registrationForm').addEventListener('submit', function(e) {
        const age = document.getElementById('age').value;
        if (age < 18 || age > 100) {
            e.preventDefault(); // 阻止提交
            alert('年龄必须在18到100之间！');
        }
    });
</script>

详细说明：

  • 新输入类型：type="date"显示日期选择器，type="color"显示颜色选择器，type="range"显示滑块，type="search"优化搜索输入，type="number"限制数字输入，type="tel"用于电话号码。
  • 验证属性：min、max、required、pattern（正则表达式）用于客户端验证，减少服务器负担。
  • datalist：提供自动完成建议，提升用户体验。
  • output：显示计算结果，如滑块值。
  • JavaScript集成：通过事件监听器实现实时更新和自定义验证，确保表单数据的有效性。

1.4 HTML5多媒体元素

HTML5原生支持音频和视频，无需插件：

<!-- 视频元素 -->
<video width="640" height="360" controls poster="images/video-poster.jpg">
    <source src="videos/sample.mp4" type="video/mp4">
    <source src="videos/sample.webm" type="video/webm">
    您的浏览器不支持视频标签。
</video>

<!-- 音频元素 -->
<audio controls>
    <source src="audios/music.mp3" type="audio/mpeg">
    <source src="audios/music.ogg" type="audio/ogg">
    您的浏览器不支持音频标签。
</audio>

<!-- 嵌入其他内容 -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID" 
        width="640" 
        height="360" 
        frameborder="0" 
        allowfullscreen>
</iframe>

<!-- Canvas 绘图 -->
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 150, 80);
    ctx.fillStyle = 'red';
    ctx.font = '20px Arial';
    ctx.fillText('Hello Canvas!', 20, 150);
</script>

详细说明：

  • 视频：<video>标签支持多个<source>以提供不同格式（MP4、WebM），controls属性显示播放控件，poster指定封面图。浏览器会自动选择支持的格式。
  • 音频：类似视频，<audio>支持MP3、OGG等格式，controls显示播放、暂停等按钮。
  • iframe：用于嵌入外部内容如YouTube视频，allowfullscreen允许全屏。
  • Canvas：HTML5的绘图API，通过JavaScript在画布上绘制图形、文本等。示例中绘制了一个蓝色矩形和红色文本，展示了基本绘图功能。

第二部分：CSS3样式与布局

2.1 CSS3基础选择器与盒模型

CSS3用于控制HTML的样式和布局。首先，了解选择器和盒模型：

/* 基本选择器 */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* 类选择器 */
.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ID选择器 */
#header {
    background: #333;
    color: white;
    padding: 15px;
    text-align: center;
}

/* 盒模型演示 */
.box-model {
    width: 300px;
    height: 100px;
    padding: 20px;
    border: 5px solid #007bff;
    margin: 30px;
    background: #e7f3ff;
    /* box-sizing: border-box; 使宽度包括padding和border */
}

/* 子选择器和后代选择器 */
nav > ul > li {
    display: inline-block;
    margin-right: 15px;
}

nav ul li a {
    color: #333;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
}

nav ul li a:hover {
    background: #007bff;
    color: white;
}

/* 属性选择器 */
input[type="text"] {
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

input[type="submit"] {
    background: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background: #218838;
}

详细说明：

  • 选择器：元素选择器（如body）、类选择器（.container）、ID选择器（#header）用于指定样式规则。子选择器（>）选择直接子元素，后代选择器（空格）选择所有后代。
  • 盒模型：每个元素是一个盒子，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。默认情况下，width只包括内容宽度，但使用box-sizing: border-box可以使宽度包括padding和border，便于布局。
  • 伪类：:hover用于鼠标悬停状态，:focus用于输入焦点，提升交互体验。
  • 属性选择器：根据属性选择元素，如input[type="text"]只选择文本输入框。

2.2 CSS3 Flexbox布局

Flexbox是现代布局的强大工具，用于一维布局（行或列）：

/* Flex容器 */
.flex-container {
    display: flex;
    justify-content: space-between; /* 主轴对齐：两端对齐 */
    align-items: center; /* 交叉轴对齐：居中 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 20px; /* 元素间距 */
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* Flex项目 */
.flex-item {
    background: #007bff;
    color: white;
    padding: 20px;
    flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */
    text-align: center;
    border-radius: 4px;
    min-height: 100px;
}

/* 垂直居中示例 */
.vertical-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background: #e9ecef;
}

/* 导航栏示例 */
.nav-flex {
    display: flex;
    justify-content: flex-end; /* 右对齐 */
    gap: 10px;
    background: #343a40;
    padding: 10px;
}

.nav-flex a {
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    background: #495057;
    border-radius: 4px;
}

.nav-flex a:hover {
    background: #007bff;
}

详细说明：

  • Flex容器：display: flex创建Flex容器，子元素成为Flex项目。
  • justify-content：控制主轴（默认水平）对齐，如flex-start（左对齐）、center（居中）、space-between（两端对齐）。
  • align-items：控制交叉轴（默认垂直）对齐，如center（垂直居中）。
  • flex-wrap：wrap允许项目换行，适合响应式设计。
  • gap：设置项目间距，现代浏览器支持。
  • flex属性：flex: 1 1 200px表示增长因子1、收缩因子1、基础宽度200px，使项目自动填充空间。
  • 应用场景：垂直居中、导航栏、卡片布局等，Flexbox简化了传统浮动布局的复杂性。

2.3 CSS3 Grid布局

Grid用于二维布局（行和列），比Flexbox更强大：

/* Grid容器 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
    grid-template-rows: auto auto; /* 两行自动高度 */
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
}

/* Grid项目 */
.grid-item {
    background: #28a745;
    color: white;
    padding: 30px;
    text-align: center;
    border-radius: 4px;
}

/* 复杂布局示例：博客页面 */
.blog-layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main ads"
        "footer footer footer";
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    min-height: 100vh;
}

.header { grid-area: header; background: #333; color: white; padding: 20px; }
.sidebar { grid-area: sidebar; background: #e9ecef; padding: 15px; }
.main { grid-area: main; background: white; padding: 20px; }
.ads { grid-area: ads; background: #fff3cd; padding: 15px; }
.footer { grid-area: footer; background: #333; color: white; padding: 10px; text-align: center; }

/* 响应式Grid：媒体查询 */
@media (max-width: 768px) {
    .blog-layout {
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "ads"
            "footer";
        grid-template-columns: 1fr;
    }
}

详细说明：

  • Grid容器：display: grid创建Grid容器，子元素成为Grid项目。
  • grid-template-columns/rows：定义列和行的大小，1fr表示分数单位（等分空间），repeat(3, 1fr)重复三次。
  • gap：设置网格间距。
  • grid-area：为项目命名区域，通过grid-template-areas定义布局模板，使代码更直观。
  • 响应式设计：结合媒体查询（@media），在小屏幕下调整布局，如将多列变为单列。
  • 应用场景：整体页面布局、仪表盘、图片画廊等，Grid提供了精确的二维控制。

2.4 CSS3动画与过渡

CSS3允许创建平滑的动画效果，无需JavaScript：

/* 过渡效果 */
.button {
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease; /* 过渡属性和时间 */
}

.button:hover {
    background: #0056b3;
    transform: scale(1.05); /* 放大5% */
}

/* 关键帧动画 */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animated-box {
    width: 200px;
    height: 100px;
    background: #dc3545;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: slideIn 1s ease-out forwards; /* 动画名称、持续时间、缓动、填充模式 */
}

/* 3D变换 */
.transform-3d {
    width: 150px;
    height: 150px;
    background: linear-gradient(45deg, #ff6b6b, #feca57);
    margin: 50px;
    transition: transform 0.5s;
    transform-style: preserve-3d; /* 保持3D上下文 */
}

.transform-3d:hover {
    transform: rotateY(180deg) rotateX(10deg); /* 绕Y轴旋转180度，X轴10度 */
}

详细说明：

  • transition：定义属性变化时的平滑过渡，如transition: all 0.3s或指定属性（background, transform）。ease是缓动函数，使动画更自然。
  • @keyframes：定义动画的关键帧，从from（0%）到to（100%），可以指定中间百分比。
  • animation：应用动画，参数包括名称、持续时间、缓动、延迟、迭代次数（infinite）和填充模式（forwards保持最终状态）。
  • transform：变换元素，如scale缩放、rotate旋转、translate位移、rotateY3D旋转。transform-style: preserve-3d启用3D效果。
  • 应用场景：按钮悬停、加载动画、页面过渡，提升用户交互体验。

第三部分：JavaScript核心编程

3.1 JavaScript基础语法

JavaScript是前端开发的动态语言，用于操作DOM和处理事件：

// 变量声明：let和const（ES6+）
let name = "张三"; // 可变变量
const age = 25; // 常量，不可重新赋值

// 数据类型
const person = {
    firstName: "李",
    lastName: "四",
    age: 30,
    hobbies: ["阅读", "编程", "旅行"],
    isStudent: false,
    fullName: function() {
        return `${this.firstName} ${this.lastName}`;
    }
};

// 控制流
function checkAge(age) {
    if (age >= 18) {
        console.log("成年人");
    } else if (age >= 13) {
        console.log("青少年");
    } else {
        console.log("儿童");
    }
}

// 循环
for (let i = 0; i < 5; i++) {
    console.log(`循环次数: ${i}`);
}

// 数组方法
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // 15

// 异步基础：setTimeout
setTimeout(() => {
    console.log("2秒后执行");
}, 2000);

// 错误处理
try {
    // 可能出错的代码
    const result = riskyOperation();
    console.log(result);
} catch (error) {
    console.error("发生错误:", error.message);
}

详细说明：

  • 变量：let用于可变变量，const用于常量，避免全局污染。
  • 对象：键值对存储数据，方法是函数属性。this关键字引用对象本身。
  • 控制流：if-else条件判断，for循环迭代。
  • 数组方法：map（映射）、filter（过滤）、reduce（归约）是函数式编程的核心，箭头函数=>简化语法。
  • 异步：setTimeout模拟延迟，实际开发中用Promise和async/await处理异步（见下文）。
  • 错误处理：try-catch捕获异常，防止程序崩溃。

3.2 DOM操作与事件处理

DOM（文档对象模型）是HTML的编程接口，JavaScript通过它动态修改页面：

// 获取DOM元素
const header = document.getElementById('header'); // 通过ID
const buttons = document.querySelectorAll('button'); // 所有按钮，返回NodeList
const container = document.querySelector('.container'); // 第一个匹配类

// 修改内容和样式
header.textContent = "欢迎回来，" + name; // 安全，防止XSS
header.innerHTML = "<strong>欢迎</strong>回来！"; // 可解析HTML，但需谨慎

// 创建和添加元素
const newParagraph = document.createElement('p');
newParagraph.textContent = "这是一个新段落。";
newParagraph.style.color = "blue";
newParagraph.className = "new-para";
document.body.appendChild(newParagraph); // 添加到body末尾

// 事件监听：点击事件
const clickButton = document.getElementById('clickBtn');
clickButton.addEventListener('click', function(event) {
    console.log("按钮被点击！", event.target); // event对象包含事件信息
    this.style.backgroundColor = "green"; // this指向触发元素
});

// 表单提交事件
const form = document.getElementById('myForm');
form.addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认提交行为
    const input = document.getElementById('username');
    if (input.value.trim() === "") {
        alert("用户名不能为空！");
        input.focus(); // 聚焦到输入框
        return;
    }
    // 模拟提交
    console.log("表单数据:", new FormData(form));
});

// 事件委托：处理动态元素
document.body.addEventListener('click', function(e) {
    if (e.target.classList.contains('dynamic-btn')) {
        console.log("动态按钮点击:", e.target.dataset.id); // data-id属性
    }
});

// 鼠标事件和键盘事件
const box = document.getElementById('hoverBox');
box.addEventListener('mouseenter', () => {
    box.style.transform = "scale(1.1)";
});
box.addEventListener('mouseleave', () => {
    box.style.transform = "scale(1)";
});

document.addEventListener('keydown', (e) => {
    if (e.key === "Escape") {
        console.log("ESC键被按下");
    }
});

详细说明：

  • 获取元素：getElementById高效，querySelector灵活（支持CSS选择器），querySelectorAll返回静态NodeList。
  • 修改内容：textContent纯文本，innerHTML解析HTML，但需防XSS攻击（如用DOMPurify库净化）。
  • 创建元素：createElement创建节点，appendChild添加，style直接修改样式（内联样式优先级高）。
  • 事件监听：addEventListener绑定事件，click、submit等。e.preventDefault()阻止默认行为，e.target获取触发元素。
  • 事件委托：将事件绑定到父元素，处理动态添加的子元素，提高性能。
  • 其他事件：mouseenter/mouseleave鼠标事件，keydown键盘事件，focus聚焦事件。
  • 应用场景：交互式表单、动态列表、UI反馈，如实时搜索建议。

3.3 ES6+高级特性

ES6引入了现代JavaScript特性，使代码更简洁：

// 解构赋值
const user = { id: 1, name: "Alice", email: "alice@example.com" };
const { name, email } = user; // 提取属性
console.log(name); // "Alice"

const colors = ["red", "green", "blue"];
const [primary, secondary] = colors; // 提取数组元素
console.log(primary); // "red"

// 模板字符串
const greeting = `你好，${name}！今天是${new Date().toLocaleDateString()}。`;
console.log(greeting);

// 默认参数和剩余参数
function greet(name = "访客", ...messages) {
    console.log(`欢迎，${name}！`);
    messages.forEach(msg => console.log(msg));
}
greet("Bob", "很高兴见到你", "祝你有美好的一天");

// Promise处理异步
function fetchData(url) {
    return new Promise((resolve, reject) => {
        // 模拟API调用
        setTimeout(() => {
            if (url === "error") {
                reject("URL无效");
            } else {
                resolve({ data: "模拟数据", status: 200 });
            }
        }, 1000);
    });
}

fetchData("https://api.example.com/data")
    .then(response => {
        console.log("数据:", response.data);
        return fetchData("https://api.example.com/more");
    })
    .then(moreData => console.log("更多数据:", moreData.data))
    .catch(error => console.error("错误:", error))
    .finally(() => console.log("请求完成"));

// async/await（ES2017）
async function getUserData() {
    try {
        const response = await fetchData("https://api.example.com/user");
        console.log("用户数据:", response.data);
        const more = await fetchData("https://api.example.com/profile");
        console.log("档案:", more.data);
    } catch (error) {
        console.error("获取数据失败:", error);
    }
}
getUserData();

// 模块化
// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) { return a * b; }

// main.js
import multiply, { add } from './math.js';
console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6

详细说明：

  • 解构：从对象或数组中提取值，简化代码。
  • 模板字符串：用反引号`包裹，支持多行和插值${}。
  • 默认参数：函数参数默认值，剩余参数...收集多余参数为数组。
  • Promise：异步操作的容器，then处理成功，catch处理错误，finally无论成功失败都执行。
  • async/await：基于Promise的语法糖，使异步代码像同步一样易读。await等待Promise完成，必须在async函数内。
  • 模块化：export导出，import导入，支持命名导出和默认导出，便于代码组织。
  • 应用场景：API调用、代码复用、大型项目结构化。

3.4 JavaScript面向对象编程

JavaScript支持面向对象，通过类和对象组织代码：

// 类定义（ES6）
class Animal {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    speak() {
        console.log(`${this.name} 发出声音`);
    }

    getInfo() {
        return `${this.name} 是 ${this.age} 岁`;
    }
}

// 继承
class Dog extends Animal {
    constructor(name, age, breed) {
        super(name, age); // 调用父类构造函数
        this.breed = breed;
    }

    speak() { // 方法重写
        console.log(`${this.name} 汪汪叫`);
    }

    fetch() {
        console.log(`${this.name} 在捡球`);
    }
}

// 使用类
const animal = new Animal("动物", 2);
animal.speak(); // "动物 发出声音"

const dog = new Dog("旺财", 3, "拉布拉多");
dog.speak(); // "旺财 汪汪叫"
dog.fetch(); // "旺财 在捡球"
console.log(dog.getInfo()); // "旺财 是 3 岁"

// 静态方法
class Calculator {
    static add(a, b) {
        return a + b;
    }
}
console.log(Calculator.add(5, 3)); // 8，无需实例化

// 私有属性（ES2022提案，现代浏览器支持）
class Counter {
    #count = 0; // 私有字段
    increment() {
        this.#count++;
        return this.#count;
    }
    getCount() {
        return this.#count;
    }
}
const counter = new Counter();
console.log(counter.increment()); // 1
console.log(counter.getCount()); // 1
// console.log(counter.#count); // 错误，无法访问私有字段

详细说明：

  • 类：class关键字定义，constructor构造函数初始化属性，this引用实例。
  • 继承：extends实现继承，super调用父类方法或构造函数。
  • 方法重写：子类定义同名方法覆盖父类。
  • 静态方法：static定义，类本身调用，无需实例化。
  • 私有字段：#前缀标记私有，只能在类内访问，提高封装性。
  • 应用场景：创建可复用组件，如UI元素、数据模型，提升代码组织。

第四部分：前端框架与工具

4.1 响应式设计与媒体查询

响应式设计确保页面在不同设备上良好显示：

/* 基础响应式：视口单位 */
.responsive-box {
    width: 50vw; /* 视口宽度的50% */
    height: 25vh; /* 视口高度的25% */
    background: #007bff;
    margin: 10px auto;
}

/* 媒体查询：断点 */
.container-fluid {
    padding: 15px;
}

/* 手机：小于768px */
@media (max-width: 768px) {
    .container-fluid {
        padding: 10px;
    }
    .responsive-box {
        width: 100%;
        height: 200px;
    }
    /* 隐藏桌面元素 */
    .desktop-only {
        display: none;
    }
    /* 显示移动菜单 */
    .mobile-menu {
        display: block;
    }
}

/* 平板：768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .responsive-box {
        width: 80%;
        height: 300px;
    }
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 两列 */
    }
}

/* 桌面：大于1024px */
@media (min-width: 1024px) {
    .responsive-box {
        width: 60%;
        height: 400px;
    }
    .grid-container {
        grid-template-columns: repeat(3, 1fr); /* 三列 */
    }
}

/* 高分辨率屏幕：Retina显示 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        background-image: url('images/logo@2x.png'); /* 2x图像 */
        background-size: contain;
    }
}

/* 横向/纵向方向 */
@media (orientation: landscape) {
    body {
        background: lightblue;
    }
}

详细说明：

  • 视口单位：vw（视口宽度）、vh（视口高度）创建流体布局。
  • 媒体查询：@media根据屏幕大小应用样式，断点如768px（手机）、1024px（平板）是常见标准。
  • 隐藏/显示：display: none控制元素可见性。
  • 高分辨率：min-device-pixel-ratio检测Retina屏，提供高DPI图像。
  • 方向：orientation检测设备方向，调整布局。
  • 应用场景：移动优先设计，确保从手机到大屏的无缝体验。

4.2 介绍前端框架（以Vue.js为例）

Vue.js是一个渐进式框架，适合初学者：

<!-- HTML结构 -->
<div id="app">
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">反转消息</button>
    
    <input v-model="userInput" placeholder="输入内容">
    <p>你输入了: {{ userInput }}</p>
    
    <ul>
        <li v-for="item in items" :key="item.id">
            {{ item.name }} - {{ item.price }}元
            <button @click="removeItem(item.id)">删除</button>
        </li>
    </ul>
    
    <div v-if="showDetails">
        <p>详细信息显示在这里。</p>
    </div>
    <button @click="toggleDetails">切换显示</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            userInput: '',
            items: [
                { id: 1, name: '苹果', price: 5 },
                { id: 2, name: '香蕉', price: 3 },
                { id: 3, name: '橙子', price: 4 }
            ],
            showDetails: false
        },
        methods: {
            reverseMessage() {
                this.message = this.message.split('').reverse().join('');
            },
            removeItem(id) {
                this.items = this.items.filter(item => item.id !== id);
            },
            toggleDetails() {
                this.showDetails = !this.showDetails;
            }
        },
        computed: {
            totalPrice() {
                return this.items.reduce((sum, item) => sum + item.price, 0);
            }
        },
        watch: {
            userInput(newVal) {
                console.log('输入变化:', newVal);
            }
        }
    });
</script>

详细说明：

  • Vue实例：new Vue({ el: '#app', ... })挂载到DOM，data定义响应式数据。
  • 插值：{{ message }}显示数据，双向绑定v-model同步输入。
  • 指令：@click事件绑定，v-for列表渲染（需:key优化性能），v-if条件渲染。
  • 方法：methods定义函数，computed计算属性（缓存结果），watch监听数据变化。
  • 响应式：数据变化自动更新视图，无需手动操作DOM。
  • 应用场景：单页应用（SPA）、表单处理、动态列表，Vue的轻量级使其易于集成。

4.3 构建工具：Webpack简介

Webpack是模块打包器，用于处理资源：

// webpack.config.js（简化配置）
const path = require('path');

module.exports = {
    mode: 'development', // 或 'production'
    entry: './src/index.js', // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), // 输出目录
        filename: 'bundle.js' // 输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 匹配CSS文件
                use: ['style-loader', 'css-loader'] // 使用加载器
            },
            {
                test: /\.js$/, // 匹配JS文件
                exclude: /node_modules/, // 排除node_modules
                use: {
                    loader: 'babel-loader', // 转译ES6+到ES5
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.(png|jpg|gif)$/, // 匹配图像
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/'
                        }
                    }
                ]
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        open: true // 自动打开浏览器
    },
    plugins: [
        // 插件示例：HTMLWebpackPlugin自动生成HTML
        // const HtmlWebpackPlugin = require('html-webpack-plugin');
        // new HtmlWebpackPlugin({ template: './src/index.html' })
    ]
};

详细说明：

  • 入口/输出：entry指定起点，output定义打包结果。
  • 加载器（Rules）：处理非JS资源，如CSS（style-loader注入样式，css-loader解析@import）、JS（Babel转译）、图像（file-loader输出文件）。
  • 开发服务器：devServer提供热重载，便于开发。
  • 插件：扩展功能，如HtmlWebpackPlugin生成HTML。
  • 使用：安装webpack、webpack-cli、webpack-dev-server，运行webpack serve启动开发模式，webpack构建生产包。
  • 应用场景：现代前端项目，管理依赖、优化性能、支持模块化。

第五部分：实战项目

5.1 项目1：个人简历页面（HTML5 + CSS3）

项目目标：创建一个响应式个人简历页面，展示技能、经验和联系信息。

步骤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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1>张三</h1>
            <p>前端开发工程师</p>
            <nav class="nav">
                <a href="#about">关于我</a>
                <a href="#skills">技能</a>
                <a href="#experience">经验</a>
                <a href="#contact">联系</a>
            </nav>
        </div>
    </header>

    <main class="container">
        <section id="about" class="section">
            <h2>关于我</h2>
            <div class="profile">
                <img src="images/profile.jpg" alt="个人照片" class="photo">
                <p>我是一名热爱前端开发的工程师，拥有3年经验，专注于创建用户友好的Web应用。</p>
            </div>
        </section>

        <section id="skills" class="section">
            <h2>技能</h2>
            <ul class="skills-list">
                <li>HTML5/CSS3</li>
                <li>JavaScript (ES6+)</li>
                <li>Vue.js</li>
                <li>响应式设计</li>
            </ul>
        </section>

        <section id="experience" class="section">
            <h2>工作经验</h2>
            <article class="job">
                <h3>ABC公司 - 前端开发</h3>
                <p class="date">2021 - 至今</p>
                <ul>
                    <li>开发公司官网，提升加载速度30%。</li>
                    <li>使用Vue重构旧系统。</li>
                </ul>
            </article>
        </section>

        <section id="contact" class="section">
            <h2>联系我</h2>
            <form id="contactForm">
                <label for="name">姓名：</label>
                <input type="text" id="name" required>
                <label for="email">邮箱：</label>
                <input type="email" id="email" required>
                <label for="message">消息：</label>
                <textarea id="message" rows="4" required></textarea>
                <button type="submit">发送</button>
            </form>
        </section>
    </main>

    <footer class="footer">
        <p>&copy; 2024 张三 | <a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

步骤2：CSS样式（styles.css）

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; line-height: 1.6; background: #f4f4f4; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.header { background: #333; color: white; text-align: center; padding: 40px 0; }
.nav { margin-top: 20px; display: flex; justify-content: center; gap: 20px; }
.nav a { color: white; text-decoration: none; padding: 10px 15px; background: #555; border-radius: 4px; }
.nav a:hover { background: #007bff; }
.section { background: white; margin: 20px 0; padding: 30px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.profile { display: flex; align-items: center; gap: 20px; }
.photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; }
.skills-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.skills-list li { background: #007bff; color: white; padding: 10px 15px; border-radius: 4px; }
.job { margin-bottom: 20px; }
.job .date { color: #666; font-style: italic; }
#contactForm { display: grid; gap: 15px; max-width: 500px; }
#contactForm input, #contactForm textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
#contactForm button { background: #28a745; color: white; padding: 12px; border: none; border-radius: 4px; cursor: pointer; }
#contactForm button:hover { background: #218838; }
.footer { background: #333; color: white; text-align: center; padding: 20px; }

/* 响应式 */
@media (max-width: 768px) {
    .profile { flex-direction: column; text-align: center; }
    .nav { flex-direction: column; align-items: center; }
    .skills-list { justify-content: center; }
}

步骤3：JavaScript交互（script.js）

// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

// 表单验证和模拟提交
document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const name = document.getElementById('name').value.trim();
    const email = document.getElementById('email').value.trim();
    const message = document.getElementById('message').value.trim();

    if (!name || !email || !message) {
        alert('请填写所有字段！');
        return;
    }

    if (!email.includes('@')) {
        alert('请输入有效的邮箱！');
        return;
    }

    // 模拟提交（实际中发送到服务器）
    console.log('表单数据:', { name, email, message });
    alert('消息已发送！（模拟）');
    this.reset(); // 清空表单
});

// 动态添加技能（可选扩展）
const newSkills = ['Git', 'Webpack'];
newSkills.forEach(skill => {
    const li = document.createElement('li');
    li.textContent = skill;
    document.querySelector('.skills-list').appendChild(li);
});

项目总结：这个项目展示了HTML5语义化、CSS3 Flexbox布局、响应式设计和基本JS交互。通过它，你将掌握页面结构、样式和用户输入处理，提升简历的视觉吸引力。

5.2 项目2：待办事项应用（Vue.js）

项目目标：使用Vue.js创建一个功能齐全的待办事项应用，支持添加、删除、标记完成和过滤。

完整代码（单文件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>
    <style>
        body { font-family: Arial, sans-serif; background: #f4f4f4; margin: 0; padding: 20px; }
        #app { max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #333; }
        .input-group { display: flex; gap: 10px; margin-bottom: 20px; }
        input[type="text"] { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
        button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #0056b3; }
        .filters { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; }
        .filters button { background: #6c757d; }
        .filters button.active { background: #28a745; }
        ul { list-style: none; }
        li { padding: 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
        li.completed { text-decoration: line-through; color: #999; }
        .delete-btn { background: #dc3545; padding: 5px 10px; font-size: 12px; }
        .delete-btn:hover { background: #c82333; }
        .stats { text-align: center; margin-top: 20px; color: #666; }
    </style>
</head>
<body>
    <div id="app">
        <h1>我的待办事项</h1>
        
        <div class="input-group">
            <input 
                type="text" 
                v-model="newTodo" 
                @keyup.enter="addTodo" 
                placeholder="添加新任务..."
            >
            <button @click="addTodo">添加</button>
        </div>

        <div class="filters">
            <button @click="filter = 'all'" :class="{ active: filter === 'all' }">全部</button>
            <button @click="filter = 'active'" :class="{ active: filter === 'active' }">待办</button>
            <button @click="filter = 'completed'" :class="{ active: filter === 'completed' }">完成</button>
        </div>

        <ul>
            <li 
                v-for="todo in filteredTodos" 
                :key="todo.id" 
                :class="{ completed: todo.completed }"
            >
                <span @click="toggleComplete(todo.id)" style="cursor: pointer;">
                    {{ todo.text }}
                </span>
                <button class="delete-btn" @click="deleteTodo(todo.id)">删除</button>
            </li>
        </ul>

        <div class="stats">
            <p>总计: {{ todos.length }} | 待办: {{ activeCount }} | 完成: {{ completedCount }}</p>
            <button v-if="completedCount > 0" @click="clearCompleted">清除已完成</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                newTodo: '',
                todos: [
                    { id: 1, text: '学习HTML5', completed: true },
                    { id: 2, text: '练习CSS3', completed: false },
                    { id: 3, text: '编写JavaScript', completed: false }
                ],
                filter: 'all'
            },
            computed: {
                filteredTodos() {
                    if (this.filter === 'active') {
                        return this.todos.filter(todo => !todo.completed);
                    } else if (this.filter === 'completed') {
                        return this.todos.filter(todo => todo.completed);
                    }
                    return this.todos;
                },
                activeCount() {
                    return this.todos.filter(todo => !todo.completed).length;
                },
                completedCount() {
                    return this.todos.filter(todo => todo.completed).length;
                }
            },
            methods: {
                addTodo() {
                    if (this.newTodo.trim() === '') {
                        alert('请输入任务内容！');
                        return;
                    }
                    this.todos.push({
                        id: Date.now(), // 使用时间戳作为ID
                        text: this.newTodo.trim(),
                        completed: false
                    });
                    this.newTodo = '';
                },
                deleteTodo(id) {
                    this.todos = this.todos.filter(todo => todo.id !== id);
                },
                toggleComplete(id) {
                    const todo = this.todos.find(t => t.id === id);
                    if (todo) {
                        todo.completed = !todo.completed;
                    }
                },
                clearCompleted() {
                    this.todos = this.todos.filter(todo => !todo.completed);
                }
            },
            watch: {
                // 监听todos变化，保存到本地存储
                todos: {
                    deep: true,
                    handler(newVal) {
                        localStorage.setItem('todos', JSON.stringify(newVal));
                    }
                }
            },
            mounted() {
                // 页面加载时从本地存储读取
                const saved = localStorage.getItem('todos');
                if (saved) {
                    this.todos = JSON.parse(saved);
                }
            }
        });
    </script>
</body>
</html>

项目总结：这个Vue项目展示了数据绑定、计算属性、方法、事件处理和本地存储。通过它，你将理解框架如何简化状态管理和UI更新，提升开发效率。

第六部分：提升职场竞争力

6.1 最佳实践与性能优化

代码组织：使用模块化、语义化HTML、BEM命名规范（Block-Element-Modifier）保持代码可维护。

性能优化：

  • 图像优化：使用WebP格式、懒加载（loading="lazy"）。 
    
<img src="large-image.jpg" alt="描述" loading="lazy" width="800" height="600">
  • 代码压缩：使用Webpack的TerserPlugin压缩JS/CSS。
  • 缓存：设置HTTP缓存头，或使用Service Worker（PWA）。
  • 减少重绘：避免频繁DOM操作，使用requestAnimationFrame动画。 
    
function animate() {
  // 更新动画
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

可访问性（A11y）：

  • 使用ARIA属性：<button aria-label="关闭" onclick="closeModal()">×</button>
  • 确保键盘导航：所有交互元素可通过Tab访问。
  • 颜色对比：使用工具如WebAIM检查对比度。

6.2 版本控制与协作

Git基础：

  • 初始化：git init
  • 添加文件：git add .
  • 提交：git commit -m "Initial commit"
  • 推送到GitHub：git remote add origin https://github.com/username/repo.git
  • git push -u origin main

协作流程：使用分支（git checkout -b feature）、Pull Request、代码审查。

6.3 持续学习与求职准备

学习资源：

  • MDN Web Docs（官方文档）
  • freeCodeCamp（免费课程）
  • Vue/React官方教程
  • LeetCode（算法练习）

求职技巧：

  • 构建作品集：GitHub Pages部署项目。
  • 简历突出项目：量化成果，如“优化页面加载速度50%”。
  • 面试准备：练习白板编码、解释概念（如事件循环、闭包）。
  • 网络：参加Meetup、贡献开源项目。

职场建议：保持好奇心，跟进新技术（如WebAssembly、PWA），提升软技能如沟通和团队协作。

结语

通过本课程，你将从HTML5基础起步，掌握CSS3布局、JavaScript编程、框架使用，并通过实战项目积累经验。前端开发是一个快速发展的领域，坚持实践和学习将帮助你脱颖而出。开始你的编码之旅吧，如果有疑问，随时回顾这些示例和步骤！