HTML5与CSS3实例教程该怎么学？-杰瑞科技汇

教程概述

目标读者：零基础或具备少量网页开发知识的初学者。
学习目标：理解 HTML5 和 CSS3 的核心概念，能够独立构建出美观、响应式的静态网页。
学习方式：理论与实践相结合，每个概念都配有代码示例和详细解释，并鼓励你亲手修改代码、查看效果。

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

HTML (HyperText Markup Language) 是网页的“骨架”,它定义了网页内容的结构和含义。

（图片来源网络，侵删）

什么是 HTML5？

HTML5 是 HTML 的最新版本，它引入了许多新的语义化标签、多媒体支持和绘图功能，让网页结构更清晰、功能更强大。

你的第一个 HTML5 页面

每个 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>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个段落。</p>
</body>
</html>

代码解释：

<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个 HTML5 文档。
<html lang="zh-CN">：根元素，lang 属性指定网页的语言为中文。
<head>：包含页面的元数据（关于数据的数据），不会直接显示在页面上。
- <meta charset="UTF-8">：字符编码声明,确保中文等特殊字符能正确显示。
- <meta name="viewport"...>：响应式设计的核心,它告诉浏览器如何控制页面的尺寸和缩放。
- <title>：显示在浏览器标签页上的标题。
<body>：包含所有可见的页面内容，如文本、图片、链接等。

如何运行？ 将代码保存为 .html 文件，然后用任意浏览器（如 Chrome, Firefox）打开它。

（图片来源网络，侵删）

HTML5 语义化标签

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

描述	实例
`<header>`	页面或区域的头部，通常包含导航、logo 等。	网站顶部的横幅
`<nav>`	导航链接的区域。	主菜单
`<main>`	页面的主要内容，一个页面中只有一个。	文章主体、产品介绍
`<article>`	单元，如博客文章、新闻。	一篇博客文章
`<section>`	文档中的一个独立区域，通常有标题。	章节板块
`<aside>`	侧边栏或与主要内容相关但独立的内容。	相关链接、广告
`<footer>`	页面或区域的底部，通常包含版权信息。	页脚

实例：一个简单的网页结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">语义化网页</title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">lt;/a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>新闻动态</h2>
            <article>
                <h3>文章标题一</h3>
                <p>这里是文章的摘要内容...</p>
            </article>
            <article>
                <h3>文章标题二</h3>
                <p>这里是另一篇文章的摘要内容...</p>
            </article>
        </section>
        <aside>
            <h3>相关链接</h3>
            <ul>
                <li><a href="#">链接 1</a></li>
                <li><a href="#">链接 2</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>&copy; 2025 我的网站. 版权所有.</p>
    </footer>
</body>
</html>

动手试试：用这个结构替换你 index.html 中的 <body> 内容,看看效果。

HTML5 新增的表单与输入类型

HTML5 增强了表单功能，提供了新的输入类型,可以实现更丰富的交互和验证。

（图片来源网络，侵删）

常用输入类型：

类型	描述	实例
`email`	用于输入邮箱地址，浏览器会自动验证格式。	`<input type="email" name="user_email">`
`url`	用于输入网址。	`<input type="url" name="website">`
`tel`	用于输入电话号码，在移动设备上会弹出数字键盘。	`<input type="tel" name="phone">`
`number`	用于输入数字，带有上下箭头。	`<input type="number" name="quantity">`
`date`	用于选择日期。	`<input type="date" name="birthday">`
`range`	用于输入一个在一定范围内的数字（滑块）。	`<input type="range" name="volume" min="0" max="100">`
`color`	用于选择颜色。	`<input type="color" name="fav_color">`
`search`	用于搜索框。	`<input type="search" name="search_query">`

实例：一个现代化的注册表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">注册表单</title>
</head>
<body>
    <form action="/submit" method="post">
        <h2>用户注册</h2>
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        <label for="email">电子邮箱:</label>
        <input type="email" id="email" name="email" required>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" minlength="8" required>
        <label for="birthday">出生日期:</label>
        <input type="date" id="birthday" name="birthday">
        <label for="avatar">上传头像:</label>
        <input type="file" id="avatar" name="avatar" accept="image/*">
        <label for="bio">个人简介:</label>
        <textarea id="bio" name="bio" rows="4"></textarea>
        <label for="gender">性别:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
        <label for="interests">兴趣爱好:</label>
        <input type="checkbox" id="sports" name="interests" value="sports">
        <label for="sports">运动</label>
        <input type="checkbox" id="music" name="interests" value="music">
        <label for="music">音乐</label>
        <label for="agreement">同意条款:</label>
        <input type="checkbox" id="agreement" name="agreement" required>
        <label for="agreement">我已阅读并同意服务条款</label>
        <button type="submit">注册</button>
    </form>
</body>
</html>

注意：required 属性表示该字段为必填项。accept 属性用于 file 输入,限制上传的文件类型。

第二部分：CSS3 - 网页的化妆师

CSS (Cascading Style Sheets) 是网页的“化妆师”，它负责控制网页的视觉表现，如颜色、字体、布局和动画。

什么是 CSS3？

