html语法

HTML5 和 CSS3新功能

概述

HTML5 和 CSS3 是 Web 开发领域中的两个重要标准，它们带来了许多新功能和改进，使得开发者能够创建更加丰富和交互式的网页应用。以下是这两个标准的一些重要特性和示例。

HTML5

1. 新的语义化标签

特性描述

HTML5 引入了许多新的语义化标签，用于更清晰地表达页面结构。这些标签不仅有助于提高网页的可读性，也有助于搜索引擎更好地理解页面的内容。

示例

<article>
  <header>
    <h1>文章标题</h1>
    <p>发布日期: 2023-07-26</p>
  </header>
  <section>
    <p>文章正文...</p>
  </section>
  <footer>
    <p>作者: John Doe</p>
  </footer>
</article>

2. 媒体元素 <video> 和 <audio>

特性描述

HTML5 提供了 <video> 和 <audio> 元素，允许直接在网页中嵌入视频和音频文件而无需额外插件。

示例

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

3. 绘图和图形 <canvas>

特性描述

<canvas> 元素提供了一种在网页上绘制图形的方法。它通常与 JavaScript 配合使用，通过脚本来绘制图像。

示例

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 50, 50);
</script>

4. 表单增强

特性描述

HTML5 为表单提供了新的输入类型和属性，如 <input type="date"> 和 <input type="email">，以简化表单数据的处理和验证。

示例

<form>
  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</form>

CSS3

1. 响应式设计

特性描述

CSS3 中的媒体查询使得网站可以根据不同的设备和屏幕尺寸自动调整布局。

示例

/* 默认样式 */
body {
  font-size: 16px;
}
/* 小屏幕设备 */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

2. 圆角和阴影

特性描述

CSS3 提供了简单的语法来添加圆角和阴影效果，不需要使用图片。

示例

.box {
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

3. 渐变

特性描述

CSS3 支持线性渐变和径向渐变，可以用来创建美观的背景和按钮。

示例

.button {
  background-image: linear-gradient(to bottom, #f9f9f9, #e3e3e3);
  border: none;
  padding: 10px 20px;
}

4. 动画和过渡

特性描述

CSS3 允许使用 transition 和 animation 属性来实现平滑的动画效果。

示例

.box {
  transition: transform 0.5s ease-in-out;
}
.box:hover {
  transform: scale(1.2);
}