tml开发环境搭建

有一个好的编辑器我们可以方便地的开发项目，编写代码，配置和管理我们的项目。所以我们开始编写html代码之前需要搭建开发环境。

基于html项目的开发和代码编写现在网上有很多编辑器，也有免费的，也有收费的编辑器。基于在Windows系统环境下开发和编写html代码最简单的编辑器就是Windows自带的记事本，我们可以使用记事本编辑html代码。

使用记事本编写html的步骤是首先新建一个文本文档，按照html的语法规则编写相关的代码和保存文件，然后把文件的后缀名改为.html，使用电脑上的浏览器打开就可以查看我们代码的运行结果。

虽然记事本也能编写html代码，但是效率不高也不方便，所以我们使用专业的编辑器来开发项目，编写代码和管理项目。

常用html代码编写的免费软件有HBuilderX，vs code，Sublime Text 等等。

HBuilderX官网下载地址：

https://www.dcloud.io/hbuilderx.html

vs code的官网下载地址：

https://code.visualstudio.com/

Sublime Text官网下载地址：

http://www.sublimetext.com/

我们以后的教程都使用HBuilderX，所以下面为了同学们的学习方便，对HBuilderX的下载和安装做详细的教程。

一，下载

首先访问HBuilderX的官网网址：

https://www.dcloud.io/hbuilderx.html

打开上面的HBuilderX下载网址后点击页面上download，在弹出的对话框里选择适合自己电脑的HBuilderX版本下载。

在Windows10环境下下载后的文件是一个压缩的.zip文件。

二，安装

鼠标右击下载下来的压缩文件进行解压。

解压完成后是一个名为HBuilderX的文件夹。

解压完成后鼠标双击HBuilderX文件夹：

双击运行名为HBuilderX.exe的应用程序文件即可启动HBuilderX编辑器：

因为HBuilderX是一个绿色软件所以没有桌面快捷方式和开始菜单快速启动程序，我们可以右击HBuilderX.exe文件创建桌面快捷方式。

小百科：

绿色软件指一类小型软件，多数为免费软件，最大特点是软件无需安装便可使用，可存放于闪存中，移除后也不会将任何记录留在本机计算机上。通俗点讲绿色软件就是指不用安装，下载直接可以使用的软件。绿色软件不会在注册表中留下注册表键值，所以相对一般的软件来说，绿色软件对系统的影响几乎没有，所以是很好的一种软件类型。

三，新建项目

HBuilderX编辑器初次启动时的默认界面是下图所示：

按照下图所示可以创建一个新的名为demo1空白项目：

名为demo1的空白项目创建成功后的界面如下图所示：

接下来在刚我们新建的demo1项目下创建名为helloworld的html文件

鼠标右击创建的demo1项目选择新建在选择.html文件：

在弹出的对话框里填入html文件的名称：

编写一段代码：

运行：

在浏览器上观察效果：

好了，到这里html的开发环境搭建和HBuilderX的安装教程结束了。

下面再给大家教一下怎样修改HBuilderX的主题风格，HBuilderX自身提供了修改软件主题的功能，使用者可以自身需求和喜好修改HBuilderX的风格。在喜欢自己喜欢的环境下做开发也是令人羡慕的一件事。

按照以下步骤可以修改HBuilderX的主题，默认主题是绿柔，我们可以改成雅黑，雅蓝或者自定义主题：

雅黑主题：

雅蓝主题：

好了本节全部内容全部结束了，希望我准备的内容对你有所帮助

你的支持是我的最大动力，若觉得我的教程还可以或对你有帮助为我点赞加关注！谢谢！

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

生命是什么呢，

生命是时时刻刻不知如何是好。

- 2024.03.06 -

工欲善其事必先利其器，一款好的开发工具可以让我们事半功倍。前面我们对HTML的相关概念和基本结构已经有了基本的了解，下面我们就来安装在前端开发中的需要使用的开发工具及环境。

在众多HTML编辑器中，选择一个适合自己的工具至关重要。今天我们就来认识一下前端开发工作中使用的最广泛的工具 “VS Code” , 并在本地搭建好开发环境。

