如何使用 Brackets.io 创建简单的网页？（适合初学者）

2025年03月17日 | 阅读 9 分钟

网站和网页介绍：（HTML、CSS 和 Javascript）

从零开始创建一个网站很容易。有很多在线选项，例如 Wix，可以让你在不编写任何代码的情况下构建网站。但你需要了解基本的网站构建流程才能编写自己的网站。每个网站都是网页的组合，我们用来编写网页的语言不是编程语言；我们需要使用一种标记语言。

与编程语言不同，标记语言不执行任何功能。相反，它定义了网页元素的结构。HTML（超文本标记语言）是我们用来创建网页的标准标记语言。如上所述，HTML 定义了结构而不是元素的外观。另一种名为 CSS（层叠样式表）的语言描述了网页中定义的元素应该如何显示（布局）。顾名思义，它用于对网页进行样式设计。

要创建网页，我们将结合使用 HTML 和 CSS。对于像“点击哪个元素应该显示”这样的功能（行为），我们需要使用一种编程语言，而 JavaScript 主要用于此目的。

Brackets 简介

要编写网页，我们可以使用简单的文本编辑器，如记事本（Windows）或 TextEdit（Mac）。HTML 是标签语言。一个简单网站的代码可能会很长。即使代码很简单，如果缺少一个标签或需要修复某些东西，要在如此长的代码中找到问题可能会很乏味且耗时。因此，专业 HTML 编辑器在 Web 开发中被广泛使用。如果你是初学者，最好先在记事本中编写代码。

专业的源代码编辑器会跟踪标签，并在不同方面帮助开发人员，例如显示潜在错误、代码提示等。

“Brackets”是 Adobe Inc 于 2014 年创建的一个用于 Web 开发的源代码编辑器。它是免费且开源的软件，在 GitHub 下维护。它使用 JavaScript、HTML 和 CSS 编写。我们可以使用 Brackets 来扩展 Brackets。它适用于 Windows、Mac 和 UNIX 等操作系统。

How to create a simple webpage using Brackets.io? (For Beginners)

图 1：Brackets 的标志

“Brackets”是最受推荐的，并且以其在 HTML、CSS 和 JavaScript 中的实时编辑功能而闻名。其他功能包括内联 CSS 快速编辑、实时预览、支持多种文件格式、扩展等。

本教程从下载 Brackets 开始，并解释如何编写简单的 HTML 代码来创建一个简单的网页。除了介绍 Brackets，本教程还将以初学者级别介绍 HTML 和 CSS。

下载和安装 Brackets

在 Google 上搜索“Brackets download”并打开第一个链接，或者访问 https://brackets.io/
点击下载，然后 .exe 文件开始下载。
在文件下载完成时选择“下载完成后打开”，或者前往下载文件夹并打开安装程序。
这时会出现 Brackets 安装程序对话框。
你可以更改软件的安装位置，也可以保持默认设置，确保两个对话框都已选中，然后点击 Next。
软件下载完成后，点击 Finish。
要打开该软件，点击 Start 并搜索 Brackets，然后打开它。

首次打开 Brackets 时，它看起来是这样的

图 2：Brackets 中的 index.html

请注意，左侧有两个示例文件：index.html 和 main.css

在最右侧的顶部边缘，点击闪电符号如何使用 Brackets.io 创建一个简单的网页？（新手指南）

这将在浏览器中打开一个类似这样的网页

图 3：Brackets 中的默认 index.html 示例网页

HTML简介

对比 index.html 文件和它的网页

HTML 代表超文本标记语言。该语言由物理学家 Tim Berners-Lee 提出并原型化。HTML 元素是 HTML 页面的构建块，它们在预定义的标签内定义，这些标签使用尖括号编写。

观察网页上的所有内容都写在 index.html 文件中的 <p> 和 </p> 之间。这里，p 代表“段落”。
在网页上，观察第一个标题和其他标题的大小，然后看看 index.html 文件。
请注意，主标题写在 <h1> 和 </h1> 之间，其他标题写在 <h2>、<h3>… 之间。
写在  之间的任何内容都不会显示在网页上。这些被称为注释，用于在调试时指导开发人员并帮助理解代码。
观察 index.html 中的代码是写在 <html> 和 </html> 之间的，并且进一步还有 <head> </head> 和 <body> </body> 这两个部分。

一些 HTML 元素

标签	内容
<hi>、</hi> 其中 1>=i<=6	标题（i 值增大时，大小减小）
<br>（独立标签）	无内容（用于换行）
<p>、</p>	段落
<html>、</html>	所有 HTML 元素
<body>、</body>	文档的主要内容，从标题到段落。
<head>、</head>	文档的元数据，如标题、链接等。
<img>	将图像插入 HTML 页面。
<a>、</a>	链接或位置（href 属性）

