HTML5和CSS3实例教程，从哪学起？-杰瑞科技汇

教程总览

目标读者: 对网页开发零基础或初学者。
学习方式: 理论 + 实践，每个知识点都配有代码示例和效果演示，强烈建议你亲手敲一遍代码,并修改它看看会发生什么。
工具准备: 你只需要一个文本编辑器（如 VS Code, Sublime Text, Notepad++ 甚至记事本）和一个浏览器（如 Chrome, Firefox, Edge）。

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

HTML (HyperText Markup Language) 是用来描述网页结构的语言，你可以把它想象成盖房子的钢筋骨架，定义了哪里是头部，哪里是正文,哪里是图片。

什么是 HTML5？

HTML5 是 HTML 的最新 major 版本，它不仅增加了许多新的语义化标签，还内置了多媒体播放、绘图等强大功能，让我们不再需要依赖 Flash 等外部插件。

第一个 HTML5 页面

创建一个新文件，命名为 index.html,然后复制以下代码进去。

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

如何运行？ 将文件保存后，用浏览器直接打开它,你会看到一个简单的标题和两段文字。

代码解析:

<!DOCTYPE html>: 必须放在文档最开头，告诉浏览器使用 HTML5 规范来解析。
<html>: 所有网页内容的根容器。
<head>: 页面的“大脑”，包含页面的元数据（如标题、字符编码、引入的样式等）,这些内容不会直接显示在页面上。
<body>: 页面的“身体”，所有用户能看到的内容（文字、图片、视频等）都放在这里。
<h1>: 一级标题,重要性最高。
<p>: 段落标签。

HTML5 语义化标签

HTML5 引入了许多具有明确含义的标签，让代码结构更清晰，也利于搜索引擎优化（SEO）和屏幕阅读器（无障碍访问）。

实例：构建一个简单的文章页面

<!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="#">文章</a></li>
                <li><a href="#">关于我</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题：HTML5 的魅力</h2>
            <p>发布时间: <time datetime="2025-10-27">2025年10月27日</time></p>
            <p>HTML5 带来了许多激动人心的新特性...</p>
        </article>
    </main>
    <aside>
        <h3>相关链接</h3>
        <ul>
            <li><a href="#">CSS3 教程</a></li>
            <li><a href="#">JavaScript 入门</a></li>
        </ul>
    </aside>
    <footer>
        <p>&copy; 2025 我的博客. 保留所有权利.</p>
    </footer>
</body>
</html>

标签解析:

<header>: 页面或区域的头部，通常包含 logo、导航等。
<nav>: 导航链接区域。
<main>: 页面的主要内容，一个页面中只应有一个 <main>。
<article>: 独立的内容块，比如一篇文章、一篇博客、一个帖子。
<aside>: 侧边栏，与主要内容相关但可以独立存在的内容（如链接、广告）。
<footer>: 页面或区域的底部,通常包含版权信息。
<time>: 表示时间或日期,机器可读。

HTML5 多媒体元素

再也不用用 <object> 或 <embed> 嵌入 Flash 了！

实例：嵌入视频和音频

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">多媒体元素</title>
</head>
<body>
    <h2>HTML5 视频</h2>
    <!-- 
      src: 视频文件路径
      controls: 显示播放控件
      width/height: 设置宽高
      poster: 视频播放前的封面图
    -->
    <video src="my-video.mp4" width="400" controls poster="poster.jpg"></video>
    <h2>HTML5 音频</h2>
    <!-- 
      src: 音频文件路径
      controls: 显示播放控件
      loop: 循环播放
    -->
    <audio src="my-audio.mp3" controls loop></audio>
</body>
</html>

注意: 你需要准备一个 my-video.mp4 和 my-audio.mp3 文件放在同一目录下才能看到效果。

HTML5 表单增强

HTML5 大大增强了表单的功能，提供了新的输入类型和验证，减少了 JavaScript 的使用。

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">HTML5 表单</title>
</head>
<body>
    <form action="/submit" method="post">
        <h2>用户注册</h2>
        <label for="email">电子邮箱:</label>
        <input type="email" id="email" name="email" required>
        <label for="url">个人网站:</label>
        <input type="url" id="url" name="url">
        <label for="birthday">生日:</label>
        <input type="date" id="birthday" name="birthday">
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" min="18" max="99">
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" minlength="6">
        <label for="color">你喜欢的颜色:</label>
        <input type="color" id="color" name="color" value="#3366cc">
        <label for="message">留言:</label>
        <textarea id="message" name="message" rows="4"></textarea>
        <button type="submit">提交</button>
    </form>
