学习网页开发的第一步，就是搞定HTML。它是整个前端世界的地基，无论你以后想学CSS美化页面、用JavaScript做交互，还是进阶到框架开发，都绕不开HTML这个起点。好消息是，HTML的入门门槛非常低，你不需要安装复杂的软件，也不需要配置繁琐的环境变量，一台普通电脑加上系统自带的记事本就能写代码。当然，为了更高效地学习和开发，我们还是推荐一套顺手的环境。这篇文章就从环境搭建讲到第一个网页的诞生，带你完整走一遍流程。
一、准备工作：选择合适的代码编辑器
严格来说，写HTML只需要一个文本编辑器。Windows自带的记事本就能完成任务，把文件保存为.html后缀，双击就能在浏览器里打开。但记事本没有语法高亮、没有自动补全、没有代码提示，写多了会非常痛苦，所以第一步是给自己挑一款专业的编辑器。
目前主流的选择有三个。第一款是Visual Studio Code，简称VS Code，由微软开发，免费开源，插件生态极其丰富，装上Live Server插件后可以边写代码边实时预览页面效果，是当前前端开发者的首选。第二款是Sublime Text，启动速度飞快，界面简洁，适合喜欢轻量工具的人，不过部分高级功能需要付费。第三款是HBuilder，国产编辑器，对中文用户友好，内置了很多前端开发的便捷功能。对于初学者，我的建议是直接装VS Code，它免费、教程多、社区活跃，遇到问题随手一搜就能找到答案。
下载安装的方式很简单，访问官网下载对应操作系统的安装包，一路下一步即可完成。安装完成后，建议顺手装两个插件：一个是Chinese中文语言包，把界面换成中文；另一个是Live Server，它能让你保存代码后浏览器自动刷新，省去手动刷新的重复动作。
二、创建并运行你的第一个HTML文件
环境准备好之后，我们来创建第一个HTML文件。先在电脑上新建一个文件夹作为项目目录，比如D:\myWeb，然后在VS Code中打开这个文件夹，在资源管理器面板中右键选择新建文件，命名为index.html。文件名可以随意取，但后缀必须是.html或.htm，其中index.html是约定俗成的首页文件名。
接下来输入下面的代码，这就是一个最简单但结构完整的HTML页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是我用HTML写出的第一个页面。</p>
</body>
</html>保存文件后，右键编辑器区域选择Open with Live Server，或者在文件夹中直接双击文件，浏览器就会打开这个页面，你会看到一个大标题和一行文字。整个过程不到五分钟，这就是HTML的魅力，所见即所得，反馈极快。
三、理解HTML文档的基本结构
回头看那段代码，每一行都有它的作用。<!DOCTYPE html>是文档类型声明，告诉浏览器这是一个HTML5文档，必须写在第一行。<html>是根标签，所有内容都包裹在里面，lang="zh-CN"声明了页面语言是简体中文，这对搜索引擎和读屏软件都有意义。
<head>部分是页面的元信息区域，用户在页面上看不到这里的内容。<meta charset="UTF-8">声明字符编码，不写这一行的话，中文很可能显示成乱码。<title>定义的是浏览器标签页上显示的标题。<body>则是页面的主体，你在网页上看到的一切文字、图片、按钮，都写在这里。
HTML的基本语法规则只有两条：一是标签成对出现，有开始就有结束，比如<p>对应</p>；二是标签可以嵌套，但不能交叉。比如<p><strong>加粗文字</strong></p>是正确的，而<p><strong>加粗文字</p></strong>就是错的。记住这两条，写代码时就不容易出低级错误。
四、初学者常见问题与进阶建议
入门阶段最常见的问题有几个。第一个是双击打开文件后中文显示乱码，九成原因是没写<meta charset="UTF-8">，或者保存文件时的编码不是UTF-8。VS Code默认就是UTF-8，所以主要检查代码里有没有那行meta声明。第二个问题是改了代码但页面没变化，这是因为浏览器不会自动刷新，装上Live Server插件就能解决。第三个问题是文件后缀不生效，Windows默认隐藏已知文件的扩展名，你以为存成了index.html，实际是index.html.txt，需要在文件夹选项中开启显示文件扩展名。
环境搭好、第一个页面跑通之后，接下来就该系统学习常用标签了，重点是标题标签<h1>到<h6>、段落<p>、链接<a>、图片<img>、列表<ul>和<li>这几个高频标签。学习方法是多动手：看到喜欢的网页，试着用学过的标签把它的结构仿写出来，比看十遍教程都有效。等HTML标签用熟了，再进入CSS学习如何美化页面，循序渐进，前端的大门就正式为你打开了。