HTML&CSS 高频知识点五十条本文50道题目覆盖HTML、CSS核心知识点，包括语义化标签、布局技巧、CSS3特性、

一、HTML基础与语义化

1. 什么是HTML语义化？它有哪些优势？

答案：
HTML语义化是指使用具有明确含义的标签（如 <header>、<article>、<footer>）来描述页面结构，而非仅依赖 <div> 或 <span>。
优势：

提高可维护性：代码结构清晰，便于团队协作和后期维护。
SEO优化：搜索引擎能更精准理解页面内容，提升排名。
无障碍访问：屏幕阅读器可正确解析内容，提升残障用户体验。

纵向延伸：

HTML5语义化标签：新增 <nav>、<main>、<section>、<aside> 等，替代传统 <div> 嵌套。
最佳实践：避免过度嵌套，保持标签层级扁平化。

更深层次问题：

如何在HTML5中实现多语言支持？
语义化标签与 <div> 的性能差异？

2. `<!DOCTYPE html>` 的作用是什么？

答案：

声明文档类型：告知浏览器使用HTML5标准解析文档。
避免混杂模式：确保浏览器以标准模式渲染页面，而非旧版兼容模式。

纵向延伸：

历史对比：HTML4.01需声明 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">。
兼容性处理：旧版浏览器通过HTML5 Shiv库支持新标签。

更深层次问题：

如何检测浏览器是否处于标准模式？
未声明 <!DOCTYPE 的后果？

3. HTML5新增了哪些API？

答案：

本地存储：localStorage（永久存储）、sessionStorage（会话存储）。
Canvas/SVG：<canvas> 绘制图形，支持动态渲染。
多媒体支持：<audio>、<video> 嵌入音视频。
地理位置：通过 navigator.geolocation 获取用户位置。

纵向延伸：

应用场景：localStorage 用于缓存用户偏好，Canvas 用于游戏开发。
性能优化：避免滥用 localStorage 导致内存泄漏。

更深层次问题：

如何实现跨域存储？
HTML5离线缓存（AppCache）的缺陷？

二、CSS基础与布局

4. CSS盒模型的组成及区别？

答案：

标准盒模型（content-box）：宽度 = content + padding + border + margin。
怪异盒模型（border-box）：宽度 = content（含padding和border） + margin。

纵向延伸：

默认值：浏览器默认使用 content-box。
优化布局：通过 box-sizing: border-box 统一计算元素尺寸。

更深层次问题：

如何计算元素的实际宽度？
padding 和 margin 在不同盒模型中的表现差异？

5. 如何实现元素水平垂直居中？

答案：

Flex布局：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

绝对定位 + 负边距：

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

纵向延伸：

Grid布局：

.parent {
  display: grid;
  place-items: center;
}

应用场景：Flex适合一维布局，Grid适合二维布局。

更深层次问题：

如何实现多列垂直居中？
居中方案的兼容性处理？

6. `display: none` 和 `visibility: hidden` 的区别？

答案：

display: none：元素不占据空间，不触发渲染树。
visibility: hidden：元素占据空间，但不可见。

纵向延伸：

性能影响：display: none 可减少重排重绘，适合隐藏复杂元素。
事件监听：两者均不会响应事件。

更深层次问题：

如何动态切换 display 和 visibility？
opacity: 0 与 visibility: hidden 的区别？

三、CSS选择器与优先级

7. CSS选择器优先级的计算规则？

答案：
优先级从高到低：

内联样式（style=""）
ID选择器（#id）
类选择器/属性选择器/伪类（.class, [type="text"], :hover）
元素选择器/伪元素（div, ::before）

纵向延伸：

冲突解决：使用 !important 强制覆盖，但应谨慎使用。
权重计算：ID权重为100，类为10，元素为1。

更深层次问题：

如何避免样式覆盖？
!important 的适用场景？

8. 通配符选择器（`*`）的性能问题？

答案：

性能开销：* 会匹配所有元素，导致浏览器遍历整个DOM树，降低渲染效率。
优化建议：仅在必要时使用，优先使用类选择器或ID选择器。

纵向延伸：

替代方案：使用 body * 限制作用域。
应用场景：重置样式时（如 * { margin: 0 }）需权衡利弊。

