HTML第九课：HTML5新增标签
HTML5新增标签
- 示例图
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 新增标签示例</title>
<style>
section, article, aside, header, footer, nav, figure, figcaption {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
width: 50%;
}
</style>
</head>
<body>
<div align="center">
<!-- 页面头部 -->
<header>
<h1>HTML5 新增标签示例</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<!-- 页面主要内容区域 -->
<main>
<section>
<h2>文章板块</h2>
<article>
<header>
<h3>第一篇文章</h3>
<p>发布时间：2024-07-09</p>
</header>
<p>这里是文章的内容。HTML5 引入了许多语义化标签，能更好地描述文档结构。</p>
<footer>
<p>文章作者：张三</p>
</footer>
</article>
</section>
<aside>
<h2>侧边栏</h2>
<p>这里可以放置一些相关链接或补充信息。</p>
</aside>
</main>
<!-- 嵌入音频 -->
<audio controls>
<source src="example.mp3" type="audio/mpeg">
您的浏览器不支持音频标签。
</audio>
<!-- 嵌入视频 -->
<video width="320" height="240" controls>
<source src="example.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
<!-- 图形区域 -->
<figure>
<img src="example.jpg" alt="示例图片">
<figcaption>这是一张示例图片的说明</figcaption>
</figure>
<!-- 画布 -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;"></canvas>
<!-- 页面脚部 -->
<footer>
<p>© 2024 HTML5 示例网站</p>
</footer>
<!-- 新增表单元素 -->
<form>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br>
<label for="url">网址:</label>
<input type="url" id="url" name="url"><br>
<label for="range">范围:</label>
<input type="range" id="range" name="range"><br>
<label for="date">日期:</label>
<input type="date" id="date" name="date"><br>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>