CSS3 是 CSS 的最新版本，它带来了大量强大的新特性，如圆角、阴影、渐变、过渡和动画,让网页设计更加灵活和美观。

如何在 HTML 中使用 CSS？

有三种方式，推荐使用 外部样式表。

外部样式表（最佳实践）：创建一个 .css 文件（如 style.css），然后在 HTML 的 <head> 中链接它。
```
<head>
    <link rel="stylesheet" href="style.css">
</head>
```

内部样式表：在 HTML 文件的 <head> 中使用 <style>

<head>
    <style>
        body { background-color: #f0f0f0; }
    </style>
</head>



内联样式（不推荐）：直接在 HTML 标签中使用 style 属性。
<p style="color: blue; font-size: 20px;">这是一个蓝色段落。</p>


CSS3 选择器
选择器用于告诉浏览器要为哪个 HTML 元素应用样式。



选择器类型
示例
描述




元素选择器
p { color: red; }
选择所有 <p>


类选择器
.highlight { background: yellow; }
所有 class="highlight" 的元素。


ID 选择器
#main-header { font-size: 24px; }
id="main-header" 的唯一元素。


后代选择器
div p { margin: 10px; }
选择 <div> 内部的所有 <p>


子选择器
ul > li { list-style-type: none; }
选择所有 <ul> 的直接子元素 <li>。


伪类选择器
a:hover { color: purple; }
鼠标悬停在链接上时的样式。



实例：为我们的语义化网页添加样式
创建一个 style.css 文件,并添加以下代码：
/* style.css */
/* 全局样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}
/* 布局容器 */
.container {
    width: 80%;
    margin: 20px auto;
    overflow: hidden; /* 清除浮动 */
}
/* 头部样式 */
header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}
header h1 {
    margin: 0;
}
/* 导航样式 */
nav ul {
    padding: 0;
    list-style: none;
    margin: 0;
}
nav ul li {
    display: inline;
    margin: 0 15px;
}
nav a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
nav a:hover {
    text-decoration: underline;
}
区域 */
main {
    display: flex; /* 使用 Flexbox 布局 */
    gap: 20px; /* 子元素间距 */
}
/* 文章区域 */
section {
    flex: 3; /* 占用 3 份空间 */
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* 侧边栏样式 */
aside {
    flex: 1; /* 占用 1 份空间 */
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* 页脚样式 */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
}
然后在你的 语义化网页.html 文件的 <head> 中添加：
<link rel="stylesheet" href="style.css">
现在打开 HTML 文件，你会看到一个布局清晰、美观的网页。

CSS3 强大的新特性
a. 盒模型与布局

盒模型：每个 HTML 元素都是一个盒子，由 content, padding (内边距), border (边框), margin (外边距) 组成。
Flexbox (弹性布局)：一维布局模型，非常适合构建导航栏、页脚、卡片等，上面的实例已经使用了 display: flex;。

b. 圆角与阴影

border-radius: 为元素添加圆角。
box-shadow: 为元素添加阴影,创造立体感。

.card {
    width: 200px;
    height: 150px;
    background: #fff;
    border-radius: 10px; /* 四个角都是 10px 圆角 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* x偏移 y偏移 模糊程度 颜色 */
}
c. 渐变

linear-gradient: 线性渐变。
radial-gradient: 径向渐变。

.header-bg {
    background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}
d. 过渡
让属性变化平滑,而不是瞬间完成。
.button {
    background-color: #555;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* 当 background-color 变化时，过渡 0.3 秒 */
}
.button:hover {
    background-color: #000; /* 鼠标悬停时背景变黑，过渡效果会自动生效 */
}
e. 变换
对元素进行旋转、缩放、倾斜和平移。
.box {
    width: 100px;
    height: 100px;
    background: red;
    transition: transform 0.3s ease;
}
.box:hover {
    transform: rotate(15deg) scale(1.1); /* 鼠标悬停时旋转 15 度并放大 1.1 倍 */
}

第三部分：综合实例 - 响应式个人作品集
我们将所有知识整合起来,创建一个简单的响应式个人作品集页面。
目标：在桌面端，内容并排显示；在手机端,内容堆叠显示。
HTML 结构 (portfolio.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>
    <header>
        <h1>张三</h1>
        <p>前端开发工程师</p>
    </header>
    <div class="container">
        <main>
            <section class="about">
                <h2>关于我</h2>
                <p>我是一名充满激情的前端开发者，热爱创造美观且用户友好的网页，我精通 HTML5, CSS3 和 JavaScript。</p>
            </section>
            <section class="projects">
                <h2>我的项目</h2>
                <div class="project-card">
                    <h3>项目一：电商网站</h3>
                    <p>一个使用 React 和 Node.js 构建的现代化电商平台。</p>
                </div>
                <div class="project-card">
                    <h3>项目二：任务管理应用</h3>
                    <p>一个基于 Vue.js 的任务管理工具，支持拖拽排序。</p>
                </div>
            </section>
        </main>
    </div>
    <footer>
        <p>&copy; 2025 张三. All rights reserved.</p>
    </footer>
</body>
</html>
CSS 样式 (style.css)
/* style.css */
/* --- 全局与基础样式 --- */
* {
    box-sizing: border-box; /* 让 padding 和 border 不会撑大元素 */
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background-color: #e9ecef;
    color: #333;
    line-height: 1.6;
}
.container {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}
header {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border-radius: 10px;
    margin-bottom: 30px;
}
header h1 {
    margin: 0;
    font-size: 2.5em;
}
header p {
    margin-top: 10px;
    font-size: 1.2em;
    opacity: 0.9;
}
/* --- Flexbox 布局 --- */
main {
    display: flex;
    gap: 30px; /* 在桌面端，两个 section 之间留出 30px 间距 */
}
/* --- Section 样式 --- */
section {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
section h2 {
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-top: 0;
}
/* --- 项目卡片 --- */
.project-card {
    background: #f8f9fa;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    border-left: 4px solid #007bff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
/* --- 页脚 --- */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    background-color: #333;
    color: #fff;
}
/* --- 响应式设计 --- */
/* 当屏幕宽度小于 768px (典型平板/手机) 时 */
@media (max-width: 768px) {
    main {
        flex-direction: column; /* 将 Flexbox 布局改为纵向（堆叠） */
    }
    header h1 {
        font-size: 2em;
    }
}
效果分析：

桌面端：main 使用 flex-direction: row（默认值），<section class="about"> 和 <section class="projects"> 会并排显示。
移动端：当浏览器窗口宽度小于 768px 时，@media 查询生效，main 的 flex-direction 变为 column，两个 section 就会从上到下堆叠显示。
交互效果：.project-card 的 hover 效果让卡片在鼠标悬停时上浮并加深阴影,增加了动态感。


学习资源推荐

MDN Web Docs (Mozilla Developer Network)：最权威、最全面的 Web 技术文档。https://developer.mozilla.org/zh-CN/
W3Schools：一个简单易懂的在线教程和参考网站。 https://www.w3schools.com/
Codecademy / freeCodeCamp：提供交互式的编程课程,适合边学边练。
CSS-Tricks：专注于 CSS 的博客和教程，有大量实用技巧。 https://css-tricks.com/


恭喜你完成了这份 HTML5 与 CSS3 的实例教程！
你已经掌握了：

HTML5 的语义化标签、表单新特性。
CSS3 的选择器、盒模型、Flexbox 布局、美化特性（圆角、阴影、渐变）和响应式设计的核心。

下一步,你可以尝试：

模仿：找一个你喜欢的简单网站,尝试用学到的技术重新构建它。
实践：为你的个人博客、简历或一个小项目创建一个网站。
进阶：学习 JavaScript，让网页“活”起来。

祝你学习愉快！

选择器类型	示例	描述
元素选择器	`p { color: red; }`	选择所有 `<p>`
类选择器	`.highlight { background: yellow; }`	所有 `class="highlight"` 的元素。
ID 选择器	`#main-header { font-size: 24px; }`	`id="main-header"` 的唯一元素。
后代选择器	`div p { margin: 10px; }`	选择 `<div>` 内部的所有 `<p>`
子选择器	`ul > li { list-style-type: none; }`	选择所有 `<ul>` 的直接子元素 `<li>`。
伪类选择器	`a:hover { color: purple; }`	鼠标悬停在链接上时的样式。

HTML5与CSS3实例教程该怎么学？

教程概述

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

什么是 HTML5？

你的第一个 HTML5 页面

HTML5 语义化标签

HTML5 新增的表单与输入类型

第二部分：CSS3 - 网页的化妆师

什么是 CSS3？

如何在 HTML 中使用 CSS？

CSS3 选择器

CSS3 强大的新特性

第三部分：综合实例 - 响应式个人作品集

HTML 结构 (`portfolio.html`)

CSS 样式 (`style.css`)

学习资源推荐

99ANYc3cd6

Ubuntu 16.04教程怎么学？

Python如何连接MySQL数据库？

Java调用DLL是多线程的吗？

Java中JSON字符串转Map有哪些方法？

VMware ESXi教程，新手如何快速上手？

Python自然语言处理如何高效处理PDF文档？

ubuntu 16.04 java

Adobe Flash CS教程视频如何快速入门？

py2exe for Python2.7如何打包exe？

python crossvalscore

Python JPype安装问题如何解决？

Java如何将ASCII转为Unicode？

Python中return false如何阻止默认行为？

Eclipse如何配置使用SVN教程？

itunes恢复iPhone教程，具体步骤是怎样的？

Java String如何转Date？

HTML5与CSS3实例教程该怎么学？

教程概述

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

什么是 HTML5？

你的第一个 HTML5 页面

HTML5 语义化标签

HTML5 新增的表单与输入类型

第二部分：CSS3 - 网页的化妆师

什么是 CSS3？

如何在 HTML 中使用 CSS？

CSS3 选择器

CSS3 强大的新特性

第三部分：综合实例 - 响应式个人作品集

HTML 结构 (portfolio.html)

CSS 样式 (style.css)

学习资源推荐

相关推荐

Python自然语言处理如何高效处理PDF文档？

HTML 结构 (`portfolio.html`)

CSS 样式 (`style.css`)