引言

随着互联网技术的不断发展，HTML5和CSS3成为了现代网页设计的重要基石。HTML5提供了更加丰富和语义化的标签，而CSS3则带来了更为强大的样式和动画处理能力。本文将为您从零开始，详细讲解HTML5与CSS3的基础知识，助您轻松掌握现代网页设计。

HTML5基础

1. HTML5简介

HTML5是HTML的第五个版本，它旨在使网页设计更加简洁、高效，并增强网页的功能性。HTML5具有以下特点：

  • 语义化标签：如<header>, <nav>, <article>, <section>, <aside>, <footer>等，使网页结构更清晰。
  • 多媒体支持：直接支持<video>和<audio>标签，无需插件即可播放视频和音频。
  • 本地存储：使用localStorage和sessionStorage实现本地数据存储。
  • 表单控件：增加了日期、时间、电子邮件等新的表单控件。

2. HTML5基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5网页结构示例</title>
</head>
<body>
    <header>网站头部</header>
    <nav>导航链接</nav>
    <section>内容区域</section>
    <article>文章或博客内容</article>
    <aside>侧边栏</aside>
    <footer>尾部</footer>
</body>
</html>

CSS3基础

1. CSS3简介

CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它扩展了CSS的功能，包括：

  • 过渡和动画：使用transition和animation属性实现元素的平滑过渡和动画效果。
  • 弹性布局：使用flexbox实现自适应和响应式布局。
  • 媒体查询：根据不同的设备或屏幕尺寸应用不同的样式。
  • 2D/3D转换和变换：使用transform属性实现元素的2D和3D变换。

2. CSS3基本语法

/* 选择器 */
selector {
    /* 属性和值 */
    property: value;
}

3. CSS3常用属性

  • 颜色：color, background-color
  • 字体：font-family, font-size, font-weight
  • 尺寸：width, height, padding, margin
  • 边框：border, border-width, border-color, border-radius
  • 文本：text-align, text-decoration, white-space
  • 盒子模型：box-sizing, overflow

HTML5与CSS3结合

1. 创建响应式网页

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式网页示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>网站头部</header>
    <nav>导航链接</nav>
    <section>内容区域</section>
    <article>文章或博客内容</article>
    <aside>侧边栏</aside>
    <footer>尾部</footer>
</body>
</html>

/* styles.css */
/* 媒体查询 */
@media (max-width: 600px) {
    body {
        background-color: #f0f0f0;
    }
}

2. 使用HTML5 Canvas绘图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Canvas绘图示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 150, 150);
    </script>
</body>
</html>

总结

本文从HTML5和CSS3的基础知识出发，详细讲解了现代网页设计的入门指南。通过学习本文，您将能够轻松掌握HTML5与CSS3的基本语法和应用，从而打造出美观、实用的现代网页。