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

<img src="./images/logo.png" alt="Logo">

超链接使用 a 标签，href 属性指定目标地址。

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

3. 表格

表格由 table、tr（行）、td（单元格）组成。虽然 HTML 能构建表格，但现代布局更多依赖 CSS，此处仅作基础了解。

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

4. 表单（Form）

表单用于收集用户输入，主要由表单域（form）和表单控件（如 input）组成。

Form 标签 action 指定提交地址，method 指定请求方法（GET/POST 等）。

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

Input 标签 type 属性决定控件类型，常见有：

• text：单行文本框。
• password：密码框。
• radio：单选框（同组需相同 name）。
• checkbox：复选框。
• submit：提交按钮。

<input type="text" name="username">
<input type="password" name="password">
<input type="radio" name="sex" value="1">男
<input type="checkbox" name="hobby" value="1">阅读
<input type="submit" value="提交">

Select 与 Textarea 下拉菜单使用 select 配合 option；多行文本域使用 textarea。

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

布局容器：Div 与 Span

为了便于排版和样式控制，常将内容放入 div（块级容器）或 span（行内容器）中。这有助于后续结合 CSS 进行布局调整。

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

实战练习：综合表单

下面是一个综合了上述知识的表单示例，展示了如何使用 label 关联控件以提升体验。

<form action="/login" method="get">
  用户名：<input type="text" name="username"><br>
  密码：<input type="password" name="password"><br>
  性别：
  <input type="radio" name="sex" value="1"><label for="m">男</label>
  <input type="radio" name="sex" value="2"><label for="f">女</label><br>
  兴趣：
  <input type="checkbox" name="hobby" value="1"><label for="read">阅读</label>
  <input type="checkbox" name="hobby" value="2"><label for="code">编程</label><br>
  专业：
  <select name="major">
    <option value="1">人工智能</option>
    <option value="2">网络工程</option>
  </select><br>
  <input type="submit" value="提交">
</form>

其中 label 标签通过 for 属性绑定控件 ID，点击文字即可选中对应控件，提升了交互体验。

总结

HTML 是 Web 开发的基石。对于后端开发者而言，理解这些基础标签和结构足以应对大部分静态页面的需求。后续可深入学习 CSS 进行美化，以及 JavaScript 实现交互逻辑。