跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSS大前端java

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

HTML 是构建网页的基础技术，后端开发者掌握其基础语法有助于全栈能力提升。本文系统讲解了 HTML 文档结构、常用标签（标题、段落、图片、链接、表格）及表单交互组件（输入框、单选、复选、下拉菜单）。通过实战代码示例，演示了如何组合 div、span 及 form 元素构建用户注册界面。内容涵盖从基础标签到综合应用的完整流程，为后续学习 CSS 和 JavaScript 打下坚实基础。

AiEngineer发布于 2026/3/16更新于 2026/6/2119 浏览
后端开发必备：HTML 基础语法与实战入门

对于后端开发人员而言，掌握一定的前端知识有助于构建完整的 Web 应用。HTML（超文本标记语言）是网页的骨架，理解它能让后端开发者更好地设计接口和页面结构。

HTML 基础结构

HTML 由标签构成，类似于 HTTP 协议中的超文本概念，不仅能承载文本，还能包含图片、链接、音频等媒体资源。一个标准的 HTML 文档通常包含以下核心部分：

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <!-- 页面主要内容 -->
</body>
</html>
  • html：根元素，包裹整个文档。
  • head：存放元数据，如标题、字符集等，用户不可见。
  • body：存放实际可见的页面内容。

编写代码推荐使用 VS Code 等专业编辑器，保存为 .html 后缀文件后，双击即可在浏览器中预览效果。通过浏览器的开发者工具，还可以实时查看渲染后的 DOM 结构。

常用标签详解

1. 标题与段落

标题标签从 h1 到 h6，数字越大字号越小。段落使用 p 标签，注意 HTML 中空格和换行符默认会被忽略，若需强制换行可使用 br 标签，空格则可用 &nbsp; 实体代替。

<h1>一级标题</h1>
<p>第一段内容。</p>
<p>第二段内容。<br/>此处强制换行。</p>

2. 图片与链接

图片使用 img 标签，需指定 src 属性。路径可以是绝对路径或相对路径（相对于 HTML 文件）。链接使用 a 标签，href 指向目标地址。

<img = =>
访问示例网站
src
"images/logo.png"
alt
"Logo"
<a href="https://example.com">
</a>

3. 表格

表格由 table、tr（行）、td（单元格）组成。虽然基础 HTML 表格样式较简陋，但它是展示结构化数据的基础。

<table>
    <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)

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>

5. 布局盒子

div 和 span 是无语义的容器标签，常用于划分区块和布局。div 是块级元素，独占一行；span 是行内元素，不独占行。

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

实战练习：表单综合示例

结合上述知识点，我们可以实现一个用户注册界面。以下代码展示了用户名、密码、性别、兴趣及专业的完整表单结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form action="/register" method="post">
        用户名：<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">睡觉
        <input type="checkbox" name="hobby" value="2">吃饭<br>
        
        专业：
        <select name="major">
            <option value="1">人工智能</option>
            <option value="2" selected>网络工程</option>
        </select><br>
        
        <input type="submit" value="注册">
    </form>
</body>
</html>

总结

HTML 是前端开发的基石。掌握了这些基础标签和表单结构，你已经能够搭建出静态页面的雏形。后续建议继续学习 CSS 进行样式美化，以及 JavaScript 实现动态交互，从而完成真正的前端开发闭环。

目录

  1. HTML 基础结构
  2. 常用标签详解
  3. 1. 标题与段落
  4. 2. 图片与链接
  5. 3. 表格
  6. 4. 表单交互
  7. 表单域与提交方式
  8. 输入控件 (input)
  9. 下拉选择与文本域
  10. 5. 布局盒子
  11. 实战练习：表单综合示例
  12. 总结
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒，将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • 无人机低空智能巡飞巡检平台架构与应用
  • GitHub 核心功能与开发者使用指南
  • 基于 Axure 实现 AI 对话机器人原型交互设计
  • Linux 基础文件与目录操作命令详解
  • 基于微服务的智能家居物联网平台实践
  • HarmonyOS6 ArkTS Tabs 组件 TabBar 布局模式配置
  • 自然语言处理（NLP）在法律领域的应用与实战
  • 土木专业转行互联网产品经理的路径与经验总结
  • Linux du 命令详解：精准探查文件和目录的磁盘占用
  • 大模型 RLHF 流程详解与代码实现
  • GitHub Copilot 同步 Claude Code 本地技能与 Agent 映射方案
  • 大模型核心技术指南：12 本入门必读书籍精选
  • 无人机智能 AI 巡检平台：全域感知与自动化作业方案
  • GitHub 启用双因素身份验证（2FA）配置指南：TOTP.app 动态验证码设置
  • DooTask 轻量级 AI 项目管理工具协同实践
  • 芋道商城 Uniapp 开源电商系统技术解析
  • Claude Skills 功能特性与使用指南
  • 免费 AI 大模型 API 汇总及国内大模型使用教程
  • Copilot Pro 使用指南：模型配额与选型策略
  • Java 二分查找算法经典题目实战

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online