HTML5 简介

HTML5 是超文本标记语言（HTML）的第五个主要版本，用于构建和呈现网页内容。相比早期版本，HTML5 引入了更多语义化标签、多媒体支持、离线存储等功能，同时简化了语法结构。

核心特性

• 语义化标签：如 <header>、<footer>、<article>，提升代码可读性和搜索引擎优化。
• 多媒体支持：原生支持 <audio> 和 <video> 标签，无需第三方插件。
• 图形绘制：通过 <canvas> 和 SVG 实现动态图形渲染。
• 本地存储：localStorage 和 sessionStorage 替代 Cookie 存储数据。
• 表单增强：新增输入类型（如 email、date）和属性（如 placeholder、required）。

CSS3 简介

CSS3 是层叠样式表的第三代标准，扩展了 CSS2 的功能，支持更复杂的布局、动画和响应式设计。

核心特性

• 选择器增强：新增伪类（如 :nth-child()）和属性选择器（如 [data-*]）。
• 动画与过渡：通过 @keyframes 和 transition 实现平滑动画效果。
• 弹性布局：Flexbox 和 Grid 模块简化复杂布局设计。
• 响应式设计：媒体查询（@media）适配不同设备屏幕尺寸。
• 视觉效果：支持阴影（box-shadow）、圆角（border-radius）和渐变（gradient）。

HTML5 + CSS3 的优势

• 跨平台兼容：适应 PC、移动端及多种浏览器。
• 性能优化：减少对 JavaScript 和插件的依赖，提升加载速度。
• 开发效率：语义化标签和模块化 CSS 简化代码维护。
• 未来趋势：为 Web 应用（PWA、游戏等）提供底层支持。

示例代码片段

<!-- HTML5 结构示例 -->
<header>
  <h1>页面标题</h1>
  <nav>
    <a href="#">链接</a>
  </nav>
</header>
<canvas id="myCanvas"></canvas>

/* CSS3 样式示例 */
header {
  background: linear-gradient(to right, #ff8a00, #da1b60);
  border-radius: 10px;
  animation: fadeIn 2s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}