直接写一个能打开的index.html文件并用浏览器双击运行是唯一有效的起点,只需三行代码:hello, world!。

别从“HTML 是什么”开始学,直接写一个能打开的 index.html 文件,用浏览器双击打开——这是唯一有效的起点。
怎么写出第一个能运行的 HTML 文件
新手常卡在“不知道该写什么”或“写了打不开”,其实只要三行就足够启动:
- 新建文本文件,改名为
index.html(后缀必须是.html,不能是.txt) - 用记事本、VS Code 或任意纯文本编辑器打开,粘贴以下内容:
<!DOCTYPE html> <html> <body>Hello, world!</body> </html>
保存 → 双击文件 → 浏览器自动打开显示文字。这比任何理论都重要:你已经进入了真实环境。
常见错误:Cannot open file(没改后缀)、显示源码不渲染(用 Word 编辑、或保存为 UTF-8 with BOM)、空白页(漏了 或标签没闭合)。
立即学习“前端免费学习笔记(深入)”;
哪些标签必须立刻记住,哪些可以先放着
初学阶段只盯 5 个核心标签,覆盖 90% 的静态页面需求:
-
<h1></h1>到<h6></h6>:标题层级,不是“加粗”,是语义结构 -
<p></p>:段落,别用多个<br>换行代替 -
<a href="xxx"></a>:链接,href值必须带引号,相对路径如"about.html",绝对路径如"https://example.com" -
<img src="xxx" alt="xxx">:图片,src是路径,alt不是可选——没写会触发无障碍警告,且图片加载失败时显示文字 <div> 和 <code><span></span>:容器,前者块级(独占一行),后者内联(不换行),别一上来就套嵌套十层先别碰
<table>、<code><form></form>、<canvas></canvas>—— 它们各自有独立使用逻辑和易错点,等你能稳定写出带标题、段落、链接、图片的页面再说。为什么用 VS Code 而不是记事本或在线编辑器
记事本没有语法高亮、自动闭合标签、错误提示;在线编辑器(如 JSFiddle)隐藏了“文件如何组织”这个关键环节——而真实项目永远是本地一堆
.html、.css、.js文件互相引用。- VS Code 免费、轻量,装好后开箱即用
- 必装插件:
Auto Close Tag(自动补闭合标签)、Live Server(右键“Open with Live Server”,自动刷新,避免手动双击) - 路径引用出错时,Live Server 控制台会报
404 Not Found,比双击打开后空白更早暴露问题
性能影响几乎为零,但省下的调试时间远超安装成本。别信“先用简单工具培养手感”——手感来自写对,不是敲得慢。
下一步不是学 CSS,而是让 HTML “动起来”
当你能熟练写出含标题、段落、链接、图片的页面,并确保所有路径正确、所有标签闭合、所有属性带引号,下一步是加交互,而不是急着学样式:
- 给
<a></a>加target="_blank"看新窗口行为 - 在
<img alt="怎么开始学html_html入门学习方法【攻略】" >上加width和height属性,观察浏览器渲染变化(注意:这不是响应式写法,但能帮你理解属性作用) - 把两个
index.html放同一文件夹,用<a href="page2.html"></a>实现跳转——这是真实网站最基础的导航模型
复杂点在于:HTML 不是孤立存在的,它和文件系统路径强绑定,而路径又分相对/绝对、大小写敏感(尤其部署到 Linux 服务器时)、斜杠方向(Windows 用
\,但 HTML 中一律用/)。这些细节没人提醒,但错一个字符就 404。