这是 HTML 代码的基本骨架

<!DOCTYPE html>
<html>
	<head>
		<title>Title of the web page</title>
	</head>
	<body>
		<h1>Heading 1</h1>
		<p>Paragraph</p>
	</body>
</html>

HTML 代码中的缩进无关紧要。除了像 <br> 和 <img> 这样的某些独立标签外，每个标签都必须有结束标签。
充当其他标签容器的标签，如 <html>、<head> 和 <body>，称为参考标签。
所有 HTML 文档都必须以 <!DOCTYPE> 声明开始。它不是一个标签，而是向网页浏览器声明文档类型。

如果你想查看互联网上某个网站的 HTML 代码，只需在该页面上的任意位置右键单击，然后点击“检查”

图 4：检查在线网站

将鼠标移到代码上，您可以看到网页上受影响的部分被高亮显示。

CSS 简介

CSS 代表“层叠样式表”，是一种用于设置 HTML 文档布局或外观（即表示）的语言。最初，网页设计没有格式化选项。随着 HTML 的发展，出现了用于设置文档外观样式的标签。

内容和表示使语言更加复杂，开发人员难以访问所有功能。因此，出现了分离的想法，CSS 的建立是为了降低复杂性并提高所有格式化工具的可访问性。

W3C（万维网联盟）维护 CSS 规范。
除了 HTML，XML、XHTML 和 XUL 等其他标记语言也支持与 CSS 文件关联。
使用外部 CSS 文件，我们可以让同一个 HTML 文件拥有不同的格式，例如屏幕显示、打印、语音等。
此外，如果不同的块/类需要相同的格式，我们可以同时对它们进行样式设置。
我们可以使用 style 属性在 HTML 文件本身的标签中设置 HTML 元素的样式。这称为“内联 CSS”。

现在回到并点击 main.css

观察 index.html 文件中的元素，如 h1、h2、h3… 和 img 标题，它们被 styled 成块。理解 index.html 和 main.css 是如何一起生成网页的。

创建你自己的网页

打开 Brackets
点击文件并创建一个新文件
新的未命名文件出现在“正在处理的文件”中。右键单击它并点击“另存为…”
给文件起任何你喜欢的名字，并保存在你想要的位置，但要在文件名末尾加上 .html。
现在，你已经创建了一个 HTML 文件。
现在，是时候往里面写代码了。任何 HTML 代码的第一行都必须是 <!DOCTYPE HTML>，以告知网页浏览器文件类型。
声明之后，所有其他标签都必须包含在 <html> 和 </html> 之间。
<html> 标签内可以有两个部分：<head> 和 <body>。

这是一个示例 HTML 代码

<!DOCTYPE HTML>
<html>
<head>
    <title>Sample Webpage</title>
</head>
<body>
    <h1>Main Heading</h1>
    <h2>Second Heading</h2>
    <h3>Third Heading</h3>
    <p>
    Paragraph</p>
</body>
</html>

运行后

实时预览

现在，为了理解这个功能

最小化网页窗口，返回到 sample.html。
删除 <h1> 和 </h1> 之间的所有内容。
现在，通过点击快捷键 Ctrl + S 保存它。你会发现代码中做的更改在保存后直接反映在网页上，而无需重新运行网页。

Brackets 的这个独特功能称为“实时预览”。

创建你自己的样式表

点击文件并创建一个新文件
新的未命名文件出现在“正在处理的文件”中。右键单击它并点击“另存为…”
给文件起任何你喜欢的名字，并保存在你想要的位置，但要在文件名末尾加上 .css。
现在，你已经创建了一个 CSS 文件。
现在，是时候往里面写代码了。

这是一个示例 CSS 代码

h1{
    background-color: cyan;
    font-family: serif;
}
h2{
    background-color: palegoldenrod;
    font-family: monospace;
}
h3{
    background-color: greenyellow;
    font-family: sans-serif;
}
p{
    background-color: darkgray;
    font-family: sans-serif;
}
html{
    background-color: beige;
}

现在，如果你运行 sample.html 文件，样式将不会应用到文件中，因为 CSS 文件没有链接到 HTML 文件。
在 HTML 文件中的 head 部分，使用 <link> 标签将 CSS 文件链接到 HTML 文件。

现在，再次保存并运行文件。

你可以使用 <style></style> 将 CSS 代码嵌入到 HTML 文件中。因此，CSS 文件可以通过三种方式附加到 HTML 文件：

内联 CSS
内部脚本
外部脚本

JavaScript 也是一样的。

