后端开发入门：HTML 基础与实战

若需在段内强制换行，使用 <br> 标签：

<p>第一段<br/>换行内容</p>

若需显示多个空格，可使用   实体：

<p>第二段&nbsp;&nbsp;&nbsp;&nbsp;缩进内容</p>

2.3 图片与链接

插入图片使用 <img> 标签，注意路径写法。建议使用相对路径，确保资源文件位于同级目录：

<img src="./assets/image.png" alt="描述信息">

可通过 width 和 height 属性控制尺寸。创建超链接使用 <a> 标签：

<a href="https://example.com">跳转链接</a>

2.4 表格

表格由 <table>、<tr> (行) 和 <td> (单元格) 组成：

<table>
  <tr>
    <td>第一行 第一格</td>
    <td>第一行 第二格</td>
  </tr>
  <tr>
    <td>第二行 第一格</td>
    <td>第二行 第二格</td>
  </tr>
</table>

默认样式可能无边框，后续可通过 CSS 美化。

2.5 表单 (Form)

表单用于收集用户输入，核心是 <form> 标签及其内部的控件。

表单域

<form action="/submit" method="post">
  <!-- 表单控件 -->
</form>

• action：提交数据的 URL。
• method：请求方法，常见有 GET、POST。

输入控件 (input)

type 属性决定控件类型：

1. 文本框：type="text"
2. 密码框：type="password"
3. 单选框：type="radio"，同一组需共用 name 属性。
4. 复选框：type="checkbox"，支持多选。
5. 按钮：type="button" 或 type="submit"。

示例：

<input type="text" name="username">
<input type="password" name="password">
<input type="radio" name="sex" value="1" id="male"> <label for="male">男</label>
<input type="radio" name="sex" value="2" id="female"> <label for="female">女</label>
<input type="checkbox" name="hobby" value="1"> <label for="hobby1">阅读</label>
<input type="submit" value="提交">

注：label 的 for 属性应与对应控件的 id 一致，点击文字即可选中控件。

下拉菜单 (select)

<select name="major">
  <option value="1">人工智能</option>
  <option value="2" selected>网络工程</option>
</select>

selected 表示默认选中项。

文本域 (textarea)

用于多行文本输入：

<textarea name="intro"></textarea>

3. 布局盒子 (div & span)

语义化标签之外，div 和 span 常作为通用容器使用。

• div：块级元素，大盒子，常用于布局。
• span：行内元素，小盒子，用于包裹文本片段。

<div>
  <span>内容 1</span>
  <span>内容 2</span>
</div>

利用它们可以将杂乱的内容结构化，便于后续通过 CSS 调整排版。

4. 综合练习

结合上述知识点，构建一个简单的注册/登录表单界面。重点在于合理使用 input 类型、label 关联以及表单提交机制。完成后端对接时，这些字段值将通过查询字符串或请求体传递至服务器。

掌握这些基础后，后续章节将深入讲解 CSS 样式设计与 JavaScript 交互逻辑，届时前端开发能力将得到完整提升。