目录前言一、基本概念二、运行环境和机制三、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 如何引入CSS3种方式3.2.1 内联样式不推荐仅临时调试用3.2.2 内部样式适合简单页面3.2.3 外部样式推荐前端标准方式3.3 CSS 基础常用样式四、HTMLCSSJS 协同工作完整前端页面的诞生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浏览器环境核心载体是浏览器浏览器内置HTML解析器、CSS解析器和V8 JS引擎。HTML CSS 无需编译获取HTML文件后解析器逐行解析HTML构建DOM树页面骨架并行加载解析CSS生成CSSOM树样式规则两者合并为渲染树最终完成页面布局与绘制。浏览器 V8 JS引擎采用“解释JIT即时编译”模式初始解释执行高频代码自动编译优化无需开发者手动干预。与后端的关联前端通过JS发起请求如AJAX获取后端接口返回的数据再通过DOM操作将数据渲染到HTML页面中实现前后端数据联动。三、HTML网页的“骨架”承载所有内容HTMLHyperText Markup Language超文本标记语言的核心作用是定义页面结构、承载内容相当于一栋房子的“框架”——没有框架后续的美化和交互都无从谈起。它不是编程语言没有逻辑只是一套“标记标签”告诉浏览器“这里是标题”“这里是段落”“这里是按钮”。3.1 HTML 基本结构!DOCTYPEhtml!-- 文档声明告诉浏览器这是HTML5文档 --htmllangzh-CN!-- 根标签整个HTML页面的容器lang指定语言中文 --head!-- 头部存放页面的“元信息”不直接显示在页面上 --metacharsetUTF-8!-- 编码格式UTF-8避免中文乱码必加 --metanameviewportcontentwidthdevice-width, initial-scale1.0title页面标题/title!-- 浏览器标签页显示的标题比如“百度一下” --!-- 这里放 CSS 引入、SEO 配置等 --/headbody!-- 主体页面所有可见内容都放在这里标题、段落、按钮等 --!-- 用户能看到的内容都放在这里 --h1Hello, 后端世界/h1p这是一个段落。/p/body/html部分作用后端类比!DOCTYPE html声明文档类型告诉浏览器用标准模式渲染类似接口的版本声明html整个页面的根元素最外层容器head页面的元数据用户看不到但浏览器、搜索引擎需要类似 HTTP 头信息body页面的主体内容用户可见类似响应体中的实际数据2.2 最常用的 HTML 标签后端同学日常调试、简单写页面掌握以下常用标签就足够重点关注“标签作用”和“与后端的关联”比如表单标签用于提交数据到后端接口。文本类标签承载文字内容h1-h6标题标签h1最大页面主标题h6最小p段落标签用于包裹普通文本比如说明文字、详情介绍自动换行。span行内文本标签用于包裹一小段文字比如高亮部分不自动换行常和CSS配合使用。容器类标签划分页面结构用于将页面划分成不同区域比如头部、侧边栏、内容区便于后续CSS布局和数据渲染。div块级容器标签自动换行独占一行是最常用的“容器”比如div classuser-list用户列表/div包裹用户列表区域。div没有固定语义纯粹用于“划分区域”几乎所有页面结构都靠它搭建比如后端返回的列表数据前端会用div循环渲染。表单类标签与后端交互核心后端同学最关注的标签用于收集用户输入比如登录、注册、提交数据数据通过表单提交到后端接口是前后端交互的“桥梁”。form表单容器标签所有表单元素输入框、按钮都要嵌套在里面核心属性action后端接口地址、method请求方式get/post比如form action/login methodpost/form。input输入框标签最常用根据type属性不同实现不同输入效果比如input typetext nameusername placeholder请输入用户名文本输入框name属性是后端接收参数的keyinput typepassword namepassword placeholder请输入密码密码输入框输入内容隐藏input typesubmit value登录提交按钮点击后提交表单数据到后端button按钮标签可替代submit按钮更灵活比如提交。其他常用标签标签作用img图片核心属性 src、altvideo视频audio音频a链接标签用于跳转页面比如跳转到首页、详情页核心属性href跳转地址2.3 HTML 核心基础概念元素Element一个完整的 HTML 元素通常是标签名属性名属性值内容/标签名例如a hrefhttps://example.com点击我/a块级元素 vs 行内元素类型特点常见标签块级元素独占一行默认宽度 100%div、p、h1、ul行内元素多个在一行宽度由内容撑开span、a、strong、img理解这一点对后续 CSS 布局非常关键。属性Attribute通用属性id唯一标识、class类名用于样式/脚本、style内联样式、title提示信息特有属性hrefa、srcimg、typeinput三、CSS网页的“皮肤”美化与布局CSSCascading 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属性 --divclassuser-card用户信息/divdivclassuser-card另一个用户信息/div/* CSS类选择器以“.”开头选择所有class为user-card的元素 */.user-card{width:300px;height:150px;border:1px solid #eee;margin:10px;/* 边距让两个卡片分开 */}重点class属性可以重复一个标签也可以有多个class用空格分隔比如div classuser-card active/div。3.1.3 ID选择器唯一标识通过HTML标签的id属性选择元素id在整个页面中必须唯一不能重复常用于选择单个、唯一的元素比如页面头部、底部比如!-- HTML标签给div添加id属性 --dividheader页面头部/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 idcontent classtext-red文本/p最终文本颜色是蓝色ID选择器优先级最高。3.2 HTML 如何引入CSS3种方式CSS不能单独运行必须依附于HTML有3种引入方式其中“外部引入”是前端开发的标准方式后端同学重点掌握这种。3.2.1 内联样式不推荐仅临时调试用直接在HTML标签内通过style属性写CSS仅作用于当前标签优点是快速、直接缺点是无法复用、不利于维护比如pstylecolor:red;font-size:16px;这是红色的文本/p3.2.2 内部样式适合简单页面在HTML的head标签内通过style标签写CSS作用于整个当前页面优点是不用单独创建CSS文件缺点是无法复用给其他页面比如headmetacharsetUTF-8title内部样式示例/titlestyle/* 这里写CSS */p{color:#666;}.user-card{border:1px solid #eee;}/style/head3.2.3 外部样式推荐前端标准方式创建单独的CSS文件后缀为.css比如style.css在HTML的标签内通过标签引入优点是可复用、便于维护多个页面可引入同一个CSS文件是后端同学最常遇到的方式比如!-- HTML文件引入外部CSS --headmetacharsetUTF-8title外部样式示例/titlegt;!--引入style.css文件href是CSS文件的路径--linkrelstylesheethrefstyle.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用于固定元素位置比如顶部导航栏。四、HTMLCSSJS 协同工作完整前端页面的诞生后端同学理解三者的协同逻辑就能彻底明白“前端页面是怎么工作的”也能更好地和前端同学配合、排查前后端交互问题用一个形象的比喻总结HTML搭建“房子框架”比如墙体、门窗的位置确定哪里是客厅内容区、哪里是卧室表单区。CSS给“房子装修”比如刷墙、铺地板、摆家具让客厅宽敞、卧室舒适整体美观。JS给“房子装水电、家电”比如开灯、开水、用空调让房子能正常使用实现交互比如按下开关灯亮点击按钮水开。4.1 协同流程以“登录页面”为例用HTML搭建登录页面结构form标签包裹输入框用户名、密码和提交按钮h1标签做页面标题div划分区域。用CSS美化页面设置输入框的边框、边距按钮的颜色、圆角页面的背景色让登录页面整齐、美观。用JS实现交互监听提交按钮的点击事件获取输入框中的用户名和密码发送请求到后端登录接口接收后端返回的结果成功/失败动态修改页面比如登录失败提示“用户名或密码错误”登录成功跳转到首页。