HTML、CSS 和 JavaScript 是前端开发的三大基础技术，它们通过不同的方式相互作用，创建交互性良好的网页。

1. HTML 与 CSS 的交互

HTML 负责定义网页的结构，而 CSS 则负责美化这些结构元素。两者的交互主要通过以下方式：

  • <style> 标签：直接在 HTML 中嵌入 CSS 样式。 这种方式将 CSS 写入到 HTML 文件中，但不推荐用于大型项目，因为这会导致样式与结构混杂在一起。
<style>
  h1 {
    color: red;
  }
</style>
  • <link> 标签：通过 <link> 标签引入外部 CSS 文件。 这种方式通常用于大型项目中，将样式与结构分离，维护更加清晰。
<link rel="stylesheet" href="styles.css">
  • 内联样式：直接将样式属性写在 HTML 标签内。 这种方式适合临时的小改动，但不推荐频繁使用，尤其在大型项目中不利于维护。
<h1 style="color: blue;">这是一个标题</h1>

2. HTML 与 JavaScript 的交互

JavaScript 负责操作和控制网页内容，主要与 HTML 进行交互以实现动态效果。以下是交互方式：

  • <script> 标签：通过 <script> 标签直接在 HTML 中嵌入 JavaScript 代码。 此方法会在 HTML 中直接执行 JavaScript，适合小规模的脚本。
<script>
  alert('这是一个弹窗');
</script>
  • 外部 JavaScript 文件：通过 <script> 标签引入外部 JavaScript 文件。 这种方式将 JavaScript 逻辑与 HTML 分离，便于维护和重用。
<script src="script.js"></script>
  • DOM 操作：通过 JavaScript 操作 DOM（文档对象模型），动态更改 HTML 元素的内容和属性。例如：
<p id="text">这是原始文本</p>
<script>
  document.getElementById('text').innerText = '这是通过 JS 改变的文本';
</script>
  • 事件监听：JavaScript 可以通过事件监听器响应用户的交互。例如：
<button id="btn">点击我</button>
<script>
  document.getElementById('btn').addEventListener('click', function() {
    alert('按钮被点击了');
  });
</script>

3. CSS 与 JavaScript 的交互

JavaScript 也可以与 CSS 进行交互，动态地控制页面的样式。常见的方法有：

  • 动态添加或修改样式：JavaScript 可以通过操作 DOM 元素的 style 属性直接修改 CSS 样式。
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<button onclick="changeColor()">改变颜色</button>

<script>
  function changeColor() {
    document.getElementById('box').style.backgroundColor = 'blue';
  }
</script>
  • 操作类名：通过 JavaScript 动态添加、删除或切换 HTML 元素的 class 属性，从而改变其样式。
<div id="box" class="red-box"></div>
<button onclick="toggleBox()">切换样式</button>

<style>
  .red-box { background-color: red; width: 100px; height: 100px; }
  .blue-box { background-color: blue; }
</style>

<script>
  function toggleBox() {
    document.getElementById('box').classList.toggle('blue-box');
  }
</script>
  • CSS 变量与 JavaScript 交互：JavaScript 可以操作 CSS 变量（自定义属性）来动态修改样式。
<style>
  :root {
    --main-color: red;
  }
  div {
    background-color: var(--main-color);
    width: 100px;
    height: 100px;
  }
</style>

<div></div>
<button onclick="changeColor()">改变颜色</button>

<script>
  function changeColor() {
    document.documentElement.style.setProperty('--main-color', 'blue');
  }
</script>

总结

HTML 提供网页的结构，CSS 提供样式，JavaScript 提供动态交互。三者通过嵌入、引入、DOM 操作、事件监听等方式进行交互，构建出复杂且具有良好用户体验的网页和应用。

常见考点

