任务1.3 搭建HTML5的开发环境

任务1.3搭建开发环境网页设计项目教程（HTML5+CSS3+JavaScript）模块1HTML5概述学习目标▸从安装编辑器与浏览器，到配置高效的开发插件知识目标了解VSCode的特点与适用场景；掌握Chrome浏览器的安装方法；熟悉常用VSCode插件的功能。能力目标能独立完成VSCode与Chrome的安装；能安装并配置常用开发插件。素养目标培养规范安装、严谨操作的习惯；养成善用工具提升效率的意识；增强自主解决问题的能力。02任务描述▸网页文件是纯文本文件，本书使用VSCode创建网页网页文件是纯文本文件，本书使用VSCode创建网页VSCode是一款功能强大的代码编辑器，提供语法高亮、智能代码补全以及调试等功能；配合Chrome浏览器，可显著提高开发效率与代码质量。VSCode

代码编辑器Chrome

演示浏览器插件

中文包/预览/刷新031.3.1为什么使用VSCode▸轻量强大、易于扩展的源代码编辑器核心优势微软开发的轻量级源代码编辑器。支持HTML、CSS、JS等多种语言。提供高亮、补全、重构与调试功能。生态与适用拥有庞大的插件生态系统，可按需定制。可在Windows、macOS、Linux上使用。实时预览是HTML5开发的优势。04开发环境由三部分组成▸编辑器+浏览器+插件，三者缺一不可VSCode代码编辑器语法高亮与智能补全支持调试与重构可扩展、跨平台Chrome预览浏览器对Web标准支持好开发者工具强大用于预览与调试常用插件简体中文语言包OpeninBrowser右键预览LiveServer实时刷新提示：本书统一使用VSCode+Chrome进行演示。05安装流程：VSCode代码编辑器▸下载安装包后，按向导一路“下一步”即可完成1官网下载点DownloadforWindows2许可协议勾选“我同意此协议”3附加任务勾选“添加到PATH”4准备安装确认后点“安装”提示：也可直接使用本书电子资源中的VSCodeUserSetup-x64-1.86.0.exe安装包。06安装流程：Chrome浏览器▸本书所有示例均以Chrome作为演示浏览器1官网下载点击“立即下载”按钮2自动安装等待进度条走完即可提示：安装完成后双击.html文件，系统默认浏览器就会打开并预览页面。07配置VSCode：安装简体中文语言包▸把编辑器界面切换成中文，使用更顺手1搜索并安装扩展中搜索chinese2打开命令面板Ctrl+Shift+P输入display3选择中文选中“中文(简体)”4重启生效点Restart重启软件提示：语言包只改变界面文字，不影响代码内容，也不影响页面运行结果。08配置VSCode：安装OpeninBrowser插件▸在编辑器里右键，就能用浏览器打开当前网页1安装插件搜索openinbrowser后点击安装2右键预览选择OpeninDefaultBrowser提示：右键菜单中还有OpenInOtherBrowsers，可用其他浏览器打开页面。09VSCode高效操作速览▸掌握几个常用操作，编码效率明显提升常用快捷键Ctrl+S保存文件Ctrl+/注释当前行Ctrl+Shift+P打开命令面板智能辅助输入标签自动补全按语言高亮语法错误与警告实时提示插件加持简体中文语言包OpeninBrowser右键预览LiveServer实时刷新提示：输入英文“!”再按Tab键，即可生成完整的HTML5基本结构。10安装与配置的常见问题▸提前避开这几个坑，开发环境一次搭好忘了勾选“添加到PATH”命令行中可能找不到code命令重新运行安装程序补勾即可页面中文显示乱码另存为时编码选成了ANSI改选UTF-8即可正常显示右键没有预览菜单插件未安装或未启用在扩展面板安装并启用后生效11案例演示1-3：安装常用插件①打开VSCode，点击左侧“扩展”图标。

②搜索Chinese(Simplified)LanguagePack。

③点击“安装”，完成后重启软件。

④按Ctrl+Shift+P打开命令面板。

⑤输入display，选择ConfigureDisplayLanguage。

⑥选择“中文”，重启后界面即完成汉化。运行观察中文语言包可将界面切换为中文。OpeninBrowser支持右键预览网页。LiveServer可保存后自动刷新页面。12任务实施：搭建你的开发环境▸自行安装软件与插件并完成验证01下载软件从官网或电子资源获取安装包02安装软件双击安装包，按向导完成安装03安装浏览器下载并运行ChromeSetup.exe04安装中文包在扩展中搜索简体中文包05安装插件安装OpeninBrowser以便预览提示：安装完成后把VSCode与Chrome固定到任务栏，日常调用更顺手。13任务实施要点：环境配置与自检▸编码、保存与预览的关键设置·保存网页时选择UTF-8编码，避免中文乱码。

·文件名以.html结尾，保存类型选“所有文件”。

·建立独立项目文件夹管理网页与素材。

·右键OpeninDefaultBrowser可快速预览。

·按F12打开开发者工具调试页面。

·LiveServer支持保存后实时刷新页面。配置要点网页文件须以.html为扩展名。编码选择UTF-8，防止中文乱码。安装OpeninBrowser实现右键预览。用Chrome作为标准演示浏览器。14任务小结▸本任务完成从“工具下载”到“环境可用”的学习会安装能独立完成VSCode与Chrome的下载与