后端开发入门：HTML 基础语法与实战 | 极客日志

HTML / CSS大前端java

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

HTML 作为超文本标记语言，是构建网页结构的基石。本文涵盖 HTML 文档基本结构、常用标签（标题、段落、表单、表格等）及属性用法。通过实际案例演示如何编写表单页面，并介绍 div 与 span 布局概念。适合后端开发者快速掌握前端基础，为后续 CSS 与 JavaScript 学习做准备。

内存管理发布于 2026/4/7更新于 2026/5/2313 浏览

HTML 基础与实战指南

HTML（HyperText Markup Language）是构建网页结构的基础语言。对于后端开发者而言，理解前端的基本结构有助于更好地进行全栈开发。本文将介绍 HTML 的核心概念、常用标签及表单实战。

1. HTML 文档结构

HTML 文件由一系列标签组成。一个标准的 HTML5 文档包含以下基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型，现代浏览器默认支持。
<html>：根元素，包裹整个页面。
<head>：包含元数据，如字符集、标题等，不会直接显示在页面上。
<body>：包含所有可见的页面内容。

使用代码编辑器（如 VS Code）编写 .html 文件后，直接在浏览器中打开即可查看效果。通过浏览器的开发者工具，可以实时查看当前页面的 DOM 结构和样式。

2. 常用标签详解

2.1 文本与排版

标题标签 (h1-h6) 用于定义不同层级的标题，数字越小权重越高，字号越大。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- ... h4, h5, h6 -->

段落 (p) 与换行 (br) HTML 中空格和换行符通常会被忽略。要另起一段使用 <p> 标签；若需强制换行而不分段，则使用。

相关免费在线工具

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

<br>

<p>第一段内容。</p>
<p>第二段内容。<br/>这里强制换行。</p>

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

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

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

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

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

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

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

兴趣：
<input type="checkbox" name="hobby" value="coding">编程
<input type="checkbox" name="hobby" value="reading">阅读

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

<select name="major">
    <option value="cs">计算机科学</option>
    <option value="ee" selected>电子工程</option>
</select>

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

<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">
        <label>用户名：<input type="text" name="username"></label><br>
        <label>密码：<input type="password" name="password"></label><br>
        
        <label>性别：
            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="2">女
        </label><br>
        
        <label>专业：
            <select name="major">
                <option value="1">人工智能</option>
                <option value="2" selected>网络工程</option>
            </select>
        </label><br>
        
        <label>简介：<textarea name="bio"></textarea></label><br>
        
        <input type="submit" value="注册">
    </form>
</body>
</html>

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

HTML 基础与实战指南

1. HTML 文档结构

2. 常用标签详解

2.1 文本与排版

更多推荐文章

相关免费在线工具

2.2 媒体与链接

2.3 表格 (table)

2.4 表单 (form)

3. 布局容器

4. 综合实战：注册表单

更多推荐文章

相关免费在线工具

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

HTML 基础与实战指南

1. HTML 文档结构

2. 常用标签详解

2.1 文本与排版

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

更多推荐文章

相关免费在线工具

2.2 媒体与链接

2.3 表格 (table)

2.4 表单 (form)

3. 布局容器

4. 综合实战：注册表单

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

更多推荐文章

相关免费在线工具