当前位置: 首页 > article >正文

HTML5 新增的标签有哪些?

HTML5 新增的标签有哪些?

  1. 语义化结构标签
    • <header>:就好比是网页的“头部招牌”。一个网页的顶部区域,通常放网站的标志、导航菜单这些重要信息,都可以用<header>包起来,让人一看就知道这是网页开头部分,比如新闻网站顶部放着网站名字、搜索框和导航栏的地方。
    • <nav>:是网页里的“路线指引牌”,专门用来放页面的导航链接。像那种点击能跳转到不同页面、不同板块的链接,放在<nav>标签里,方便用户快速找到想去的地方,电商网站底部的“首页”“商品分类”“购物车”这些导航链接就适合用它。
    • <section>:可以理解成网页的“功能分区牌”,用来把网页划分成不同功能或主题的区域。比如一个美食网站,介绍不同菜品的区域,每个区域都可以用<section>包起来,每个区域就是一个相对独立的内容板块。
    • <article>:是网页的“文章独立小盒子”,装那些能独立存在、有自己完整内容的文章。一篇博客文章、一条新闻报道,就适合放在<article>里,它能让内容更突出,搜索引擎也能更好识别,像博客平台上每一篇具体的文章。
    • <footer>:是网页的“底部信息栏”,一般在网页最下面,放版权声明、公司地址、联系方式这些信息。就像一本书最后面的版权页,告诉大家一些基本信息,任何网站底部的那些固定信息都可以用<footer>标签。
  2. 多媒体标签
    • <audio>:是网页的“音频播放器”,有了它,不用借助其他插件就能在网页上播放音频,像背景音乐、有声小说、语音消息等,只要把音频文件链接放在<audio>标签里,再加上播放控制按钮(可以用controls属性),就能轻松播放音频。
    • <video>:就是网页的“视频播放窗口”,专门用来播放视频内容,像在线视频网站上播放的视频,把视频文件地址设置好,再调整下大小(widthheight属性),加上播放控制条(controls属性),就能播放各种视频,比如电影片段、教学视频等。
  3. 其他新增标签
    • <canvas>:是网页上的“画画板”,配合JavaScript代码,能在上面绘制各种图形,像线条、圆形、矩形,还能制作动画。很多网页小游戏、数据可视化图表,就是靠<canvas>绘制出来的。
    • <progress>:可以看作是“任务进度条”,在网页上展示任务的完成进度。比如文件上传、下载时,用这个标签就能让用户清楚看到进行到什么程度了,通过设置valuemax属性来表示当前进度和总进度。
    • <input>标签新增了很多类型,比如<input type="date">是“日期选择器”,点击就能弹出日历选日期;<input type="email">是“邮箱格式验证输入框”,能自动检查输入的是不是正确的邮箱格式;<input type="tel">是“电话号码输入框” ,更方便输入电话号码。

http://www.kler.cn/a/557038.html

相关文章:

  • 深入浅出:理解闭包在JavaScript中的应用
  • 使用 DeepSeek 生成流程图、甘特图与思维导图:结合 Typora 和 XMind 的高效工作流
  • 【YOLOv10改进[注意力]】引入ACmix机制(享有自注意力和卷积的优势) | CVPR 2021
  • Unity教程(二十一)技能系统 基础部分
  • 【hot100】刷题记录(25)-实现Trie
  • CSS定位全解析:position属性详解与应用场景
  • 独立开发者灵感日报:简化您生活的 IT 聊天机器人
  • 7.日常英语笔记
  • 基于 Spring Boot 框架 的 “使命召唤游戏助手” 系统的设计与实现
  • 金融学-金融机构
  • JavaScript系列(77)-- Web Components 深入解析
  • Vue前端开发-Vant之Layout组件
  • 自动化网页检测提醒
  • Graspness Discovery in Clutters for Fast and Accurate Grasp Detection 解读
  • # 嵌入式基础学习|C语言——进程篇综合(含进阶)
  • 【Mamba和Transformer的关系】
  • 【排版教程】如何在Word/WPS中优雅的插入参考文献
  • 一篇文章理解常用的前端设计模式
  • Spring Boot 中多线程工具类的配置与使用:基于 YAML 配置文件
  • 脚本实战第一发:所有的请求都可以被 Python 模拟