HTML第九课:HTML5新增标签

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>&copy; 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/

相关推荐
诚实可靠王大锤16 小时前
react-native集成PDF预览组件react-native-pdf
前端·react native·react.js·pdf
Hilaku16 小时前
前端的设计模式?我觉得90%都是在过度设计!
前端·javascript·设计模式
Miloce16 小时前
零成本搭建跨域代理服务 - Cloudflare Workers实战指南
前端
叫我詹躲躲16 小时前
🌟 回溯算法原来这么简单:10道经典题,一看就明白!
前端·算法·leetcode
薄雾晚晴16 小时前
大屏实战:ECharts 自适应,用 ResizeObserver 解决容器尺寸变化难题
前端·javascript·vue.js
爱分享的鱼鱼16 小时前
为什么使用express框架
前端·后端
资源开发与学习16 小时前
从0到1,LangChain+RAG全链路实战AI知识库
前端·人工智能
我是天龙_绍16 小时前
面试官:给我实现一个图片标注工具,截图标注,讲一下思路
前端
喵桑丶16 小时前
无界(微前端框架)
前端·javascript
leeggco16 小时前
AI数字人可视化图表设计文档
前端