HTML&CSS-开发环境构建

1- HTML 文件操作与编辑器

1.1- 创建和保存 HTML 文件

1.1.1- 编写内容

  • 打开编辑器，在新建的界面中输入内容，例如：

    <!DOCTYPE html>
<html>
<head>
    <title>我的第一个 HTML 页面</title>
</head>
<body>
    <h1>欢迎来到 HTML 学习</h1>
</body>
</html>

  • 注意：在文件编辑器中，顶部可能会出现一个小圆点，表示文件未保存。

1.1.2- 手动保存文件

  • 使用快捷键保存：
    • Mac 用户：Command + S
    • Windows 用户：Ctrl + S
  • 保存后，小圆点会消失。

1.1.3- 启用自动保存（可选）

  • 如果需要自动保存功能，点击右上角菜单选择 File > Auto Save。
  • 自动保存会让编辑器在内容更改后自动保存文件。

1.2- 使用浏览器打开 HTML 文件

1.2.1- 手动操作

  • 右击 HTML 文件，选择 Reveal in File Explorer 或 Reveal in Finder（根据系统）。
  • 双击文件即可在默认浏览器中打开。

1.2.2- 安装扩展工具优化流程

  • 打开编辑器左侧的 Extensions 面板（扩展）。
  • 如果 Extensions 面板未显示，可以右击左侧工具栏并勾选 Extensions。
  • 搜索并安装 Live Server 扩展。

1.2.3- 启动 Live Server

  • 在 HTML 文件中右键选择 Open with Live Server。
  • 文件将在浏览器中自动打开，且在编辑器中保存后，浏览器页面会自动刷新。

1.3- 编辑器扩展小技巧

1.3.1- 扩展管理

  • 左侧 Extensions 面板提供多种扩展。
  • 安装与管理扩展时，可以通过搜索框找到需要的工具。

1.3.2- 常用快捷键

  • 保存文件：Command + S（Mac）/Ctrl + S（Windows）。
  • 打开文件夹：右键文件 > Reveal in Folder。

1.3.3- 浏览器自动刷新

  • 通过 Live Server 扩展，无需每次手动刷新浏览器，提升效率。

1.4- 注意事项

1.4.1- 自动保存的利弊

  • 开启自动保存时，修改内容会立刻生效。
  • 关闭自动保存有助于在测试和调试代码时避免误操作。

1.4.2- 插件使用建议

  • 选择稳定、用户评价高的插件。
  • 定期检查插件更新，确保兼容性。

1.4.3- 常见问题与解决方案

  • 如果 Live Server 不启动，检查文件是否保存，或尝试重启编辑器。
  • 确保浏览器未被防火墙或其他安全软件阻止。