HTML 基础概览
对于后端开发人员而言，理解前端基础是构建完整 Web 应用的必要技能。HTML（超文本标记语言）构成了网页的骨架，它不仅仅是文本，还能承载图片、链接、音频等多种媒体资源。
HTML 的核心由标签组成，通常成对出现，如 <h1> 和 </h1>。开始标签中可包含属性，用于定义元素的行为或样式。一个标准的 HTML 文档结构如下：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
其中 <html> 是根元素，<head> 存放元数据（如标题），<body> 则包含可见内容。编写代码推荐使用 VS Code 等编辑器，保存为 .html 文件后双击即可在浏览器中预览。
常用标签详解
1. 标题与段落
标题标签从 h1 到 h6，数字越大字体越小。需要注意的是，HTML 中的空格和换行符通常会被忽略，若要强制换行需使用 <br> 标签，而段落之间应使用 <p> 标签包裹。
<h1>一级标题</h1>
<p>这是第一段内容。</p>
<p>第二段内容。<br/>这里强制换行。</p>
若需要保留空格，可使用 实体字符代替。
2. 图片与链接
图片通过 <img> 标签引入，需指定 src 属性。建议使用相对路径以确保项目移植性。
<img src="./images/logo.png" alt="Logo">
超链接使用 <a> 标签，href 属性指向目标地址。
<a href="https://example.com">访问示例网站</a>
3. 表格
表格由 <table>、<tr>（行）和 <td>（单元格）嵌套构成。虽然基础表格无需 CSS 也能显示，但配合样式才能美观。
<table>
<tr><td>第一行第一格</td><td>第一行第二格</td></tr>
<tr><td>第二行第一格</td><td>第二行第二格</td></tr>
</table>
4. 表单元素
表单是前后端交互的关键，主要由 <form> 容器和内部控件组成。
- 输入框：
<input type="text">用于文本，type="password"用于密码。 - 单选/复选框：单选框需相同
name值以实现互斥；复选框可多选。 - 下拉菜单：
<select>配合<option>使用，selected属性可设置默认项。 - 文本域：
<textarea>用于多行文本输入。
<form action="/submit" method="post">
用户名：<input type="text" name="username"><br>
性别：
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女<br>
专业：
<select name="major">
<option value="cs">计算机</option>
<option value="math">数学</option>
</select><br>
<input type="submit" value="提交">
</form>
注意：使用 <label> 标签关联控件可提高可用性，点击文字即可选中对应的输入框。
5. 布局容器
<div> 和 <span> 是无语义的容器标签，常用于布局划分。div 是块级元素，独占一行；span 是行内元素，不独占一行。它们本身无样式，需结合 CSS 实现排版。
实战练习
尝试构建一个简单的用户注册界面，整合上述所学标签。重点在于合理使用表单控件，确保数据能正确提交至后端。
<form action="/register" method="post">
<label for="user">用户名：</label>
<input type="text" id="user" name="username"><br>
<label for="pass">密码：</label>
<input type="password" id="pass" name="password"><br>
<input type="checkbox" name="agree"> 同意服务条款<br>
<input type="submit" value="注册">
</form>
掌握这些基础后，后续学习 CSS 进行美化以及 JavaScript 添加交互逻辑将更为顺畅。前端开发并非遥不可及，从理解 HTML 结构开始，逐步积累即可。
