<!DOCTYPE html>
<html>
<head>
<title>HTML5 示例</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<h1>欢迎来到 HTML5 开发示例</h1>
</header>
<article>
<section>
<h2>什么是 HTML5？</h2>
<p>HTML5 是最新版本的 HTML，它引入了许多新特性，如语义化标签、音频和视频元素等。</p>
</section>
<section>
<h2>HTML5 新特性</h2>
<ul>
<li>语义化标签（如 <code>header</code>, <code>footer</code>, <code>article</code>, <code>section</code>）</li>
<li>音频和视频支持（<code><audio></code> 和 <code><video></code> 标签）</li>
<li>Canvas 画布用于绘图</li>
<li>离线存储（Application Cache, LocalStorage, SessionStorage）</li>
<li>地理位置 API</li>
</ul>
</section>
</article>
<footer>
<p>© 2023 HTML5 示例代码</p>
</footer>
<!-- 使用 Canvas 绘制一个简单的矩形 -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75);
</script>
</body>
</html><!DOCTYPE html> 声明，这是 HTML5 的标准声明方式。<header>, <footer>, <article>, <section> 等标签使得页面结构更加清晰，易于理解和维护。<audio> 和 <video> 标签，但它们是 HTML5 引入的重要特性之一。<canvas> 元素和 JavaScript 实现了一个简单的矩形绘制，展示了 HTML5 在图形绘制方面的能力。上一篇：html转markdown
下一篇：html标签属性
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站