1.3 HBuilderX开发工具-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元1 Web前端开发概述 1.3 HBuilderX开发工具 1 PART 01 常用前端开发工具 主要内容 CONTENTS PART 03 HBuilderX常用快捷键 PART 02 HBuilderX的下载及使用 2 常用前端开发工具 选择一款便捷的网页开发工具，学习该工具的使用方法及便捷功能，以提高网页开发效率。 常用前端开发工具 编辑器 浏览器 文件名.htm 文件名.html 对于前端开发只需要一个可以编辑HTML文件的编辑器和一个可浏览HTML文件的浏览器就可以完成。 常用前端开发工具 Dreamweaver HBuilder Sublime Visual Studio Code 有代码提示和语法提示等便捷功能的开发工具 这些工具各有各的优势，但基本功能都差不多，只要学会了其中一种工具，对于其他的工具使用也很容易上手。 HBuilderX的下载及使用 HBuilderX的下载地址为http://www.dcloud.io 对于初学者，推荐大家使用HBuilderX，因为HBuilderX是免费软件，下载方便、无需安装、上手最简单。 HBuilderX的下载及使用 1.创建项目 HBuilderX的下载及使用 注意： 对于网站项目中所有的文件和文件夹命名最好只包含英文字母、数字和下划线字符。 2.新建HTML文件 HBuilderX的下载及使用 3 编写代码 HBuilderX的下载及使用 4 运行网页 在HBuilderX菜单栏点击“运行”→“运行到浏览器”或者在工具栏找到“预览按钮”，选择一种浏览器就可以运行网页，查看网页效果了。 HBuilderX常用快捷键 功能 快捷键 删除当前行 Ctrl+D 选中当前行 Ctrl+L 在选中对象的首尾添加包围标签 Ctrl+] 注释代码或取消注释 Ctrl+/ 撤销 Ctrl+Z 复制 Ctrl+C 剪切 Ctrl+X 格式化代码 Ctrl+K 保存所有文件 Ctrl+Alt+S 运行代码 Ctrl+R HBuilderX常用快捷键 HBuilderX常用快捷键 1．尽可能保持与OS、浏览器接近 2．界面快捷键都与alt相关 3．ctrl是操作、ctrl+shift是反操作或更多操作、ctrl+alt为更多操作 4．符号化而不是单词字母化 5．强化和鼠标的配合，更易用 HBuilderX快捷键原则 HBuilderX常用快捷键 （1） 双击标签开头或结尾，选择该标签对及其内部所有内容。 （2） 双击引号或括号内侧，可以选中引号或括号内的内容。 （3） 双击代码行尾或行首，可以选中该行。 感谢观看 $