前端三基石：从后端视角理解 HTML、CSS 与 JavaScript

优质文章学习记录

— 13 min read

目录

前言

作为一个从后端视角切入前端的开发者，我们其实拥有一个很好的起点——理解数据流转、请求响应。前端不过是把这些逻辑在用户的浏览器里“可视化”和“交互化”的过程。

这篇博客我主要汇总提炼一下web后端开发人员需要掌握前端基础，重点放在 HTML 和 CSS 上，JS 部分只做串联性讲解，后续会出一篇博客单独讲解js

一、基本概念

作为后端开发者，我们习惯于处理数据、接口、数据库、业务逻辑。但最终，所有这些努力都要交付给用户一个“界面”。这个界面就是前端的世界。它由三个部分构成：

  • HTML（超文本标记语言） —— 骨架和内容
  • CSS（层叠样式表） —— 美化、风格、样式
  • JavaScript（脚本语言） —— 动作、交互

三者协同，才能构建出一个完整、可用、美观的 Web 页面。

二、HTML：网页的“骨架”，承载所有内容

HTML（HyperText Markup Language，超文本标记语言）的核心作用是 定义页面结构、承载内容，相当于一栋房子的“框架”——没有框架，后续的美化和交互都无从谈起。它不是编程语言（没有逻辑），只是一套“标记标签”，告诉浏览器“这里是标题”“这里是段落”“这里是按钮”。

2.1 HTML 基本结构

<!DOCTYPEhtml><!-- 文档声明：告诉浏览器这是HTML5文档 --><htmllang="zh-CN"><!-- 根标签：整个HTML页面的容器，lang指定语言（中文） --><head><!-- 头部：存放页面的“元信息”，不直接显示在页面上 --><metacharset="UTF-8"><!-- 编码格式：UTF-8，避免中文乱码（必加） --><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>页面标题</title><!-- 浏览器标签页显示的标题（比如“百度一下”） --><!-- 这里放 CSS 引入、SEO 配置等 --></head><body><!-- 主体：页面所有可见内容都放在这里（标题、段落、按钮等） --><!-- 用户能看到的内容都放在这里 --><h1>Hello, 后端世界</h1><p>这是一个段落。</p></body></html>
部分作用后端类比
<!DOCTYPE html>声明文档类型，告诉浏览器用标准模式渲染类似接口的版本声明
<html>整个页面的根元素最外层容器
<head>页面的元数据，用户看不到，但浏览器、搜索引擎需要类似 HTTP 头信息
<body>页面的主体内容，用户可见类似响应体中的实际数据

2.2 最常用的 HTML 标签

后端同学日常调试、简单写页面，掌握以下常用标签就足够，重点关注“标签作用”和“与后端的关联”（比如表单标签用于提交数据到后端接口）。

  1. 文本类标签（承载文字内容）
    • <h1>-<h6>：标题标签，h1最大（页面主标题），h6最小，
    • <p>：段落标签，用于包裹普通文本（比如说明文字、详情介绍），自动换行。
    • <span>：行内文本标签，用于包裹一小段文字（比如高亮部分），不自动换行，常和CSS配合使用。
  2. 容器类标签（划分页面结构），用于将页面划分成不同区域（比如头部、侧边栏、内容区），便于后续CSS布局和数据渲染。
    • <div>：块级容器标签，自动换行，独占一行，是最常用的“容器”，比如：<div>用户列表</div>（包裹用户列表区域）。
    • <div> 没有固定语义，纯粹用于“划分区域”，几乎所有页面结构都靠它搭建（比如后端返回的列表数据，前端会用div循环渲染）。
  3. 表单类标签（与后端交互核心）后端同学最关注的标签，用于收集用户输入（比如登录、注册、提交数据），数据通过表单提交到后端接口，是前后端交互的“桥梁”。
    • <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按钮，更灵活，比如：提交。

其他常用标签

标签作用
<img>图片，核心属性 src、alt
<video>视频
<audio>音频
<a>链接标签，用于跳转页面（比如跳转到首页、详情页），核心属性href（跳转地址）

