【前端学习】前端学习笔记，HTML5都有哪些最重要的新特性

你曾记得认识的那家花店吗

已于 2023-07-21 18:09:00 修改

阅读量44

点赞数

分类专栏：前端菜鸟学习文章标签：前端学习笔记

于 2023-07-21 18:02:29 首次发布

本文链接：https://blog.csdn.net/qq_31894095/article/details/131857629

版权

前端菜鸟学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML5引入了语义化标签如<header>、<nav>等，优化了网页结构。同时，它支持<video>和<audio>标签，无需依赖Flash。此外，HTML5还提供了Canvas绘图功能，WebStorage和IndexedDB用于本地数据存储，以及新的表单控件和GeolocationAPI。

摘要由CSDN通过智能技术生成

HTML5是HTML的第五个版本，引入了许多新的特性和改进，以下是一些HTML5的新特性：

语义化标签：HTML5引入了一些新的语义化标签，如
\<header>\<nav>\<section>\<article>等，使得页面结构更加清晰明了。

请见下面的示例，展示了一些常见的HTML5语义化标签和其用法：





<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5语义化标签示例</title>
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>

  <section>
    <article>
      <h2>文章标题</h2>
      <p>这是一段文章内容。</p>
      <p>这是另一段文章内容。</p>
    </article>

    <aside>
      <h3>侧边栏</h3>
      <p>这里可以放置一些相关的信息、链接或广告。</p>
    </aside>
  </section>

  <footer>
    <p>© 2023 公司名称. 版权所有。</p>
  </footer>
</body>
</html>

在这个示例中，我们使用了头部标签（<header>）来定义网页的头部，其中包括网站的标题和导航栏。主要内容部分被包裹在<section>标签内部，其中使用了<article>标签来定义一个独立的文章。侧边栏的内容则被放置在<aside>标签中。最后，底部信息由<footer>标签定义。这些标签都是HTML5中的语义化标签，有助于理解页面结构和内容的含义。