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/

相关推荐
Wish3D6 小时前
在前端开发中,html中script 的type分别有哪几种?分别什么情况用到?
前端·html
Hashan6 小时前
你知道Webpack解决的问题是什么嘛?
前端·webpack
golang学习记6 小时前
从0死磕全栈第五天:React 使用zustand实现To-Do List项目
前端
傻梦兽6 小时前
2025年,跟 encodeURIComponent() 说再见吧
前端·javascript
Lingxing6 小时前
事件流:深入理解事件冒泡、事件捕获与事件委托
前端·javascript·面试
前端小白19956 小时前
面试取经:浏览器篇-跨标签页通信
前端·面试·浏览器
golang学习记6 小时前
从0死磕全栈第4天:使用React useState实现用户注册功能
前端
AlenLi6 小时前
TypeScript - 开发圣经SOLID设计原则
前端·架构
San306 小时前
JavaScript 入门精要:从变量到对象,构建稳固基础
javascript·面试·html