一、HTML5简介

HTML5，即超文本标记语言第五版，是当前网页制作的主流技术。它相较于之前的版本，在多媒体支持、图形绘制、离线存储等方面有了很大的改进。掌握HTML5，可以帮助我们轻松制作出更加丰富、互动性更强的网页。

二、准备工作

1. 安装开发环境

在开始学习HTML5之前，我们需要安装一个开发环境。以下是一些常用的开发工具：

  • 文本编辑器：如Notepad++、Sublime Text、Visual Studio Code等。
  • 浏览器：如Chrome、Firefox、Safari等，用于预览和测试网页效果。

2. 学习HTML5基础语法

在动手实践之前，我们需要了解HTML5的基本语法。以下是一些常用的HTML5标签：

  • <html>：定义整个HTML文档。
  • <head>：包含文档的元数据，如标题、样式等。
  • <body>：包含文档的可见内容。
  • <title>：定义文档的标题。
  • <h1>-<h6>：定义标题级别。
  • <p>：定义段落。
  • <a>：定义超链接。
  • <img>：定义图像。

三、动手实践

1. 创建第一个HTML5页面

打开文本编辑器，输入以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个HTML5页面</title>
</head>
<body>
    <h1>欢迎来到我的HTML5页面</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">点击这里访问示例网站</a>
    <img src="image.jpg" alt="示例图片">
</body>
</html>

保存文件为index.html，然后使用浏览器打开它。你会看到一个简单的HTML5页面。

2. 添加样式

为了使页面更加美观，我们可以添加CSS样式。以下是一个简单的CSS样式示例：

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

将这段CSS代码保存为style.css，然后在HTML文件中引入它：

<head>
    <title>我的第一个HTML5页面</title>
    <link rel="stylesheet" href="style.css">
</head>

3. 添加JavaScript

为了使页面具有交互性，我们可以添加JavaScript代码。以下是一个简单的JavaScript示例：

function sayHello() {
    alert('Hello, world!');
}

将这段JavaScript代码保存为script.js，然后在HTML文件中引入它：

<head>
    <title>我的第一个HTML5页面</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

在页面中添加一个按钮，并为其绑定sayHello函数：

<button onclick="sayHello()">点击我</button>

现在，当你点击按钮时，会弹出一个“Hello, world!”的提示框。

四、总结

通过以上实验，我们已经完成了HTML5网页制作的入门步骤。在实际开发中，我们还需要学习更多的标签、属性和技巧。但相信只要你动手实践，一定能够轻松掌握网页制作。祝你在网页制作的道路上越走越远！