引言
在数字化时代，网页制作已经成为一项基础且实用的技能。HTML5作为最新的网页标准，拥有丰富的功能和强大的兼容性，是学习网页制作的首选。本文将为你提供一份HTML5入门自学教程，帮助你轻松掌握网页制作的核心技术。
第一章：HTML5基础
1.1 HTML5简介
HTML5是HTML的第五个版本，它带来了许多新的特性和功能，如视频、音频、绘图、离线存储等。学习HTML5，可以让你更高效地制作网页。
1.2 HTML5文档结构
HTML5文档结构主要包括：<!DOCTYPE html>、<html>、<head>、<body>等标签。下面是一个简单的HTML5文档结构示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5入门教程</title>
</head>
<body>
<h1>欢迎来到HTML5世界</h1>
<p>这里是HTML5入门教程的内容。</p>
</body>
</html>
1.3 HTML5常用标签
HTML5提供了丰富的标签，以下是一些常用的标签：
<h1>至<h6>：标题标签<p>：段落标签<a>：超链接标签<img>：图片标签<video>：视频标签<audio>：音频标签
第二章：CSS3入门
2.1 CSS3简介
CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它扩展了CSS的功能，如动画、过渡、阴影等。
2.2 CSS3选择器
CSS3提供了多种选择器，如标签选择器、类选择器、ID选择器等。以下是一些常用的CSS3选择器：
- 标签选择器：
h1、p、a等 - 类选择器：
.my-class、.my-id等 - ID选择器：
#my-id
2.3 CSS3样式
CSS3提供了丰富的样式，如颜色、字体、背景、边框、阴影等。以下是一些常用的CSS3样式：
- 颜色：
color、background-color - 字体：
font-family、font-size - 背景：
background-color、background-image - 边框：
border、border-radius - 阴影：
box-shadow
第三章：HTML5与CSS3实战
3.1 制作一个简单的网页
以下是一个简单的HTML5与CSS3实战示例：
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.content {
margin: 20px;
}
</style>
</head>
<body>
<div class="header">
<h1>我的网页</h1>
</div>
<div class="content">
<p>这里是网页内容。</p>
</div>
</body>
</html>
3.2 制作一个响应式网页
响应式网页可以适应不同设备的屏幕尺寸。以下是一个简单的响应式网页示例：
<!DOCTYPE html>
<html>
<head>
<title>响应式网页</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
@media (max-width: 600px) {
.container {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>响应式网页</h1>
<p>这是一个响应式网页。</p>
</div>
</body>
</html>
结语
通过本文的学习，相信你已经对HTML5和CSS3有了初步的了解。接下来，你可以通过实践来不断提高自己的技能。祝你学习愉快！