HTML5 新元素学习笔记

HTML5 是 HTML 的第五个版本，是一种用于创建网页的标准语言。相对于之前的版本，HTML5 引入了很多新的元素，这些新元素使得网页开发更加方便、灵活、可维护。

1. 新的结构元素

<article>

<article> 元素表示一篇独立的文章或页面区域。在页面上可以存在多篇 <article>，每篇 <article> 都应该包含一个标题。

htmlCopy Code
<article>
  <h2>HTML5 新元素学习笔记</h2>
  <p>HTML5 是 HTML 的第五个版本，是一种用于创建网页的标准语言。</p>
</article>

<header>

<header> 元素定义了文档的头部区域，通常包含一些介绍性的内容，如标志、导航等。

htmlCopy Code
<header>
  <img src="logo.png" alt="My website logo">
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

<footer>

<footer> 元素定义了文档的底部区域，通常包含一些版权信息、链接等。

htmlCopy Code
<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="#">隐私政策</a></li>
      <li><a href="#">服务条款</a></li>
    </ul>
  </nav>
</footer>

<section>

<section> 元素表示网页中的一个区域，通常包含一个标题。

htmlCopy Code
<section>
  <h2>HTML5 新元素</h2>
  <p>HTML5 引入了很多新元素，如 <header>, <footer>, <article>, <nav>, <section> 等。</p>
</section>

2. 新的媒体元素

<audio>

<audio> 元素用于在网页中嵌入音频内容。

htmlCopy Code
<audio controls>
  <source src="song.mp3" type="audio/mp3">
  <source src="song.ogg" type="audio/ogg">
  您的浏览器不支持音频播放。
</audio>

<video>

<video> 元素用于在网页中嵌入视频内容。

htmlCopy Code
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

3. 新的表单元素

<datalist>

<datalist> 元素用于定义输入框中可选数据列表。

htmlCopy Code
<label for="browser">选择一个浏览器：</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Opera">
  <option value="Internet Explorer">
</datalist>

<output>

<output> 元素用于显示表单的计算结果。

htmlCopy Code
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" name="a" value="0"> +
  <input type="number" id="b" name="b" value="0"> =
  <output name="result">0</output>
</form>

以上是 HTML5 新元素的一些示例，希望能够对您有所帮助。