量子原创1. HTML基础概念与文档结构
HTML（HyperText Markup Language）是构建网页的基础骨架，就像建造房屋时的钢筋结构。作为前端开发的三大核心技术之一，HTML定义了网页内容的含义和结构。我刚开始学习前端时，常常把HTML和CSS、JavaScript混为一谈，后来才明白它们各自的分工：HTML负责"是什么"，CSS负责"长什么样"，JavaScript则负责"做什么"。
一个标准的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>我的第一个网页</title>
</head>
<body>
<!-- 页面内容写在这里 -->
</body>
</html>
提示：
<!DOCTYPE html>声明必须放在HTML文档的第一行，它不是HTML标签，而是告诉浏览器使用哪个HTML版本来解析页面。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 常用HTML标签详解
2.1 文本内容标签
文本内容是网页的基础元素，以下是最常用的文本标签：
<h1>到<h6>：标题标签，数字越小级别越高。实际项目中，我建议最多使用到h4，保持层级清晰。<p>：段落标签，浏览器会自动在段落前后添加空白。<span>：行内容器，用于对文本的一部分进行样式设置或JavaScript操作。<br>：换行标签，没有闭合标签。很多新手会滥用它来控制间距，其实应该用CSS的margin/padding。<hr>：水平分割线，在内容分区时很有用。
2.2 链接与图片标签
<a>：超链接标签，href属性指定目标URL。我经常看到新手忘记加https://前缀导致链接失效。<img>：图片标签，必须包含src和alt属性。alt不仅对SEO重要，在图片加载失败时也能提供信息。
html复制<a href="https://example.com" target