1. HTML5 基础结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My HTML5 Page</title>
</head>
<body>
<h1>Welcome to My HTML5 Page</h1>
<p>This is a simple HTML5 tutorial.</p>
</body>
</html>
在上述代码中：
- <!DOCTYPE html> 声明了 HTML5 文档类型。
- <html lang="en"> 定义了 HTML 文档的根元素，并设置了页面的语言。
- <meta charset="UTF-8"> 设置文档使用 UTF-8 字符集。
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> 针对移动设备，设置视口宽度等参数。
- <title> 定义了页面的标题。
- <h1> 和 <p> 是 HTML5 的语义化元素，用于定义标题和段落。
2. HTML5 语义化元素：
HTML5 引入了一些新的语义化元素，例如 <article>、<section>、<nav>、<header>、<footer> 等，用于更清晰地描述页面结构。
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>Content of the article...</p>
</article>
<article>
<h2>Another Article</h2>
<p>More content...</p>
</article>
</section>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
3. HTML5 多媒体元素：
HTML5 引入了一些新的多媒体元素，如 <audio> 和 <video>，用于更方便地嵌入音频和视频。
<body>
<h2>HTML5 Audio Example</h2>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<h2>HTML5 Video Example</h2>
<video width="400" height="300" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
以上是一个简单的 HTML5 教程，涵盖了基本的 HTML5 结构、语义化元素和多媒体元素。要深入了解 HTML5 的更多功能和高级用法，建议参考更详细的 HTML5 教程和规范文档。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12465/HTML5