HTML5 & CSS3常见新特性

HTML5 和 CSS3 的常见新特性包括：

1. 语义化标签：如 <header>, <nav>, <section>, <article>, <aside>, <footer> 等。
2. 画布（Canvas）：使用 JavaScript 进行图形绘制。
3. 视频和音频：<video> 和 <audio> 标签。
4. 表单控件增强：如数值输入、日期输入、时间输入、颜色选择器等。
5. CSS3 特效和变换：如阴影、渐变、边框、圆角、变换等。
6. CSS3 布局：如弹性盒子（Flexbox）、网格（Grid）布局。
7. 媒体查询：响应式设计。

以下是一些简单的示例代码：

HTML5 示例：

<header>头部信息</header>
<nav>导航链接</nav>
<section>
  <article>
    <h1>文章标题</h1>
    <p>这是一个段落。</p>
  </article>
</section>
<aside>侧边内容</aside>
<footer>底部信息</footer>

CSS3 示例：

/* 圆角边框和阴影效果 */
div {
  border-radius: 10px;
  box-shadow: 5px 5px 10px #888888;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* 媒体查询实现响应式设计 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

画布（Canvas）示例：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.beginPath();
  ctx.arc(70, 40, 30, 0, 2 * Math.PI);
  ctx.fill();
</script>

视频和音频示例：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
 
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>