一、前端开发工具简介

在介绍 “VS Code” 之前，我们先来了解一下什么是 “IDE”。

什么是 “IDE”

IDE 是集成开发环境的英文缩写 （Integrated Development Environment)，集成开发环境就是将在开发过程中所需要的工具或功能集成到了一起，比如：代码编写、分析、编译、调试等功能，从而最大化地提高开发者的工作效率。

IDE 通用特点：

• 提供图形用户界面，在 IDE 中可以完成开发过程中所有工作；
• 支持代码补全与检查，并提供快速修复选项；
• 内置解释器与编译器；
• 功能强大的调试器，支持设置断点与单步执行等功能。

前端开发IDE

而在前端开发中我们需要安装一个“趁手”的IDE，帮助我们更快更高效的开发，一个好的IDE是每个程序员的必备武器。前端开发IDE有很多种，例如 Visual Studio Code、HBuilder、WebStorm、Atom 或 Sublime Text 等。

我们可以任选一种使用。这几种IDE的对比如下：

这么多IDE该怎么选呢？对于我们初学者来说，选择Visual Studio Code，（简称VS Code）就可以了。VS code具备内置功能非常丰富、插件很全且安装简单、轻量、对电脑的配置要求不算很高，且有MAC版本，应用广泛等优点，很适合新手。

下面就和我一起下载并安装VS code吧！

二、VS Code下载与安装

1、进入VScode官网

官网地址：https://code.visualstudio.com/

点击【Download】进入下载，不要点击【Download for Windows Stable Build】，否则它会自动帮你下载User Installer用户版本。

• 【Stable】：稳定版本，比较稳定。
• 【Insiders】：测试版本，添加了一些新东西，还在测试中，可能会存在一些Bug，不怎么稳定。

2、然后你会看见Windows，Linux，苹果三个版本，我们选择Windows版本，选择System Installer 点击【x64】进行下载，不要点击【↓ Windows windows8,10,11】，否则它也会自动默认下载User Installer用户版本。

• 【User Installer】：用户安装程序，VScode安装在你电脑当前账户的目录上，如果你换了一个其他账户登录你的电脑，那么你就用不了之前那个账户下载的VScode了。
• 
  

• 【System Installer】：系统安装程序，VScode不会安装在你电脑的当前账户上，而是直接安装在系统上，所有账户都可以使用。

其实选哪个版本都无伤大雅，就算你下载了【User Installer】版本也没事，因为没人会没事把自己电脑上的账户换成其他人的账户登录，就算换了也可以换回来，只是有时候特殊情况换了个账户登录不能使用就有一点麻烦，所以还是推荐尽量下载【System Installer】版本。

【x86】：32位操作系统。【x64】:64位操作系统，如果想知道自己是什么系统，可以敲击Win键找到“设置”→“系统”→“关于”→“系统类型”。

3、正在下载

这个下载会比较慢，如果不想等可直接去找个别人下好的安装包哦！也可找小编领取。

4、下载完后打开文件，会弹出许可协议弹窗，勾选我同意此协议，单击【下一步】。

5、先去D盘里创建一个新文件夹取名叫“VScode”，点击【浏览】按钮修改安装路径，把路径改到刚刚在D盘里创建的VScode文件夹里。如果觉得麻烦也可以直接默认安装在C盘，然后单击【下一步】，但还是建议安装在D盘里。

6、修改完路径后，单击【下一步】。（安装路径是这个样子D:\VScode\Microsoft VS Code）

7、选择开始菜单文件夹，默认"Visual Studio Code",单击【下一步】。

8、根据自己的需求进行勾选，勾选完单击【下一步】。

【创建桌面快捷方式】：在桌面创建VScode快捷方式。

【将“通过Code打开”操作添加到Windows资源管理器文件上下文菜单】：选中一个文件鼠标右键可以通过VScode打开文件。

【将“通过Code打开”操作添加到Windows资源管理器目录上下文菜单】：选中一个文件夹鼠标右键可以通过VScode打开文件夹。