</body>
</html>

新的输入类型:

email: 自动验证输入是否为邮箱格式。
url: 自动验证输入是否为网址格式。
date: 提供日期选择器。
number: 提供数字输入框，可设置最小/最大值。
color: 提供颜色选择器。
password: 密码输入框,输入内容显示为圆点。
textarea: 多行文本输入域。

新的属性:

required: 表示该字段为必填项。
minlength / maxlength: 设置输入的最小/最大长度。
min / max: 设置数字的最小/最大值。

第二部分：CSS3 - 网页的颜值

CSS (Cascading Style Sheets) 是用来描述网页样式的语言，它给 HTML 骨架穿上了漂亮的衣服，控制颜色、布局、字体、动画等。

什么是 CSS3？

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

如何引入 CSS？

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

内联样式 (不推荐) 直接写在 HTML 标签里,只影响当前标签。

<p style="color: blue; font-size: 20px;">这是一段蓝色文字。</p>

内部样式表 写在 HTML 文件的 <head> 标签里的 <style> 标签中,只影响当前页面。

<head>
    <style>
        p {
            color: green;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <p>这段文字是绿色的。</p>
</body>

外部样式表 (最佳实践) 创建一个 .css 文件（如 styles.css），然后在 HTML 中通过 <link> 引入。

styles.css 文件内容:

p {
    color: red;
    font-size: 18px;
}

index.html 文件内容:

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这段文字是红色的。</p>
</body>

优势: 结构清晰，多个页面可以共享同一个样式表,便于维护。

CSS3 选择器

选择器是 CSS 的核心，它告诉浏览器要对哪个 HTML 元素应用样式。

实例：展示各种选择器

HTML (selectors.html):

<p>这是一个段落。</p>
<p class="highlight">这是一个被高亮的段落。</p>
<p id="intro">这是一个介绍性的段落。</p>
<div class="container">
    <p>这是 div 容器内的段落。</p>
</div>

CSS (styles.css):

/* 1. 元素选择器: 选择所有 <p> 标签 */
p {
    border: 1px solid #ccc;
    padding: 5px;
    margin: 5px 0;
}
/* 2. 类选择器: 所有 class="highlight" 的元素 */
.highlight {
    background-color: yellow;
    font-weight: bold;
}
/* 3. ID 选择器: id="intro" 的元素 (ID 在一个页面中必须是唯一的) */
#intro {
    color: blue;
}
/* 4. 后代选择器: 选择 .container 内部的所有 <p> 标签 */
.container p {
    color: green;
}
/* 5. 伪类选择器: 鼠标悬停在链接上时的样式 */
a:hover {
    color: red;
    text-decoration: none;
}

CSS3 视觉效果

这是 CSS3 最受欢迎的部分,让元素立刻变得立体和生动。

实例：圆角、阴影、渐变

HTML (effects.html):

<h1>CSS3 视觉效果</h1>
<div class="box">圆角盒子</div>
<br>
<div class="shadow-box">带阴影的盒子</div>
<br>
<div class="gradient-box">渐变背景盒子</div>

CSS (styles.css):

.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    /* 圆角 */
    border-radius: 15px; /* 四个角都是15px */
    /* border-radius: 15px 15px 0 0; /* 左上、右上、右下、左下 */
}
.shadow-box {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin-top: 20px;
    /* 盒子阴影 */
    /* h-shadow v-shadow blur spread color */
    box-shadow: 10px 10px 5px #888888;
}
.gradient-box {
    width: 200px;
    height: 100px;
    margin-top: 20px;
    /* 线性渐变 */
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    /* 径向渐变 */
    /* background: radial-gradient(circle, #ff7e5f, #feb47b); */
}

CSS3 过渡与动画

让元素的变化过程平滑、自然,而不是突兀地跳变。

实例：过渡效果

HTML (transition.html):

<button id="myButton">鼠标悬停在我上面</button>

CSS (styles.css):

