引言

HTML5作为现代网页开发的核心技术，其强大的功能和丰富的API为开发者提供了更多可能性。然而，要真正掌握HTML5并应用于实际项目中，仅了解其语法是不够的，还需要熟悉层叠样式表（CSS）的使用。本文将为您提供一份实战教学攻略，帮助您轻松掌握HTML5和CSS，提升网页开发技能。

第一部分：HTML5基础

1.1 HTML5概述

HTML5是HTML的第五个版本，它不仅继承了HTML4的语法，还引入了许多新特性和API。以下是一些HTML5的主要特点：

  • 语义化标签：如<header>, <nav>, <article>, <section>, <footer>等，使页面结构更清晰。
  • 多媒体支持：如<video>和<audio>标签，无需额外插件即可播放视频和音频。
  • 离线应用：通过HTML5的Application Cache功能，可以实现离线应用。
  • 图形和动画：通过<canvas>和<svg>标签，可以实现丰富的图形和动画效果。

1.2 HTML5结构

以下是一个简单的HTML5页面结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5页面</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>网站标题</h1>
    </header>
    <nav>
        <!-- 导航栏内容 -->
    </nav>
    <article>
        <!-- 文章内容 -->
    </article>
    <section>
        <!-- 区块内容 -->
    </section>
    <footer>
        <!-- 页脚内容 -->
    </footer>
</body>
</html>

第二部分：CSS基础

2.1 CSS概述

CSS（层叠样式表）用于描述HTML文档的外观和格式。它允许您将样式与内容分离，提高网页的可维护性和可读性。

2.2 CSS语法

CSS的基本语法如下：

选择器 {
    属性: 值;
}

例如，以下CSS代码将使所有<p>元素的字体颜色变为红色：

p {
    color: red;
}

2.3 CSS选择器

CSS选择器用于指定要应用样式的元素。以下是一些常用的CSS选择器：

  • 标签选择器：如p、div等。
  • 类选择器：如.class。
  • ID选择器：如#id。
  • 后代选择器：如ul li。
  • 通配符选择器：如*。

第三部分：实战案例

3.1 创建一个简单的博客页面

以下是一个简单的博客页面示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>我的博客</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">文章</a></li>
            <li><a href="#">关于我</a></li>
        </ul>
    </nav>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
    <footer>
        <p>版权所有 &copy; 2021</p>
    </footer>
</body>
</html>

/* style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

article {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: #fff;
}

3.2 创建一个响应式布局

响应式布局是指网页在不同设备上都能良好显示的布局。以下是一个简单的响应式布局示例：

/* style.css */
@media (max-width: 600px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }
}

总结

通过本文的学习，您应该已经掌握了HTML5和CSS的基本知识。在实际项目中，不断实践和总结经验，才能不断提高自己的网页开发技能。祝您在网页开发的道路上越走越远！