2. HTML开发环境搭建（零配置，5分钟搞定，新手速通）

2.1 浏览器使用

查看HTML渲染效果

打开浏览器：启动Chrome、Firefox或Edge等现代浏览器
打开HTML文件：
- 方法一：直接拖拽HTML文件到浏览器窗口
- 方法二：在浏览器中点击"文件" > "打开文件"，选择HTML文件
- 方法三：使用本地服务器（推荐）

F12开发者工具基础使用

打开开发者工具：
- 快捷键：F12（Windows）或 Command+Option+I（Mac）
- 右键点击页面，选择"检查"
Elements面板：查看和编辑HTML结构
- 查看网页的DOM结构
- 检查元素的CSS样式
- 修改HTML和CSS，实时查看效果
Console面板：查看JavaScript控制台输出
- 显示错误信息
- 执行JavaScript代码
- 调试代码

2.2 VS Code安装+HTML相关配置

安装VS Code

下载VS Code：访问VS Code官方网站下载适合你操作系统的版本
安装VS Code：按照安装向导完成安装
启动VS Code：安装完成后启动VS Code

2.3 第一个HTML文件

创建HTML文件

创建文件夹：在电脑上创建一个文件夹，用于存放HTML文件
打开VS Code：在VS Code中打开这个文件夹
创建HTML文件：
- 点击"文件" > "新建文件"
- 保存文件为index.html

编写HTML代码

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个HTML页面</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个HTML页面</p>
    <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=welcome%20website%20banner&image_size=landscape_16_9" alt="欢迎图片">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

运行HTML文件

使用Live Server：
- 右键点击HTML文件
- 选择"Open with Live Server"
- 浏览器会自动打开并显示页面
直接在浏览器中打开：
- 找到HTML文件
- 双击打开，浏览器会显示页面

2.4 HTML代码运行与调试

常见报错排查

标签未闭合：确保所有标签都有对应的结束标签
属性值未加引号：HTML属性值必须用引号包围
路径错误：检查图片、链接等资源的路径是否正确
语法错误：检查HTML语法是否正确

调试技巧

使用浏览器开发者工具：
- Elements面板：检查HTML结构
- Console面板：查看错误信息
- Network面板：检查资源加载情况
验证HTML代码：
- 使用W3C HTML验证器检查HTML代码的有效性

小结

搭建HTML开发环境非常简单，只需要安装浏览器和代码编辑器，就可以开始编写HTML代码了。通过Live Server等工具，可以更方便地预览和调试HTML页面。

2. HTML开发环境搭建（零配置，5分钟搞定，新手速通） ​

2.1 浏览器使用 ​

查看HTML渲染效果 ​

F12开发者工具基础使用 ​

2.2 VS Code安装+HTML相关配置 ​

安装VS Code ​

推荐的HTML相关插件 ​

2.3 第一个HTML文件 ​

创建HTML文件 ​

编写HTML代码 ​

运行HTML文件 ​

2.4 HTML代码运行与调试 ​

常见报错排查 ​

调试技巧 ​

小结 ​

2. HTML开发环境搭建（零配置，5分钟搞定，新手速通）

2.1 浏览器使用

查看HTML渲染效果

F12开发者工具基础使用

2.2 VS Code安装+HTML相关配置

安装VS Code

推荐的HTML相关插件

2.3 第一个HTML文件

创建HTML文件

编写HTML代码

运行HTML文件

2.4 HTML代码运行与调试

常见报错排查

调试技巧

小结