【将Code注册为受支持的文件类型的编辑器】：对于受支持的文件类型的文件，鼠标右键选择“打开方式”，可以通过“Vscode”打开。

【添加到PATH】：添加VScode文件夹里的bin目录到PATH环境变量里，添加完以后可通过系统命令输入code直接启动VScode。

9、单击【安装】进行安装。

10、安装完成后单击【完成】启动。

三、VS code配置插件

下载完之后，大家可以根据自己的需求下载插件，这里推荐我用的比较顺手的几个。

1、下载汉化包

点击扩展，在搜索栏搜索Chinese，选择Chinese中文简体点击【Install】进行安装。（建议少用，多看英文，这是一位优秀的程序员走向成功的标志性成长。）

安装完后单击【Change Language and Restart】重启VScode软件，刷新一下就变成中文简体了。

2、下载【会了吧】插件

在搜索栏里搜索【会了吧】，这个是在你敲代码时会自动识别你敲的单词进行翻译，如果你有一个单词不认识，可以点进“会了吧”看看翻译，对英语基础差的人很友好。

3、下载【Open in browser】插件

这个是用来运行代码，并且在浏览器打开，查看运行效果的，这个插件必须下，否则当你写完HTML网页时你无法运行，无法预览页面，不信你可以先试试能不能运行再回来下载。

4、下载【Live Server】插件

这个是用于实时预览运行效果，当你使用open in browser运行代码时，只要你的代码有改变，你就需要手动刷新重新预览页面运行结果，而Live Server是自动刷新运行结果，非常方便，非常滴银性！

四、用VScode编写HTML代码

1、先去D盘里创建一个新文件夹取名叫“Workspace”（名字随便取名）。

2、进入VScode找到左上角的文件选择点击打开文件夹。

3、找到刚刚创建的“workspace”文件夹，单击【选择文件夹】。

4、找到WORKSPACRE，点击新建文件，名字输入“01.html”,然后点击回车键创建。

5、在刚刚创建的01.html文件下输入以下代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charest="utf-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>这是我的第一个网页</h1>
    </body></html>

6、鼠标右击空白处单击【Open In Default Browser】查看运行结果。

7、运行结果如下 。

以上就是常用的前端开发工具VS Code的下载和安装教程了，你的第一个HTML网页运行成功了吗？

一个高效的HTML开发工具和环境是每个前端开发者的得力助手。通过合理选择工具、配置环境、使用框架和库、以及不断的调试和测试，你可以将创意转化为现实，构建出令人惊叹的网页。记住，技术永远在变，唯有不断学习和实践，才能让你在这个数字世界中游刃有余。

今天就先讲到这里了，

更多前端开发基础知识点击文末阅读原文查看哦！

记得关注【云端源想IT】一起学编程！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

为工作中接触到一些代码的使用，本小白开始学习编程知识，每天记录一些自学编程过程中的一些知识点，一是为了方便跟大家分享，另外就是为了以后复习使用。

一、前端环境搭建

• 安装Visual Studio Code，Chrome（谷歌浏览器）
• 安装VS和Chrome插件

Visual Studio Code常用插件：

1.语言、格式化：

• Chinese Language Pack for Visual Studio Code 中文简体语音包
• Prettier-Code Formatter 几乎支持所有前端代码的格式化
• Simple icons小巧实用的文件图标集合
• One Dark Pro个人非常喜欢的一款主题

2.HTML/CSS插件：

• Auto Close Tag 标签自动关闭
• Auto Rename Tag 标签自动更名
• Auto Complete Tag 标签自动完成
• HTML CSS Support 自动补全样式表
• HTML Snippetshtml 代码片段
• highlight matching tag 自动高亮显示结束括号/标签

3.JS/Vue插件：

• JavaScript(ES6) Code snippets JS/ES6代码片段
• Vue Vue语法提示
• Vue2 Snippets Vue代码片段
• Vue-beautify Vue代码格式化

4.PHP/MySQL相关插件：

