教程概述
本教程分为三个主要部分：
（图片来源网络，侵删）
- HTML5 基础：学习网页的“骨架”，如何构建内容。
- CSS3 基础：学习网页的“样式”，如何美化内容。
- 综合实例：将 HTML5 和 CSS3 结合，动手创建一个完整的网页。
在每个部分,你都会看到概念解释、代码示例以及在线演示链接，你可以直接点击链接查看效果，并复制代码进行修改实验。
第一部分：HTML5 基础
HTML (HyperText Markup Language) 是网页的骨架，它使用标签来定义内容的结构和含义。
第一个 HTML5 页面
一个最简单的 HTML5 文件结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<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>
代码解释：
（图片来源网络，侵删）
<!DOCTYPE html>：声明这是一个 HTML5 文件。<html>：根元素，包裹整个页面的内容。<head>：包含页面的元数据（如标题、字符编码、链接到样式表等），不会直接显示在页面上。<meta charset="UTF-8">：确保页面能正确显示中文等非英文字符。<meta name="viewport" ...>：确保页面在移动设备上有良好的响应式表现。<title>：显示在浏览器标签页上的标题。<body>：包含所有可见的页面内容。
在线演示： 点击这里查看效果
HTML5 语义化标签
HTML5 引入了许多新的语义化标签，它们能让代码结构更清晰，对搜索引擎（SEO）和屏幕阅读器（无障碍访问）更友好。
| 描述 | |
|---|---|
<header> |
定义页面或区域的头部，通常包含导航、logo 等。 |
<nav> |
定义导航链接的容器。 |
<main> |
定义页面的主要内容，一个页面中只应有一个 <main>。 |
<article> |
定义一篇文章、博客、帖子等内容。 |
<section> |
定义文档中的一个区域或节，通常包含标题。 |
<aside> |
定义侧边栏或与主要内容相关但独立的内容。 |
<footer> |
定义页面或区域的底部，通常包含版权信息。 |
实例：一个简单的博客文章结构
<article>
<header>
<h2>文章标题</h2>
<p>发布于 2025年10月27日</p>
</header>
<p>这是文章的主要内容...</p>
<footer>
<p>作者：张三</p>
</footer>
</article>
在线演示： 点击这里查看效果
（图片来源网络，侵删）
HTML5 新增的输入类型
HTML5 为 <input> 标签增加了多种新的类型，提供了更好的用户体验和输入验证。
type="email"：用于邮箱输入，移动端会弹出键盘@。type="url"：用于网址输入。type="number"：用于数字输入，提供上下箭头。type="date"：用于日期选择。type="color"：用于颜色选择器。type="range"：用于滑动条输入。
实例：
<form>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday">
<label for="volume">音量:</label>
<input type="range" id="volume" name="volume" min="0" max="100">
</form>
在线演示： 点击这里查看效果
第二部分：CSS3 基础
CSS (Cascading Style Sheets) 是网页的“化妆师”，它负责设置 HTML 元素的样式，如颜色、字体、布局等。
如何引入 CSS
有三种方式可以在 HTML 中使用 CSS，推荐使用外部样式表。
-
外部样式表 (最佳实践)：创建一个
.css文件，然后在 HTML 的<head>中用<link>标签引入。<!-- index.html --> <head> <link rel="stylesheet" href="style.css"> </head>/* style.css */ body { font-family: Arial, sans-serif; background-color: #f0f0f0; } -
内部样式表：在 HTML 文件的
<head>中使用<style><head> <style> body { font-family: Arial, sans-serif; } </style> </head> -
内联样式 (不推荐)：直接在 HTML 标签中使用
style属性，这种方式只影响单个元素，难以维护。<p style="color: blue; font-size: 20px;">这是一个蓝色段落。</p>
CSS3 选择器
选择器是 CSS 用来定位 HTML 元素的模式。
- 元素选择器：根据标签名选择。
p { color: green; } - 类选择器：根据元素的
class属性选择，前面加一个点 。<p class="highlight">这段文字会高亮。</p>
.highlight { background-color: yellow; } - ID 选择器：根据元素的
id属性选择，前面加一个井号 ，ID 在一个页面中应该是唯一的。<p id="intro">这是介绍文字。</p>
#intro { font-size: 24px; font-weight: bold; }
CSS3 新增属性
CSS3 带来了许多激动人心的新特性，让网页设计更炫酷、更灵活。
(a) 圆角与阴影
border-radius：为元素添加圆角。box-shadow：为元素添加阴影，创造立体感。
实例：
.box {
width: 200px;
height: 100px;
background-color: #4CAF50;
/* 圆角 */
border-radius: 10px;
/* 水平偏移 垂直偏移 模糊距离 阴影颜色 */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
在线演示： 点击这里查看效果
(b) 渐变
linear-gradient：线性渐变。radial-gradient：径向渐变。
实例：
.gradient-bg {
width: 300px;
height: 150px;
/* 从上到下，从蓝色渐变到绿色 */
background: linear-gradient(to bottom, #3498db, #2ecc71);
}
在线演示： 点击这里查看效果
(c) 过渡
transition 属性可以让元素的状态变化（如悬停、点击）变得平滑。
实例：
.button {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
/* 当 background-color 变化时，持续0.3秒，过渡效果为ease */
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #c0392b; /* 鼠标悬停时变色 */
}
在线演示： 点击这里查看效果
(d) 变换
transform 可以对元素进行旋转、缩放、倾斜和平移。
实例：
.card {
width: 150px;
height: 200px;
background-color: #9b59b6;
margin: 50px;
/* 当鼠标悬停时 */
transition: transform 0.3s ease;
}
.card:hover {
/* 旋转10度，放大1.1倍 */
transform: rotate(10deg) scale(1.1);
}
在线演示： 点击这里查看效果
第三部分：综合实例 - 创建一个个人简介卡片
我们将所有学到的知识整合起来,创建一个美观的个人简介卡片。
目标：
创建一个包含头像、姓名、简介和联系方式的卡片，当鼠标悬停在卡片上时，它会优雅地抬起并显示更多信息。
步骤 1：HTML 结构 (index.html)
我们使用语义化标签来构建结构。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">个人简介卡片</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<section class="profile-card">
<img src="https://via.placeholder.com/150" alt="头像" class="avatar">
<h2>李华</h2>
<p class="title">前端开发工程师</p>
<p class="bio">热爱编程，专注于创造优雅的用户体验，擅长 HTML, CSS, JavaScript。</p>
<div class="contact-info">
<p>📧 lihua@example.com</p>
<p>🐱 github.com/lihua</p>
</div>
</section>
</main>
</body>
</html>
步骤 2：CSS 样式 (style.css)
我们用 CSS3 来美化这个卡片。
/* 基础样式重置和页面布局 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
/* 卡片容器 */
.profile-card {
background-color: #ffffff;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 30px;
text-align: center;
width: 320px;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
}
/* 鼠标悬停时的效果 */
.profile-card:hover {
transform: translateY(-10px); /* 向上移动 */
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); /* 阴影加深 */
}
/* 头像样式 */
.avatar {
width: 120px;
height: 120px;
border-radius: 50%; /* 圆形头像 */
border: 4px solid #e0e0e0;
margin-bottom: 20px;
transition: border-color 0.3s ease;
}
.profile-card:hover .avatar {
border-color: #3498db; /* 悬停时边框变色 */
}
h2 {
margin: 10px 0 5px;
color: #333;
}
{
color: #7f8c8d;
font-size: 1em;
margin-bottom: 15px;
}
.bio {
color: #555;
line-height: 1.6;
margin-bottom: 20px;
}
.contact-info p {
margin: 5px 0;
color: #777;
font-size: 0.9em;
}
最终效果
将上面的 HTML 和 CSS 代码保存到两个文件中，用浏览器打开 index.html，你就能看到一个漂亮的个人简介卡片了，将鼠标移到卡片上，你会看到平滑的抬起和阴影变化效果。
在线演示： 点击这里查看最终效果
下一步学习
恭喜你！你已经掌握了 HTML5 和 CSS3 的核心知识，接下来可以探索：
- Flexbox 和 Grid：更强大的 CSS 布局方式，是现代网页布局的基石。
- 响应式设计：使用媒体查询
@media让你的网页在不同尺寸的设备上都能完美显示。 - JavaScript：为网页添加交互行为，如点击事件、动态内容更新等。
- CSS 框架：学习使用 Bootstrap 或 Tailwind CSS 等框架，快速构建专业级的网页。
希望这份教程对你有帮助！最好的学习方式就是动手实践，不断尝试和修改代码，祝你学习愉快！
