Html5前端基本知识整理与回顾上篇

在HTML5中，有一些新的语法特征和元素可以使我们的生活更加便捷。以下是一些常见的HTML5元素和它们的用法：

1. 用于定义导航的新元素：<nav>

<nav>
  <ul>
    <li><a href="/html/">HTML</a></li>
    <li><a href="/css/">CSS</a></li>
    <li><a href="/js/">JavaScript</a></li>
    <li><a href="/jquery/">jQuery</a></li>
  </ul>
</nav>

2. 用于定义一个区块的内容，比如一个文章的章节：<section>

<section>
  <h1>HTML5新特性</h1>
  <p>这是一个关于HTML5新特性的文章...</p>
</section>

3. 用于定义一个页面或一部分页面的侧边栏：<aside>

<aside>
  <p>这是一个侧边栏</p>
</aside>

4. 用于定义一个文档的头部区域：<header>

<header>
  <h1>我的网站</h1>
  <p>一个网站的描述...</p>
</header>

5. 用于定义一个文档的底部区域：<footer>

<footer>
  <p>版权所有 &copy; 2022</p>
</footer>

6. 用于定义一个视频：<video>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>

7. 用于定义一个音频：<audio>

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  您的浏览器不支持音频元素。
</audio>

8. 用于定义一个画布，可以用JavaScript进行绘图：<canvas>

<canvas id="myCanvas" width="200" height="100">
  您的浏览器不支持Canvas标签。
</canvas>

以上都是HTML5中的一些新特性，它们可以使我们的网页结构更加清晰，语义化更好，同时也为开发者提供了更多的可能性和便利性。