• PHP Intelephense 代码提示与函数跳转
• PHP IntelliSense 代码智能感知（可选）
• PHP DocBlocker代码块注释（可选）
• Format HTML in PHP格式化 PHP 中的 html 代码
• MySQL MySQL 语法高亮

5.MarkDown语法插件：

• Markdownlint Markdown 语法检查器
• Markdown Rreview Enhancedmardown 文件预览

6.提高工作效率的插件：

• Path Intellisense 智能路径提示
• Bracket Pair Colorizer 不同颜色表示不同层级括号
• Code Runner 支持常见的编程语言运行调试
• Live Server 内置 web 服务器

7.如何在VSCode中配置PHP代码检查器：在VSCode配置文件（setting.json）

// 版本与路径替换成系统中的php可执行文件路径与版本号
"php.validate.executablePath": "E:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe",
"intelephense.environment.phpVersion": "7.3.4",

二、初识HTML

1.标题和段落

• 页面的内容均由元素组成；
• 元素是由标签来描述的，标签根据元素的类型分为单标签、双标签，每个元素的特征由属性来描述，需要将属性写到起始标签中。

<h1>开会通知：本周五进行大扫除</h1>
<p>开会通知：本周五进行大扫除</p>

• 元素是由标签和属性共同描述的；

<male sex="famale" sw="80, 90, 100" height="170" weight="200">男朋友</male>

• html中的所有内容，如果想要添加到html文档中，就必须要使用一个标签。

// JS代码必须写到一个script标签中
<script>
    const SITE = "Hello World！";
</script>

<?php
// php代码必须放在一对php标签中
echo "Hello World！";
?>

<!-- 标题标签：除了设置文档标题之外，还可以用来划分页面结构的 -->
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>

<!-- 内容标签 <p></p> -->
<p>程序猿界有一句话：每一个程序猿都应该拥有一台MacBook Pro</p>

2.链接与锚点

• 链接标签 a标签-当今互联网的灵魂，实现了全球资源之间的共享

1.target属性：

• 规定在何处打开链接文档。

1. _blank跳转到新的页面，在新窗口打开
2. _self(默认值) 在相同的框架中打开链接文档；
3. _parent在父框架集中打开被链接文档；
4. _top在整个窗口中打开被链接文档；
5. iframename在指定窗口打开。

代码案例：

<!-- _self 当前窗口打开 -->
<a href="跳转目标" target="_self">Hello World</a>

<!-- _blank 跳转到新的页面，在新窗口打开 -->
<a href="跳转目标" target="_blank">Hello World</a>

<!-- 在指定窗口打开 target="iframe内联框架的name值" 此时a标签的target值需要跟iframe里的name值保持一致 -->
<a href="https://www.baidu.com/" target="baidu">打开百度</a>
<iframe srcdoc="点击上面的按钮打开百度" name="baidu" frameborder="0" width="600" height="500"></iframe>

• 注意：
  使用target="iframename"时，需要注意a标签的target值需要跟iframe的name值相等。

2.锚点

• 使用锚点可以实现在当前页面中的任意位置进行跳转。

<a href="#footer">跳转到底部</a>

<!-- 创建锚点 -->
<div id="footer" style="margin-top: 1000px;">This is footer</div>

• div：通用元素标签，内部可以放任意元素类型。
• 如何返回当前页面顶部？
  直接将a标签的href值设置为#即可，如：<a href="#">回到顶部</a>。
• 备注：
  vue.js、react等单页面应用，路由就是使用锚点实现的。

三、图片元素

如果我们想要在页面添加一张图片，可以使用img标签

• 必须属性：

1. src 图片的URL地址；
2. alt 图片的描述信息。

• 案例：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度一下" width="200">

• 备注：
  设置图片大小时，可以只设置宽度或者高度，另一个属性就会进行等比缩放，不需要同时设置。在实际开发中，一般在CSS中设置图片的样式，图片很少单独使用，基本都是用在链接中。

个人总结：有些代码看起来简单，但是自己上手起来真的是难，属于那种一看就会，一写就错，看来只能通过多写，多练才可以熟能生巧，这是个细活，急不得，要戒骄戒躁，平稳心态来面对这么多难题，加油！