#myButton {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* 定义过渡效果: 属性名 持续时间 速度曲线 延迟 */
    transition: background-color 0.5s ease-in-out, transform 0.5s ease-in-out;
}
#myButton:hover {
    background-color: #e74c3c;
    transform: scale(1.1); /* 放大 1.1 倍 */
}

效果: 当鼠标移到按钮上时，背景色和大小会在 0.5 秒内平滑地变化。

实例：关键帧动画

HTML (animation.html):

<div class="animated-box"></div>

CSS (styles.css):

.animated-box {
    width: 100px;
    height: 100px;
    background-color: #9b59b6;
    /* 动画名称 持续时间 速度曲线 延迟 播放次数 */
    animation: myAnimation 2s infinite alternate;
}
/* 定义关键帧动画 */
@keyframes myAnimation {
    0% {
        transform: translateX(0) rotate(0deg);
        background-color: #9b59b6;
    }
    50% {
        transform: translateX(200px) rotate(180deg);
        background-color: #3498db;
    }
    100% {
        transform: translateX(400px) rotate(360deg);
        background-color: #e74c3c;
    }
}

效果: 紫色方块会沿着 X 轴移动并旋转，同时颜色也会变化,动画会无限循环播放。

第三部分：综合实例 - 响应式个人简介页面

我们将所有知识整合起来，创建一个简单的响应式个人简介页面,这个页面在电脑和手机上都能有不错的显示效果。

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="styles.css">
</head>
<body>
    <header>
        <h1>张三</h1>
        <p>前端开发工程师 | UI/UX 爱好者</p>
    </header>
    <main>
        <section class="about">
            <h2>关于我</h2>
            <p>你好！我是一名充满激情的前端开发者，热爱创造美观且用户友好的网页，我专注于 HTML5, CSS3 和 JavaScript 技术。</p>
        </section>
        <section class="skills">
            <h2>技能</h2>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript</li>
                <li>响应式设计</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 张三. All rights reserved.</p>
    </footer>
</body>
</html>

CSS 样式 (`styles.css`)

/* 全局样式和基础设置 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}
/* 头部样式 */
header {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
    text-align: center;
    padding: 50px 20px;
}
header h1 {
    margin: 0;
    font-size: 2.5em;
}
header p {
    font-size: 1.2em;
    margin-top: 10px;
}
区域 */
main {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
section {
    margin-bottom: 30px;
}
section h2 {
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
    color: #3498db;
}
/* 技能列表样式 */
.skills ul {
    list-style-type: none;
    padding: 0;
}
.skills li {
    background-color: #eaf2f8;
    border-left: 5px solid #3498db;
    padding: 10px;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}
.skills li:hover {
    transform: translateX(10px);
}
/* 页脚样式 */
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: #fff;
    margin-top: 20px;
}
/* 响应式设计：当屏幕宽度小于 600px 时 */
@media (max-width: 600px) {
    header h1 {
        font-size: 2em;
    }
    main {
        margin: 10px;
        padding: 15px;
    }
    section h2 {
        font-size: 1.5em;
    }
}

如何学习？

动手敲代码: 不要只看不练,把上面的每一个例子都自己敲一遍。
修改和实验: 改变颜色、大小、边距等属性，看看会发生什么，这是学习 CSS 最快的方式。
善用开发者工具: 在浏览器中按 F12 打开开发者工具，你可以实时修改 HTML 和 CSS，并立即看到效果,这是调试和学习的利器。
查阅官方文档: 当遇到不熟悉的属性时，可以查阅 MDN Web Docs，这是最权威、最全面的 Web 技术文档。
学习 Flexbox 和 Grid: 这是现代 CSS 布局的两大核心技术，在你掌握了基础后,一定要深入学习它们。

这份教程为你打下了坚实的基础，祝你在 Web 开发的世界里探索愉快！

HTML5和CSS3实例教程，从哪学起？

教程总览

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

什么是 HTML5？

第一个 HTML5 页面

HTML5 语义化标签

HTML5 多媒体元素

HTML5 表单增强

第二部分：CSS3 - 网页的颜值

什么是 CSS3？

如何引入 CSS？

CSS3 选择器

CSS3 视觉效果

CSS3 过渡与动画

第三部分：综合实例 - 响应式个人简介页面

HTML 结构 (`index.html`)

CSS 样式 (`styles.css`)

如何学习？

99ANYc3cd6

Java String大小写转换如何实现？