更深层次问题：

如何优化全局样式？
通配符与后代选择器的性能对比？

9. 伪类与伪元素的区别？

答案：

伪类（:hover, :nth-child）：操作文档树中已有的元素。
伪元素（::before, ::after）：创建文档树外的新元素。

纵向延伸：

语法区别：伪类用单冒号 :, 伪元素用双冒号 ::。
应用场景：伪类用于状态（如悬停），伪元素用于装饰（如图标）。

更深层次问题：

如何生成伪元素内容？
伪元素与实际DOM节点的区别？

四、CSS3新特性与动画

10. CSS3新增的动画属性有哪些？

答案：

transition：实现过渡效果（如颜色渐变）。
@keyframes：定义关键帧动画（如旋转、缩放）。
transform：2D/3D变换（如 translate、rotate）。

纵向延伸：

性能优化：使用 transform 和 opacity 触发GPU加速。
应用场景：transition 用于按钮交互，@keyframes 用于复杂动画。

更深层次问题：

如何实现无限循环动画？
动画与JavaScript动画的性能对比？

11. `flex` 和 `grid` 布局的区别？

答案：

Flex：一维布局，适合行或列排列（如导航栏）。
Grid：二维布局，可同时控制行和列（如网格卡片）。

纵向延伸：

Flex特性：自动调整子元素大小，对齐方式灵活。
Grid特性：定义行列间距，支持命名区域布局。

更深层次问题：

如何实现响应式网格布局？
Flex与Grid的兼容性？

12. CSS3的渐变（`gradient`）语法？

答案：

线性渐变：

background: linear-gradient(to right, red, blue);

径向渐变：

background: radial-gradient(circle, yellow, black);

纵向延伸：

方向控制：to right 表示从左到右，角度值（如 45deg）可自定义方向。
应用场景：按钮背景、渐变文字效果。

更深层次问题：

如何实现多色渐变？
渐变与背景图片的性能对比？

五、响应式设计与媒体查询

13. 响应式设计的核心原则？

答案：

弹性布局：使用百分比或 vw/vh 单位。
媒体查询：根据屏幕尺寸调整样式。
图片适配：使用 srcset 和 picture 标签。

纵向延伸：

断点设置：常见断点为 768px（平板）、1024px（桌面）。
移动优先：从小屏到大屏逐步增强样式。

更深层次问题：

如何检测设备方向变化？
响应式与自适应设计的区别？

14. 媒体查询（`@media`）的语法及示例？

答案：

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

纵向延伸：

特性：支持 min-width、max-width、orientation（横竖屏）。
嵌套使用：多个条件通过 and 或 , 连接。

更深层次问题：

如何实现动态媒体查询？
媒体查询与CSS变量的结合？

15. 移动端视口（`viewport`）设置的作用？

答案：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width：设置视口宽度等于设备宽度。
initial-scale=1.0：初始缩放比例为1。

纵向延伸：

常见问题：未设置视口会导致移动端页面缩放异常。
兼容性：iOS和Android均支持此设置。

更深层次问题：

如何适配不同分辨率？
移动端与桌面端的视口差异？

六、CSS3高级特性与性能优化

16. `calc()` 函数的用途？

答案：

动态计算：支持加减乘除运算，单位需一致。
```
width: calc(100% - 20px);
```

纵向延伸：

应用场景：动态计算边距、宽度或字体大小。
兼容性：现代浏览器均支持，需加前缀（如 -webkit-）。

更深层次问题：

如何嵌套 calc()？
calc() 与 JavaScript 计算的性能对比？

17. `filter` 属性的常见用法？

答案：

滤镜效果：
```
filter: grayscale(50%) blur(2px);
```
支持效果：灰度、模糊、亮度、对比度、阴影等。

纵向延伸：

性能影响：过度使用可能导致GPU过载。
应用场景：图片滤镜、按钮悬停效果。

更深层次问题：

如何实现动态滤镜？
filter 与 backdrop-filter 的区别？

18. 如何优化CSS性能？

答案：

减少选择器复杂度：避免后代选择器（如 .a .b .c）。
合并样式表：减少HTTP请求。
压缩CSS：移除注释和空格。

纵向延伸：

