如何系统地学习并入门HTML网页设计？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1239个文字，预计阅读时间需要5分钟。
新卡无法使用的原因通常不是语法问题，而是文件未保存、编码错误或标签缺失导致无法关闭合并。只需做三件事：
- 新建纯文本文件，用 VS Code 或记事本打开（千万别用 Word/WPS）
- 粘贴这三行：
<!DOCTYPE html><br><html><body>Hello, world!</body></html>
- 「另存为」→ 文件名输
index.html→ 编码选UTF-8→ 类型选「所有文件」→ 保存 → 双击打开
常见失败现象：Cannot open file（后缀还是 .txt）、显示源码不渲染（用了 Word 保存）、空白页（<body> 漏写或 <html> 没闭合）。VS Code 右下角可实时切换编码，点一下就能确认是不是 UTF-8。
为什么图片/样式/链接全都不生效
90% 的问题出在路径和协议上，不是代码写错。浏览器控制台（F12 → Network 标签）里看到 404 Not Found，就说明资源根本没找对位置。
-
<img src="logo.png">：图片必须和index.html在同一文件夹；写成./logo.png或file:///D:/xxx/logo.png都可能失败 -
<img src="images/logo.png">：子目录名必须小写，Windows 资源管理器里显示Images/也不行，得是images/ -
<a href="contact.html">：本地跳转用相对路径；外链必须带协议，比如href="https://example.com"，漏掉https://就会去当前目录找www.example.com这个文件 - CSS 写在
<style>里最稳：<head><style>p { color: red; }</style></head>；别写进<body>下面，否则可能闪动或失效
哪些标签必须立刻会写，哪些可以先放着
起步阶段只盯 5 个标签，覆盖绝大多数静态页面需求。别的先扔一边，等你能稳定写出带图、有链接、文字分段的页面再说。
立即学习“前端免费学习笔记（深入）”；
-
<h1>到<h6>：标题层级，不是“加粗”，是告诉浏览器“这是主标题” -
<p>：段落，别用多个<br>凑换行——HTML 会把连续空格缩成一个，语义也不对 -
<a href="xxx">：链接，href值必须加引号，target="_blank"要配rel="noopener"，不然有安全风险 -
<img src="xxx" alt="xxx">：alt 不是可选，是无障碍基础，空着或写“图片”会被读屏软件念出来 -
<div>和<span>：前者块级（独占一行），后者内联（不换行），别一上来就嵌套十层
别碰 <table>、<form>、<canvas>——它们各自有独立逻辑和易错点，现在引入只会掩盖路径、编码、标签闭合这些真正卡人的基础问题。
VS Code 为什么比记事本强，不是因为高级，而是少踩坑
记事本没有语法高亮、不提示标签闭合、不报编码错误；在线编辑器（如 JSFiddle）隐藏了「文件怎么组织」这个关键环节。而真实项目永远是一堆 .html、.css、.js 文件互相引用。
- 必装插件：
Auto Close Tag（自动补闭合标签）、Live Server（右键「Open with Live Server」，起本地服务，避免file://协议下的 CORS 和路径限制） -
Live Server启动后地址是http://127.0.0.1:5500，不是file:///，图片/CSS 路径判断逻辑更接近真实部署环境 - 保存后自动刷新，省掉手动双击、切窗口、按 F5 的重复操作；控制台报错也比双击打开后空白更早暴露问题
真正容易被忽略的是：UTF-8 编码是否带 BOM。Windows 记事本默认带 BOM，会导致 <script> 前出现不可见字符，控制台报 Unexpected token <。VS Code 右下角点编码 → 「Save with Encoding」→ 选 UTF-8（不带 BOM）即可解决。
本文共计1239个文字，预计阅读时间需要5分钟。
新卡无法使用的原因通常不是语法问题，而是文件未保存、编码错误或标签缺失导致无法关闭合并。只需做三件事：
- 新建纯文本文件，用 VS Code 或记事本打开（千万别用 Word/WPS）
- 粘贴这三行：
<!DOCTYPE html><br><html><body>Hello, world!</body></html>
- 「另存为」→ 文件名输
index.html→ 编码选UTF-8→ 类型选「所有文件」→ 保存 → 双击打开
常见失败现象：Cannot open file（后缀还是 .txt）、显示源码不渲染（用了 Word 保存）、空白页（<body> 漏写或 <html> 没闭合）。VS Code 右下角可实时切换编码，点一下就能确认是不是 UTF-8。
为什么图片/样式/链接全都不生效
90% 的问题出在路径和协议上，不是代码写错。浏览器控制台（F12 → Network 标签）里看到 404 Not Found，就说明资源根本没找对位置。
-
<img src="logo.png">：图片必须和index.html在同一文件夹；写成./logo.png或file:///D:/xxx/logo.png都可能失败 -
<img src="images/logo.png">：子目录名必须小写，Windows 资源管理器里显示Images/也不行，得是images/ -
<a href="contact.html">：本地跳转用相对路径；外链必须带协议，比如href="https://example.com"，漏掉https://就会去当前目录找www.example.com这个文件 - CSS 写在
<style>里最稳：<head><style>p { color: red; }</style></head>；别写进<body>下面，否则可能闪动或失效
哪些标签必须立刻会写，哪些可以先放着
起步阶段只盯 5 个标签，覆盖绝大多数静态页面需求。别的先扔一边，等你能稳定写出带图、有链接、文字分段的页面再说。
立即学习“前端免费学习笔记（深入）”；
-
<h1>到<h6>：标题层级，不是“加粗”，是告诉浏览器“这是主标题” -
<p>：段落，别用多个<br>凑换行——HTML 会把连续空格缩成一个，语义也不对 -
<a href="xxx">：链接，href值必须加引号，target="_blank"要配rel="noopener"，不然有安全风险 -
<img src="xxx" alt="xxx">：alt 不是可选，是无障碍基础，空着或写“图片”会被读屏软件念出来 -
<div>和<span>：前者块级（独占一行），后者内联（不换行），别一上来就嵌套十层
别碰 <table>、<form>、<canvas>——它们各自有独立逻辑和易错点，现在引入只会掩盖路径、编码、标签闭合这些真正卡人的基础问题。
VS Code 为什么比记事本强，不是因为高级，而是少踩坑
记事本没有语法高亮、不提示标签闭合、不报编码错误；在线编辑器（如 JSFiddle）隐藏了「文件怎么组织」这个关键环节。而真实项目永远是一堆 .html、.css、.js 文件互相引用。
- 必装插件：
Auto Close Tag（自动补闭合标签）、Live Server（右键「Open with Live Server」，起本地服务，避免file://协议下的 CORS 和路径限制） -
Live Server启动后地址是http://127.0.0.1:5500，不是file:///，图片/CSS 路径判断逻辑更接近真实部署环境 - 保存后自动刷新，省掉手动双击、切窗口、按 F5 的重复操作；控制台报错也比双击打开后空白更早暴露问题
真正容易被忽略的是：UTF-8 编码是否带 BOM。Windows 记事本默认带 BOM，会导致 <script> 前出现不可见字符，控制台报 Unexpected token <。VS Code 右下角点编码 → 「Save with Encoding」→ 选 UTF-8（不带 BOM）即可解决。