全栈手账 订阅 RSS
← 回到列表
笔记

HTML 和 CSS 知识总结与面试题

前端基础的系统梳理：从 HTML 语义化标签讲到 CSS 选择器、盒模型、Flex/Grid 布局、响应式设计与动画过渡，每个知识点配代码示例，并附常见面试题，适合作为前端基本功的复习手册。

读了 16 分钟 更新于 8 月 5 日

一、HTML 基础概念

1. 什么是 HTML？

  • 超文本标记语言（HyperText Markup Language）
  • 用于构建网页结构的标记语言
  • 使用标签描述网页内容的结构和语义

2. HTML 文档结构

html
<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>页面标题</title></head><body>    <h1>Hello, World!</h1></body></html>

3. HTML5 新增特性

  • 语义化标签：header、nav、main、section、article、footer
  • 多媒体标签：video、audio
  • 表单新类型：email、tel、url、number、date
  • Canvas 和 SVG 支持
  • 本地存储：localStorage、sessionStorage

二、常用 HTML 标签

1. 语义化标签

标签 功能 说明
<header> 页面头部 包含标题、导航等
<nav> 导航栏 包含链接列表
<main> 主要内容 页面核心内容
<section> 章节 主题性内容区块
<article> 文章 独立的内容单元
<aside> 侧边栏 次要内容
<footer> 页脚 版权信息等

2. 文本标签

标签 功能 说明
<h1>-<h6> 标题 层级依次降低
<p> 段落 文本段落
<strong> 强调 重要文本（加粗）
<em> 强调 斜体强调
<a> 链接 超链接
<br> 换行 强制换行
<hr> 水平线 分隔线

3. 列表标签

html
<!-- 无序列表 --><ul>    <li>项目1</li>    <li>项目2</li></ul><!-- 有序列表 --><ol>    <li>步骤1</li>    <li>步骤2</li></ol><!-- 定义列表 --><dl>    <dt>术语</dt>    <dd>定义</dd></dl>

4. 表单标签

html
<form action="/submit" method="POST">    <label for="username">用户名：</label>    <input type="text" id="username" name="username" required>        <label for="email">邮箱：</label>    <input type="email" id="email" name="email">        <label for="gender">性别：</label>    <select id="gender" name="gender">        <option value="male">男</option>        <option value="female">女</option>    </select>        <input type="submit" value="提交"></form>

5. 多媒体标签

html
<!-- 图片 --><img src="image.jpg" alt="描述文本" width="200" height="150"><!-- 视频 --><video src="video.mp4" controls width="640" height="360">    您的浏览器不支持视频播放</video><!-- 音频 --><audio src="audio.mp3" controls>    您的浏览器不支持音频播放</audio>

三、CSS 基础概念

1. 什么是 CSS？

  • 层叠样式表（Cascading Style Sheets）
  • 用于描述网页样式和布局
  • 控制网页的视觉呈现

2. CSS 引入方式

html
<!-- 内联样式 --><div style="color: red; font-size: 14px;">内容</div><!-- 内部样式表 --><style>    div {        color: red;        font-size: 14px;    }</style><!-- 外部样式表 --><link rel="stylesheet" href="style.css">

3. CSS 选择器

选择器 语法 说明
元素选择器 div 匹配所有 div 元素
类选择器 .class 匹配指定类名的元素
ID 选择器 #id 匹配指定 ID 的元素
属性选择器 [attr] 匹配具有指定属性的元素
后代选择器 parent child 匹配父元素内的子元素
子选择器 parent > child 匹配直接子元素
相邻兄弟选择器 prev + next 匹配相邻兄弟元素
伪类选择器 :hover 匹配鼠标悬停的元素
伪元素选择器 ::before 在元素前插入内容

4. CSS 优先级

  1. !important（最高优先级）
  2. 内联样式
  3. ID 选择器
  4. 类选择器、属性选择器、伪类
  5. 元素选择器、伪元素
  6. 通配符选择器（最低优先级）

四、CSS 布局

1. Flexbox 布局

css
.container {    display: flex;           /* 启用 Flexbox */    flex-direction: row;     /* 主轴方向：row/column */    justify-content: center; /* 主轴对齐：flex-start/center/flex-end/space-between/space-around */    align-items: center;     /* 交叉轴对齐：flex-start/center/flex-end/stretch */    flex-wrap: wrap;         /* 是否换行：nowrap/wrap */    gap: 10px;               /* 间距 */}.item {    flex: 1;                 /* 弹性比例 */    order: 2;                /* 排列顺序 */    align-self: flex-start;  /* 单独对齐 */}

2. Grid 布局

css
.container {    display: grid;    grid-template-columns: repeat(3, 1fr); /* 3列等宽 */    grid-template-rows: 100px 200px;       /* 2行，高度分别为100px和200px */    gap: 20px;                              /* 间距 */    justify-items: center;                  /* 单元格内容水平对齐 */    align-items: center;                    /* 单元格内容垂直对齐 */}.item {    grid-column: 1 / 3;  /* 跨越第1到第3列 */    grid-row: 2;         /* 位于第2行 */}

3. 传统布局

方式 说明 适用场景
浮动布局 使用 float 属性 旧版浏览器兼容
定位布局 使用 position 属性 精确定位元素
表格布局 使用 <table> 或 display: table 表格数据展示

五、CSS 盒模型

1. 标准盒模型

