HTML 基础入门：从结构到常用标签详解
前言
HTML（HyperText Markup Language，超文本标记语言）是构建网页的骨架。无论你未来想成为前端工程师，还是仅仅想了解网页是如何运行的，掌握 HTML 都是必经之路。本文基于学习课件，系统梳理了 HTML 的基本结构、常用标签及实际应用案例，帮助你快速上手。
一、 认识 HTML 与基本结构
1. 什么是 HTML 标签？
HTML 代码是由"标签"（Tag）构成的。标签通常成对出现，例如 <body> 是开始标签，</body> 是结束标签。开始和结束标签之间是标签的内容。
- 单标签 ：少数标签只有开始标签，没有结束标签（如
<br/>）。 - 属性 ：开始标签中可以包含属性，用来描述标签的额外信息。例如
<body id="myId">，其中id就是属性。
2. HTML 文件的基本结构
一个标准的 HTML 页面通常包含以下骨架：
html
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html><html>：整个文件的根标签（最顶层）。<head>：写页面的属性（如字符编码、标题等），内容不直接显示在页面上。<body>：写页面上显示的内容。<title>：页面的标题。
层次结构 ：head 和 body 是 html 的子标签，二者互为兄弟关系；title 是 head 的子标签。
3. 快速生成代码框架
在 IDEA 或 VS Code 中创建 .html 文件，输入 ! 然后按 Tab 键，即可自动生成包含 DOCTYPE 和 meta 标签的 HTML5 标准框架。
二、 常用文本与排版标签
1. 标题与段落
- 标题标签 ：
<h1>到<h6>。数字越大，字体越小。h1通常用于页面主标题。 - 段落标签 ：
<p>。用于包裹一段文本。注意，HTML 中直接输入换行和多个空格是无效的，多个空格会被压缩成一个，换行也相当于一个空格。需要换行时，请使用<br/>标签。
2. 格式化标签
- 加粗 ：
<strong>或<b> - 倾斜 ：
<em>或<i> - 删除线 ：
<del>或<s> - 下划线 ：
<ins>或<u>
3. 无语义标签：div 与 span
<div>：独占一行，是一个大盒子，常用于网页布局。<span>：不独占一行，是一个小盒子，常用于包裹局部文本。
4. 特殊字符
在 HTML 中，< 和 > 是标签的界定符，如果要在文本中显示它们，需要使用特殊字符转义：
- 空格：
- 小于号：
< - 大于号：
> - 按位与：
&
三、 图片与超链接
1. 图片标签 <img>
img 标签必须带有 src 属性，表示图片的路径。常用属性有：
alt：替换文本。图片加载失败时显示的文字。title：提示文本。鼠标悬停时显示的文字。width/height：控制宽高。一般只设置一个，另一个会等比例缩放，避免图片失衡。
路径问题：
- 相对路径 ：以 HTML 文件所在位置为基准。同级目录直接写文件名，下一级用
image/1.jpg，上一级用../image/1.jpg。 - 绝对路径 ：完整的磁盘路径（如
D:/rose.jpg）或网络路径（如https://...）。
2. 超链接标签 <a>
href：必须具备，表示跳转的目标地址。target：打开方式。_self是默认值（当前页打开），_blank是新标签页打开。
链接的几种形式：
- 外部链接：跳转到其他网站。
- 内部链接：网站内部页面跳转，写相对路径。
- 空链接 ：
href="#"占位。 - 下载链接 ：
href指向一个文件（如 zip）。 - 网页元素链接 ：将图片等元素包裹在
<a>标签中，点击即可跳转。 - 锚点链接 ：通过
href="#id"快速定位到页面中具有相同id的元素位置。
四、 表格、列表与表单
1. 表格标签
<table>：表格整体。<tr>：表格的一行。<td>：普通单元格。<th>：表头单元格（居中加粗）。- 合并单元格 ：跨行合并用
rowspan="n"，跨列合并用colspan="n"。步骤：先确定跨行/跨列，找好目标单元格，然后删除多余单元格。
2. 列表标签
- 无序列表 ：
<ul>包含<li>，最常用，前面带小圆点。 - 有序列表 ：
<ol>包含<li>，前面带数字编号。 - 自定义列表 ：
<dl>包含<dt>（小标题）和<dd>（围绕标题的说明）。
3. 表单标签
表单用于收集用户输入信息。
<form>：表单域，包含表单元素。action属性指定提交地址。<input>：输入控件，通过type属性区分类型：text：单行文本框password：密码框radio：单选框（多个单选框需有相同的name属性才能实现多选一）checkbox：复选框submit/reset/button：提交 / 清空 / 普通按钮file：选择文件
<label>：搭配input使用。通过for属性绑定输入框的id，点击文字也能选中输入框，提升用户体验。<select>：下拉菜单。包含<option>选项，selected属性可设置默认选中。<textarea>：文本域，用于输入多行文本。
五、 综合案例展示：简历信息填写
综合运用上述知识，我们可以制作一个简历信息填写页面。整体布局可以使用 <table> 来搭建。
关键实现点：
- 整体结构 ：使用
<table>的<tr>和<td>规划每一行的"字段名"和"输入控件"。 - 性别单选框 ：使用
<input type="radio" name="sex">，并搭配<label>提升点击体验。 - 出生日期下拉框 ：使用
<select>和<option>。由于年份、月份、日期选项多，可以使用 Emmet 快捷键 快速生成。- 输入
select>option[value="$"]*12按Tab键，可快速生成 12 个月份的选项。
- 输入
- 多行输入 ：技能和项目经历使用
<textarea>标签。 - 协议确认 ：使用
<input type="checkbox">搭配文字说明。
六、 效率工具：Emmet 快捷键
在编写 HTML 时，善用 Emmet 语法可以极大提高效率：
input[tab]：快速生成<input>标签。div*3[tab]：快速生成 3 个<div>标签。div#sex[tab]：生成带id的div。ul>li*3[tab]：生成ul包裹 3 个li的嵌套结构。
总结
HTML 仅仅是描述了页面的骨架结构。虽然我们可以使用部分 HTML 属性（如 align、border）来做简单的样式调整，但在实际开发中，样式效果主要依靠 CSS 来实现。掌握了本文的基础标签，你已经具备了构建静态网页内容的能力，接下来就可以进入 CSS 的世界，为页面"穿上漂亮的衣服"了。