这是一个简单的计算器，在同一个 HTML 文件中内部嵌入了 CSS 和 JavaScript。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calci</title>
</head>
<body>
   <h1>Simple Calculator</h1>
   <table>
       <tr><input id = "display" size="17"></tr>
       <tr><td> <button onclick = C("C")>C</button></td>
           <td> <button onclick = B("B")>B</button></td>
           <td></td>
           <td> <button onclick = fun(".")>.</button></td>
           <td> <button onclick = res()>=</button></td>

       </tr>
       <tr><td> <button onclick = fun(7)>7</button></td>
           <td> <button onclick = fun(8)>8</button></td>
           <td> <button onclick = fun(9)>9</button></td>
           <td> <button onclick = fun("+")>+</button></td>
           <td> <button onclick = fun("-")>-</button></td>
       </tr>
       <tr><td> <button onclick = fun(6)>6</button></td>
           <td> <button onclick = fun(5)>5</button></td>
           <td> <button onclick = fun(4)>4</button></td>
           <td><button onclick = fun("*")>*</button></td>
            <td><button onclick = fun("/")>/</button></td>
       </tr>
       <tr><td> <button onclick = fun(1)>1</button></td>
           <td> <button onclick = fun(2)>2</button></td>
           <td> <button onclick = fun(3)>3</button></td>
           <td> <button onclick = fun("(")>(</button></td>
           <td> <button onclick = fun(")")>)</button></td>
       </tr>
    </table>
    <script type = text/javascript>
        function fun(a)
        {
            document.getElementById("display").value+=a;
        }
        function C(a)
        {
            document.getElementById("display").value = " ";
        }
        function res()
        {
            var x = eval(document.getElementById("display").value);
            document.getElementById("display").value=x;
        }
        function B()
        {
           var y = document.getElementById("display").value;
           document.getElementById("display").value = y.slice(0, y.length-1);
        }
    </script>
    <style>
        table {
            background-color: beige;
            border: 1px solid black;
        }
    </style>
</body>
</html>

运行程序后

关于程序

HTML

我们使用 <table> 标签创建了一个表格。行和列使用 <tr> 和 <td> 标签进行排列。
第一行是使用 <input> 创建的输入字段。它充当计算器的显示屏。
下一个 HTML 元素是按钮。按钮使用 <button> 标签创建，onclick 事件会调用一个 JavaScript 函数。
当用户点击数字或运算符按钮时，JS 中的 fun() 函数会被调用，并将按钮的值作为参数传递。fun() 函数的主体通过 <script></script> 嵌入的 JS 中。
在 fun() 函数中，访问第一个行的输入字段，也就是显示屏，并将函数中传递的参数追加到屏幕上，从而显示出来。
当用户点击 C 时，会调用 C()。在 C() 中，输入字段被设置为空字符串 ""，从而清除屏幕。
当用户点击 B 时，会调用 B()。在 B() 中，输入字段被存储在一个变量中，然后最后一个字符被移除，起到退格的作用。
当用户点击 = 时，会调用 res()。在 res() 中，访问输入字段，并将字符串作为输入传递给 eval() 函数。它接收一个字符串表达式作为输入，对其进行求值，并返回结果。
结果再次显示在屏幕上。
在 CSS 部分，表格的外观被改变。为了美观，设置了背景颜色和边框。

然而，上面的代码存在 2 个问题

不建议使用 eval()；它可能导致代码出现不必要的安全和性能问题。
负数不支持所有运算。
创建计算器有很多种方法。上面的程序仅用于理解这三种语言的协同工作。

下一个主题使用 eval() 在 HTML 中创建简单的 JavaScript 和 CSS 计算器

← 上一个下一个 →

如何使用 Brackets.io 创建简单的网页？（适合初学者）

网站和网页介绍：（HTML、CSS 和 Javascript）

Brackets 简介

下载和安装 Brackets

HTML简介

一些 HTML 元素

这是 HTML 代码的基本骨架

CSS 简介

创建你自己的网页

这是一个示例 HTML 代码

运行后

实时预览

创建你自己的样式表

运行程序后

关于程序

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何使用 Brackets.io 创建简单的网页？（适合初学者）

网站和网页介绍：（HTML、CSS 和 Javascript）

Brackets 简介

下载和安装 Brackets

HTML简介

一些 HTML 元素

这是 HTML 代码的基本骨架

CSS 简介

创建你自己的网页

这是一个示例 HTML 代码

运行后

实时预览

创建你自己的样式表

运行程序后

关于程序

相关帖子

HTML 扩展名

使用 for 循环在 HTML 中创建简单的计算器

如何在 HTML 中插入图片

HTML 清洁器

HTML 导航

HTML 是编程语言吗？

如何在 HTML 中对齐图片

HTML 版权符号

HTML 弹出框

如何在 HTML 中移动图片

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器