前端三件套系列漫谈（2）--HTML和CSS

原创已于 2025-07-11 14:57:05 修改 · 747 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css

于 2025-07-11 14:55:52 首次发布

前端基础专栏收录该内容

3 篇文章

订阅专栏

html是一种用于定义内容结构的标记语言，用来定义内容的结构和骨架，比如标题、正文等语义化结构。核心特点是平台无关性（无需针对特定平台进行修改）和语义化。

html元素、标签和属性

以哔哩哔哩网站首页为例来分析：哔哩哔哩 (゜-゜)つロ干杯~-bilibili
在“元素"一栏可以看到组成页面的元素（Element）
请添加图片描述

元素可以嵌套，有三种类型：

块级元素（<div> <h1>）独占一行，默认宽度100%
行内元素(<span>) 不换行，宽度由内容决定
空元素（<img/>）

请添加图片描述

上图呢，是一个svg元素，它的标签（Tag）是svg，它后面的一系列叫做属性（Attribute），标签定义元素的开始和结束，属性则修饰HTML元素的键值对，提供额外信息或控制行为。

围绕html元素属性的一些扩展：

通过属性控制元素的思想，在现代框架（如React/Vue）也有用到，即将属性扩展为props，实现数据到UI的绑定
通过属性可以实现性能优化：如<img loading="lazy"> 延迟加载、<script defer> 延迟执行
安全相关：<a rel="noopener"> 防止钓鱼攻击，<iframe sandbox> 限制嵌入内容权限

html文档的结构组成

再了解到html组成成分元素的概念之后，我们再来看看html文档的结构组成。
一个标准的HTML文档由声明、根元素、头部（Head) 和主体（Body） 遵循嵌套原则。
请添加图片描述

声明：
<!DOCTYPE html> <!-- html5的简洁声明>用于告知浏览器当前文档遵循的HTML或XHTML规范版本。
头部（head）:
请添加图片描述

这里的meta标签有很多功能，常见的有：

<meta charset="UTF-8"> 定义文档的字符编码
<meta name="viewport" content="width=device-width, initial-scale=1.0">-> 移动端浏览器的视口缩放与布局
meta标签 keywords（关键词）、description（页面摘要）可以实现seo优化

回头看看搜索结果里呈现的b站网页预览，内容对应head里的title即descrption。title会影响浏览器标签页、SEO结果，作用是标识整个网页，seo权重极高
请添加图片描述

css应用于html

CSS（cascading style sheets）样式表语言，核心作用是控制HTML文档的视觉表现，那么css是如何在html文档中起作用的呢？
答：css是通过选择器匹配 html 元素并应用样式规则。（将样式规则应用到HTML元素是css的核心任务）

第一步：引入CSS。
三种方式内联、内部、外部引入。其中推荐的方式是外部样式表。
外部样式表的特点在于可以复用、便于维护、可缓存提高加载速度。
第二步：匹配。
选择器定位html并应用样式，可以按照元素、类、id、属性、伪类、伪元素进行定位。
第三步：层叠与优先级。
对于一个具体的元素来说，可以应用多元样式，这时我们需要计算优先级进行合并。
优先级计算规则：
- !important强制最高优先级
- 内联样式 style=“”
- ID选择器
- 类/属性/伪类
- 元素/为元素

css如何影响页面渲染

css既然是控制视觉表现的，那么在页面渲染过程中，它是如何体现的呢？

浏览器会先解析HTML和CSS，分别构建DOM树和CSSDOM树，构建CSSDOM树的过程中进行标准化样式和计算选择器优先级
再合并DOM + CSSOM -> 生成渲染树（Render Tree)
计算布局（Layout/Reflow) -> 确定每个元素的位置和尺寸
绘制（Paint) -> 填充像素（颜色、边框等）
合成（Composite) -> 层叠处理（transform动画优化）

扩展：
遇到无法解析的css时，遵循渐进增强（Progressive Enhancement）：忽略无法解析的属性和值、部分支持的处理。

css工程化演进

在上面两个css相关的话题中，其实表现的是css的两个特征，一个是选择性（通过选择器定位DOM元素），一个是层叠性（多元样式按优先级进行合并）。
在CSS的工程化演进过程中，为了使css定义更为灵活轻便，出现了很多优秀的框架:

Sass/Less 提供变量、嵌套、混入（Mixin) 等特性

$primary-color: #3498db;
.button{
	background: $primary-color;
	&:hover {opacity:0.8;}
}

Tailwind CSS 工具类快速构建UI，减少自定义样式

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

CSS处理动画与变换也提供了更为灵动的表现，如：

transition/transform高性能动画（避免使用Javascript驱动）
@keyframes复杂序列动画