目录

  1. 第一部分：基础准备

    html5 js css3教程
    （图片来源网络，侵删）
    • 什么是前端开发？
    • 开发环境搭建：代码编辑器与浏览器
    • 如何学习：理论与实践

  2. 第二部分：HTML5 - 网页的骨架

    • HTML 简介
    • 基本文档结构
    • 常用核心标签
    • HTML5 语义化标签
    • HTML5 新增表单与多媒体

  3. 第三部分：CSS3 - 网页的衣裳

    • CSS 简介
    • 基本语法与选择器
    • 盒模型
    • 布局技术：Flexbox 与 Grid
    • CSS3 新特性：动画、过渡与变形
    • 响应式设计

  4. 第四部分：JavaScript - 网页的灵魂

    • JavaScript 简介
    • 变量、数据类型与运算符
    • 流程控制
    • 函数
    • 对象与数组
    • DOM 操作：与 HTML 交互
    • 事件处理：响应用户操作
    • BOM 简介

  5. 第五部分：综合实战项目

    html5 js css3教程
    （图片来源网络，侵删）
    • 个人作品集网页
    • 待办事项应用

  6. 第六部分：进阶与资源

    • 推荐学习资源
    • 下一步该学什么？（框架、工程化等）

第一部分：基础准备

在开始之前,我们需要做好一些准备工作。

什么是前端开发？

前端开发，就是创建用户直接与之交互的网页界面，它就像盖房子里的“内装修”和“外观设计”，负责将设计师的稿子变成一个美观、好用、能响应各种操作的网页，HTML, CSS, JavaScript 就是实现这一切的三大核心技术。

开发环境搭建

你不需要复杂的编译环境,只需要两样东西：

html5 js css3教程
（图片来源网络，侵删）

  • 代码编辑器:

    • 强烈推荐: Visual Studio Code (VS Code)，它免费、强大、插件丰富,是目前前端开发的主流选择。
    • 其他选择: Sublime Text, Atom, WebStorm (付费)。

  • 现代浏览器:

    • 强烈推荐: Google Chrome，它自带的开发者工具 是前端开发的神器，可以实时调试代码、查看页面结构、分析性能等。

如何学习？

  • 不要只看不练： 编程是门手艺活，必须亲手敲代码，哪怕跟着教程敲,也比只看有效。
  • 理解原理： 不要死记硬背标签和属性，理解“为什么”这样设计,能帮助你更好地记忆和应用。
  • 保持耐心： 遇到 bug 是正常的，学会使用搜索引擎（如 Google/Bing）和开发者工具去解决问题,这是最重要的能力。

第二部分：HTML5 - 网页的骨架

HTML (HyperText Markup Language) 是用来描述网页内容的语言，它定义了网页的结构和内容，比如哪里是标题，哪里是段落,哪里是图片。

HTML 简介

HTML 使用来包裹内容，浏览器会解析这些标签并将其显示为相应的格式。 <h1> 这是一个一级标题 </h1>

基本文档结构

一个标准的 HTML5 文件结构如下：

<!DOCTYPE html> <!-- 声明这是一个 HTML5 文档 -->
<html lang="zh-CN"> <!-- 整个网页的根标签，lang 属性声明语言 -->
<head>
    <meta charset="UTF-8"> <!-- 声明字符编码，防止中文乱码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title> <!-- 网页标题，显示在浏览器标签页上 -->
</head>
<body>
    <!-- 网页的可见内容都写在这里 -->
    <h1>欢迎来到 HTML5 世界！</h1>
    <p>这是一个段落。</p>
</body>
</html>

常用核心标签

描述 示例
<h1> - <h6> 标题标签，<h1> 是最重要的标题 <h1>主标题</h1>
<p> 段落标签 <p>这是一段文字。</p>
<a> 超链接标签 <a href="https://www.google.com">访问 Google</a>
<img> 图片标签 (自闭合标签) <img src="image.jpg" alt="图片描述">
<ul> / <li> 无序列表 / 列表项 <ul><li>苹果</li><li>香蕉</li></ul>
<ol> / <li> 有序列表 / 列表项 <ol><li>第一步</li><li>第二步</li></ol>
<div> 块级容器，用于布局和分组 <div>...</div>
<span> 器，用于对文本进行样式化 <span>这部分文字有特殊样式</span>

HTML5 语义化标签

HTML5 引入了许多具有明确含义的标签，让代码更易读，对搜索引擎（SEO）也更友好。

描述
<header> 页面或区域的头部
<nav> 导航链接区域
<main> 页面的主要内容
<article> 块，如博客文章
<section> 文档中的节，如章节
<aside> 侧边栏或相关内容
<footer> 页面或区域的底部

示例：

<body>
    <header>
        <h1>网站标题</h1>
        <nav>导航菜单</nav>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
    </main>
    <aside>
        <h3>侧边栏</h3>
        <p>相关链接...</p>
    </aside>
    <footer>
        <p>&copy; 2025 版权所有</p>
    </footer>
</body>

HTML5 新增表单与多媒体

  • 多媒体:
    • <video>: 嵌入视频。
      <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持 video 标签。
