学习总览：为什么是它们？

  • HTML5 (超文本标记语言)：是网页的骨架，它定义了网页的结构和内容，比如标题、段落、图片、链接等，HTML5 是最新版本，增加了许多语义化标签（如 <header>, <article>, <section>）和强大的功能（如音视频播放、画布 Canvas、本地存储等）。
  • CSS3 (层叠样式表)：是网页的服装和妆容，它负责网页的视觉呈现，包括布局、颜色、字体、动画和响应式设计等，CSS3 带来了圆角、阴影、渐变、动画等丰富的新特性,让网页变得美观且富有动感。
  • jQuery (JavaScript 库)：是让网页动起来的“瑞士军刀”，它是一个轻量级的 JavaScript 库，极大地简化了 JavaScript 的 DOM 操作、事件处理、动画和 Ajax 交互，用 jQuery，你只需几行代码就能实现过去需要几十行 JavaScript 才能完成的功能。

学习顺序建议：

html5 css3 jquery教程
（图片来源网络，侵删）
  1. 先学 HTML5：掌握结构,知道网页由哪些部分组成。
  2. 再学 CSS3：为 HTML 结构穿上漂亮的“衣服”,美化页面。
  3. 最后学 jQuery：让静态的页面“活”起来,实现交互效果。

第一部分：HTML5 基础教程

HTML 是所有 Web 开发的基石,必须先打好基础。

核心知识点

  1. HTML 文档结构：<!DOCTYPE html>, <html>, <head>, <body>。
  2. 基础标签：
    • ：<h1> - <h6> (标题), <p> (段落), <a> (链接), <strong> (强调), <em> (斜体)。
    • 列表：<ul> (无序列表), <ol> (有序列表), <li> (列表项)。
    • 图片：<img> (图像)，学习 src 和 alt 属性。
    • 容器：<div> (块级容器), <span> (行内容器)。
  3. HTML5 语义化标签：理解为什么它们重要（SEO、可读性、可访问性）。
    • <header>, <footer>, <nav>, <main>, <article>, <section>, <aside>。
  4. 表单：与用户交互的核心。
    • <form>, <input> (各种类型如 text, password, email, checkbox, radio), <textarea>, <button>, <label>。
  5. HTML5 多媒体：无需插件即可在网页中嵌入内容。
    • <video> (视频), <audio> (音频)。
  6. HTML5 图形：<canvas> (画布，用于通过 JavaScript 绘制图形) 和 <svg> (可缩放矢量图形)。

学习资源

第二部分：CSS3 基础教程

CSS 让你的网页从“丑小鸭”变成“白天鹅”。

核心知识点

  1. CSS 基础：
    • 语法：选择器 { 属性: 值; }。
    • 引入方式：内联样式、内部样式表 (<style>)、外部样式表 (.css 文件，推荐使用)。
    • 选择器：元素选择器、类选择器 (.class)、ID 选择器 (#id)、后代选择器、伪类选择器 (hover, active)。
  2. 盒模型：理解 CSS 布局的核心。margin (外边距), border (边框), padding (内边距), content (内容)。
  3. 布局：
    • 浮动：float 属性,早期常用的布局方式。
    • Flexbox (弹性盒布局)：现代布局的利器，用于一维布局（行或列）,非常强大和灵活。
    • Grid (网格布局)：现代布局的终极武器，用于二维布局（行和列）,可以创建复杂的页面结构。
  4. CSS3 新特性：
    • 文本样式：text-shadow, @font-face (引入自定义字体)。
    • 视觉效果：border-radius (圆角), box-shadow (阴影), background-gradient (渐变)。
    • 过渡与动画：
      • transition：实现平滑的状态变化。
      • @keyframes 和 animation：创建复杂的自定义动画。
  5. 响应式设计：让你的网页在不同设备（手机、平板、桌面）上都有良好的显示效果。
    • 视口：<meta name="viewport" content="width=device-width, initial-scale=1.0">。
    • 媒体查询：@media，根据屏幕尺寸应用不同的 CSS 样式。

学习资源

第三部分：jQuery 基础教程

jQuery 是提升开发效率的利器，它封装了复杂的 JavaScript 操作。

前提条件

你需要对基础的 JavaScript 有所了解，比如变量、函数、条件语句、循环、对象等，如果完全不懂 JS，建议先花 1-2 天看一些 JS 基础教程。

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

核心知识点

  1. jQuery 入门：
    • 引入 jQuery：通过 CDN 或下载文件引入。
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    • 入口函数：$(document).ready(function() { ... }); 或简写为 $(function() { ... });，确保 DOM 完全加载后再执行代码。
  2. jQuery 选择器：
    • 语法为 $('选择器')，与 CSS 选择器几乎相同，但更强大。$('#myId'), $('.myClass'), $('div p')。
  3. jQuery 操作 DOM：
    • 内容操作：.html(), .text(), .val()。
    • 属性操作：.attr(), .prop(), .addClass(), .removeClass()。
    • 样式操作：.css()。
    • 文档操作：.append(), .prepend(), .after(), .before(), .remove(), .empty()。
  4. jQuery 事件处理：
    • 语法为 $('元素').事件名(function() { ... });。
    • 常用事件：.click(), .hover(), .on() (推荐使用，可以绑定多个事件)。
  5. jQuery 动画：
    • .show(), .hide(), .toggle()：显示/隐藏元素。
    • .fadeIn(), .fadeOut(), .fadeToggle()：淡入淡出。
    • .slideUp(), .slideDown(), .slideToggle()：滑动效果。
    • .animate()：自定义动画。
  6. jQuery Ajax：
    • $.ajax()：功能最全
html5 css3 jquery教程
（图片来源网络，侵删）