2.3 HTML 核心基础概念

  1. 属性（Attribute）
    • 通用属性：id（唯一标识）、class（类名，用于样式/脚本）、style（内联样式）、title（提示信息）
    • 特有属性：href（<a>）、src（<img>）、type（<input>）

块级元素 vs 行内元素：

类型特点常见标签
块级元素独占一行，默认宽度 100%<div>、<p>、<h1>、<ul>
行内元素多个在一行，宽度由内容撑开<span>、<a>、<strong>、<img>

理解这一点对后续 CSS 布局非常关键。

元素（Element）
一个完整的 HTML 元素通常是：

<标签名属性名="属性值">内容</标签名>

例如：<a href="https://example.com">点击我</a>

三、CSS：网页的“皮肤”，美化与布局

CSS（Cascading Style Sheets，层叠样式表）的核心作用是 美化HTML元素、控制页面布局——比如每个区域的位置、尺寸、设置颜色、字体、边距，让页面整齐、美观。

对后端同学来说，重点掌握“如何让CSS找到要美化的HTML元素”（选择器）和“HTML如何引入CSS”（引入方式），就能看懂前端样式代码，甚至能简单修改样式。

3.1 CSS 核心：如何定位HTML元素？（选择器）

CSS要美化HTML元素，首先要“找到”这个元素——这就是选择器的作用。选择器是CSS的核心，后端同学掌握以下3种最常用的选择器，就能应对80%的场景。

3.1.1 元素选择器（最基础）

直接通过HTML标签名选择元素，作用于页面中所有该标签的元素，比如：