</video>
    • <audio>: 嵌入音频。
      <audio controls>
    <source src="sound.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 标签。
</audio>
  • 表单: 新增了多种输入类型，使表单更智能。
    • type="email": 在移动端会自动弹出键盘。
    • type="number": 只能输入数字。
    • type="date": 提供日期选择器。
    • type="color": 提供颜色选择器。

第三部分：CSS3 - 网页的衣裳

CSS (Cascading Style Sheets) 是用来描述 HTML 元素在屏幕上如何显示的语言，它负责网页的视觉表现，如颜色、字体、间距、布局和动画。

CSS 简介

CSS 通过选择器找到 HTML 元素，然后应用声明（属性:值）来改变其样式。

/* 选择器 { 属性1: 值1; 属性2: 值2; } */
p {
    color: blue; /* 文字颜色为蓝色 */
    font-size: 16px; /* 字体大小为 16 像素 */
}

基本语法与选择器

  • CSS 如何引入 HTML？

    1. 内联样式: 不推荐，仅用于快速测试。
      <p style="color: red;">这段文字是红色的。</p>
    2. 内部样式表: 写在 <head> 的 <style> 标签里。
      <head>
    <style>
        p { color: red; }
    </style>
</head>
    3. 外部样式表: 最佳实践，创建一个 .css 文件，然后在 HTML 中用 <link> 引入。
      <head>
    <link rel="stylesheet" href="style.css">
</head>

  • 常用选择器:

    • 元素选择器: p {}
    • 类选择器: .class-name {} (最常用)
    • ID 选择器: #id-name {} (一个页面 ID 唯一)
    • 后代选择器: div p {} (选择 div 内部的所有 p)
    • 伪类选择器: a:hover {} (鼠标悬停时生效)

盒模型

这是 CSS 布局的核心，每个 HTML 元素都可以看作一个盒子，它由 content (内容), padding (内边距), border (边框), margin (外边距) 组成。

布局技术

  • Flexbox (弹性布局): 一维布局模型，非常适合在容器中对齐和分布项目。
    .container {
    display: flex; /* 启用 Flexbox */
    justify-content: space-between; /* 主轴对齐 */
    align-items: center; /* 交叉轴对齐 */
}
  • Grid (网格布局): 二维布局模型，可以同时控制行和列，非常适合复杂的页面布局。
    .grid-container {
    display: grid; /* 启用 Grid */
    grid-template-columns: 1fr 2fr 1fr; /* 定义三列，比例 1:2:1 */
    grid-gap: 10px; /* 网格间距 */
}

CSS3 新特性

  • 过渡:
    button {
    background-color: green;
    transition: background-color 0.5s ease; /* 背景色变化过渡 0.5 秒 */
}
button:hover {
    background-color: blue;
}
  • 动画:
    @keyframes slidein {
    from { transform: translateX(100%); }
    to { transform: translateX(0%); }
}
.box {
    animation: slidein 2s infinite alternate; /* 执行 slidein 动画，持续 2 秒，无限循环，交替播放 */
}
  • 变形:
    .box:hover {
    transform: rotate(15deg) scale(1.1); /* 鼠标悬停时旋转 15 度并放大 1.1 倍 */
}

响应式设计

让你的网页在不同尺寸的设备（手机、平板、桌面）上都有良好的显示效果。

  • 核心：媒体查询

    /* 默认样式，适用于所有设备 */
body { font-size: 16px; }
/* 当视口宽度大于等于 768px 时 (平板) */
@media (min-width: 768px) {
    body { font-size: 18px; }
}
/* 当视口宽度大于等于 1024px 时 (桌面) */
@media (min-width: 1024px) {
    body { font-size: 20px; }
}

  • 视口元标签: 在 HTML <head> 中必须添加,用于控制视口的缩放。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

第四部分：JavaScript - 网页的灵魂

JavaScript (JS) 是一种编程语言，它为网页添加了交互性，没有 JS，网页就是静态的；有了 JS，网页才能响应用户点击、输入、滚动等操作,并能动态地更新内容。

JavaScript 简介

JS 代码可以直接写在 HTML 的 <script> 标签中，或者通过 <script src="script.js"></script> 引入外部文件。

变量、数据类型与运算符

  • 变量: 使用 let (推荐) 或 const (声明常量) 来声明变量。
    let message = "Hello, World!";
const PI = 3.14159;
  • 数据类型:
    • String (字符串): "text"
    • Number (数字): 123, 14
    • Boolean (布尔值): true, false
    • Array (数组): [1, "a", true]
    • Object (对象): {name: "John", age: 30}
    • null (空值)
    • undefined (未定义)
  • 运算符: , , , , (值相等), (值和类型都相等), >, <, && (与), (或), (非)

流程控制

  • 条件语句:

    let age = 18;
if (age >= 18) {
    console.log("成年了");
} else {
    console.log("未成年");
}

  • 循环语句:

    // for 循环
for (let i = 0; i < 5; i++) {
    console.log(i); // 输出 0, 1, 2, 3, 4
}
// while 循环
let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

函数

可重复使用的代码块。

