从零到英雄：探索HTML世界的神奇之旅 - 初学者友好指南

建你的第一个HTML页面

在学习前端开发的过程中，创建一个简单的HTML页面是迈出的第一步。在这篇文章中，我们将指导你如何创建一个基本的HTML页面，并将其保存为.html文件。

什么是HTML？

HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它通过定义一系列的元素（elements），告诉浏览器如何展示网页的内容。每个HTML元素都由开始标签、内容和结束标签组成。例如，一个简单的段落可以使用<p>标签来定义：


<p>这是一个段落。</p>

如何创建一个HTML页面？

创建一个HTML页面非常简单。你需要做的是编写HTML代码，并将其保存为.html文件。以下是一个简单的HTML页面的例子：


<!DOCTYPE html>

<html>

<head>

<title>我的第一个HTML页面</title>


</head>


<body>

<h1>欢迎来到我的网站</h1>


<p>这是一个简单的HTML页面。</p>


</body>


</html>

文件结构

<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个HTML5文档。
<html>：根元素，所有的HTML元素都位于此标签内。
<head>：头部元素，包含了文档的元数据，如标题、样式、脚本等。
<title>：定义文档的标题，显示在浏览器的标题栏或页面的标签上。
<body>：主体元素，包含了可见的页面内容，如文本、图片、视频等。

如何保存为.html文件？

将上述代码复制到一个文本编辑器（如Notepad、Visual Studio Code等）中，然后将其保存为.html文件。例如，你可以将文件命名为my-first-html-page.html。

打开HTML文件

保存文件后，你可以使用任何现代浏览器（如Chrome、Firefox、Safari等）来打开这个.html文件。浏览器将自动解析HTML代码，并将其渲染为网页。

结语

通过这篇文章，你学会了如何创建一个基本的HTML页面，并将其保存为.html文件。这只是前端开发旅程的起点。在接下来的文章中，我们将探索CSS和JavaScript，这些技术将使你的网页更加生动和互动。如果你对HTML有任何疑问，或者在前端学习的道路上遇到任何难题，欢迎在评论区留言，我们一起讨论和进步。

. vscode 简介

vscode是微软开发的的一款代码编辑器，就如官网上说的一样，vscode重新定义（redefined）了代码编辑器。

当前市面上常用的轻型代码编辑器主要是：sublime，notepad++，editplus，atom这几种。

比起notepad++、editplus，vscode集成了许多IDE才具有的功能，比起它们更像一个代码编辑器；

比起sublime，vscode颜值更高，安装配置插件更为方便；

比起atom，vscode启动速度更快，打开各种大文件不卡。

可以说，vscode既拥有高自由度、又拥有高性能和高颜值，最关键的是，vscode还是一款免费并且有团队持续快速更新的代码编辑器。

可以说，vscode是代码编辑器的首选。个人推荐编写前端代码时，代码编辑器选择vscode，IDE选择WebStorm。

vscode安装插件只需要点击图片所示按钮，即可进入拓展，在搜索框中输入插件名点击安装后，等待安装好即可点击重新加载重启vscode使得插件生效。

当你不需要某个插件时只需要进入扩展，点击对应插件右下角的齿轮按钮即可选择禁用或卸载该插件。

2. 前端常用插件 (ps: 必备 > 推荐 > 了解)

必备的一定要装, 推荐的看自己需要, 了解的可不装 !!!

　　1.Auto Close Tag (必备)

　　自动闭合HTML/XML标签

2.Auto Rename Tag (必备)

自动完成另一侧标签的同步修改

　3.Beautify (必备)

格式化 html ,js,css

另一款 Prettier

格式化JavaScript / TypeScript / CSS

　4.Bracket Pair Colorizer (必备)

　　给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

　5.Debugger for Chrome (推荐)

　　映射vscode上的断点到chrome上，方便调试

作者：懂懂kkw
平台：csdn

TML 编辑器的介绍及推荐

HTML编辑器是用于编写HTML的工具，使用HTML编辑器时以编辑主题，索引，自定义窗口，选择添加搜索页。

HTML 编辑器：

使用Notepad或TextEdit来编写HTML

下列是三种专门用于编辑HTML的HTML编辑器：

Adobe Dreamweaver；

Microsoft Expression Web；

CoffeeCup HTML编辑器；

不过，我们同时推荐使用文本编辑器来学习HTML，比如Notepad（PC）或TextEdit（Mac）。我们相信，使用一款简单的文本编辑器是学习HTML的好方法。

我们可以使用Notepad工具来创建HTML文件，具体的步骤参考如下：

步骤1：启动记事本

打开Notepad的步骤（Windows系统中）：

打开“开始”菜单

选择“所有程序”

选择“附件”

选择“记事本”

步骤2：使用记事本编辑HTML

在记事本中输入HTML代码：

<!DOCTYPE html>

<html>

<head>

<title>数据微学院</title>

</head>

<body>

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

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

</body>

</html>

步骤3：保存你的HTML

在Notepad文件菜单中选择另存为。

您可以以.htm或者.html扩展名保存您的HTML文件，两者没有区别，根据您的使用习惯即可。

将该文件保存在您常用的文件夹中，比如html。

步骤4：在浏览器中运行这个HTML文件

启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的HTML文件。

运行显示结果类似如下：

【注】本教程将使用HBuilderX来创建html文件进行学习，创建文件请参考本教程第二章：HTML 教程导读，有关HBuilderX的使用请继续关注【数据微学院】360doc个人图书馆。

本文为 HTML 基础教程第五章，下一章：HTML基础

【小提示】tips:本文由数据微学院作者原创，转载请注明来源或联系作者。更多优秀参考好文请关注【数据微学院】个人图书馆。

在线咨询

上一篇：用html代码编写的免费软件下载和安装教程
下一篇：自动化测试之HTML测试报告

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商