HTML 代码编辑器

本页内容
上一节: HTML_教程 下一节: HTML基础


你可以使用你熟悉的任何文本编辑器编辑HTML文件,不过出于效率考虑建议大家使用带代码补全,语法检测的编辑器。这里推荐大家使用vscode [1]

Visual Studio Code(简称 VS Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全(又称 IntelliSense(英语:IntelliSense))、代码重构功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

微软在2015年4月29日举办的 Build 2015大会上公布了 Visual Studio Code 的开发计划;同日,其预览版本发布。2015年11月18日,Visual Studio Code 在 GitHub 上开源,同时宣布将支持扩展功能[9]。2016年4月14日,Visual Studio Code 正式版发布。

在2019年的 Stack Overflow 组织的开发者调查中,Visual Studio Code 被认为是最受开发者欢迎的开发环境。据调查,87317名受访者中有50.7%的受访者声称正在使用 Visual Studio Code。

Visual Studio Code 安装

前往 https://code.visualstudio.com/Download 下载你操作系统的版本

Download vs code .png

配置中文界面

安装中文语言包

安装后的VS Code为英文界面,打开该链接,VS Code 的中文(简体)语言包, 点击【install】。

修改为中文

通过使用“Configure Display Language”命令显式设置 VS Code 显示语言,可以替代默认 UI 语言。 按下“Ctrl+Shift+P”组合键以显示“命令面板”,然后键入“display”以筛选并显示“Configure Display Language”命令。按“Enter”,然后会按区域设置显示安装的语言列表,并突出显示当前语言设置。选择另一个“语言”以切换 UI 语言。

VS Code.png

使用 VS Code 编辑 HTML文件

在任意一个文件夹中新建一个xiaobai_wang.html的文件,然后右键选择用 VS Code 打开。输入下面的内容。

示例

<!DOCTYPE html>
<html>
<head>
<title>小白教程</title>
</head>
<body>

<h1>标题</h1>
<p>这里是文本内容</p>

</body>
</html>

Vs code html.png

最后在之前的文件夹中找到xiaobai_wang.html的文件,右键选择浏览器打开即可看到渲染效果。 Chrome打开html文件.png

使用在线编辑器

点击“尝试一下”可以打开在线编辑器,然后编辑 HTML 代码并查看结果:

示例

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>浏览器标签栏Tab显示标题</title>
</head>
<body>

<h1>大标题</h1>
<p>这里是一个段落文本</p>

</body>
</html>
上一节: HTML_教程 下一节: HTML基础
此页面最后编辑于2022年8月25日 (星期四) 11:37。