《前端面试题：HTML5、CSS3、ES6新特性》

现代前端开发中，HTML5、CSS3和JavaScript ES6共同构成了三大核心技术支柱。这些技术不仅显著提升了用户体验和性能表现，更大幅提高了开发效率。本文将从技术演进、核心特性到最佳实践，系统性地介绍这三大技术的应用之道。

我们将首先探讨HTML5的创新特性，接着深入解析CSS3的重要功能，最后详细讲解ES6的核心语法特性。

为了帮助开发者将理论知识转化为实操能力，本文还将通过三个典型场景案例进行说明：PWA应用开发流程、数据可视化项目实现方案，以及跨平台Hybrid App构建方法。这些案例将完整展现现代Web应用的构建技巧。

关于各个知识点的详细解析，我们将在后续文章中逐一展开。

一、HTML5 全面革新

1. 语义化标签（Semantic Tags）

用途：创建自解释的文档结构，提升SEO、可访问性和代码可维护性
方法：使用语义标签替代通用div容器
核心标签：

<header>页面头部（标题/导航）</header>
<nav>导航链接集合</nav>
<main>页面主要内容区域</main>
<article>独立内容块（博客/新闻）</article>
<section>内容分组（章节）</section>
<aside>侧边内容（广告/引用）</aside>
<footer>页面底部（版权/联系）</footer>
<figure>媒体内容容器</figure>
<figcaption>媒体内容说明</figcaption>
<mark>高亮文本</mark>
<time datetime="2023-08-15">日期时间</time>

2. 多媒体支持

用途：原生音视频播放，替代Flash插件
方法：

<!-- 视频播放 -->
<video controls width="600" poster="preview.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <track src="subs_en.vtt" kind="subtitles" srclang="en">
  浏览器不支持视频
</video>

<!-- 音频播放 -->
<audio controls loop>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
</audio>

3. Canvas绘图

用途：实时生成图形、可视化图表及互动游戏
方法：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制路径
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 100);
ctx.strokeStyle = 'blue';
ctx.stroke();

// 渐变填充
const gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'yellow');
ctx.fillStyle = gradient;
ctx.fillRect(50, 150, 200, 100);

// 图像处理
const img = new Image();
img.onload = () => ctx.drawImage(img, 50, 300, 100, 100);
img.src = 'photo.jpg';

4. 表单增强

用途：更丰富的输入类型和验证
新类型：

<input type="email" required placeholder="电子邮箱">
<input type="url" placeholder="网站地址">
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" value="50">
<input type="date" min="2020-01-01">
<input type="color" value="#ff0000">
<input type="search" autocomplete="on">
<input type="tel" pattern="[0-9]{3}-[0-9]{4}">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>
<input list="browsers">
<output name="result">0</output>

5. Web存储

用途：客户端数据持久化存储
方法：

// localStorage (永久存储)
localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme'));

// sessionStorage (会话存储)
sessionStorage.setItem('sessionID', 'ABC123');

// IndexedDB (结构化数据)
const request = indexedDB.open('myDB', 1);
request.onupgradeneeded = (e) => {
  const db = e.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('nameIdx', 'name', { unique: false });
};

// Web SQL (已废弃，但需了解)
const db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(tx => {
  tx.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, name)');
});

6. 地理定位

用途：获取用户地理位置
方法：

navigator.geolocation.getCurrentPosition(
  position => {
    console.log(`纬度: ${position.coords.latitude}`);
    console.log(`经度: ${position.coords.longitude}`);
    console.log(`精度: ${position.coords.accuracy}米`);
  },
  error => console.error(`错误代码: ${error.code}`),
  {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  }
);

7. Web Workers

用途：后台线程执行CPU密集型任务
方法：

// 主线程
const worker = new Worker('task.js');
worker.postMessage({ data: 'start' });
worker.onmessage = e => console.log(e.data);

// task.js
self.onmessage = e => {
  const result = heavyCalculation(e.data);
  self.postMessage(result);
};

8. WebSocket

用途：全双工实时通信
方法：

const socket = new WebSocket('wss://example.com/socket');

socket.onopen = () => socket.send('Hello Server!');
socket.onmessage = e => console.log(`收到: ${e.data}`);
socket.onclose = () => console.log('连接关闭');

9. 拖放API

用途：实现元素拖放功能
方法：

// 可拖动元素
document.getElementById('dragItem').draggable = true;
dragItem.addEventListener('dragstart', e => {
  e.dataTransfer.setData('text/plain', e.target.id);
});

