HTML第九课：HTML5新增标签
HTML第九课：HTML5新增标签
- HTML5新增标签
- 快速学习平台
HTML5新增标签
- 示例图
<!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>快速学习平台
http://code.nebulas.ink/