在前端开发过程中，调试是非常重要的一环。HTML 和 CSS 是前端页面构建的两个基础模块，对于这两个模块的调试，也是需要特别注意的。
1. HTML 调试
1.1 验证页面结构
在编写 HTML 页面时，我们需要保证其结构良好，各个标签嵌套关系正确，语义化合理等。因此，在调试 HTML 页面时，首先需要验证其结构是否正确。
可以使用 W3C 标准提供的 HTML验证器 进行验证。例如，下面的代码片段演示了如何使用该验证器进行验证：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
-------
------
--------- -----------
-------
-------将以上代码复制到 W3C HTML Validator 中，点击校验，即可快速检查出页面中存在的 HTML 错误。
1.2 使用浏览器开发者工具
现代浏览器都提供了强大的 开发者工具，可以帮助我们快速定位 HTML 页面的问题。以 Chrome 浏览器为例，可以按下 F12 打开开发者工具，然后选择 Elements 标签页。
通过 Elements 可以查看当前页面的 DOM 结构，并可以对其进行修改。例如，我们可以通过该工具来查看当前元素的 class 和 id 属性，以确定 CSS 样式是否正确应用。
另外，Elements 中还提供了 Console 和 Network 等标签页，可用于快速定位 JS 错误和资源加载问题等。
2. CSS 调试
2.1 确认样式选择器
在编写 CSS 样式时，需要确认所使用的选择器是否正确。如果选择器不正确，则会导致样式无法应用到指定元素上。
例如，以下代码中选择器 .box 是一个错误的选择器：
-- -------------------- ---- -------
---- ----------------
---- -------------------------
------
-------
-------- -
------ -----
-
---------- -
----------------- ----
-
--------此时，.box-error 样式并不能应用到 HTML 元素上。我们需要将选择器 .box-error 修改为 .box 才能使其生效。
2.2 检查样式继承与覆盖
CSS 样式有继承和覆盖的特性，因此，在编写样式时需要注意样式的优先级问题。通常，ID 选择器的优先级最高，其次是 class 选择器，最后是标签选择器。
例如，下面的代码中，文本颜色应该是绿色的，但实际上它却是红色的：
-- -------------------- ---- -------
---- ------------
--------------
------
-------
---- - -
------ ------
-
- -
------ ----
-
--------解决这个问题的方法是明确样式的优先级，可以使用 ID 或者更具体的选择器来覆盖原有的样式。
2.3 使用开发者工具
与 HTML 调试类似，我们也可以使用浏览器开发者工具来帮助快速调试 CSS 样式。例如，在 Chrome 开发者工具中，选择 Elements 标签页，可以直接对元素的样式进行修改。同时，还可以查看当前元素继承的样式和被覆盖的样式等信息。
总结
以上是 Debug 前端 HTML/CSS 的一些方法和技巧。除了上述方法，还有很
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5448