/* 选择所有p标签，设置字体颜色为灰色，字体大小14px */p{color: #666;font-size: 14px;}/* 选择所有input标签，设置边框样式 */input{border: 1px solid #ddd;}

3.1.2 类选择器（最常用）

通过HTML标签的class属性选择元素，可重复使用（多个标签可使用同一个class），是前端开发中最灵活、最常用的选择器，比如：

<!-- HTML标签：给div添加class属性 --><divclass="user-card">用户信息</div><divclass="user-card">另一个用户信息</div>
/* CSS类选择器：以“.”开头，选择所有class为user-card的元素 */.user-card{width: 300px;height: 150px;border: 1px solid #eee;margin: 10px;/* 边距，让两个卡片分开 */}

重点：class属性可以重复，一个标签也可以有多个class（用空格分隔），比如：<div></div>。

3.1.3 ID选择器（唯一标识）

通过HTML标签的id属性选择元素，id在整个页面中必须唯一（不能重复），常用于选择单个、唯一的元素（比如页面头部、底部），比如：

<!-- HTML标签：给div添加id属性 --><divid="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）。

3.1.4 选择器优先级（补充）

当多个CSS规则作用于同一个元素时，优先级决定哪个规则生效，优先级顺序（从高到低）：ID选择器 > 类选择器 > 元素选择器，比如：

/* 元素选择器 */p{color: #666;}/* 类选择器 */.text-red{color: red;}/* ID选择器 */#content{color: blue;}

如果一个<p>文本</p>，最终文本颜色是蓝色（ID选择器优先级最高）。

3.2 HTML 如何引入CSS？（3种方式）

CSS不能单独运行，必须依附于HTML，有3种引入方式，其中“外部引入”是前端开发的标准方式，后端同学重点掌握这种。

3.2.1 内联样式（不推荐，仅临时调试用）

直接在HTML标签内通过style属性写CSS，仅作用于当前标签，优点是快速、直接，缺点是无法复用、不利于维护，比如：

<pstyle="color: red;font-size: 16px;">这是红色的文本</p>

3.2.2 内部样式（适合简单页面）

在HTML的<head>标签内，通过<style>标签写CSS，作用于整个当前页面，优点是不用单独创建CSS文件，缺点是无法复用给其他页面，比如：

<head><metacharset="UTF-8"><title>内部样式示例</title><style>/* 这里写CSS */p{color: #666;}.user-card{border: 1px solid #eee;}</style></head>

3.2.3 外部样式（推荐，前端标准方式）

创建单独的CSS文件（后缀为.css，比如style.css），在HTML的标签内通过标签引入，优点是可复用、便于维护（多个页面可引入同一个CSS文件），是后端同学最常遇到的方式，比如：

<!-- HTML文件：引入外部CSS --><head><metacharset="UTF-8"><title>外部样式示例</title&gt;<!--引入style.css文件，href是CSS文件的路径--><linkrel="stylesheet"href="style.css"></head>
/* style.css文件（单独创建） */p{color: #666;}.user-card{width: 300px;margin: 10px;}#header{height: 60px;}

重点：href属性是CSS文件的路径，后端同学在调试时，如果样式不生效，首先检查路径是否正确（比如CSS文件和HTML文件是否在同一目录）。

3.3 CSS 基础常用样式

不用记所有CSS样式，掌握以下常用样式，就能看懂前端代码、简单修改样式：

  • 字体相关：font-size（字体大小）、color（字体颜色）、font-weight（字体粗细，bold是加粗）。
  • 边距相关：margin（外边距，元素和其他元素的距离）、padding（内边距，元素内部内容和边框的距离）。
  • 边框相关：border（边框，比如1px solid #ddd，宽度1px、实线、灰色）、border-radius（圆角，比如5px，让按钮、卡片变圆润）。
  • 布局相关：width（宽度）、height（高度）、background-color（背景色）、text-align（文本对齐，center是居中）。
  • 定位相关：float（浮动，left/right，让元素并排显示）、position（定位，relative/absolute，用于固定元素位置，比如顶部导航栏）。

四、HTML+CSS+JS 协同工作：完整前端页面的诞生

后端同学理解三者的协同逻辑，就能彻底明白“前端页面是怎么工作的”，也能更好地和前端同学配合、排查前后端交互问题，用一个形象的比喻总结：

  • HTML：搭建“房子框架”（比如墙体、门窗的位置），确定哪里是客厅（内容区）、哪里是卧室（表单区）。
  • CSS：给“房子装修”（比如刷墙、铺地板、摆家具），让客厅宽敞、卧室舒适，整体美观。
  • JS：给“房子装水电、家电”（比如开灯、开水、用空调），让房子能正常使用，实现交互（比如按下开关，灯亮；点击按钮，水开）。

4.1 协同流程（以“登录页面”为例）

  1. 用HTML搭建登录页面结构：<form>标签包裹输入框（用户名、密码）和提交按钮，<h1>标签做页面标题，<div>划分区域。
  2. 用CSS美化页面：设置输入框的边框、边距，按钮的颜色、圆角，页面的背景色，让登录页面整齐、美观。
  3. 用JS实现交互：
    • 监听提交按钮的点击事件；
    • 获取输入框中的用户名和密码；
    • 发送请求到后端登录接口；
    • 接收后端返回的结果（成功/失败），动态修改页面（比如登录失败提示“用户名或密码错误”，登录成功跳转到首页）。

Read more

【保姆级】TrendRadar本地部署：告别算法推荐，打造个人专属AI热点情报局

【保姆级】TrendRadar本地部署：告别算法推荐，打造个人专属AI热点情报局

【保姆级】TrendRadar本地部署：告别算法推荐，打造个人专属AI热点情报局 摘要 本文基于 TrendRadar 项目，详细拆解如何通过 Docker 本地部署一套个人专属的 AI 热点情报系统。涵盖从环境准备、Docker 镜像拉取、局域网访问配置、飞书推送修复到 Cherry Studio MCP 服务对接的全流程。通过 Nvidia 免费模型 API，实现零成本的深度热点分析与趋势追踪。 关键词： TrendRadar, Docker部署, AI热点分析, MCP服务, Cherry Studio 1. 背景与需求：为什么我们需要 TrendRadar？ 在这个大数据算法横行的时代，我们每天被头条、抖音等平台“投喂”大量信息，不仅容易陷入信息茧房，还浪费了大量时间筛选有效资讯。 我的核心需求很简单： 1. 拒绝算法绑架：需要一个个人定制化的新闻推送服务。 2.
开源vs闭源AI工具大比较：成本、性能、生态的全方位对比

开源vs闭源AI工具大比较：成本、性能、生态的全方位对比

开源vs闭源AI工具大比较：成本、性能、生态的全方位对比 🌟 Hello，我是摘星！ 🌈 在彩虹般绚烂的技术栈中，我是那个永不停歇的色彩收集者。 🦋 每一个优化都是我培育的花朵，每一个特性都是我放飞的蝴蝶。 🔬 每一次代码审查都是我的显微镜观察，每一次重构都是我的化学实验。 🎵 在编程的交响乐中，我既是指挥家也是演奏者。让我们一起，在技术的音乐厅里，奏响属于程序员的华美乐章。 目录 开源vs闭源AI工具大比较：成本、性能、生态的全方位对比 摘要 1. AI工具选择的战略意义 1.1 技术选型的重要性 1.2 市场趋势分析 2. 成本维度深度对比 2.1 直接成本分析 2.2 隐性成本分析 3. 性能维度全面评测 3.1 基准测试对比 3.2 性能优化策略 4. 生态系统建设对比 4.
多模态检索新突破！Qwen3-VL-Embedding/Reranker AI 真正“看懂“你在搜什么，从图片到视频全拿下！

多模态检索新突破！Qwen3-VL-Embedding/Reranker AI 真正“看懂“你在搜什么，从图片到视频全拿下！

Qwen3-VL-Embedding 和 Qwen3-VL-Reranker：统一多模态表征与排序 摘要 2025年6月，Qwen 团队开源了面向文本的 Qwen3-Embedding 和 Qwen3-ReRanker 模型系列，在多语言文本检索、聚类和分类等多项下游任务中取得了业界领先的性能。 2026年1月，该团队推出了 Qwen 家族的最新成员：Qwen3-VL-Embedding 和 Qwen3-VL-Reranker 模型系列。这些模型基于开源的 Qwen3-VL 模型构建，专为多模态信息检索和跨模态理解场景设计，能够将文本、图像、文档图像和视频等多种模态映射到统一的表示空间中。 Qwen3-VL-Embedding 模型采用多阶段训练范式，从大规模对比预训练逐步发展到重排序模型蒸馏，以生成语义丰富的高维向量。该模型支持 Matryoshka 表示学习（MRL），可灵活选择嵌入维度，并能处理最多 32K tokens 的输入。作为补充，Qwen3-VL-Reranker 采用交叉编码器架构和交叉注意力机制，对查询-文档对进行细粒度的相关性评估。 两个模型系列继承了
AI 自动化测试：接口测试全流程自动化的实现方法

AI 自动化测试：接口测试全流程自动化的实现方法

在 AI 技术飞速渗透各行各业的当下，我们早已告别 “谈 AI 色变” 的观望阶段，迈入 “用 AI 提效” 的实战时代 💡。无论是代码编写时的智能辅助 💻、数据处理中的自动化流程 📊，还是行业场景里的精准解决方案 ，AI 正以润物细无声的方式，重构着我们的工作逻辑与行业生态 🌱。曾几何时，我们需要花费数小时查阅文档 📚、反复调试代码 ⚙️，或是在海量数据中手动筛选关键信息 ，而如今，一个智能工具 🧰、一次模型调用 ⚡，就能将这些繁琐工作的效率提升数倍 📈。正是在这样的变革中，AI 相关技术与工具逐渐走进我们的工作场景，成为破解效率瓶颈、推动创新的关键力量 。今天，我想结合自身实战经验，带你深入探索 AI 技术如何打破传统工作壁垒 🧱，让 AI 真正从 “概念” 变为 “实用工具” ，为你的工作与行业发展注入新动能 ✨。 文章目录 * AI 自动化测试：接口测试全流程自动化的实现方法 🤖 * 为什么传统自动化测试“卡壳”