了解HTML5
HTML5是当前最流行的网页制作标准，它不仅包含了HTML4的所有特性，还引入了许多新的功能，如视频、音频、绘图、本地存储等。对于初学者来说，HTML5提供了一个更加丰富和强大的平台来创建网页。
HTML5的基本结构
一个HTML5页面通常包含以下基本结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
<!DOCTYPE html>：声明文档类型为HTML5。<html>：根元素，包含整个页面的内容。<head>：包含页面的元数据，如字符集、标题等。<body>：包含页面的可见内容。
HTML5标签入门
常用标签
<h1>-<h6>：标题标签，<h1>是最重要的标题，<h6>是最不重要的标题。<p>：段落标签。<a>：超链接标签，用于创建链接。<img>：图像标签，用于在网页中插入图片。<div>：块级元素，用于布局。<span>：内联元素，用于文本格式化。
实例
以下是一个简单的HTML5页面示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个HTML5页面</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是我的第一个HTML5页面。</p>
<a href="https://www.example.com">访问示例网站</a>
<img src="image.jpg" alt="示例图片">
<div>这是一个div元素</div>
<span>这是一个span元素</span>
</body>
</html>
HTML5布局
HTML5提供了多种布局方式，如Flexbox和Grid布局。
Flexbox布局
Flexbox是一种用于在容器内分配和定位元素的方式。以下是一个简单的Flexbox布局示例：
<div class="container">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
.container {
display: flex;
justify-content: space-around;
}
.item {
flex: 1;
}
Grid布局
Grid布局是一种用于创建复杂布局的方式。以下是一个简单的Grid布局示例：
<div class="grid-container">
<div class="grid-item">项目1</div>
<div class="grid-item">项目2</div>
<div class="grid-item">项目3</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.grid-item {
grid-column: 1;
}
HTML5多媒体
HTML5支持视频和音频标签，可以轻松地在网页中嵌入多媒体内容。
视频标签
<video src="video.mp4" controls></video>
音频标签
<audio src="audio.mp3" controls></audio>
总结
通过以上内容，我们可以了解到HTML5的基本结构和常用标签，以及如何使用Flexbox和Grid布局。此外，HTML5还支持多媒体内容，可以让我们在网页中嵌入视频和音频。希望这篇文章能帮助你快速上手HTML5，开始你的网页制作之旅。
