HTML5简介
HTML5是超文本标记语言（HyperText Markup Language）的第五次重大修订，自2014年成为主流标准后，它已成为构建现代网页和网站的首选标记语言。HTML5引入了许多新特性和功能，如本地存储、多媒体支持、绘图API等，使得开发者能够更高效地创建丰富多样的网页内容。
环境准备
在开始学习HTML5之前，你需要以下基本环境：
- 文本编辑器：例如Visual Studio Code、Sublime Text或Notepad++等，用于编写和编辑HTML代码。
- 浏览器：安装主流浏览器，如Google Chrome、Mozilla Firefox或Microsoft Edge等，用于预览和测试你的HTML代码。
基础结构
以下是一个简单的HTML5页面结构示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个HTML5页面</title>
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>欢迎</h2>
<p>这里是我们网站的首页，请享受您的访问。</p>
</section>
<section id="about">
<h2>关于我们</h2>
<p>这里是关于我们的一些信息。</p>
</section>
<section id="contact">
<h2>联系方式</h2>
<p>您可以在这里找到我们的联系方式。</p>
</section>
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
</html>
在这个例子中，我们创建了一个简单的HTML5页面，包含文档类型声明、根元素<html>、头部<head>和主体<body>等。我们还定义了页面标题、导航、主要内容区域和页脚。
标签与元素
HTML5提供了丰富的标签和元素，以下是一些常用的：
<h1>至<h6>：定义标题。<p>：定义段落。<a>：定义超链接。<ul>、<ol>、<li>：定义无序列表和有序列表。<div>：定义一个文档中的分区或节。<span>：在文档中添加一个跨度。<header>、<nav>、<main>、<section>、<footer>：提供语义化的结构化元素。
多媒体支持
HTML5支持内嵌多媒体内容，包括：
<audio>：嵌入音频文件。<video>：嵌入视频文件。
以下是一个示例，演示如何使用这些标签：
<audio controls>
<source src="music.mp3" type="audio/mpeg">
您的浏览器不支持音频播放。
</audio>
<video controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持视频播放。
</video>
响应式设计
HTML5结合CSS3可以轻松实现响应式设计，让你的网站在不同设备和屏幕尺寸上都能良好展示。
以下是一个简单的响应式布局示例：
<!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>
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
@media (max-width: 600px) {
.container {
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>响应式布局</h1>
<p>这里是一些内容。</p>
</div>
</body>
</html>
在这个例子中，我们使用了max-width和margin: 0 auto来创建一个最大宽度为800px的容器，并使用媒体查询@media来实现在不同屏幕尺寸下的自适应布局。
总结
通过本文的介绍，你已经具备了从零开始学习HTML5和建网站的基础知识。现在，你可以开始创建自己的网页和网站了。不断实践和探索，你会在这个过程中不断进步。祝你学习愉快！
