HTML 21 天入门：入门准备

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2024年10月19日 22:9 本文热度 167

HTML 基本介绍

什么是 HTML

HTML 全称为 Hyper Text Markup Language，翻译过来就是超文本标记语言。

这个名称拆开来看，分成超文本和标记语言两部分。

标记语言，说明它并不是一门编程语言。

而超文本，从字面意思来理解，是超越文本的意思。

文字，写在纸上成书，展示在电脑里称为文本。超文本，指比文字更丰富的表达形式，直接理解成超越了文本。比如，现在很常见的图形，音频，视频。

现在这些东西已经是司空见惯，而在互联网开始之初，受限于网络传输能力，文字才是信息传递的主要载体，而 HTML 的横空出世，彻底打破了只有文字的时代。现在我们看到的精彩纷呈的网页呈现，都是从 HTML 开始的。

如何创建 HTML 文档

使用 HTML 编写的文档，称为网页文件，通常命名为.html 或.htm，这两种后缀名没有区别。

任意文本编辑器都可以拿来编写网页文件，比如 windows 下的记事本(notepad)。当然，现在已经有了非常强大的 IDE （Integrated Development Environment），也就是集成开发环境，比如 VSCode，它提供了很多辅助功能，用以帮助我们提高工作效率。

作为初学者，建议多敲代码，少使用联想和补齐，就更不要说使用 AI 之类的。这些功能可以在学成之后帮助我们提高工作效率。

HTML 要在哪里运行

创建好的 HTML 网页，可以通过浏览器访问，可以是电脑上的，也可以是手机，平板等其它设备上的。

对于存储在本地磁盘里的网页，也可以通过磁盘路径访问，也就是类似 C://HTML/Default.html 这种形式。这种称为本地运行。

而对于在互联网上访问的网页，是基于网址的，比如https://baidu.com，是一个网址，这个网址背后的网页，托管运行在互联网某个我们不知道的机器上，这样的机器我们称为服务器，这种访问通过网址访问的网页，就是服务器运行的。

以前在学习 HTML 时，由于一系列的限制，大多采用本地运行的方式。但随着工具的革新，我们有了更方便的方式。在随后的章节里，会讲述如何使用插件帮助我们在本地模拟服务器运行网页，这样就能得到一个即时刷新的运行环境，更加方便我们的学习。

开发环境准备

相信大家对 HTML 已经有了一个初步的认识，对于开发环境，我们只需要编辑器和浏览器。

编辑器用于编写网页，浏览器用于运行网页。

编辑器

互联网上的工具千千万，这里就直接推荐使用目前最流行的 VSCode 进行学习，能无缝接轨后续的深入学习。

当然如果不想使用 VSCode，可以使用相对比较轻便的编辑器 Nodepad++或其它任何你喜欢的文本编辑器。

💡 本教程中所有的示例都使用 VSCode 进行。

Live Server 插件

使用 VS Code 的好处，是它有着非常丰富的插件，这些插件方便我们的日常工作。

虽然在学习阶段并不推荐使用，但有一个插件，可以帮助我们更专注于学习，它就是 Live Server。

安装“Live Server”插件

在 VS Code 的扩展里，如下图，搜索“Live Server”，找到对应的插件，点击“安装”按钮，安装之后，便如下图。

安装完这个插件之后，暂时不需要做什么，在后面会介绍如何使用。

浏览器

使用主流的浏览器即可，比如 Chrome, FireFox, Edge 等等。

当然这两样东西，都需要运行在电脑上，所以首先要准备一台电脑。

对于学习来说，配置不需要高，操作系统也没有限制。你熟悉哪个用哪个。

💡 本教程中所有的 HTML 页面都编写运行在 Windows 操作系统上。

我的第一个页面：Hello World

好了，现在我们可以开始试着运行一下我的第一个页面了。放心，只是运行，暂时不需要理解。

在开始前，咱们先在电脑上建立一个专门的目录来存放我们的页面，比如说 C 盘根目录下，目录名称为html-learning

💡 本教程中所有的 HTML 页面运行都将在该目录下展示。

打开 VSCode，在文件 -> 打开目录定位到刚才创建的目录。
新建一个新文档，命名成 1.html。

拷贝下面代码到 1.html。

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>我的第一个页面</title>   </head>    <body>     Hello World   </body> </html>

还记得刚才咱们安装的 Live Server 插件吗，现在该使用了。在 VS Code 右下角，有 Go Live 图标，点击一下。
看到如下，则表明起动成功。
打开浏览器，在地址里输入地址 http://localhost:5500/。然后在页面显示里点击 1.html，看到如下截图显示，说明咱们就成功啦。

本节内容结束。恭喜。

总结

🍑 HTML 全称为 HyperText Markup Language，是一种用于创建网页的标准标记语言。
🍑 HTML 开发使用普通的文本编辑器即可，推荐目前最流行的 VSCode。
🍑 HTML 运行在浏览器里，使用 VS Code 插件 Live Server 可以模拟生成本地服务器运行本地的页面。

该文章在 2024/10/22 12:41:35 编辑过

关键字查询

html

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。