为什么学习 HTML5 和 CSS3？
在开始寻找教程之前,先明确它们的重要性：
（图片来源网络，侵删）
- HTML5 (超文本标记语言第5版)：是网页的骨架，它定义了网页的结构和内容，比如标题、段落、图片、链接、表单等，HTML5 引入了许多新的语义化标签（如
<header>,<article>,<section>），让代码更清晰,对搜索引擎和屏幕阅读器更友好。 - CSS3 (层叠样式表第3版)：是网页的外表，它负责网页的视觉表现，包括布局、颜色、字体、动画、响应式设计等，CSS3 强大的功能（如 Flexbox, Grid, 动画）让网页设计从简单的静态页面发展成精美的交互式应用。
简单比喻：HTML5 是房子的钢筋水泥结构，CSS3 是房子的装修、颜色和家具。
HTML5 和 CSS3 核心知识点速览
一份好的基础教程 PDF 通常会涵盖以下内容,您可以对照这个列表来评估教程的质量。
HTML5 基础
- 文档结构:
<!DOCTYPE html>声明<html>,<head>,<body><meta>标签（字符集charset="UTF-8"、视口viewport）<title>和<link>(引入CSS)
- :
- 标题标签：
<h1>到<h6> - 段落：
<p> - 链接：
<a> - 强调：
<strong>,<em> - 换行：
<br>,<hr>
- 标题标签：
- 列表:
- 无序列表：
<ul> - 有序列表：
<ol> - 列表项：
<li>
- 无序列表：
- 图片与多媒体:
- 图片：
<img src="..." alt="...">(alt 属性至关重要) - 语义化多媒体：
<video>,<audio>(取代了旧的<object>和<embed>)
- 图片：
- 语义化标签 (HTML5 新特性):
<header>,<footer>,<nav>,<main><article>,<section>,<aside><figure>和<figcaption>
- 表单:
<form>,<input>,<button>,<label>,<select>,<textarea>- HTML5 新的输入类型：
email,tel,date,number,range等,提供了更好的移动端和桌面端体验。
- 其他:
<div>(通用块级容器)<span>(通用行内容器)
CSS3 基础
- 基础语法:
- 选择器：元素选择器、类选择器、ID 选择器、后代选择器、伪类选择器等。
- 声明块：
属性: 值; - 引入方式：内联样式、内部样式表 (
<style>), 外部样式表 (<link>) - 推荐使用外部样式表。
- 盒模型:
- 理解
content,padding,border,margin。 box-sizing: border-box;(现代布局的基石)。
- 理解
- 布局技术:
- 浮动: 老旧的布局方式,用于实现图文环绕等效果。
- Flexbox (弹性盒): 一维布局的利器，用于实现水平/垂直居中、平均分配空间等,是现代前端开发的必备技能。
- Grid (网格): 二维布局的利器，可以同时控制行和列,非常适合复杂的页面布局。
- 视觉样式:
- 颜色：
color,background-color,rgba(),hex。 - 字体：
font-family,font-size,font-weight,text-align,line-height。 - 背景：
background-image,background-size,background-repeat。 - 边框与圆角：
border,border-radius。 - 阴影：
box-shadow,text-shadow。 - 过渡：
transition(为属性变化添加平滑动画)。 - 变换：
transform(旋转、缩放、平移)。 - 动画：
@keyframes和animation(创建复杂的关键帧动画)。
- 颜色：
- 响应式设计:
- 媒体查询:
@media (max-width: 768px) { ... },是响应式设计的核心。 - 流式布局：使用百分比 (%) 而非固定像素。
- 视口：
<meta name="viewport" content="width=device-width, initial-scale=1.0">。
- 媒体查询:
优质免费 HTML5 & CSS3 教程 PDF 资源推荐
以下资源都是经过验证的，质量很高,非常适合初学者。
MDN Web Docs - Web 动态教程 (可生成PDF)
- 简介: 由 Mozilla (火狐浏览器开发商) 维护，是最权威、最全面、最推荐的 Web 技术文档，内容非常严谨,且持续更新。
- 特点:
- 内容覆盖面极广,从入门到精通都有。
- 互动式学习体验,可以在线编辑代码并实时预览。
- 可以方便地生成或打印为PDF。
- 如何获取PDF:
- 访问 MDN 学习 Web 开发。
- 进入具体的模块，如 HTML 简介 或 CSS 第一步。
- 在页面右上角，点击菜单按钮，选择“打印此页面”或“保存为PDF”。
- 链接: https://developer.mozilla.org/zh-CN/docs/Learn
W3Schools - 在线教程 (可打印为PDF)
- 简介: 一个老牌的在线 Web 技术教程网站,以其简洁明了的示例而闻名。
- 特点:
- 内容精炼，每个知识点都有“尝试一下”的在线编辑器。
- 非常适合快速查阅和上手。
- 提供离线版本和可打印的PDF版本。
- 如何获取PDF:
- 访问 W3Schools HTML5 Tutorial 或 W3Schools CSS Tutorial。
- 在每个页面的右侧，通常会有一个“Print”或“PDF”的链接。
- 链接:
菜鸟教程 (runoob.com)
- 简介: 国内非常受欢迎的编程入门网站,提供了大量中文教程和实例。
- 特点:
- ,对中文用户非常友好。
- 知识点罗列清晰,配有大量简单的代码示例。
- 同样提供PDF下载选项。
- 如何获取PDF:
- 访问 菜鸟教程 HTML5 教程。
- 在页面右侧或顶部，可以找到“离线手册”或“PDF下载”的链接。
- 链接:
freeCodeCamp
- 简介: 一个非营利
（图片来源网络，侵删）
