HTML5 和 CSS3 简介及核心特性（附电子书资料）-EW帮帮网

一、HTML5：新一代超文本标记语言

HTML5 是 HTML 标准的第五次重大修订，2014 年正式发布，旨在提升跨设备兼容性、增强功能并简化开发流程。
电子书资料：https://pan.quark.cn/s/6be7e722afe2

1. 新增语义化标签

替代传统 <div> 的结构化标签：
- <header>：定义页面头部（导航、标题区域）。
- <nav>：导航链接区域。
- <section>：定义文档中的独立章节（如文章板块）。
- <article>：独立内容块（如博客文章、新闻报道）。
- <aside>：侧边栏或补充内容。
- <footer>：页面底部（版权信息、联系方式）。
优势：
✅ 提升页面结构可读性，便于搜索引擎爬虫解析（SEO 优化）。
✅ 辅助工具（如屏幕阅读器）更易理解内容层次。

2. 表单增强

新增输入类型：
- email：自动验证邮箱格式。
- url：验证 URL 格式。
- number：限制输入数字，支持步进控制（step 属性）。
- date/time/datetime-local：调出日期时间选择器。
新增属性：
- placeholder：输入框提示文本。
- required：强制字段非空验证。
- pattern：自定义正则验证规则。

3. 多媒体支持

原生嵌入音频/视频：
- <video> 标签：
```
<video src="video.mp4" controls autoplay muted width="640"></video>
```
  - 属性：controls（显示控件）、autoplay（自动播放）、muted（静音）、loop（循环播放）。
- <audio> 标签：用于背景音乐、语音提示等。
优势：无需依赖 Flash 插件，适配移动端。

4. 新增 API

Canvas 绘图：
通过 JavaScript 在网页上动态绘制图形（图表、动画、游戏等）。

<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
  const ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(50, 50, 200, 150); // 绘制红色矩形
</script>

SVG 矢量图形：
基于 XML 描述矢量图，可无限缩放不失真，适合图标、复杂图表。
本地存储（Local Storage/Session Storage）：
- localStorage：永久存储数据，关闭浏览器后仍存在。
- sessionStorage：仅在当前会话（浏览器标签页）中有效。
  ✅ 替代 Cookie，存储容量更大（约 5MB vs. 4KB），可存储结构化数据。
地理定位（Geolocation）：
通过 navigator.geolocation.getCurrentPosition() 获取用户位置，用于地图导航、附近推荐等场景。

5. 兼容性与渐进增强

对旧浏览器（如 IE8 及以下）需添加 HTML5 Shiv 脚本（html5shiv.min.js），用于解析新增标签的 CSS 样式。
开发原则：渐进增强（基础功能兼容旧浏览器，高级功能逐步优化）。

二、CSS3：层叠样式表第三代标准

CSS3 扩展了 CSS 的功能，引入更灵活的布局、动画和视觉效果，简化复杂样式的实现。

1. 盒模型与布局增强

弹性布局（Flexbox）：
通过 display: flex 轻松实现元素的水平/垂直居中、自动换行、对齐方式调整等。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 换行 */
}

网格布局（Grid Layout）：
二维布局系统，用于复杂页面结构（如九宫格、多列等高布局）。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
  gap: 20px; /* 列/行间距 */
}

盒模型优化：
box-sizing: border-box 使元素宽度/高度包含内边距（padding）和边框（border），简化布局计算。

2. 视觉效果与动画

边框与背景：
- border-radius：圆角（可实现圆形按钮、胶囊形输入框）。
- box-shadow：盒子阴影（支持多层阴影、模糊度、扩散距离设置）。
- background-size/background-clip：背景图尺寸控制、背景裁剪到边框/内容区域。

渐变（Gradient）：
无需图片即可生成线性/径向渐变背景。

.gradient-box {
  background: linear-gradient(to bottom, #ff6b6b, #4ecdc4); /* 从上到下红到蓝渐变 */
}

2D/3D 转换（Transform）：
- translate()：平移元素（如 transform: translate(50px, 20px)）。
- rotate()：旋转（transform: rotate(45deg)）。
- scale()：缩放（transform: scale(1.2) 放大 1.2 倍）。
- skew()：倾斜（transform: skewX(30deg) 水平倾斜 30 度）。
- perspective：3D 透视效果，模拟空间深度。

关键帧动画（@keyframes）：
通过定义动画阶段（from/to 或百分比）实现复杂动画。

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.box {
  animation: bounce 1s infinite; /* 动画名称、时长、循环次数 */
}

3. 字体与文本

自定义字体（@font-face）：
引入本地或在线字体文件（如 .woff/.ttf），解决字体兼容性问题。

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2'),
       url('font.ttf') format('truetype');
}
.text { font-family: 'MyFont', sans-serif; }

文本阴影（text-shadow）：
text-shadow: 2px 2px 4px rgba(0,0,0,0.3); （水平偏移、垂直偏移、模糊度、颜色）。

多行文本溢出省略：

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 单行省略 */
  /* 多行省略需配合 */
  /* display: -webkit-box; */
  /* -webkit-box-orient: vertical; */
  /* -webkit-line-clamp: 3; */
}

4. 响应式设计

媒体查询（Media Queries）：
根据设备屏幕尺寸、分辨率、方向（横屏/竖屏）等条件应用不同样式。

/* 屏幕宽度小于 768px 时 */
@media (max-width: 768px) {
  .container { flex-direction: column; } /* 改为垂直布局 */
}

单位优化：
- vw/vh：视口宽度/高度百分比（1vw = 1% 屏幕宽度），适配移动端。
- rem：基于根元素（<html>）字体大小的相对单位，便于全局字体缩放。

5. 浏览器前缀

部分 CSS3 特性需添加浏览器前缀确保兼容性：
- -webkit-（Chrome/Safari）
- -moz-（Firefox）
- -ms-（Edge/IE）
- -o-（旧版 Opera）
  示例：-webkit-border-radius: 10px; border-radius: 10px;

三、HTML5 + CSS3 的协同应用场景

响应式网站：
使用 HTML5 语义化结构搭建页面，结合 CSS3 媒体查询和 Flexbox/Grid 实现多设备适配。
数据可视化：
HTML5 Canvas/SVG 绘制动态图表，CSS3 动画增强交互体验。
移动端应用：
利用 HTML5 本地存储和地理定位开发离线应用，CSS3 实现流畅的触摸滑动效果。
交互动效：
按钮悬停动画、页面切换过渡、表单验证反馈等均通过 CSS3 轻松实现。

四、总结

HTML5 聚焦于内容结构化和功能增强，让网页更具语义、交互性和离线能力。
CSS3 专注于视觉表现和布局灵活性，简化复杂样式开发，提升用户体验。
两者结合是现代 Web 开发的基石，广泛应用于官网、电商平台、移动端网页、数据大屏等场景。
开发时建议搭配 Autoprefixer 工具自动添加浏览器前缀，并使用 CSS 预处理器（如 Sass/LESS）提升代码效率。

HTML5 和 CSS3 简介及核心特性（附电子书资料）