// 放置区域
dropZone.addEventListener('dragover', e => e.preventDefault());
dropZone.addEventListener('drop', e => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  e.target.appendChild(document.getElementById(id));
});

10. History API

用途：操作浏览器历史记录
方法：

// 添加历史记录
history.pushState({ page: 1 }, "Page 1", "/page1");

// 替换当前记录
history.replaceState({ page: 2 }, "Page 2", "/page2");

// 监听popstate事件
window.addEventListener('popstate', e => {
  console.log(`导航到: ${location.pathname}`, e.state);
});

二、CSS3 全面增强

1. 选择器系统

用途：精确选择DOM元素
新选择器：

/* 属性选择器 */
input[type="text"] { border: 1px solid #ccc; }
a[href^="https"]::after { content: " (安全)"; }

/* 伪类选择器 */
li:nth-child(odd) { background: #f9f9f9; } 
tr:nth-of-type(3n) { color: red; }
input:focus { outline: 2px solid blue; }
button:disabled { opacity: 0.5; }

/* 伪元素 */
p::first-letter { font-size: 150%; }
p::selection { background: yellow; }

2. 盒模型

用途：控制元素尺寸和布局
特性：

.box {
  box-sizing: border-box; /* 包含padding和border */
  width: 300px;
  padding: 20px;
  border: 5px solid black; /* 实际内容宽度250px */
  
  /* 阴影效果 */
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.1), 
    inset 0 0 10px #ccc;
    
  /* 圆角 */
  border-radius: 15px 5px 15px 5px;
  
  /* 透明度 */
  opacity: 0.95;
}

3. 背景与渐变

用途：创建复杂背景效果
方法：

.element {
  /* 多重背景 */
  background: 
    url('pattern.png') top left repeat,
    linear-gradient(to bottom, transparent, rgba(0,0,0,0.5));
  
  /* 背景裁剪 */
  background-clip: content-box;
  
  /* 背景定位 */
  background-position: center;
  
  /* 渐变 */
  background: radial-gradient(
    circle at top right, 
    #ff9a9e, #fad0c4, #a1c4fd
  );
  
  /* 渐变动画 */
  background-size: 200% 200%;
  animation: gradientBG 5s ease infinite;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

4. 过渡与变换

用途：创建平滑动画效果
方法：

.card {
  transition: 
    transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.4s ease-in-out;
    
  transform: rotate(0deg) scale(1);
}

.card:hover {
  transform: rotate(3deg) scale(1.05);
  opacity: 0.9;
  
  /* 3D变换 */
  transform: perspective(800px) rotateY(15deg);
}

5. 动画系统

用途：创建复杂关键帧动画
方法：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.element {
  animation: 
    bounce 2s ease-in-out infinite,
    fadeIn 1s forwards;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

6. 弹性布局（Flexbox）

用途：一维响应式布局
方法：

.container {
  display: flex;
  flex-flow: row wrap; /* direction + wrap */
  justify-content: space-between; /* 主轴对齐 */
  align-items: center; /* 交叉轴对齐 */
  gap: 20px; /* 项目间距 */
}

.item {
  flex: 1 0 200px; /* grow | shrink | basis */
  order: 2; /* 显示顺序 */
  align-self: flex-start; /* 单独对齐 */
}

7. 网格布局（Grid）

用途：二维响应式布局
方法：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { 
  grid-area: main;
  display: subgrid; /* 嵌套网格 */
}

8. 媒体查询

用途：响应式设计核心
方法：

/* 基本媒体查询 */
@media (max-width: 768px) {
  .container { flex-direction: column; }
}

/* 多条件查询 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* 平板横屏样式 */
}

/* 特性查询 */
@supports (display: grid) {
  .container { display: grid; }
}

9. 滤镜效果

用途：视觉特效处理
方法：

.image {
  filter: 
    blur(2px) 
    grayscale(50%) 
    contrast(120%) 
    drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
  
  transition: filter 0.5s ease;
}

.image:hover {
  filter: none;
}

10. 其他重要特性

/* 变量 */
:root {
  --primary-color: #3498db;
  --spacing: 20px;
}
.element {
  color: var(--primary-color);
  margin: var(--spacing);
}

/* 多列布局 */
.multi-col {
  column-count: 3;
  column-gap: 30px;
  column-rule: 1px solid #ddd;
}

/* 形状环绕 */
.shape {
  shape-outside: circle(50%);
  float: left;
  width: 200px;
  height: 200px;
}

/* 滚动捕捉 */
.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}
.section {
  scroll-snap-align: start;
}

三、ES6+ 全面升级

1. 变量声明

用途：更安全的变量作用域
方法：

let count = 0; // 块级作用域
const PI = 3.14159; // 常量声明

2. 箭头函数

用途：简化函数语法，自动绑定this
方法：

// 基本语法
const sum = (a, b) => a + b;

// 返回对象
const createUser = (name, age) => ({ name, age });

// this绑定
const obj = {
  values: [1, 2, 3],
  double: function() {
    return this.values.map(n => n * 2); // 正确绑定this
  }
};

3. 模板字符串

用途：字符串插值和多行字符串
方法：

const user = { name: 'Alice', age: 28 };

// 基本插值
console.log(`Hello ${user.name}, next year you'll be ${user.age + 1}`);

// 多行字符串
const html = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>Age: ${user.age}</p>
  </div>
`;

// 标签模板
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => 
    `${result}${str}<span class="highlight">${values[i] || ''}</span>`, '');
}

highlight`User ${user.name} is ${user.age} years old`;

4. 解构赋值

用途：从对象/数组中提取数据
方法：

// 对象解构
const { name, age: userAge, ...rest } = user;

// 数组解构
const [first, second, , fourth] = [1, 2, 3, 4];

// 函数参数解构
function printUser({ name, age = 18 }) {
  console.log(`${name}, ${age}`);
}

// 默认值
const { settings = { theme: 'light' } } = options;

5. 扩展运算符

用途：合并/复制对象和数组
方法：

// 数组扩展
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1,2,3,4]

// 对象扩展
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // {a:1, b:2, c:3}

// 函数参数
const numbers = [5, 10, 15];
Math.max(...numbers); // 15

// 浅拷贝
const arrCopy = [...originalArray];
const objCopy = { ...originalObject };

6. 类与继承

用途：面向对象编程语法糖
方法：

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
  
  static info() {
    return "Animal class";
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  
  speak() {
    super.speak();
    console.log(`${this.name} barks!`);
  }
  
  get description() {
    return `${this.name} (${this.breed})`;
  }
  
  set nickname(value) {
    this._nickname = value;
  }
}

const rex = new Dog('Rex', 'Labrador');
rex.speak();

7. 模块系统

用途：代码组织和复用
方法：

// math.js
export const PI = 3.14159;

export function circleArea(r) {
  return PI * r ** 2;
}

export default class Calculator {
  add(a, b) { return a + b; }
}

// app.js
import { PI, circleArea } from './math.js';
import Calc from './math.js'; // 默认导入

const calc = new Calc();
console.log(calc.add(2, PI));

8. Promise与异步

用途：处理异步操作
方法：

// Promise基础
new Promise((resolve, reject) => {
  setTimeout(() => resolve('成功!'), 1000);
})
.then(result => console.log(result))
.catch(error => console.error(error));

// Promise链
fetch('/api/data')
  .then(response => response.json())
  .then(data => processData(data))
  .catch(handleError);

// Promise.all
Promise.all([fetch(url1), fetch(url2)])
  .then(([res1, res2]) => [res1.json(), res2.json()]))
  .then(([data1, data2]) => console.log(data1, data2));

9. Async/Await

用途：同步方式写异步代码
方法：

async function loadData() {
  try {
    const user = await fetch('/api/user');
    const posts = await fetch(`/api/posts?userId=${user.id}`);
    return { user, posts };
  } catch (error) {
    console.error('加载失败:', error);
    throw error;
  }
}

// 并行请求
async function loadAll() {
  const [user, settings] = await Promise.all([
    fetch('/api/user'),
    fetch('/api/settings')
  ]);
  return { user, settings };
}

10. 迭代器与生成器

用途：自定义迭代行为
方法：

// 迭代器
const myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

// 生成器
function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++;
  }
}

const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

11. 其他重要特性

// 增强的对象字面量
const name = 'Alice';
const obj = {
  name, // 属性简写
  greet() { // 方法简写
    console.log(`Hello ${this.name}`);
  },
  [computedKey]: 'value' // 计算属性名
};

// 新的数据结构
const set = new Set([1, 2, 3, 3]); // 集合 [1,2,3]
const map = new Map(); // 键值对
map.set('name', 'Alice');
map.get('name');

// 可选链操作符
const street = user?.address?.street;

// 空值合并
const name = inputName ?? 'Anonymous';

// Promise.allSettled
Promise.allSettled([promise1, promise2])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log(result.value);
      } else {
        console.error(result.reason);
      }
    });
  });

四、综合应用：现代用户面板

<section class="user-dashboard">
  <header>
    <h1>用户控制面板</h1>
    <nav>
      <button class="active">概览</button>
      <button>设置</button>
      <button>分析</button>
    </nav>
  </header>
  
  <div class="grid-container">
    <article class="user-card">
      <canvas id="avatarCanvas" width="150" height="150"></canvas>
      <h2 data-name="user-name">张三</h2>
      <p>注册时间: <time datetime="2022-03-15">2022年3月15日</time></p>
    </article>
    
    <section class="stats">
      <h3>活动统计</h3>
      <div class="chart-container"></div>
    </section>
  </div>
  
  <footer>
    <button id="notifyBtn">发送通知</button>
  </footer>
</section>

.user-dashboard {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  padding: 20px;
}

.user-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 25px;
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-5px) rotate(1deg);
  }
  
  h2 {
    color: var(--primary-color, #3498db);
  }
}

#notifyBtn {
  background: linear-gradient(to right, #3498db, #2ecc71);
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
  }
  
  &:active {
    transform: scale(0.98);
  }
}

class UserDashboard {
  constructor() {
    this.canvas = document.getElementById('avatarCanvas');
    this.notifyBtn = document.getElementById('notifyBtn');
    this.userName = document.querySelector('[data-name="user-name"]');
    this.init();
  }
  
  async init() {
    this.renderAvatar();
    this.loadUserData();
    this.notifyBtn.addEventListener('click', this.sendNotification);
  }
  
  renderAvatar() {
    const ctx = this.canvas.getContext('2d');
    const gradient = ctx.createRadialGradient(75,75,5,75,75,75);
    gradient.addColorStop(0, '#3498db');
    gradient.addColorStop(1, '#1a5276');
    
    ctx.beginPath();
    ctx.arc(75, 75, 70, 0, Math.PI * 2);
    ctx.fillStyle = gradient;
    ctx.fill();
    
    ctx.font = 'bold 40px Arial';
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    ctx.fillText(this.userName.textContent.charAt(0), 75, 95);
  }
  
  async loadUserData() {
    try {
      const response = await fetch('/api/user');
      const data = await response.json();
      
      localStorage.setItem('userData', JSON.stringify(data));
      this.renderUserInfo(data);
    } catch (error) {
      console.error('加载用户数据失败:', error);
      this.showFallbackData();
    }
  }
  
  renderUserInfo(data) {
    this.userName.textContent = data.name;
    
    // 使用解构和默认值
    const { joined = new Date(), role = 'Member' } = data;
    document.querySelector('time').textContent = new Date(joined).toLocaleDateString();
    
    // 更新图表
    this.renderChart(data.stats);
  }
  
  sendNotification = async () => {
    try {
      const permission = await Notification.requestPermission();
      if (permission === 'granted') {
        new Notification('系统通知', {
          body: '您有新的消息',
          icon: 'notification-icon.png'
        });
      }
    } catch (error) {
      console.error('通知发送失败:', error);
    }
  }
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
  const dashboard = new UserDashboard();
});

五、浏览器支持与最佳实践

1. 渐进增强策略

• 使用特性检测而非浏览器检测

// 检测WebP支持
async function checkWebPSupport() {
  const webpData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';
  const img = new Image();
  return new Promise(resolve => {
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
    img.src = webpData;
  });
}

2. 现代化构建流程

# 使用Babel转换ES6+语法
npm install @babel/core @babel/preset-env

# 使用PostCSS处理CSS3
npm install postcss autoprefixer cssnano

# 典型构建脚本
"scripts": {
  "build": "babel src -d dist && postcss src/styles.css -o dist/styles.css"
}

3. 性能优化策略

• 使用CSS will-change属性

.animated-element {
  will-change: transform, opacity;
}

• 代码分割与懒加载

const module = await import('./module.js');

• Web Workers处理复杂计算

• 虚拟滚动处理长列表

4. 安全最佳实践

• 内容安全策略（CSP）

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' https://apis.example.com">

• 使用Subresource Integrity

<script src="https://example.com/library.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

结语

HTML5、CSS3和ES6共同构成了现代Web开发的三大支柱：

• HTML5 提供了丰富的语义化标签和强大的API（Canvas、Web存储、WebSocket等）

• CSS3 带来了革命性的布局系统（Flexbox/Grid）、动画和视觉效果

• ES6 引入了现代化编程范式（类、模块、异步处理等）

这些技术的综合应用使开发者能够构建高性能、可维护且用户体验卓越的Web应用。随着Web标准的持续演进，掌握这些核心技术将为前端开发者奠定坚实的基础，迎接WebAssembly、Web Components和Progressive Web Apps等新一代Web技术的挑战。