关键CSS：将首屏样式内联加载，减少阻塞时间。
懒加载：非首屏资源延迟加载。

更深层次问题：

如何检测CSS加载性能？
Critical CSS的提取方法？

七、HTML表单与交互

19. HTML5表单新属性有哪些？

答案：

输入类型：email、date、number、range。
属性：required（必填）、placeholder（占位符）、pattern（正则验证）。

纵向延伸：

验证反馈：浏览器自动提示错误（如红色边框）。
应用场景：注册表单、搜索框。

更深层次问题：

如何实现自定义表单验证？
表单与JavaScript的联动？

20. `<input type="file">` 的多文件上传？

答案：

<input type="file" multiple>

纵向延伸：

拖拽上传：结合 drag 和 drop 事件。
安全性：限制文件类型（如 accept="image/*"）。

更深层次问题：

如何实现文件预览？
大文件分片上传？

21. `<iframe>` 的缺点及替代方案？

答案：

缺点：
- 阻塞主页面加载。
- SEO不友好，搜索引擎无法解析内容。
替代方案：
- 使用 fetch 获取远程内容并动态渲染。

纵向延伸：

安全限制：同源策略阻止跨域通信。
应用场景：嵌入第三方地图或广告。

更深层次问题：

如何优化 <iframe> 加载？
iframe 与 shadow DOM 的区别？

八、CSS3动画与过渡

22. `transition` 与 `animation` 的区别？

答案：

transition：基于状态变化（如 hover）触发，适合简单过渡。
animation：通过 @keyframes 定义复杂动画序列。

纵向延伸：

性能优化：animation 可循环播放，transition 仅单次触发。
应用场景：transition 用于按钮交互，animation 用于复杂动效。

更深层次问题：

如何实现动画延迟？
动画与JavaScript的结合？

23. 如何实现元素的无限旋转？

答案：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 2s linear infinite;
}

纵向延伸：

性能优化：使用 transform 触发GPU加速。
应用场景：加载状态指示器。

更深层次问题：

如何暂停动画？
动画与CSS变量的结合？

24. `will-change` 属性的作用？

答案：

提前通知浏览器：元素将发生变化（如 transform 或 opacity），优化渲染性能。
```
.element {
  will-change: transform;
}
```

纵向延伸：

适用场景：频繁动画元素。
风险：过度使用可能导致内存泄漏。

更深层次问题：

如何判断是否需要使用 will-change？
与 transform 的性能对比？

九、HTML5 API与存储

25. `localStorage` 与 `sessionStorage` 的区别？

答案：

localStorage：数据永久存储，关闭浏览器后仍存在。
sessionStorage：数据仅在当前会话有效，关闭标签页即清除。

纵向延伸：

存储限制：通常为5MB。
应用场景：localStorage 用于缓存用户偏好，sessionStorage 用于临时数据。

更深层次问题：

如何实现数据加密？
与 IndexedDB 的性能对比？

26. `Canvas` 与 `SVG` 的区别？

答案：

Canvas：位图，通过JS动态绘制，适合游戏或复杂图形。
SVG：矢量图，基于XML，适合静态图标或可缩放图形。

纵向延伸：

性能：Canvas 操作像素级数据，适合实时渲染；SVG 更易维护。
应用场景：Canvas 用于粒子动画，SVG 用于图表。

更深层次问题：

如何实现Canvas动画？
SVG与CSS的结合？

27. `Geolocation API` 的基本用法？

答案：

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude, position.coords.longitude);
});

纵向延伸：

权限控制：用户需授权访问位置信息。
应用场景：LBS服务（如地图导航）。

更深层次问题：

如何处理位置获取失败？
与IP定位的精度对比？

十、HTML5语义化标签

28. `<nav>` 与 `<aside>` 的区别？

答案：

<nav> ：主要导航链接（如菜单栏）。
<aside> ：与主内容无关的补充信息（如侧边栏）。

纵向延伸：

SEO优化：搜索引擎可识别导航结构。
无障碍访问：屏幕阅读器可跳过导航区域。

更深层次问题：

如何嵌套语义化标签？
与 <div> 的语义化对比？

29. `<main>` 标签的作用？

答案：

定义主内容：每个页面应只有一个 <main>，通常包含核心信息。

