后端开发必备：HTML 前端基础实战指南

超链接使用 <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 结构开始，逐步积累即可。