什么是HTML5？
HTML5，全称是HyperText Markup Language 5，是互联网上用于创建网页和网站的标准标记语言。它是HTML语言的最新版本，相比之前的版本，HTML5提供了更多用于构建富互联网应用的标签和API。它简化了代码结构，增加了新的功能，并且增强了网页的互动性。
HTML5的特点
- 更简洁的代码结构：HTML5减少了不必要的标签，使得代码更加简洁，易于维护。
- 丰富的媒体支持：HTML5支持更多的多媒体格式，如音频、视频，无需依赖外部插件。
- 增强的图形绘制能力：通过使用Canvas和SVG等标签，可以轻松地在网页上绘制图形。
- 地理位置API：可以获取用户的地理位置信息，实现基于地理位置的应用。
- 更好的兼容性和跨平台性：HTML5被广泛应用于各种设备和平台。
HTML5基础标签
- 文档类型声明：
<!DOCTYPE html>，声明文档类型为HTML5。 - HTML标签：
<html>，定义HTML文档的根元素。 - 头部信息：
<head>，包含文档的元信息，如标题、链接、样式等。 - 标题：
<title>，定义文档的标题，显示在浏览器标签上。 - 主体内容：
<body>，包含网页的实际内容。 - 段落：
<p>，定义网页中的段落。 - 标题：
<h1>到<h6>，定义标题级别，<h1>为最高级别。 - 列表：
<ul>（无序列表）、<ol>（有序列表）和<li>（列表项）。 - 链接：
<a>，定义链接到其他页面的超链接。
互动网页的实现
- JavaScript：JavaScript是HTML5中实现互动功能的关键技术。通过JavaScript，可以编写脚本，实现各种交互效果。
- CSS3：CSS3提供了丰富的样式和动画效果，可以用来美化网页，并增强用户体验。
- Canvas和SVG：Canvas和SVG可以用于在网页上绘制图形，实现游戏、绘图等互动功能。
实例：创建一个简单的交互式网页
以下是一个简单的HTML5网页示例，包含JavaScript和CSS3，实现了点击按钮切换背景颜色的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交互式网页示例</title>
<style>
body {
background-color: white;
transition: background-color 0.5s ease;
}
.btn {
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<h1>点击按钮切换背景颜色</h1>
<button class="btn" onclick="changeColor()">点击我</button>
<script>
function changeColor() {
document.body.style.backgroundColor = (document.body.style.backgroundColor === 'white') ? 'lightblue' : 'white';
}
</script>
</body>
</html>
总结
HTML5是构建现代网页的基础，它提供了丰富的功能和便利性。通过学习和实践HTML5，你可以轻松打造出互动、美观且功能丰富的网页。