html新特性和新标签

新特性

1. 离线存储:

   • localStorage: 存储长期的数据，即使关闭浏览器后数据也不会丢失。
   • sessionStorage: 存储临时的数据，当用户关闭浏览器窗口后数据会被清除。

2. 拖放功能:

   • draggable 属性: 设置为 true 使元素可以被拖动。
   • drop 事件: 当元素被放置在另一个元素上时触发。

3. 媒体播放:

   • <video> 标签: 内嵌视频播放器，支持多种视频格式（例如 MP4, WebM）。
   • <audio> 标签: 内嵌音频播放器，支持多种音频格式（例如 MP3, Ogg）。

4. 画布绘图:

   • <canvas> 标签: 提供了一个绘图区，可以通过 JavaScript 来绘制图形或动画。

5. SVG 图形:

   • <svg> 标签: 可缩放矢量图形，允许开发者直接在 HTML 中绘制复杂的矢量图形。

6. 表单增强:

   • <input type="date">: 显示日期选择器。
   • <input type="email">: 自动验证电子邮件格式。
   • <input type="range">: 滑块控件。
   • <input type="search">: 搜索框。
   • <input type="number">: 数字输入框。
   • <input type="url">: 自动验证 URL 格式。
   • <input type="color">: 颜色选择器。

• 语义化标签:

  • <article>: 代表文档、页面或应用程序中的独立部分。
  • <aside>: 包含与周围内容相关但又不直接关联的信息，如侧边栏或注释。
  • <details>: 创建一个可折叠的详细信息块。
  • <figcaption>: 为 <figure> 定义标题或说明。
  • <figure>: 包含媒体内容，如图片、图表等，并可带有标题。
  • <footer>: 定义文档或节的底部。
  • <header>: 定义文档或节的头部。
  • <main>: 表示文档的主要内容。
  • <mark>: 高亮显示文本。
  • <nav>: 包含页面导航链接的部分。
  • <section>: 定义文档中的章节或区域。
  • <summary>: 与 <details> 结合使用，定义可折叠内容的标题。
  • <time>: 表示日期或时间。