请注意，本文编写于 155 天前，最后修改于 120 天前，其中某些信息可能已经过时。
使用所有Html5 元素编写的最小demo2，便于掌握用法。
代码说明
- header: 头部区域，包含标题和页面介绍。
- nav: 导航区域，使用列表提供链接。
- main: 页面主内容，使用 flex 布局分为主内容和侧边栏。
- section: 用于组织结构化内容。
- article: 表示独立内容，包含音频和视频元素示例。
- aside: 侧边栏，通常用于补充信息。
- footer: 页脚区域，包含版权信息。
- figure 和 figcaption: 用于图片和图片说明。
- form: 表单元素示例，包含文本框、邮箱、日期选择、范围选择等。
html<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 元素学习 Demo</title>
<style>
/* 简单样式以展示结构 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header, nav, section, article, aside, footer {
padding: 20px;
margin: 10px;
border: 1px solid #ddd;
}
header {
background-color: #f5f5f5;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
main {
display: flex;
flex-direction: row;
gap: 20px;
}
aside {
width: 25%;
}
article {
flex: 1;
}
footer {
background-color: #f5f5f5;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>HTML5 学习示例</h1>
<p>使用所有 HTML5 元素的网页结构化布局示例。</p>
</header>
<nav>
<ul>
<li><a href="#section1">介绍</a></li>
<li><a href="#section2">内容</a></li>
<li><a href="#section3">附加信息</a></li>
</ul>
</nav>
<main>
<aside>
<h2>侧边栏</h2>
<p>这是一个侧边栏，包含一些补充内容或链接。</p>
</aside>
<section id="section1">
<h2>介绍</h2>
<p>欢迎来到 HTML5 元素学习页面！</p>
<figure>
<img src="https://via.placeholder.com/150" alt="示例图片">
<figcaption>示例图片说明</figcaption>
</figure>
</section>
<section id="section2">
<h2>内容</h2>
<article>
<h3>文章标题</h3>
<p>这是一篇文章的内容。</p>
<p>音频示例：</p>
<audio controls>
<source src="example.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<p>视频示例：</p>
<video controls width="250">
<source src="example.mp4" type="video/mp4">
您的浏览器不支持 video 元素。
</video>
</article>
</section>
<section id="section3">
<h2>附加信息</h2>
<p>表单示例：</p>
<form action="#" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<label for="birthdate">生日：</label>
<input type="date" id="birthdate" name="birthdate">
<label for="range">范围选择：</label>
<input type="range" id="range" name="range" min="0" max="100">
<button type="submit">提交</button>
</form>
<p>嵌入内容示例：</p>
<iframe src="https://www.example.com" width="100%" height="150">
您的浏览器不支持 iframe。
</iframe>
</section>
</main>
<footer>
<p>© 2024 学习 HTML5 元素示例</p>
</footer>
</body>
</html>
本文作者:空白格
本文链接:
版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！