HTML5中一些酷炫又有趣的新特性代码整理汇总

HTML5是一种新一代的标准，它引入了很多新的特性和标签来增强Web页面的功能和表现效果。以下是一些HTML5中酷炫又有趣的新特性：

1. 色彩选择器

HTML5新增了一个type为color的input标签，可以让用户方便地选择颜色。它是一个可视化的颜色选择器，用户可以通过拖动鼠标来选择颜色，然后把选好的颜色作为值传给后端程序。以下是一个例子：

<label for="color-picker">选择颜色：</label>
<input type="color" id="color-picker">

2. 视频和音频播放

HTML5允许在页面中直接嵌入视频和音频，不需要使用Flash等插件。使用HTML5提供的video和audio标签，可以方便地在网页中播放视频和音频。以下是一个例子：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

通过以上示例，我们可以看出如何在网页中添加视频和音频并设置其播放源。

3. 圆角边框和阴影效果

HTML5新增了两个CSS3样式属性：border-radius和box-shadow，可以实现圆角边框和阴影效果，让页面呈现出更加现代化的风格。以下是一个例子：

<style>
  .box {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    box-shadow: 3px 3px 5px #888888;
  }
</style>

<div class="box"></div>

以上示例中的.box样式定义了一个200x200的盒子，使用了border-radius属性来实现圆角边框效果，并使用box-shadow属性来实现阴影效果。

HTML5中还有很多其他的新特性和标签，上面只是介绍其中的几个。如果想要掌握更多HTML5的知识点，可以去阅读更多的相关文档和教程。