1. DOM 操作

  • 理解 DOM（文档对象模型）：考察候选人是否理解 DOM 树的结构及其操作方式，如如何通过 JavaScript 操作 HTML 元素的属性、内容、样式。
    • 示例问题：如何通过 JavaScript 操作 DOM 元素的 class 或 style？
  • DOM 操作性能优化：了解如何减少 DOM 操作的频率，如何使用文档碎片（Document Fragment）提高操作性能。
    • 示例问题：如何优化频繁的 DOM 操作，减少重绘和回流？

2. 事件处理

  • 事件绑定：考察如何通过 JavaScript 绑定事件监听器，以及事件冒泡、捕获机制。
    • 示例问题：请解释事件冒泡和捕获的原理，以及如何阻止事件冒泡？
  • 委托事件：当有大量动态生成的 DOM 元素时，如何通过事件委托提高性能。
    • 示例问题：如何使用事件委托优化对大量子元素的事件处理？

3. CSS 与 JavaScript 的交互

  • 动态样式控制：使用 JavaScript 动态添加、修改、删除元素的 CSS 样式。
    • 示例问题：如何通过 JavaScript 动态改变页面元素的样式？如何使用 classList 控制 CSS 类？
  • CSS 变量与 JavaScript：考察对 CSS 自定义属性（CSS 变量）的理解，以及如何通过 JavaScript 操作它们。
    • 示例问题：如何通过 JavaScript 修改 CSS 变量（CSS 自定义属性）？

4. 内联与外部资源的加载

  • 内联样式与脚本：理解如何通过内联样式和脚本对 HTML 进行直接控制，以及这种方式的优缺点。
    • 示例问题：内联样式和外部样式文件相比有何不同？何时使用内联脚本？
  • 异步加载脚本和样式：理解 async、defer 属性对 <script> 的影响，以及 link 标签中的预加载机制。
    • 示例问题：async 和 defer 的区别是什么？如何优化资源的加载顺序？

5. 表单交互与验证

  • 表单控件交互：考察如何通过 JavaScript 操作表单元素，监听表单的提交，进行数据验证和提交。
    • 示例问题：如何使用 JavaScript 禁用表单的默认提交行为？如何实时监听表单输入？
  • HTML5 表单验证 API：考察如何利用原生的表单验证 API 进行表单验证，而不是依赖 JavaScript 实现。
    • 示例问题：请说明 HTML5 表单验证的工作原理及常见使用方法。

6. 事件机制与交互

  • 捕获、冒泡与阻止默认行为：需要理解事件的传播机制，并在需要时阻止默认行为。
    • 示例问题：如何在点击链接时阻止它的默认跳转行为？如何在父元素上拦截并处理子元素的事件？

7. 性能优化相关

  • 懒加载：考察如何通过 JavaScript 实现资源的懒加载，以优化页面加载性能。
  • 示例问题：如何实现图片的懒加载？
  • 脚本与样式的异步加载：理解如何通过 async、defer 实现脚本的异步加载，以及 preload、prefetch 优化资源加载。
  • 示例问题：如何异步加载一个外部 JavaScript 文件？preload 与 prefetch 有什么区别？

8. 响应式设计与动态样式

  • 媒体查询与 JavaScript 响应式处理：如何结合媒体查询与 JavaScript 实现响应式设计，并根据屏幕尺寸、设备类型等动态修改样式。
    • 示例问题：如何通过 JavaScript 检测设备屏幕尺寸并动态调整页面样式？

9. 跨域与安全

  • CORS（跨域资源共享）：理解如何通过 HTML 和 JavaScript 实现跨域请求，以及如何处理跨域相关的安全问题。
  • 示例问题：如何通过 JavaScript 发起跨域请求？crossorigin 属性的作用是什么？
  • Content Security Policy (CSP)：如何通过 HTML 和 HTTP 头中的 CSP 限制页面加载的资源，防止 XSS 攻击。
  • 示例问题：如何在 HTML 中使用 CSP 以防止脚本注入？

10. 存储与交互

  • LocalStorage、SessionStorage 与 Cookies：考察在页面中使用这些存储方式与后端进行数据交互的能力。
    • 示例问题：LocalStorage 和 SessionStorage 有什么区别？如何通过 JavaScript 操作它们？