css
.box {    width: 200px;    height: 100px;    padding: 10px;    border: 2px solid #000;    margin: 20px;    /* 总宽度 = width + padding*2 + border*2 = 200 + 20 + 4 = 224px */}

2. IE 盒模型

css
.box {    box-sizing: border-box;    width: 200px;    padding: 10px;    border: 2px solid #000;    /* 总宽度 = width = 200px（包含padding和border） */}

六、响应式设计

1. 视口设置

html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 媒体查询

css
/* 默认样式 */.container {    width: 1200px;    margin: 0 auto;}/* 平板设备 */@media (max-width: 1024px) {    .container {        width: 90%;    }}/* 手机设备 */@media (max-width: 768px) {    .container {        width: 100%;        padding: 0 10px;    }}

3. 响应式图片

html
<picture>    <source srcset="image-large.jpg" media="(min-width: 1024px)">    <source srcset="image-medium.jpg" media="(min-width: 768px)">    <img src="image-small.jpg" alt="描述"></picture>

七、CSS 动画与过渡

1. 过渡效果

css
.button {    background-color: blue;    transition: background-color 0.3s ease, transform 0.3s ease;}.button:hover {    background-color: red;    transform: scale(1.1);}

2. 关键帧动画

css
@keyframes slideIn {    from {        transform: translateX(-100%);        opacity: 0;    }    to {        transform: translateX(0);        opacity: 1;    }}.animated {    animation: slideIn 0.5s ease-out;}

八、常见面试题

HTML 部分

Q1：HTML5 新增了哪些语义化标签？

  • header、nav、main、section、article、aside、footer
  • 优点：提高可读性、SEO 友好、屏幕阅读器支持

Q2：src 和 href 的区别？

  • src：用于嵌入资源（如 img、script），会阻塞页面加载
  • href：用于建立链接（如 a、link），不会阻塞页面加载

Q3：data-* 属性的用途？

  • 用于存储自定义数据
  • 通过 JavaScript 的 dataset 属性访问
  • 示例：<div data-id="123">

Q4：表单中的 name 和 id 属性有什么区别？

  • name：表单提交时的键名，用于服务器端获取数据
  • id：用于 CSS 选择器和 JavaScript 访问，页面内唯一

Q5：meta 标签的作用？

  • 提供页面元信息（字符编码、视口设置、SEO 信息等）
  • 常见：charset、viewport、description、keywords

CSS 部分

Q6：CSS 选择器优先级是怎样的？

  • !important > 内联样式 > ID > 类/属性/伪类 > 元素/伪元素 > 通配符

Q7：Flexbox 和 Grid 的区别？

  • Flexbox：一维布局（行或列）
  • Grid：二维布局（同时控制行和列）
  • 根据布局需求选择使用

Q8：什么是 CSS 盒模型？

  • 标准盒模型：width/height 不包含 padding 和 border
  • IE 盒模型：width/height 包含 padding 和 border
  • 通过 box-sizing 属性切换

Q9：position 属性有哪些值？区别是什么？

  • static：默认值，正常文档流
  • relative：相对定位，相对于自身位置偏移
  • absolute：绝对定位，相对于最近的定位祖先元素
  • fixed：固定定位，相对于视口
  • sticky：粘性定位，在滚动范围内保持固定

Q10：什么是 BFC？如何触发 BFC？

  • BFC（块级格式化上下文）是一个独立的渲染区域
  • 触发方式：overflow: hidden、float: left/right、display: inline-block/flex/grid、position: absolute/fixed
  • 作用：清除浮动、防止 margin 重叠

Q11：如何清除浮动？

  • 使用 clear: both
  • 触发父元素 BFC（如 overflow: hidden）
  • 使用伪元素清除浮动
css
.clearfix::after {    content: '';    display: table;    clear: both;}

Q12：display: none 和 visibility: hidden 的区别？

  • display: none：元素不显示，不占据空间
  • visibility: hidden：元素隐藏，但仍占据空间

Q13：响应式设计的实现方式？

  • 媒体查询
  • 弹性布局（Flexbox/Grid）
  • 相对单位（rem、vw/vh）
  • 响应式图片

Q14：rem 和 em 的区别？

  • em：相对于父元素字体大小
  • rem：相对于根元素（html）字体大小
  • rem 更适合响应式设计

Q15：CSS 动画和过渡的区别？

  • 过渡：从一个状态平滑过渡到另一个状态
  • 动画：通过关键帧定义更复杂的动画效果
  • 过渡适合简单交互，动画适合复杂效果

进阶问题

Q16：什么是 CSS 层叠？

  • 当多个样式规则应用于同一元素时的处理机制
  • 优先级：来源（用户代理 < 用户 < 作者）、优先级、源代码顺序

Q17：如何优化 CSS 性能？

  • 使用高效选择器（避免嵌套过深）
  • 减少重排和重绘
  • 使用 CSS 动画代替 JavaScript 动画
  • 压缩 CSS 文件

Q18：什么是 CSS Modules？

  • 一种 CSS 模块化方案
  • 通过 scoped class 避免样式冲突
  • 常用在 React、Vue 等框架中

Q19：CSS-in-JS 的优缺点？

  • 优点：组件级样式隔离、动态样式、类型安全
  • 缺点：运行时开销、学习曲线、调试困难

Q20：如何实现垂直居中？

css
/* 方法1：Flexbox */.container {    display: flex;    align-items: center;    justify-content: center;}/* 方法2：Grid */.container {    display: grid;    place-items: center;}/* 方法3：绝对定位 + transform */.child {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}

九、最佳实践

  1. 语义化：使用合适的语义标签，提高可访问性和 SEO
  2. 响应式：确保在不同设备上都有良好体验
  3. 性能：优化 CSS 选择器，减少重排重绘
  4. 可维护性：组织好 CSS 结构，使用模块化方式
  5. 浏览器兼容：考虑不同浏览器的兼容性

十、总结

HTML 和 CSS 是前端开发的基础，掌握语义化标签、布局技术、响应式设计和性能优化是成为优秀前端开发者的关键。

前端、后端、部署、客服都是我一个人。写这里的东西都是真踩过的坑，不是抄来的教程。