|
主题设置

卡片式面板通常用于非白色背景色的主体内

HTML 编辑器

HTML 编辑器有助于提高编程效率,可以使用专业的 HTML 编辑器来编辑 HTML 。

操作系统自带的编辑器

  • Windows 用户可以使用记事本。
  • Linux 用户可以选择几种不同的文本编辑器,如 vi 和 emacs 。
  • Mac 用户可以使用 OS X 预装的 TextEdit 。TextEdit 默认使用多信息文本格式,你可以通过“格式——创建纯文本”来改变格式 。

自带的编辑器 - 记事本

1:创建 txt 文件

创建 txt 文件

2:写入 HTML 内容

写入 HTML 内容

3:后缀改为 .html

修改文件后缀

4:双击打开文件

浏览器中显示结果如下:

打开文档
目前在大部分浏览器中,直接输出中文会出现中文乱码,这时候我们就需要声明文档的元数据 为 UTF-8 。

第三方编辑器推荐

HTML 编辑器是用于编写 HTML 的工具,能够帮助快速完成 Web 页面。

下面推荐两款常用的第三方 HTML 编辑器:

Sublime Text

Sublime Text 是一个功能强大的代码编辑器,具有极其丰富的插件,同时支持 Windows、Linux、Mac OS 等操作系统。

1:新建 HTML 文件

安装完 Sublime Text 后,选择 “File(文件)---New File(新建文件)”,在新建的文件中输入以下代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Sublime Text 编辑器<title>
	</head>
	<body>
		<h1>这是标题一</h1>
		<p>这是一个段落。</p>
	</body>
</html>

效果如下图:

新建 HTML 文件

2:另存为 HTML 文件

选择 “File(文件)---Save As(另存为)”,文件名为 “html.html” :

另存为 HTML 文件

3:运行 HTML 文件

鼠标 “右击” 编辑器,选择 “Open in Browser” :

Open in Browser

浏览器中显示结果如下:

运行结果

VS Code

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

1:新建 HTML 文件

安装完 VS Code 后,选择 “File(文件)---New File(新建文件)”,在新建的文件中输入以下代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VS Code 编辑器<title>
	</head>
	<body>
		<h1>这是标题一</h1>
		<p>这是一个段落。</p>
	</body>
</html>

2:另存为 HTML 文件

选择 “File(文件)---Save As(另存为)”,文件名为 “html.html” :

另存为 HTML

3:运行 HTML 文件

鼠标 “右击” 编辑器,选择 “Open in Default Browser” 。

不过 VS Code 默认的右键列表中没有 “Open in Default Browser” 选项,需要安装。

点击编辑器左侧列表中的 Extensions:

安装

输入 “open in browser”,点击安装第一个选项 “open in browser”:

安装 open in browser

安装完后,鼠标右键列表中就有 “Open in Default Browser” 选项了

Open in Default Browser

浏览器中显示结果如下:

运行结果