HTML 编辑器


可以使用专业的 HTML 编辑器来编辑 HTML,菜鸟教程为大家推荐几款常用的编辑器:

你可以从以上软件的官网中下载对应的软件,按步骤安装即可。

接下来我们将为大家演示如何使用 VS Code 工具来创建 HTML 文件。


VS Code

Visual Studio Code(简称 VS Code)是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器,编辑器中内置了扩展程序管理的功能。

VS Code 安装教程参考:https://www.runoob.com/w3cnote/vscode-tutorial.html

步骤 1: 新建 HTML 文件

在 VS Code 安装完成后,选择 文件(F)->新建文件(N) ,在新建的文件中输入以下代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AY论坛(readme.com)</title>
</head>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

HTML 编辑器

步骤 2: 另存为 HTML 文件

然后选择 文件(F)->另存为(A) ,文件名为 runoob.html:

HTML 编辑器

当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别,完全根据您的喜好,我建议统一用 .html。

在一个容易记忆的文件夹中保存这个文件,比如 runoob

步骤 3: 在浏览器中运行这个 HTML 文件

然后鼠标右击编辑器上的文件名,选择在默认浏览器打开(也可以其他的浏览器):

注:vscode 中使用浏览器打开 html 文件需要 安装 open in browser 扩展。

VS Code 和 Sublime Text 还可以配合 Emmet 插件来提高编码速度。

若文章对你有帮助,可以点赞或打赏支持我们。发布者:lyh会员,转载请注明出处:http://61.174.243.28:13541/AY-knowledg-hub/html-%e7%bc%96%e8%be%91%e5%99%a8/

(0)
lyhlyh会员认证作者
上一篇 2023年 4月 10日 下午10:13
下一篇 2023年 4月 11日 下午6:54

相关推荐

  • od

    文章目录od补充说明语法选项参数实例 od 输出文件的八进制、十六进制等格式编码的字节 补充说明 od命令 用于输出文件的八进制、十六进制或其它格式编码的字节,通常用于显示或查看文…

    入门教程 2024年 1月 23日
  • Mutex

    文章目录MutexMutex含有竞态条件的程序使用 Mutex使用信道处理竞态条件Mutex vs 信道 Mutex 上一节:第二十四篇 Select下一节:第二十六篇 结构体取代…

    2023年 12月 5日
  • TCP/IP 邮件

    电子邮件是 TCP/IP 最重要的应用之一。 文章目录您不会用到…邮件程序会用到…SMTP – 简单邮件传输协议POP – 邮局协议…

    2023年 5月 15日
  • screen

    文章目录screen补充说明语法选项常用screen参数使用 screenscreen 高级应用  screen 用于命令行终端切换 补充说明 Screen 是一款由GNU计划开发…

    入门教程 2024年 3月 4日
  • id

    文章目录id概要主要用途选项参数返回值例子注意 id 打印真实以及有效的用户和所在组的信息 概要 id [OPTION]… [USER]… 主要用途 没有选项时,打印指定用…

    入门教程 2023年 12月 19日
  • nisdomainname

    文章目录nisdomainname补充说明语法选项 nisdomainname 显示主机NIS的域名 补充说明 nisdomainname命令 用于显示主机NIS的域名。 语法 n…

    入门教程 2024年 1月 10日
  • mkbootdisk

    文章目录mkbootdisk补充说明语法选项参数实例 mkbootdisk 可建立目前系统的启动盘 补充说明 mkbootdisk命令 用来为当前运行的系统创建能够单独使用的系统引…

    入门教程 2024年 1月 3日
  • dpkg-statoverride

    文章目录dpkg-statoverride补充说明语法选项实例 dpkg-statoverride Debian Linux中覆盖文件的所有权和模式 补充说明 dpkg-stato…

    入门教程 2023年 12月 7日
  • top

    文章目录top补充说明语法选项top交互命令实例 top 显示或管理执行中的程序 补充说明 top命令 可以实时动态地查看系统的整体运行情况,是一个综合了多方信息监测系统性能和运行…

    入门教程 2024年 3月 11日
  • nohup

    文章目录nohup补充说明语法选项参数实例 nohup 将程序以忽略挂起信号的方式运行起来 补充说明 nohup命令 可以将程序以忽略挂起信号的方式运行起来,被运行的程序的输出信息…

    入门教程 2024年 1月 10日
Translate »