css3新增属性和html5新增标签的出现和意义

CSS3 是 CSS 的一个版本，引入了许多新特性，包括阴影、边框、渐变、变换等。HTML5 是 HTML 的一个版本，引入了新的语义标签、表单控件、音频和视频支持等。

CSS3 新特性例子：

/* 圆角 */
div {
  border: 1px solid #000;
  border-radius: 10px; /* 圆角的像素值 */
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* 阴影效果 */
div {
  box-shadow: 5px 5px 10px #888888;
}

HTML5 新特性例子：

<!-- 语义化的导航标签 -->
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>
 
<!-- 本地存储 -->
<script>
  localStorage.setItem('key', 'value');
  console.log(localStorage.getItem('key'));
</script>
 
<!-- 视频标签 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<!-- 画布 Canvas 绘图 -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

CSS3 和 HTML5 的出现意味着更好的用户体验，因为它们提供了更丰富的页面样式和更多的交互元素。开发者可以利用这些新特性创建更加动感和现代感的网页设计。