第一站：HTML5 简介
HTML5，作为网页开发的重要工具，自2014年正式发布以来，已经成为了现代网页设计的基石。它不仅提供了丰富的功能，还优化了性能，使得网页设计更加灵活和高效。对于新手来说，HTML5是一个很好的起点，因为它简化了代码，增加了新的元素和API，使得网页开发变得更加容易。
第二站：HTML5 基础元素
1. HTML5 基础结构
HTML5 的基础结构主要包括以下几个部分：
<!DOCTYPE html>：声明文档类型。<html>：定义整个HTML文档。<head>：包含文档的元信息，如标题、字符集等。<body>：包含文档的主体内容。
2. 标题和段落
在HTML5中，使用<h1>到<h6>标签来定义标题，使用<p>标签来定义段落。
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<p>这是段落内容。</p>
3. 列表
HTML5提供了有序列表和无序列表，分别使用<ol>和<ul>标签，以及列表项<li>。
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
第三站：HTML5 新增元素
HTML5引入了许多新的元素，使得网页设计更加丰富和高效。
1. 块级元素
<article>：表示页面中的一块与上下文独立的内容。<section>：表示文档中的一个章节。<nav>：表示页面导航链接的部分。
2. 内联元素
<time>：表示日期或时间。<mark>：表示页面中的高亮文本。
3. 多媒体元素
<audio>：用于嵌入音频内容。<video>：用于嵌入视频内容。
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
您的浏览器不支持视频元素。
</video>
第四站：HTML5 表单
HTML5对表单进行了大量的改进，增加了新的输入类型和属性。
1. 新增输入类型
email：用于输入电子邮件地址。tel：用于输入电话号码。url：用于输入网址。
2. 新增属性
placeholder：为输入字段提供提示信息。required：表示该字段是必填的。
<form>
<label for="email">电子邮件：</label>
<input type="email" id="email" name="email" placeholder="请输入电子邮件" required>
<input type="submit" value="提交">
</form>
第五站：HTML5 与 CSS3 结合
HTML5 与 CSS3 的结合，可以打造出更加美观和丰富的网页。CSS3提供了丰富的样式和动画效果，可以与HTML5元素完美结合。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f00;
margin: 20px;
border-radius: 10px;
transition: all 0.5s ease;
}
.box:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
第六站：HTML5 与 JavaScript 结合
HTML5 与 JavaScript 的结合，可以实现动态的网页效果。JavaScript 可以操作 DOM，从而改变网页的内容和样式。
<!DOCTYPE html>
<html>
<head>
<script>
function changeColor() {
var box = document.getElementById('box');
box.style.backgroundColor = '#0f0';
}
</script>
</head>
<body>
<div id="box" style="width: 200px; height: 200px; background-color: #f00;"></div>
<button onclick="changeColor()">改变颜色</button>
</body>
</html>
第七站：HTML5 与服务器端语言结合
HTML5 可以与各种服务器端语言结合，如 PHP、Python、Java 等，实现前后端分离的网页开发。
<!-- HTML5 -->
<!DOCTYPE html>
<html>
<head>
<title>欢迎页面</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
</body>
</html>
<!-- PHP -->
<?php
echo "欢迎来到我的网站";
?>
第八站：HTML5 与数据库结合
HTML5 可以与数据库结合，实现数据的存储和查询。
<!-- HTML5 -->
<!DOCTYPE html>
<html>
<head>
<title>查询数据</title>
</head>
<body>
<form action="query.php" method="post">
<input type="text" name="username" placeholder="请输入用户名">
<input type="submit" value="查询">
</form>
</body>
</html>
<!-- PHP -->
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "SELECT id, firstname, lastname FROM MyGuests";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出数据
while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
}
} else {
echo "0 结果";
}
$conn->close();
?>
总结
通过以上内容，相信你已经对HTML5有了初步的了解。HTML5 是一个强大的工具，可以帮助你轻松打造出精美的网页。当然，这只是HTML5的冰山一角，更多高级功能和技巧等待你去探索。祝你在网页开发的旅程中一切顺利！
