HTML（HyperText Markup Language，超文本标记语言）是网页开发中最基础的语言，它负责描述网页的结构和内容。无论你以后学习CSS还是JavaScript，首先都要能读懂并编写规范的HTML。很多人把HTML想象成一种编程语言，其实它并不是：HTML没有逻辑判断和变量，它只是一套标记系统，用标签来告诉浏览器每个部分是什么。
学习HTML的关键在于理解“标签”和“属性”两个概念。标签由尖括号包围，通常成对出现，比如段落标签 <p> 和 </p>。属性写在开始标签内部，用来补充信息，例如 <a href="https://ipipp.com"> 中的 href 属性指定链接地址。刚开始学习时不用死记硬背所有标签，掌握常用的十几个就可以构建一个完整的页面。
一、HTML基础概念与文档骨架
每个HTML文件都有一个固定骨架，它由文档类型声明、<html> 根元素、<head> 头部区域和 <body> 主体区域组成。文档类型声明 <!DOCTYPE html> 告诉浏览器按照HTML5标准解析页面，虽然它看起来像标签，但实际上是一种声明语句，不需要闭合。下面是一个最基础的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>欢迎学习HTML</h1>
<p>这是段落内容，用来描述页面主体信息。</p>
</body>
</html>
头部区域的 <meta charset="UTF-8"> 用来指定字符编码，如果不写这一行，中文内容很容易出现乱码。<title> 标签中的文字会显示在浏览器标签页上，也会被搜索引擎用作结果标题。主体区域 <body> 则是用户实际能在页面上看到的内容，所有可见元素都要放在这里。理解头部和主体的分工，是编写规范页面的第一步。
书写HTML时还需要注意几个基本规则：标签名建议统一使用小写，属性值放在双引号中，所有标签必须正确嵌套，不能交叉；对于 <img>、<br>、<input> 这类自闭合标签，在HTML5中可以直接写，也可以加上斜杠，但通常保持闭合风格会更清晰。掌握这些基础规范后，就可以开始使用常用标签来组织内容了。
二、常用标签与语义化布局
构建一个可读的页面离不开基础标签。标题使用 <h1> 到 <h6>，其中 <h1> 通常一个页面只出现一次，用来描述页面核心主题；段落使用 <p>；列表分为有序列表 <ol> 和无序列表 <ul>，每个列表项用 <li> 包裹。链接和图片是网页中最常见的元素，链接通过 <a> 标签的 href 属性指定跳转地址，图片通过 <img> 标签的 src 属性指定图片路径，alt 属性则用于图片加载失败时显示替代文字，这对无障碍访问和SEO都很重要。
不过，单纯用 <div> 堆叠页面结构并不利于维护和搜索引擎理解。HTML5引入了一系列语义化标签，例如 <header> 表示页眉或区块头部，<nav> 表示导航链接区域，<main> 标识页面主要内容，<article> 表示独立完整的内容块，<section> 用于划分主题区块，<aside> 表示侧边栏或附属信息，<footer> 表示页脚。使用这些标签代替无意义的 <div>，可以让代码结构一目了然，也有助于屏幕阅读器和搜索引擎更好地解析页面。
下面是一个典型的语义化页面布局示例，它展示了如何将不同区域合理组织起来：
<body>
<header>
<h1>网站名称</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>这里是文章的正文内容，可以包含多个段落。</p>
</article>
<aside>
<h3>侧边栏</h3>
<p>用于展示相关推荐或辅助信息。</p>
</aside>
</main>
<footer>
<p>版权信息与备案号</p>
</footer>
</body>
语义化布局不是强制要求，但随着页面复杂度提升，清晰的区域划分能显著降低后续CSS和JavaScript的维护成本。建议从学习阶段就养成用语义标签描述内容的习惯，而不是所有地方都使用 <div> 嵌套。
三、表单交互与HTML5新特性
表单是用户与网页交互的重要方式，登录、注册、搜索、反馈等功能都依赖表单。表单容器使用 <form> 标签，内部可以放置 <input>、<select>、<textarea> 等控件。为了让控件有可读的名称，通常使用 <label> 标签关联表单元素，关联方式有两种：把控件放在 <label> 内部，或者通过 for 属性指向控件的 id。HTML5为 <input> 增加了大量类型，例如 email、url、number、date、tel 等，浏览器会自动提供相应的输入校验和键盘适配。
除了表单增强，HTML5还带来了原生多媒体支持。通过 <video> 和 <audio> 标签可以直接在页面中嵌入视频和音频，不再需要依赖Flash插件。<canvas> 标签则提供了使用JavaScript绘制图形、动画和游戏的能力。以下示例展示了表单与视频标签的基本用法：
<form action="/submit" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" placeholder="请输入姓名">
<br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">提交</button>
</form>
<video controls width="400">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
使用这些新特性时需要注意浏览器兼容性。虽然现代浏览器对HTML5的支持已经非常完善，但在一些旧版本或特定环境中，某些表单类型和多媒体格式可能表现不一致。例如视频格式在不同浏览器中的支持情况不同，通常建议同时提供多个 <source> 来源，确保用户至少能播放其中一种。对于不支持 <video> 的浏览器，标签内的文字会显示出来，起到降级提示的作用。
表单验证方面，HTML5提供了 required、min、max、pattern 等属性，可以在不写JavaScript的情况下完成基础校验。但如果需要更复杂的交互逻辑，比如实时提示、自定义样式或异步提交，还是需要配合JavaScript实现。学习HTML时理解这些属性能够减少很多不必要的脚本代码，让页面行为更加轻量。
从零开始学习HTML并不复杂，关键在于动手实践和持续积累。建议按照“基础结构、常用标签、语义化布局、表单与多媒体”的顺序逐步练习，每学一个标签就尝试在页面中实际使用一次。当你能够独立写出结构清晰、语义明确的静态页面时，就可以开始学习CSS为页面添加样式，进而进入JavaScript交互开发的世界。HTML看似简单，但它决定了页面的信息组织和可访问性，值得花时间扎实掌握。