html5代码实例
当提到HTML5代码示例时，可以考虑
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5示例页面</title>
<!-- 可以在这里添加其他头部信息，如样式表链接、脚本引用等 -->
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<!-- 可以在这里添加其他页眉内容，如导航菜单等 -->
</header>
<section>
<h2>About Us</h2>
<p>This is a sample HTML5 webpage.</p>
<!-- 可以在这里添加其他页面内容 -->
</section>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
<!-- 可以在这里添加其他页脚内容 -->
</footer>
</body>
</html>
这个简单的HTML5示例包含了一些基本的结构元素，如<!DOCTYPE>声明、<html>元素、<head>元素以及<body>元素。页面被分为页眉、内容区域和页脚。
当涉及更高级的HTML5功能时，可以考虑一些其他元素和特性，例如多媒体元素、表单验证、Canvas绘图等。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced HTML5 Example</title>
<!-- 可以在这里添加其他头部信息，如样式表链接、脚本引用等 -->
</head>
<body>
<header>
<h1>Welcome to My Advanced Website</h1>
<!-- 可以在这里添加其他页眉内容，如导航菜单等 -->
</header>
<section>
<h2>HTML5 Features</h2>
<p>This example includes some advanced HTML5 features:</p>
<!-- 使用音频元素 -->
<audio controls>
<source src="audio/sample.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<!-- 使用视频元素 -->
<video controls width="400">
<source src="video/sample.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<!-- 使用Canvas元素进行绘图 -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 80, 50);
</script>
<!-- 使用表单元素和新的input类型 -->
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
</form>
</section>
<footer>
<p>© 2024 My Advanced Website. All rights reserved.</p>
<!-- 可以在这里添加其他页脚内容 -->
</footer>
</body>
</html>
在这个示例中，我们引入了<audio>和<video>元素以处理音频和视频文件，使用了<canvas>元素进行简单的绘图，还包括了新的表单输入类型以及required属性来进行基本的表单验证。
