1. HTML5 和 HTML 的区别
HTML（HyperText Markup Language）是一种标记语言，用于创建网页结构和内容。而 HTML5 则是 HTML 的最新版本，具有许多新的功能和改进。HTML5 可以通过编写简单、干净的代码来创建更具交互性和多媒体的网页，相比以前的 HTML 版本，更加适合移动端开发。
在 HTML5 中，提供了一些新的元素和 API，使得 web 应用更加易于开发。HTML5 还提供了很多新的 JavaScript API，如 Web Workers、Web Sockets、Geolocation 等，因此更加适合于创建复杂的互联网应用。
另外，HTML5 支持在浏览器中直接播放音频和视频，而无需依赖于第三方插件。还可以提供离线存储，使得 web 应用在没有网络连接时也可以正常运行。
总之，HTML5 是一个比以前版本更加完善、更加灵活和强大的版本。
2. HTML5 的新特性
2.1 语义化标签
在过去，HTML 主要使用 div 和 span 标签来定义页面的结构和样式。但是 HTML5 提供了一些新的语义化标签，如 header、nav、section、article、footer 等，使得描述页面结构和样式更加清晰和简单。
以下是 HTML 和 HTML5 中的区别：
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<style>
header {
background: #ccc;
padding: 10px;
}
nav {
width: 100px;
float: left;
background: #eee;
height: 200px;
list-style: none;
margin: 0;
padding: 0;
}
section {
float: left;
width: 500px;
padding: 20px;
background: #fff;
}
footer {
clear: both;
background: #ccc;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="section">
<p>This is the main content.</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<style>
header {
background: #ccc;
padding: 10px;
}
nav {
width: 100px;
float: left;
background: #eee;
height: 200px;
list-style: none;
margin: 0;
padding: 0;
}
section {
float: left;
width: 500px;
padding: 20px;
background: #fff;
}
footer {
clear: both;
background: #ccc;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>This is the main content.</p>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
从上述代码中我们可以看出，HTML5 使用了语义化的标签来描述页面结构，使得代码更加简单、清晰易读，而且由于所有元素都有默认的样式，所以我们可以省略一些 CSS。
2.2 表单控件
HTML5 提供了新的表单控件，如 date、time、email、url 等，使得创建表单更加直观、简便。下面是一个 HTML5 表单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email address" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
<br>
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate">
<br>
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="Enter your website URL">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
在上面的代码中，我们使用了 type 属性来定义不同的表单控件，如 text、email、password、date 等等。使用 required 属性来定义必须填写的表单字段，使用 placeholder 属性来定义输入框的提示文字。该表单演示了 HTML5 的许多新特性。
2.3 HTML5 Canvas
HTML5 还提供了一个强大的功能叫做 HTML5 Canvas，它是一个可以绘制图形和动态效果的容器。使用 HTML5 Canvas，我们可以使用 JavaScript 在网页上绘制图形、创建动画和游戏等等。
以下是一个简单的 HTML5 Canvas 例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
</body>
</html>
使用 canvas 的 getContext 方法获取 2D 上下文，可以通过修改属性和方法来绘制不同种类的图形。上面的代码创建了一个红色的矩形。
3. 总结
HTML5 和 HTML 相比具有更多新的特性和改进，使得创建复杂的 web 应用更加简单、灵活和强大。HTML5 提供了一些新的语义化标签、表单控件、音频和视频播放、Canvas 等功能，从而极大地提高了设计 web 应用的效率和体验。