纵向延伸：

无障碍优化：屏幕阅读器可直接跳转至主内容。
应用场景：文章主体、产品详情页。

更深层次问题：

如何与 <article> 区分？
多 <main> 的影响？

30. `<figure>` 与 `<figcaption>` 的用途？

答案：

<figure> ：独立内容（如图片、图表）。
<figcaption> ：为 <figure> 添加标题。

纵向延伸：

语义化：区分主内容与辅助内容。
应用场景：学术论文插图、产品展示。

更深层次问题：

如何嵌套 <figure>？
与 <div> 的语义化对比？

十一、CSS3选择器与属性

31. `:nth-child` 与 `:nth-of-type` 的区别？

答案：

:nth-child(n) ：选择父元素下的第n个子元素（无论标签类型）。
:nth-of-type(n) ：选择父元素下特定类型的第n个子元素。

纵向延伸：

应用场景：动态表格行高亮。
公式：even、odd、2n+1 等。

更深层次问题：

如何实现隔行变色？
与 :nth-last-child 的区别？

32. `:not()` 伪类的用途？

答案：

排除选择器：
```
p:not(.highlight) { color: black; }
```

纵向延伸：

组合使用：div:not(#main) > p。
应用场景：批量排除特定元素。

更深层次问题：

如何嵌套 :not()？
与 :has() 的区别？

33. `rem` 与 `em` 的区别？

答案：

rem：基于根元素（<html>）字体大小。
em：基于当前元素字体大小（继承父元素）。

纵向延伸：

响应式设计：rem 更易统一控制。
应用场景：rem 用于全局字体，em 用于局部缩放。

更深层次问题：

如何设置 rem 基准？
与 vw/vh 的对比？

十二、HTML5多媒体

34. `<audio>` 与 `<video>` 标签的属性？

答案：

常用属性：controls（显示控件）、autoplay（自动播放）、loop（循环）。

示例：

<video src="movie.mp4" controls autoplay></video>

纵向延伸：

格式兼容：需提供多种编码（如 MP4、WebM）。
应用场景：在线课程、背景视频。

更深层次问题：

如何实现视频预加载？
与第三方播放器（如 YouTube）的集成？

35. HTML5 Canvas的基本用法？

答案：

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

纵向延伸：

应用场景：游戏开发、数据可视化。
性能优化：避免频繁重绘。

更深层次问题：

如何实现Canvas动画？
Canvas与SVG的性能对比？

36. HTML5拖放（Drag and Drop）的实现？

答案：

document.addEventListener('dragstart', e => {
  e.dataTransfer.setData('text/plain', e.target.id);
});
document.addEventListener('drop', e => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  e.target.appendChild(document.getElementById(id));
});

纵向延伸：

应用场景：文件上传、任务管理。
兼容性：需处理 dragover 事件的默认行为。

更深层次问题：

如何实现跨容器拖放？
拖放与剪贴板的结合？

十三、CSS3布局与定位

37. `position` 的几种值及其作用？

答案：

static：默认值，不脱离文档流。
relative：相对于自身位置定位，不影响其他元素。
absolute：相对于最近的已定位祖先元素定位。
fixed：相对于视口定位。
sticky：滚动时固定在某个位置。

纵向延伸：

应用场景：sticky 用于固定导航栏。
性能影响：fixed 可能导致布局抖动。

更深层次问题：

如何实现粘性布局？
position 与 z-index 的关系？

38. `float` 的作用及清除浮动方法？

答案：

float：使元素向左或向右浮动，常用于布局。

清除浮动：

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

纵向延伸：

问题：浮动元素可能导致父容器高度塌陷。
替代方案：使用Flex或Grid布局。

更深层次问题：

如何实现双栏布局？
float 与 inline-block 的对比？

39. `z-index` 的生效条件？

答案：

前提条件：元素需设置 position（非 static）。
层叠上下文：父元素的 z-index 会影响子元素的优先级。

纵向延伸：

应用场景：弹窗、模态框。
调试工具：使用浏览器开发者工具查看层叠关系。

更深层次问题：

如何实现跨层叠加？
z-index 与 transform 的关系？

十四、CSS3动画与过渡

40. `@keyframes` 的语法及示例？

