HTML的核心是通过标签构建网页骨架，需掌握基本结构、常用标签及语义化。首先，每个HTML文档应以<!DOCTYPE html>声明开头，定义为HTML5标准；根元素<html>包裹所有内容，并建议设置lang属性标明语言。文档头部<head>包含元信息，如字符编码<meta charset="UTF-8">、视口设置和页面标题<title>，这些虽不可见但对功能至关重要。主体<body>则承载用户可见内容，使用<h1>至<h6>定义标题层级，体现语义结构；<p>包裹段落；<a href="...">创建超链接；<img src="..." alt="...">嵌入图片并提供替代文本；<ul>、<ol>与<li>组织列表；<div>和<span>作为通用容器，分别用于块级和行内布局。标签需正确闭合，避免嵌套错误，属性值应加引号，且优先使用语义化标签（如<header>、<nav>）提升可读性与SEO。为增强代码维护性，应保持缩进一致，添加必要注释，分离样式与脚本，规范命名类名ID，并采用模块化思维拆分页面组件。
HTML代码的编写，说到底，就是用一系列预设的“标签”来告诉浏览器，网页上的内容是什么，应该如何呈现。它不是编程，更像是一种标记语言，用来构建网页的骨架。理解了标签的结构和它们各自的职责，你就掌握了HTML的核心。
解决方案
编写HTML代码，通常从一个基础的文档结构开始，就像盖房子先搭框架。最基本的骨架是这样的：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个HTML页面</title>
</head>
<body>
<!-- 这里是网页可见内容 -->
<h1>欢迎来到我的网页！</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">点击这里访问示例网站</a>
<img src="image.jpg" alt="描述图片内容">
</body>
</html><!DOCTYPE html> 声明告诉浏览器这是一个HTML5文档，这很重要，决定了浏览器会用哪套标准来解析你的代码。接着是 <html> 标签，它是整个文档的根元素，所有其他内容都包裹在它里面。lang="zh-CN" 属性则声明了文档的主要语言是中文，对搜索引擎和屏幕阅读器都有帮助。
立即学习“前端免费学习笔记（深入）”；
head 部分是给浏览器看的，比如页面的标题 <title>、字符编码 <meta charset="UTF-8">、响应式设置 <meta name="viewport"> 等。这些内容用户在页面上是看不到的，但它们对页面的行为和显示至关重要。我个人觉得，很多人刚开始学的时候容易忽略 head 里这些基础配置，但它们是现代网页不可或缺的。
body 标签里就是我们真正想展示给用户看的内容了。标题（<h1> 到 <h6>）、段落 <p>、链接 <a>、图片 <img>、列表 <ul>/<ol>/<li>、以及用于布局的 <div> 和 <span> 等等，这些都是最常用的标签。大多数标签都有一个开始标签（如 <h1>）和一个结束标签（如 </h1>），内容就放在它们之间。有些标签是自闭合的，比如 <img> 和 <br>，它们不需要结束标签，因为它们没有“内容”的概念，只是插入一个元素。
属性（Attributes）是标签的附加信息，比如 <a> 标签的 href 属性定义了链接的目标地址，<img> 标签的 src 属性指定了图片的来源，alt 属性则提供了图片无法显示时的替代文本，这个对SEO和无障碍访问都非常关键。
初学者应该从哪些HTML标签开始学起？
对于刚踏入HTML世界的朋友，我建议从那些最直观、最常用的标签入手。它们构成了网页内容的基础，理解了它们，你就能搭建出任何网页的骨架。
-
标题标签
<h1>到<h6>：这是定义页面或内容标题的。<h1>是最高级别的标题，通常一个页面只有一个，表示页面主题，<h2>次之，依此类推。这不仅仅是字体大小的区别，更是语义上的层级关系，对搜索引擎优化和内容结构化极其重要。 -
段落标签
<p>：用来包裹普通文本段落。简单直白，是内容呈现最基础的单位。 -
链接标签
<a>：<a>标签是网页互联的关键，通过href属性指定链接地址。比如<a href="https://www.google.com">谷歌</a>。它还能链接到页面内部的特定位置，或者下载文件。 -
图片标签
<img>：用来在网页中嵌入图片。src属性指向图片文件路径，alt属性提供图片描述（当图片无法加载或供屏幕阅读器使用时）。别小看alt，很多时候它能决定你的图片能不能被搜索引擎识别。 -
列表标签
<ul>和<ol>：<ul>是无序列表（Unordered List），项目前通常是圆点；<ol>是有序列表（Ordered List），项目前是数字。每个列表项都用<li>（List Item）标签包裹。这对于组织信息，比如导航菜单或步骤说明，非常有用。 -
容器标签
<div>和<span>：这两个是“无语义”的通用容器，但却异常强大。<div>是块级元素，常用于划分页面区域；<span>是行内元素，用于对文本中的一小部分进行样式化或操作。它们本身不带任何样式，但结合CSS就能实现各种复杂的布局和效果。
掌握这些标签的基本用法和它们的块级/行内特性，你就能开始构建有意义的网页内容了。
HTML代码编写中常见的错误有哪些，又该如何避免？
即便是有经验的开发者，也难免会犯些小错误，尤其是HTML这种相对“宽容”的语言。但有些错误会直接影响页面的显示和行为，甚至影响SEO。
-
标签未闭合：这是最常见的错误之一。比如写了
<div>却忘了写</div>。浏览器通常会尝试“修复”它，但结果往往不是你想要的，可能导致布局混乱，或者嵌套关系出错。避免方法：使用代码编辑器（如VS Code）的自动补全和高亮功能，它们会提示你未闭合的标签。养成写完开始标签立刻写结束标签的习惯。 -
标签嵌套错误：HTML标签的嵌套必须是正确的，比如不能把
<div>放到<p>里面（因为<p>只能包含行内元素）。错误的嵌套会导致浏览器解析困难，或者样式继承问题。例如<p>这是一个段落<span>和一个<b>加粗文本</p></span></b>这种就是典型的混乱。避免方法：理解块级元素和行内元素的区别，以及哪些标签可以包含哪些标签。W3C的HTML规范是最好的参考。 -
缺少
<!DOCTYPE html>声明：如果缺少这个声明，浏览器可能会进入“怪异模式”（Quirks Mode），用老旧的渲染方式来显示页面，导致样式和行为与预期不符。避免方法：任何HTML文件的第一行都应该加上它。 -
属性值未加引号：虽然有些浏览器允许不加引号的属性值（比如
href=index.html），但这并不是规范的做法，也容易在属性值包含空格或特殊字符时出错。规范的做法是<a href="index.html">。避免方法：始终为属性值加上双引号。 -
语义化不足：滥用
<div>和<span>而不使用更具语义的标签（如<header>,<nav>,<main>,<article>,<section>,<footer>）会导致代码可读性差，不利于SEO和无障碍访问。例如，用div来做导航，不如用nav。避免方法：在编写HTML时，多思考内容的含义，选择最能表达其意义的标签。
如何让我的HTML代码更具可读性和维护性？
写出能跑的代码只是第一步，写出清晰、易于理解和维护的代码才是真正考验功力的地方。
- 保持一致的缩进：这是最基础也最有效的提高可读性的方法。每个嵌套层级都增加一个固定的缩进（通常是2个或4个空格）。这样可以清晰地展现标签的嵌套关系，一眼就能看出哪个元素包含哪个元素。很多代码编辑器都有自动格式化功能，利用起来。
-
添加注释：对于复杂或不那么直观的代码块，适当地添加注释（
<!-- 这是一个注释 -->）可以解释其目的或特殊处理方式。这对于团队协作或未来回顾代码时都非常有帮助。我习惯在一些大的功能模块开始前加个注释，说明这个div是干嘛的。 -
语义化标签的使用：前面也提到了，尽量使用HTML5提供的语义化标签，如
<header>,<nav>,<main>,<article>,<section>,<footer>等。它们不仅让代码更具描述性，也帮助搜索引擎更好地理解页面结构，提升SEO效果。 -
避免内联样式和脚本：将CSS样式放在
<style>标签或外部CSS文件，JavaScript代码放在<script>标签或外部JS文件。内联样式（style="..."）和内联脚本（onclick="..."）会使HTML代码变得臃肿、难以管理和复用。 -
保持类名和ID的命名规范：使用有意义、一致的命名规则来定义
class和id属性。例如，header-nav比div1更能说明其用途。常用的命名规范有BEM、CSS Modules等，或者至少保持驼峰命名或烤串命名法的一致性。 - 模块化思维：将页面拆分成独立的、可复用的组件。比如一个导航栏、一个产品卡片、一个评论区，都可以看作是独立的HTML结构。这样在修改或重用时，只需要关注特定模块的代码，而不是整个页面。这在现代前端开发中尤为重要。
