首页/资讯中心/详情

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

前端三基石：从后端视角理解 HTML、CSS 与 JavaScript
📅 发布时间：2026/7/15 19:52:14

目录

  • 前言
  • 一、基本概念
  • 二、运行环境和机制
  • 三、HTML：网页的“骨架”，承载所有内容
    • 3.1 HTML 基本结构
    • 2.2 最常用的 HTML 标签
    • 2.3 HTML 核心基础概念
  • 三、CSS：网页的“皮肤”，美化与布局
    • 3.1 CSS 核心：如何定位HTML元素？（选择器）
      • 3.1.1 元素选择器（最基础）
      • 3.1.2 类选择器（最常用）
      • 3.1.3 ID选择器（唯一标识）
      • 3.1.4 选择器优先级（补充）
    • 3.2 HTML 如何引入CSS？（3种方式）
      • 3.2.1 内联样式（不推荐，仅临时调试用）
      • 3.2.2 内部样式（适合简单页面）
      • 3.2.3 外部样式（推荐，前端标准方式）
    • 3.3 CSS 基础常用样式
  • 四、HTML+CSS+JS 协同工作：完整前端页面的诞生
    • 4.1 协同流程（以“登录页面”为例）

前言

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

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

一、基本概念

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

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

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

二、运行环境和机制

JS引擎
JS引擎执行JavaScript 代码的程序核心，包含解析、编译、垃圾回收整套逻辑，负责将JS源码编译并解释执行。
国内主要是 Chrome/Node 用的 V8引擎，采用解释+JIT即时编译模式

JS引擎先通过解释器将JS源码逐行转换为字节码，快速执行（这一步就是解释执行，优势是启动快，无需等待编译完成）； 第二步，引擎会监测代码执行频率，将频繁执行的热点代码（如循环、常用函数）筛选出来； 第三步，JIT即时编译器把这些热点字节码编译为本地机器码，后续再执行该部分代码时，直接运行机器码，大幅提升执行效率，

JS 运行环境

浏览器 = V8 引擎 + 渲染模块 + 浏览器专属 API

  • 自带 HTML 解析器、CSS 解析器，能渲染页面
  • 提供window、document、DOM、fetch、canvas等页面相关 API
  • 没有 Node 的任何模块（fs、path、os等），不能操作本地文件、启动服务

Node.js = V8 引擎 + 底层系统模块 + Node 专属 API

  • 提供 fs 文件读写、http 服务、操作系统、进程等后端API能力
  • 不存在 DOM、window 这些浏览器 API

浏览器环境
核心载体是浏览器；

  1. 浏览器内置HTML解析器、CSS解析器和V8 JS引擎。

  2. HTML + CSS 无需编译，获取HTML文件后，解析器逐行解析HTML构建DOM树（页面骨架）；并行加载解析CSS，生成CSSOM树（样式规则）；两者合并为渲染树，最终完成页面布局与绘制。

  3. 浏览器 V8 JS引擎采用“解释+JIT即时编译”模式，初始解释执行，高频代码自动编译优化，无需开发者手动干预。

  4. 与后端的关联：前端通过JS发起请求（如AJAX），获取后端接口返回的数据，再通过DOM操作将数据渲染到HTML页面中，实现前后端数据联动。

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

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

3.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 class="user-list">用户列表</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按钮，更灵活，比如：提交。

  4. 其他常用标签

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

2.3 HTML 核心基础概念

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

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

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

  2. 块级元素 vs 行内元素：

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

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

  3. 属性（Attribute）

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

三、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 class="user-card active"></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 10pxrgba(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 id="content" class="text-red">文本</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实现交互：

    • 监听提交按钮的点击事件；
    • 获取输入框中的用户名和密码；
    • 发送请求到后端登录接口；
    • 接收后端返回的结果（成功/失败），动态修改页面（比如登录失败提示“用户名或密码错误”，登录成功跳转到首页）。