答案：

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.box {
  animation: slideIn 1s ease-in-out;
}

纵向延伸：

动画方向：normal、reverse、alternate。
应用场景：页面加载动画。

更深层次问题：

如何暂停动画？
动画与CSS变量的结合？

41. `transition-timing-function` 的常见值？

答案：

linear：匀速。
ease：默认，慢快慢。
ease-in：加速。
ease-out：减速。
cubic-bezier：自定义曲线。

纵向延伸：

应用场景：按钮悬停、表单验证。
性能优化：避免使用复杂贝塞尔曲线。

更深层次问题：

如何自定义过渡曲线？
与 animation-timing-function 的对比？

42. `transform` 支持哪些属性？

答案：

2D变换：translate、rotate、scale、skew。
3D变换：translate3d、rotate3d、perspective。

纵向延伸：

性能优化：使用 transform 触发GPU加速。
应用场景：3D轮播图、卡片翻转。

更深层次问题：

如何实现3D透视效果？
transform 与 position 的优先级？

十五、HTML5与CSS3兼容性

43. 如何处理旧版浏览器兼容问题？

答案：

Polyfill：使用库（如 HTML5 Shiv）模拟新特性。
渐进增强：确保基础功能在旧浏览器可用。
特性检测：通过 Modernizr 判断支持情况。

纵向延伸：

IE兼容：使用 -ms- 前缀。
应用场景：企业级项目需兼容IE11。

更深层次问题：

如何检测浏览器特性？
渐进增强与优雅降级的区别？

44. `flex` 在IE中的兼容性？

答案：

IE11支持：需添加 -ms- 前缀。
IE10及以下：不支持Flex布局，需使用Hack或Polyfill。

纵向延伸：

替代方案：使用Grid布局（IE不支持）。
应用场景：现代浏览器优先，IE降级处理。

更深层次问题：

如何检测Flex支持？
IE兼容与性能的平衡？

45. `@supports` 的用途？

答案：

条件加载样式：

@supports (display: grid) {
  .container {
    display: grid;
  }
}

纵向延伸：

应用场景：动态加载现代CSS特性。
兼容性：现代浏览器支持。

更深层次问题：

如何结合媒体查询？
与JavaScript检测的对比？

十六、CSS3与HTML5综合应用

46. 实现一个响应式导航栏？

答案：

nav {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 768px) {
  nav {
    flex-direction: column;
  }
}

纵向延伸：

Hamburger菜单：结合JavaScript实现。
应用场景：移动端优化。

更深层次问题：

如何实现折叠动画？
与CSS Grid的对比？

47. 创建一个自适应卡片布局？

答案：

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

纵向延伸：

auto-fit：自动填充剩余空间。
应用场景：产品列表、博客文章。

更深层次问题：

如何调整列数？
与Flex布局的对比？

48. 实现一个全屏背景视频？

答案：

<video autoplay muted loop class="background-video">
  <source src="video.mp4" type="video/mp4">
</video>
<style>
.background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
</style>

纵向延伸：

性能优化：使用WebP格式减少加载时间。
应用场景：活动宣传页。

更深层次问题：

如何处理视频加载失败？
与CSS背景动画的对比？

49. 使用CSS3实现一个渐变按钮？

答案：

