1. HTML5 常用方法

HTML5 提供了许多新的 API 和方法来增强网页功能。

1.1 Canvas 绘图

Canvas 是 HTML5 新增的绘图元素，可以通过 JavaScript 绘制图形。

1.2 本地存储

localStorage 和 sessionStorage 允许在浏览器中存储数据。

// 存储数据
localStorage.setItem('username', '张三');

// 获取数据
const name = localStorage.getItem('username');
console.log(name); // 输出：张三

// 删除数据
localStorage.removeItem('username');

1.3 视频播放

HTML5 原生支持视频播放，无需插件。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持视频标签。
</video>

2. CSS3 常用方法

CSS3 引入了许多新特性，让样式设计更加强大。

2.1 圆角边框

使用 border-radius 属性创建圆角效果。

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  border-radius: 15px;
}

2.2 渐变背景

CSS3 支持线性渐变和径向渐变。

.gradient-box {
  width: 300px;
  height: 150px;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

2.3 动画效果

使用 @keyframes 创建动画。

@keyframes slidein {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-element {
  animation: slidein 1s ease-in-out;
}

3. 简单示例

3.1 响应式卡片

结合 HTML5 和 CSS3 创建一个简单的响应式卡片。

<div class="card">
  <h3>产品名称</h3>
  <p>这是一个产品描述。</p>
  <button class="btn">了解更多</button>
</div>

<style>
.card {
  width: 250px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  background-color: white;
  color: #667eea;
  cursor: pointer;
}
</style>

4. 总结

HTML5 和 CSS3 提供了丰富的功能和方法，可以创建更加强大和美观的网页。以上只是其中一部分简单示例，实际开发中可以根据需求组合使用这些方法。