html5和css3新增

HTML5和CSS3在新版本中增加了许多新特性，以下是一些常见的新特性和示例代码：

1. HTML5 Canvas：

   Canvas 提供了一个绘图 API，可以用来创建图表、游戏等。

   
   
   
   <canvas id="myCanvas" width="200" height="100"></canvas>
   <script>
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');
   ctx.fillStyle = '#FF0000';
   ctx.fillRect(0, 0, 150, 75);
   </script>

2. HTML5 视频和音频：

   使用 <video> 和 <audio> 标签可以轻松嵌入视频和音频内容。

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

3. HTML5 新的表单输入类型：

   例如，日期选择器、数字输入、邮件输入等。

   
   
   
   <form>
     Email: <input type="email" name="user_email">
     Birthday: <input type="date" name="user_birthday">
     Age: <input type="number" name="user_age" min="0" max="100">
   </form>

4. HTML5 新的语义标签：

   如 <header>, <nav>, <section>, <article>, <aside>, <footer> 等，有利于搜索引擎和开发者理解页面内容。

   
   
   
   <header>
     <h1>My First HTML5 Document</h1>
   </header>
   <nav>
     <ul>
       <li>Home</li>
       <li>About</li>
       <li>Contact</li>
     </ul>
   </nav>
   <section>
     <h2>W3C</h2>
     <p>The World Wide Web Consortium (W3C) is a community of companies, governments, and individuals that work together to build open, universal standards for the World Wide Web.</p>
   </section>
   <footer>
     <p>© 2023 W3C. All Rights Reserved.</p>
   </footer>

5. CSS3 动画、变换和过渡：

   使得页面的效果更加丰富和生动。

   
   
   
   /* 关键帧动画 */
   @keyframes example {
     from {background-color: red;}
     to {background-color: yellow;}
   }
    
   /* 应用动画 */
   .example {
     animation-name: example;
     animation-duration: 4s;
   }
    
   /* 3D 变换 */
   .box {
     width: 100px;
     height: 100px;
     background-color: red;
     transform: rotateY(45deg);
   }
    
   /* 圆角边框 */
   .rounded-border {
     border: 2px solid #000;
     border-radius: 25px;
   }

6. CSS3 媒体查询：

   可以根据设备的屏幕大小和分辨率提供不同的样式规则。

   
   
   
   /* 针对宽度在 600px 以下的屏幕 */
   @media screen and (max-width: 600px) {
     body {
       background-color: lightblue;
     }
   }

这些新特性和示例代码只是HTML5和CSS3中的