.button {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  padding: 10px 20px;
  border: none;
  color: white;
  font-size: 16px;
}
.button:hover {
  background: linear-gradient(to right, #feb47b, #ff7e5f);
}

纵向延伸：

阴影效果：添加 box-shadow 增强立体感。
应用场景：CTA按钮、表单提交。

更深层次问题：

如何实现3D按钮？
渐变与CSS变量的结合？

50. 使用HTML5和CSS3实现一个简单的计数器？

答案：

<div class="counter">0</div>
<script>
  let count = 0;
  setInterval(() => {
    document.querySelector('.counter').textContent = ++count;
  }, 1000);
</script>
<style>
.counter {
  font-size: 48px;
  color: #333;
  text-align: center;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
</style>

纵向延伸：

应用场景：访问量统计、倒计时。
性能优化：限制动画频率。

更深层次问题：

如何实现大数格式化？
与SVG计数器的对比？

HTML&CSS 高频知识点五十条

一、HTML基础与语义化

1. 什么是HTML语义化？它有哪些优势？

2. <!DOCTYPE html> 的作用是什么？

3. HTML5新增了哪些API？

二、CSS基础与布局

4. CSS盒模型的组成及区别？

5. 如何实现元素水平垂直居中？

6. display: none 和 visibility: hidden 的区别？

三、CSS选择器与优先级

7. CSS选择器优先级的计算规则？

8. 通配符选择器（*）的性能问题？

9. 伪类与伪元素的区别？

四、CSS3新特性与动画

10. CSS3新增的动画属性有哪些？

11. flex 和 grid 布局的区别？

12. CSS3的渐变（gradient）语法？

五、响应式设计与媒体查询

13. 响应式设计的核心原则？

14. 媒体查询（@media）的语法及示例？

15. 移动端视口（viewport）设置的作用？

六、CSS3高级特性与性能优化

16. calc() 函数的用途？

17. filter 属性的常见用法？

18. 如何优化CSS性能？

七、HTML表单与交互

19. HTML5表单新属性有哪些？

20. <input type="file"> 的多文件上传？

21. <iframe> 的缺点及替代方案？

八、CSS3动画与过渡

22. transition 与 animation 的区别？

23. 如何实现元素的无限旋转？

24. will-change 属性的作用？

九、HTML5 API与存储

25. localStorage 与 sessionStorage 的区别？

26. Canvas 与 SVG 的区别？

27. Geolocation API 的基本用法？

十、HTML5语义化标签

28. <nav> 与 <aside> 的区别？

29. <main> 标签的作用？

30. <figure> 与 <figcaption> 的用途？

十一、CSS3选择器与属性

31. :nth-child 与 :nth-of-type 的区别？

32. :not() 伪类的用途？

33. rem 与 em 的区别？

十二、HTML5多媒体

34. <audio> 与 <video> 标签的属性？

35. HTML5 Canvas的基本用法？

36. HTML5拖放（Drag and Drop）的实现？

十三、CSS3布局与定位

37. position 的几种值及其作用？

38. float 的作用及清除浮动方法？

39. z-index 的生效条件？

十四、CSS3动画与过渡

40. @keyframes 的语法及示例？

41. transition-timing-function 的常见值？

42. transform 支持哪些属性？

十五、HTML5与CSS3兼容性

43. 如何处理旧版浏览器兼容问题？

44. flex 在IE中的兼容性？

45. @supports 的用途？

十六、CSS3与HTML5综合应用

46. 实现一个响应式导航栏？

47. 创建一个自适应卡片布局？

48. 实现一个全屏背景视频？

49. 使用CSS3实现一个渐变按钮？

50. 使用HTML5和CSS3实现一个简单的计数器？

2. `<!DOCTYPE html>` 的作用是什么？

6. `display: none` 和 `visibility: hidden` 的区别？

8. 通配符选择器（`*`）的性能问题？

11. `flex` 和 `grid` 布局的区别？

12. CSS3的渐变（`gradient`）语法？

14. 媒体查询（`@media`）的语法及示例？

15. 移动端视口（`viewport`）设置的作用？

16. `calc()` 函数的用途？

17. `filter` 属性的常见用法？

20. `<input type="file">` 的多文件上传？

21. `<iframe>` 的缺点及替代方案？

22. `transition` 与 `animation` 的区别？

24. `will-change` 属性的作用？

25. `localStorage` 与 `sessionStorage` 的区别？

26. `Canvas` 与 `SVG` 的区别？

27. `Geolocation API` 的基本用法？

28. `<nav>` 与 `<aside>` 的区别？

29. `<main>` 标签的作用？

30. `<figure>` 与 `<figcaption>` 的用途？

31. `:nth-child` 与 `:nth-of-type` 的区别？

32. `:not()` 伪类的用途？

33. `rem` 与 `em` 的区别？

34. `<audio>` 与 `<video>` 标签的属性？

37. `position` 的几种值及其作用？

38. `float` 的作用及清除浮动方法？

39. `z-index` 的生效条件？

40. `@keyframes` 的语法及示例？

41. `transition-timing-function` 的常见值？

42. `transform` 支持哪些属性？

44. `flex` 在IE中的兼容性？

45. `@supports` 的用途？