欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 家装 > HTML5 新增的主要标签整理

HTML5 新增的主要标签整理

2025/5/7 3:47:25 来源:https://blog.csdn.net/qq_39939748/article/details/147630257  浏览:    关键词:HTML5 新增的主要标签整理

一、语义化标签(让网页结构更清晰)

1. <header><footer>
  • 定义:表示网页的「顶部区域」和「底部区域」。
  • 场景
    • <header>:放 Logo、导航栏、搜索框。
    • <footer>:放版权信息、联系方式。
  • 示例
    <header><h1>网站标题</h1><nav>导航链接</nav>
    </header>
    <footer>© 2023 版权所有</footer>
    

2. <nav>
  • 定义:表示「导航栏」,专门放页面内的主要导航链接。
  • 场景:主导航菜单、侧边栏目录。
  • 示例
    <nav><a href="/">首页</a><a href="/news">新闻</a>
    </nav>
    

3. <article><section>
  • 定义
    • <article>:表示独立的内容块(如一篇博客、一条新闻)。
    • <section>:表示文档中的「章节」或「段落」。
  • 区别
    • article 像一本杂志里的一篇文章,能独立存在。
    • section 像一本书里的某一章,需要上下文关联。
  • 示例
    <article><h2>如何学习编程</h2><section><h3>第一步:选择语言</h3><p>建议从 Python 开始...</p></section>
    </article>
    

4. <aside>
  • 定义:表示与主内容相关的「侧边栏」或附加信息。
  • 场景:推荐文章、广告、作者信息。
  • 示例
    <main>主要文章内容...</main>
    <aside><h3>相关阅读</h3><ul><li>推荐文章1</li><li>推荐文章2</li></ul>
    </aside>
    

二、多媒体标签(直接播放音视频)

5. <video><audio>
  • 定义:无需插件即可播放视频和音频。
  • 核心属性
    • src:文件路径
    • controls:显示播放控件
    • autoplay:自动播放(部分浏览器受限)
  • 示例
    <video src="movie.mp4" controls width="600"></video>
    <audio src="music.mp3" controls></audio>
    

6. <canvas>
  • 定义:画布,用 JavaScript 绘制图形、动画或游戏。
  • 场景:数据可视化、小游戏、动态图表。
  • 示例
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>const ctx = document.getElementById("myCanvas").getContext("2d");ctx.fillStyle = "red";ctx.fillRect(10, 10, 50, 50); // 画一个红色方块
    </script>
    

三、表单增强标签(更好用的输入控件)

7. <datalist>
  • 定义:为输入框提供「下拉建议选项」。
  • 场景:搜索框自动补全、快速选择常用值。
  • 示例
    <input list="browsers">
    <datalist id="browsers"><option value="Chrome"><option value="Firefox"><option value="Safari">
    </datalist>
    

8. <progress><meter>
  • 定义
    • <progress>:表示任务进度(如下载进度)。
    • <meter>:表示标量值(如磁盘使用量)。
  • 示例
    <progress value="70" max="100"></progress> <!-- 70%进度 -->
    <meter value="3" min="0" max="10">3/10</meter> <!-- 类似温度计 -->
    

四、其他实用标签

9. <figure><figcaption>
  • 定义:表示图片/图表及其标题。
  • 场景:图文搭配说明。
  • 示例
    <figure><img src="chart.png" alt="销售图表"><figcaption>图1:2023年销售数据</figcaption>
    </figure>
    

10. <time>
  • 定义:标记时间或日期,方便机器识别。
  • 示例
    <p>发布时间:<time datetime="2023-09-15">2023年9月15日</time></p>
    

11. <mark>
  • 定义:高亮显示文本(像用荧光笔标记)。
  • 示例
    <p>搜索关键词:<mark>HTML5</mark></p>
    

总结:HTML5 新标签的优势

  1. 语义更清晰:让代码结构像报纸排版一样一目了然。
  2. 功能更强大:直接嵌入视频、绘图,无需插件。
  3. 开发更高效:表单控件和语义标签减少 JavaScript 依赖。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词