HTML5 简介

HTML5 是当前最流行的网页开发标准，自2014年正式发布以来，它已经成为了构建现代网页和应用程序的基础。HTML5 提供了许多新的元素和功能，使得网页设计更加丰富和强大。本教程将从零开始，带你一步步掌握 HTML5 的基础知识，并通过实战项目加深理解。

HTML5 基础

1. HTML5 基本结构

HTML5 文档的基本结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2. HTML5 元素

HTML5 引入了许多新的元素，如 <article>, <section>, <nav>, <aside> 等，这些元素有助于提高网页的结构性和语义化。

3. HTML5 属性

HTML5 也增加了一些新的属性，如 placeholder, autofocus, multiple 等，这些属性可以增强用户体验。

HTML5 实战项目

1. 制作个人博客

项目目标

创建一个简单的个人博客，包括首页、文章列表、文章详情页等。

实现步骤

  1. 首页：使用 <header>, <nav>, <article>, <footer> 等元素构建页面结构。
  2. 文章列表：使用 <ul> 和 <li> 元素展示文章列表。
  3. 文章详情页：创建一个单独的页面，展示文章的详细信息。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人博客首页</title>
</head>
<body>
    <header>
        <h1>我的博客</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <h2>文章标题</h2>
        <p>这里是文章内容...</p>
    </article>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

2. 制作响应式网页

项目目标

创建一个响应式网页，能够适应不同设备屏幕尺寸。

实现步骤

  1. 使用 CSS3 的媒体查询（Media Queries）实现响应式布局。
  2. 使用百分比、视口单位（vw/vh）等布局方法，使网页在不同设备上具有良好展示。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 80%;
            margin: 0 auto;
        }
        @media (max-width: 600px) {
            .container {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面内容 -->
    </div>
</body>
</html>

总结

通过本教程，你已掌握了 HTML5 的基础知识，并能够通过实战项目加深理解。HTML5 作为现代网页开发的核心技术，掌握它将为你的职业生涯带来更多机会。祝你学习愉快！