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

2. 图片与链接

图片使用 img 标签，它是自闭合标签。路径建议使用相对路径，将资源文件放在同级目录。

<img src="./assets/image.png" alt="描述文字" width="200">

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

<a href="https://example.com">点击访问示例网站</a>

3. 表格

表格由 table、tr（行）、td（单元格）构成。虽然 CSS 控制样式，但结构必须正确。

<table border="1">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>

4. 表单交互

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

表单域

form 标签定义提交区域，action 指定提交地址，method 指定请求方式（GET/POST）。

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

输入控件 (input)

type 属性决定控件类型：

• text：单行文本框。
• password：密码框。
• radio：单选框，同一组需共用相同的 name 值。
• checkbox：复选框。
• submit：提交按钮。

<label for="username">用户名：</label>
<input type="text" id="username" name="username"><br>

<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password"><br>

性别：
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女<br>

<input type="submit" value="提交">

注意：使用 label 标签配合 for 属性关联 id，可以提升用户体验，点击文字即可选中对应的控件。

下拉菜单与文本域

• select：下拉选择框，内部用 option 定义选项，selected 表示默认选中。
• textarea：多行文本输入区域。

<select name="major">
    <option value="cs">计算机科学与技术</option>
    <option value="ai" selected>人工智能</option>
</select>

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

页面布局容器

早期布局常依赖表格，现代开发更倾向于使用语义化标签。div 和 span 是最基础的无语义容器，常用于包裹内容以便后续通过 CSS 进行布局和样式控制。

<div class="container">
    <span>小盒子 1</span>
    <span>小盒子 2</span>
</div>

掌握了上述 HTML 基础，你已经能够构建出结构清晰的静态页面。接下来结合 CSS 美化样式，再辅以 JavaScript 实现交互逻辑，即可完成一个功能完备的前端模块。