1. 基本结构
<!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>
<!-- 页面内容 -->
</body>
</html>
2. 语义元素
HTML5 引入了许多新的语义元素，用于更明确地定义页面内容的结构。
- <header>: 文档头部，通常包含标题、子标题等。
- <nav>: 导航部分。
- <section>: 文档中的一个区块或章节。
- <article>: 独立的内容块，可独立分发或重复使用。
- <aside>: 与页面内容关联度较低的内容，如侧边栏或广告。
- <footer>: 文档底部，通常包含页脚信息。
3. 多媒体
HTML5 提供了更好的多媒体支持，包括 <audio> 和 <video> 元素。
音频示例：
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
视频示例：
<video controls width="400">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
4. 表单控件
HTML5 引入了一些新的表单控件，如 <input type="date">、<input type="email">、<input type="url"> 等。
<form action="/submit" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<input type="submit" value="Submit">
</form>
5. 本地存储
HTML5 提供了本地存储的能力，包括 localStorage 和 sessionStorage。
// 本地存储
localStorage.setItem('username', 'John');
const storedUsername = localStorage.getItem('username');
// 会话存储
sessionStorage.setItem('token', 'abc123');
const storedToken = sessionStorage.getItem('token');
6. 离线应用
通过使用应用程序缓存（Application Cache），可以使 Web 应用在离线时继续运行。
<!DOCTYPE html>
<html manifest="example.appcache">
<!-- ... -->
</html>
7. 地理位置
HTML5 允许通过 Geolocation API 获取用户的地理位置信息。
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
function showPosition(position) {
console.log("Latitude: " + position.coords.latitude +
" Longitude: " + position.coords.longitude);
}
这只是一个简单的 HTML5 教程，覆盖了一些基本的特性。HTML5 还有许多其他功能，包括 Web Workers、Canvas 绘图、WebSocket 等。你可以根据具体需求进一步深入学习。
转载请注明出处：http://www.zyzy.cn/article/detail/12422/HTML