从后端开发者视角出发，系统梳理了构建 Web 页面的三大基石：HTML、CSS 与 JavaScript。内容涵盖 HTML 文档结构、常用标签及属性；CSS 选择器原理、引入方式及基础样式；以及三者如何协同完成登录页面等交互场景。旨在帮助后端人员快速理解前端逻辑，便于前后端协作与调试。
作为一个从后端视角切入前端的开发者，我们其实拥有一个很好的起点——理解数据流转、请求响应。前端不过是把这些逻辑在用户的浏览器里'可视化'和'交互化'的过程。
本文主要汇总提炼一下 web 后端开发人员需要掌握前端基础，重点放在 HTML 和 CSS 上，JS 部分只做串联性讲解，后续将单独讲解 JS。
作为后端开发者，我们习惯于处理数据、接口、数据库、业务逻辑。但最终，所有这些努力都要交付给用户一个'界面'。这个界面就是前端的世界。它由三个部分构成：
三者协同，才能构建出一个完整、可用、美观的 Web 页面。
HTML（HyperText Markup Language，超文本标记语言）的核心作用是 定义页面结构、承载内容，相当于一栋房子的'框架'——没有框架，后续的美化和交互都无从谈起。它不是编程语言（没有逻辑），只是一套'标记标签'，告诉浏览器'这里是标题''这里是段落''这里是按钮'。
<!DOCTYPE html>
<!-- 文档声明：告诉浏览器这是 HTML5 文档 -->
<html lang="zh-CN">
<!-- 根标签：整个 HTML 页面的容器，lang 指定语言（中文） -->
<head>
<!-- 头部：存放页面的'元信息'，不直接显示在页面上 -->
<meta charset="UTF-8">
<!-- 编码格式：UTF-8，避免中文乱码（必加） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
<!-- 浏览器标签页显示的标题（比如'百度一下'） -->
<!-- 这里放 CSS 引入、SEO 配置等 -->
</head>
<body>
<!-- 主体：页面所有可见内容都放在这里（标题、段落、按钮等） -->
<!-- 用户能看到的内容都放在这里 -->
<h1>Hello, 后端世界</h1>
<p>这是一个段落。</p>
</body>
</html>
| 部分 | 作用 | 后端类比 |
|---|---|---|
| 声明文档类型，告诉浏览器用标准模式渲染 | 类似接口的版本声明 | |
| 整个页面的根元素 | 最外层容器 | |
| 页面的元数据，用户看不到，但浏览器、搜索引擎需要 | 类似 HTTP 头信息 | |
| 页面的主体内容，用户可见 | 类似响应体中的实际数据 |
后端同学日常调试、简单写页面，掌握以下常用标签就足够，重点关注'标签作用'和'与后端的关联'（比如表单标签用于提交数据到后端接口）。
<h1>-<h6>：标题标签，h1 最大（页面主标题），h6 最小，<p>：段落标签，用于包裹普通文本（比如说明文字、详情介绍），自动换行。<span>：行内文本标签，用于包裹一小段文字（比如高亮部分），不自动换行，常和 CSS 配合使用。<div>：块级容器标签，自动换行，独占一行，是最常用的'容器'，比如：<div>用户列表</div>（包裹用户列表区域）。<div> 没有固定语义，纯粹用于'划分区域'，几乎所有页面结构都靠它搭建（比如后端返回的列表数据，前端会用 div 循环渲染）。<form>：表单容器标签，所有表单元素（输入框、按钮）都要嵌套在里面，核心属性：action（后端接口地址）、method（请求方式：get/post），比如：<form action="/login" method="post"></form>。<input>：输入框标签，最常用，根据 type 属性不同，实现不同输入效果，比如：
<input type="text" name="username" placeholder="请输入用户名">（文本输入框，name 属性是后端接收参数的 key）
<input type="password" name="password" placeholder="请输入密码">（密码输入框，输入内容隐藏）
<input type="submit" value="登录">（提交按钮，点击后提交表单数据到后端）<button>：按钮标签，可替代 submit 按钮，更灵活，比如：提交。其他常用标签
href（<a>）、src（<img>）、type（<input>）块级元素 vs 行内元素：
| 类型 | 特点 | 常见标签 |
|---|---|---|
| 块级元素 | 独占一行，默认宽度 100% | 、 、 、 |
| 行内元素 | 多个在一行，宽度由内容撑开 | 、、、 |
理解这一点对后续 CSS 布局非常关键。
元素（Element）
一个完整的 HTML 元素通常是：
<标签名属性名="属性值">内容</标签名>
例如：<a href="https://example.com">点击我</a>
CSS（Cascading Style Sheets，层叠样式表）的核心作用是 美化 HTML 元素、控制页面布局——比如每个区域的位置、尺寸、设置颜色、字体、边距，让页面整齐、美观。
对后端同学来说，重点掌握'如何让 CSS 找到要美化的 HTML 元素'（选择器）和'HTML 如何引入 CSS'（引入方式），就能看懂前端样式代码，甚至能简单修改样式。
CSS 要美化 HTML 元素，首先要'找到'这个元素——这就是选择器的作用。选择器是 CSS 的核心，后端同学掌握以下 3 种最常用的选择器，就能应对 80% 的场景。
直接通过 HTML 标签名选择元素，作用于页面中所有该标签的元素，比如：
/* 选择所有 p 标签，设置字体颜色为灰色，字体大小 14px */
p { color: #666; font-size: 14px; }
/* 选择所有 input 标签，设置边框样式 */
input { border: 1px solid #ddd; }
通过 HTML 标签的 class 属性选择元素，可重复使用（多个标签可使用同一个 class），是前端开发中最灵活、最常用的选择器，比如：
<!-- HTML 标签：给 div 添加 class 属性 -->
<div class="user-card">用户信息</div>
<div class="user-card">另一个用户信息</div>
/* CSS 类选择器：以'.'开头，选择所有 class 为 user-card 的元素 */
.user-card { width: 300px; height: 150px; border: 1px solid #eee; margin: 10px; /* 边距，让两个卡片分开 */ }
重点：class 属性可以重复，一个标签也可以有多个 class（用空格分隔），比如：<div></div>。
通过 HTML 标签的 id 属性选择元素，id 在整个页面中必须唯一（不能重复），常用于选择单个、唯一的元素（比如页面头部、底部），比如：
<!-- HTML 标签：给 div 添加 id 属性 -->
<div id="header">页面头部</div>
/* CSS ID 选择器：以'#'开头，选择 id 为 header 的元素 */
#header { height: 60px; background-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 阴影效果 */ }
注意：id 不能重复，一个标签只能有一个 id，后端同学在调试时，可通过 id 快速定位单个元素（比如浏览器 F12 查看元素，搜索 id）。
当多个 CSS 规则作用于同一个元素时，优先级决定哪个规则生效，优先级顺序（从高到低）：ID 选择器 > 类选择器 > 元素选择器，比如：
/* 元素选择器 */
p { color: #666; }
/* 类选择器 */
.text-red { color: red; }
/* ID 选择器 */
#content { color: blue; }
如果一个 <p>文本</p>，最终文本颜色是蓝色（ID 选择器优先级最高）。
CSS 不能单独运行，必须依附于 HTML，有 3 种引入方式，其中'外部引入'是前端开发的标准方式，后端同学重点掌握这种。
直接在 HTML 标签内通过 style 属性写 CSS，仅作用于当前标签，优点是快速、直接，缺点是无法复用、不利于维护，比如：
<p style="color: red; font-size: 16px;">这是红色的文本</p>
在 HTML 的 <head> 标签内，通过 <style> 标签写 CSS，作用于整个当前页面，优点是不用单独创建 CSS 文件，缺点是无法复用给其他页面，比如：
<head>
<meta charset="UTF-8">
<title>内部样式示例</title>
<style>
/* 这里写 CSS */
p { color: #666; }
.user-card { border: 1px solid #eee; }
</style>
</head>
创建单独的 CSS 文件（后缀为.css，比如 style.css），在 HTML 的标签内通过标签引入，优点是可复用、便于维护（多个页面可引入同一个 CSS 文件），是后端同学最常遇到的方式，比如：
<!-- HTML 文件：引入外部 CSS -->
<head>
<meta charset="UTF-8">
<title>外部样式示例</title>
<!--引入 style.css 文件，href 是 CSS 文件的路径-->
<link rel="stylesheet" href="style.css">
</head>
/* style.css 文件（单独创建） */
p { color: #666; }
.user-card { width: 300px; margin: 10px; }
#header { height: 60px; }
重点：href 属性是 CSS 文件的路径，后端同学在调试时，如果样式不生效，首先检查路径是否正确（比如 CSS 文件和 HTML 文件是否在同一目录）。
不用记所有 CSS 样式，掌握以下常用样式，就能看懂前端代码、简单修改样式：
后端同学理解三者的协同逻辑，就能彻底明白'前端页面是怎么工作的'，也能更好地和前端同学配合、排查前后端交互问题，用一个形象的比喻总结：
<form> 标签包裹输入框（用户名、密码）和提交按钮，<h1> 标签做页面标题，<div> 划分区域。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online