// 函数声明
function greet(name) {
    return "你好, " + name + "!";
}
// 函数调用
let greeting = greet("张三");
console.log(greeting); // 输出: 你好, 张三!

对象与数组

  • 对象: 键值对的集合。
    let person = {
    name: "李四",
    age: 25,
    city: "北京"
};
console.log(person.name); // 输出: 李四
  • 数组: 有序的数据列表。
    let fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits[0]); // 输出: 苹果
fruits.push("葡萄"); // 在末尾添加元素

DOM 操作 (核心)

DOM (Document Object Model) 是浏览器将 HTML 文档转换成一个树形结构，JS 可以通过操作这个树来动态地修改页面内容、结构和样式。

  • 获取元素:

    // 通过 ID 获取
let myHeading = document.getElementById('main-heading');
// 通过类名获取 (返回一个列表)
let paragraphs = document.getElementsByClassName('text');
// 通过标签名获取 (返回一个列表)
let allDivs = document.getElementsByTagName('div');
// 最推荐：通过选择器获取 (类似 CSS)
let firstButton = document.querySelector('.btn'); // 获取第一个匹配的元素
let allButtons = document.querySelectorAll('.btn'); // 获取所有匹配的元素列表

  • myHeading.textContent = "新的标题"; // 修改文本内容
myHeading.innerHTML = "<em>新的标题</em>"; // 修改 HTML 内容

  • 修改样式:

    myHeading.style.color = "blue"; // 修改颜色
myHeading.style.fontSize = "24px"; // 修改字体大小

事件处理

让网页响应用户行为，如点击、鼠标悬停、键盘输入等。

<button id="myButton">点击我</button>
<script>
    // 1. 获取元素
    const myButton = document.getElementById('myButton');
    // 2. 添加事件监听器
    myButton.addEventListener('click', function() {
        alert('按钮被点击了！');
    });
</script>

BOM 简介

BOM (Browser Object Model) 是浏览器提供的对象，允许 JS 与浏览器窗口本身进行交互。

  • window: 代表浏览器窗口。
  • window.alert(): 弹出警告框。
  • window.confirm(): 弹出确认框。
  • window.prompt(): 弹出输入框。
  • window.location: 获取或设置当前页面的 URL。

第五部分：综合实战项目

理论学完了,是时候动手实践了。

个人作品集网页

这个项目将综合运用 HTML5 语义化标签、CSS3 布局和样式。

  1. HTML 结构:
    • 使用 <header>, <nav>, <main>, <section>, <footer> 等标签搭建页面骨架。
    • 包含：个人简介、技能展示、项目作品、联系方式等部分。
  2. CSS 样式:
    • 使用 Flexbox 或 Grid 实现响应式布局。
    • 设计美观的配色方案和字体。
    • 添加导航栏的悬停效果、按钮的过渡动画等。
  3. JavaScript 交互:
    • 实现一个平滑滚动到页面不同部分的导航菜单。
    • 当用户滚动到某个部分时,高亮对应的导航项。

待办事项应用

这个项目将重点练习 DOM 操作和事件处理。

  1. HTML 结构:
    • 一个 <input> 用于输入新任务。
    • 一个 <button> 用于添加任务。
    • 一个 <ul> 用于显示任务列表。
  2. JavaScript 功能:
    • 添加任务: 点击按钮或按回车键时，将输入框的内容添加到 <ul> 中,并清空输入框。
    • 删除任务: 每个任务旁边有一个删除按钮,点击后从列表中移除该项。
    • 标记完成: 点击任务本身，可以为其添加一个“已完成”的样式（如文字划线、变灰）。

第六部分：进阶与资源

当你掌握了基础后,可以探索更广阔的世界。

推荐学习资源

  • MDN Web Docs: https://developer.mozilla.org/zh-CN/
    • 最权威、最全面的 Web 技术文档。 每个知识点都有详细的解释和示例,应该成为你的首选查询工具。
  • W3Schools: https://www.w3schools.com/

    一个非常友好的在线教程和参考网站,适合快速上手和查阅。

  • 菜鸟教程: https://www.runoob.com/

    国内非常流行的入门教程,内容通俗易懂。

  • YouTube 频道:
    • Traversy Media: 教程质量极高,项目实战导向。
    • The Net Ninja: 内容系统，讲解清晰,适合初学者。
    • FreeCodeCamp: 完全免费,提供高质量的互动式课程和认证。

下一步该学什么？

  1. 版本控制工具: Git
    • 这是现代开发的必备技能，用于代码的版本管理和团队协作，学习平台：GitHub 或 Gitee。
  2. 前端框架:
    • React: 由 Facebook 开发，目前最流行的框架之一,组件化思想。
    • Vue: 渐进式框架，易学易用,在国内社区非常活跃。
    • Angular: 由 Google 开发,一个功能全面的框架。
  3. 包管理器:
    • npm (Node Package Manager): 随 Node.js 一起安装，用于管理和安装项目依赖（库、工具等）。
  4. 前端工程化:
    • 学习使用 Webpack 或 Vite 等构建工具，它们能帮助你自动化处理代码（如编译、压缩、打包）,提升开发效率。

祝你在前端开发的道路上学有所成,玩得开心！