HTML和CSS的复习2

文章目录

- HTML和CSS的复习2
一、HTML
- - [1. HTML 空标签（自闭合标签）](#1. HTML 空标签（自闭合标签）)
  - [2. HTML5 新增核心特性](#2. HTML5 新增核心特性)
  - [3. localStorage、sessionStorage、cookie 区别](#3. localStorage、sessionStorage、cookie 区别)
  - 关键补充说明
  - [4. <meta> 标签完整考点](#4. <meta> 标签完整考点)
  - [5. 表单相关补充](#5. 表单相关补充)
  - [6. iframe 补充](#6. iframe 补充)
  - [7. 浏览器渲染流程补充](#7. 浏览器渲染流程补充)
  - [8. HTML 语义化补充](#8. HTML 语义化补充)
二、CSS
- - [1. CSS 单位](#1. CSS 单位)
  - [2. CSS 伪类与伪元素](#2. CSS 伪类与伪元素)
  - [3. 单行 / 多行文本溢出省略](#3. 单行 / 多行文本溢出省略)
  - [4. CSS 精灵图（Sprite）补充](#4. CSS 精灵图（Sprite）补充)
  - [5. 重排与重绘（补充）](#5. 重排与重绘（补充）)
  - [6. BFC 补充](#6. BFC 补充)
  - [7. CSS 预处理 / 后处理](#7. CSS 预处理 / 后处理)
  - [8. CSS 模块化](#8. CSS 模块化)
  - [11. 响应式布局](#11. 响应式布局)
  - [9. 高频 CSS 考点](#9. 高频 CSS 考点)

一、HTML

1. HTML 空标签（自闭合标签）

不需要写结束标签，单独使用：

javascript 复制代码

<img> <input> <link> <meta> <br> <hr> <base> <area> <col> <embed> <keygen> <param> <source>

2. HTML5 新增核心特性

语义化标签：补充 <figure>（图片 + 说明）、<figcaption>（figure 说明）、<details>（折叠面板）、<summary>（折叠标题）
表单增强：除原有 type="email/tel/date"，新增 type="color"（颜色选择）、type="range"（滑块）、type="file"（文件上传）、required（必填校验）、placeholder（提示文本）、autocomplete="on/off"（自动填充）
本地存储：补充 indexedDB（大容量本地存储，区别于 localStorage，支持复杂数据）
多媒体增强：补充 <track>（视频字幕）、<source>（多媒体源切换）
其他新增高频：
- <canvas> 细节：用于绘制图形、动画，需通过 JS 操作，区别于 SVG（矢量图，放大不失真，canvas 是位图，放大失真）
- <svg> 细节：矢量图，可直接嵌入 HTML，支持动画，适合图标、简单图形，比图片更轻量
- 自定义属性 data-*：补充 JS 操作方式（element.dataset）
- 废弃标签：<font>、<center>、<marquee>

以下是关于 localStorage、sessionStorage 和 cookie 的特性对比表格：

特性	localStorage	sessionStorage	cookie
存储大小	5MB	5MB	4KB
存储时长	永久（需手动删除）	会话级（页面关闭后消失）	可设置过期时间（默认会话级）
随 HTTP 请求发送	不发送	不发送	自动发送（同域名）
跨页面共享	共享（同域名）	不共享（同窗口不同页面也不共享）	共享（同域名）
操作方式（JS）	`localStorage.setItem/getItem`	`sessionStorage.setItem/getItem`	`document.cookie`

关键补充说明

httpOnly：防止 JavaScript 读取 cookie，常用于防范 XSS 攻击（如敏感身份凭证）。
secure：仅通过 HTTPS 协议传输 cookie，避免明文泄露
跨域限制：三者均受同源策略限制，仅在同域名下共享数据

4. 标签完整考点

编码设置：<meta charset="UTF-8">
视口设置：

javascript 复制代码

        
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

复制代码

   补充参数含义：user-scalable=no（禁止缩放，移动端常用）、maximum-scale（最大缩放比）、minimum-scale（最小缩放比）

SEO 相关：

javascript 复制代码

<meta name="keywords" content="前端,HTML,CSS">（关键词）
<meta name="description" content="前端HTML+CSS复习笔记">（页面描述）
<meta name="author" content="作者">

兼容旧浏览器：<meta http-equiv="X-UA-Compatible" content="IE=edge">

5. 表单相关补充

表单 <label> 标签：补充 for 属性与 <input> 的 id 绑定（label for="user", <input id="user">）
表单 <select> 补充：<optgroup label="分组名称">（下拉选项分组）、<option value="" selected>（默认选中）
表单验证：pattern（正则校验，如手机号 pattern="1[3-9]\d{9}"）、min/max（输入范围）、step（步长，如数字输入 step="1"）
表单提交<button type="submit">（提交）、<button type="reset">（重置）、<button type="button">（普通按钮，不提交）
"button 不加 type "，默认 submit

6. iframe 补充

缺点：

跨域通信复杂（需用 postMessage）
不利于页面性能监控
移动端适配差，易出现滚动异常
替代方案：
组件化开发（如 Vue/React 组件）
AJAX 加载内容（不刷新页面渲染）
Web Components 自定义组件

7. 浏览器渲染流程补充

补充：解析 HTML 时遇到 <link> 会并行加载 CSS，但会阻塞 DOM 渲染（CSSOM 未生成，无法合成渲染树）；遇到 <script> 会停止 HTML 解析（JS 可能操作 DOM/CSSOM），需等待 JS 执行完成再继续

优化渲染：预加载 <link rel="preload">（提前加载关键资源）、懒加载（图片 loading="lazy"，组件懒加载）

8. HTML 语义化补充

语义化标签使用场经：

<header>：页面头部（导航 + Logo），不可嵌套多个
<main>：页面唯一主体，不可嵌套
<section>：逻辑区块（如 "商品列表区""评论区"），可嵌套
<article>：独立完整内容（如单篇文章、单个商品卡片）
<aside>：非主体内容（侧边栏、广告、相关推荐）
<footer>：页面底部（版权、联系方式）

"为什么不用 div 写所有结构"
① 语义化标签更具可读性，便于开发维护（多团队协作时，标签含义一目了然）；② 利于 SEO 优化（搜索引擎可通过语义化标签识别页面结构，提升页面权重）；③ 提升无障碍访问（屏幕阅读器可通过语义化标签快速解析页面内容，适配特殊人群）。

二、CSS

1. CSS 单位

px：固定像素，适合 PC 端固定布局，不随设备缩放
%：相对父元素，适合自适应（如宽度 width:100%），缺点：父元素宽度变化会影响子元素，易出现布局错乱
em：相对自身 font-size，嵌套时会继承父元素字体大小，易混乱，较少用
rem：相对根元素的 font-size，移动端适配首选（如，1rem=100px，计算方便）
vw / vh：相对视口，1vw=1% 视口宽度，1vh=1% 视口高度，移动端适配更灵活（无需计算根字体，直接用 vw 定义宽高）
vmin / vmax：vmin = 视口最小边的 1%，vmax = 视口最大边的 1%，适合横竖屏切换场景（如移动端游戏、视频页面）

2. CSS 伪类与伪元素

伪类（单冒号，元素状态 / 位置）

状态伪类：:hover（鼠标悬浮）、:active（点击时）、:focus（获取焦点）、:visited（链接已访问）、:link（链接未访问）
结构伪类（高频）：:first-child（第一个子元素）、:last-child（最后一个子元素）、:nth-child(n)（第 n 个子元素，n 可写公式，如 2n 偶数）、:nth-of-type(n)（同类型第 n 个）、:empty（空元素）、:not(selector)（排除指定元素）
表单伪类：:checked（单选 / 复选选中）、:disabled（禁用）、:read-only（只读）、:required（必填）、:placeholder-shown（占位符显示时）
伪元素（双冒号，创建虚拟元素）
常用：::before（元素前插入）、::after（元素后插入）、::first-line（首行文本）、::first-letter（首字母）
补充大厂考点：::placeholder（输入框占位符样式）、::selection（选中文本样式）
注意：伪元素必须配合 content 属性（即使为空 content:""），否则不生效

3. 单行 / 多行文本溢出省略

单行（基础，必背）

java 复制代码

white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 溢出显示省略号 */

多行（补充异常处理）

java 复制代码

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3; /* 显示3行，可修改 */
-webkit-box-orient: vertical; /* 垂直排列 */
text-overflow: ellipsis;
/* 补充：兼容火狐浏览器（可选，大厂会问兼容） */
-moz-box-orient: vertical;
display: -moz-box;

补充考点

多行溢出省略只适用于 -webkit- 内核（Chrome、Safari）
若文本内有换行符（\n），需配合 white-space: pre-line（保留换行，不保留空格）

4. CSS 精灵图（Sprite）补充

核心原理：将多个小图标 / 图片合并为一张大图，通过 background-position（x,y 坐标）定位显示指定区域
实现步骤：

用工具（如 PS）合并小图标，统一尺寸，间距均匀
CSS 中设置 background-image 引入合并图
用 background-position: -xpx -ypx 定位到目标图标（x、y 为负数，向左 / 向上偏移）
优点：

减少 HTTP 请求数
减少图片体积
缺点：
维护成本高（新增图标需重新合并图片、调整坐标）
不适合高频更新的图标

5. 重排与重绘（补充）

重排（回流）
触发场景：

元素宽高、位置、margin/padding 改变
元素显示 / 隐藏（display: none，visibility 不触发重排）
页面初始化、窗口大小改变（resize）
子元素添加 / 删除、排序
读取元素布局属性（如 offsetWidth、clientHeight、getComputedStyle），会强制触发重排
优化方案：
批量修改样式（用 class 替换 inline-style，避免频繁修改单个样式）
避免频繁读取布局属性，可缓存结果（如 let width = element.offsetWidth）
用 transform、opacity 替代宽高、位置修改（不会触发重排，仅重绘）
元素脱离文档流（absolute/fixed），减少对其他元素的影响
虚拟列表（大数据列表，只渲染可视区域，避免全量渲染触发重排）

重绘
触发场景：

元素颜色、背景色、边框颜色改变
元素阴影改变
visibility、opacity 改变
优化：
减少不必要的重绘（如合并颜色修改、避免频繁切换阴影）

6. BFC 补充

定义补充：BFC 是一个独立的渲染容器，容器内的布局不会影响容器外的元素
触发方式：

overflow: hidden/auto/scroll（除了 hidden，其他两个也会触发）
float: left/right（只要浮动，不管方向）
position: absolute/fixed（脱离文档流，自动触发 BFC）
display: flex/inline-block/grid/table-cell（块级 / 行内块相关）
contain: layout/paint

应用场景：

解决相邻块级元素 margin 重叠（如两个 p 标签上下 margin 合并，给其中一个套 BFC 容器）
清除浮动塌陷（父元素触发 BFC，无需写 clearfix）
实现两栏布局（左侧固定，右侧自适应，右侧触发 BFC，避免被左侧浮动覆盖）
防止元素被浮动元素遮挡（给被遮挡元素触发 BFC）

7. CSS 预处理 / 后处理

预处理（Less、Sass/SCSS）

Less：基于 JS，语法更接近 CSS，支持变量（@color: #fff）、嵌套、混合（@mixin）、运算
Sass/SCSS：基于 Ruby，语法更灵活，支持变量（$color: #fff）、嵌套、继承（@extend）、函数、条件判断
应用场景：用预处理统一管理样式，减少重复代码，提升维护效率

后处理（PostCSS）
核心作用：对 CSS 进行兼容性处理、优化，不改变 CSS 语法
常用插件：

autoprefixer：自动添加浏览器前缀（如 -webkit-、-moz-），适配不同浏览器
cssnano：压缩 CSS（删除注释、空格，合并重复样式）
postcss-preset-env：将现代 CSS 语法转换为兼容旧浏览器的语法

区别：预处理是 "先编译再写样式"，后处理是 "先写样式再编译优化"

8. CSS 模块化

核心目的：避免样式冲突，实现样式隔离

常用方案：

CSS Modules：将 CSS 文件模块化，类名自动哈希（如 className="user__name" 编译后为 user__name_123xyz），避免全局冲突
scoped（Vue 专属）：给组件内 CSS 加作用域（编译后添加 data-v-xxx 前缀），仅作用于当前组件

11. 响应式布局

核心实现方式

媒体查询 @media（基础，必掌握）
语法：@media (媒体类型) and (条件)，如：

java 复制代码

/* 移动端（小于768px） */
@media (max-width: 768px) {
  .container { width: 100%; }
}
/* 平板（768px-1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
  .container { width: 90%; margin: 0 auto; }
}
/* PC端（大于1024px） */
@media (min-width: 1024px) {
  .container { width: 1200px; margin: 0 auto; }
}

rem 适配
原理：根元素 <html> 设置 font-size，子元素用 rem 单位（1rem = html 的 font-size）
实现步骤：
1. 移动端：<html style="font-size: 100px">（1rem=100px）
2. 媒体查询修改根字体大小，适配不同屏幕：

java 复制代码

@media (max-width: 375px) {
  html { font-size: 93.75px; } /* 375/320*100 ≈ 93.75 */
}
@media (max-width: 320px) {
  html { font-size: 80px; }
}

vw / vh 适配
原理：1vw = 视口宽度的 1%，1vh = 视口高度的 1%，无需计算根字体
优势：无需媒体查询，自动适配所有屏幕

java 复制代码

.container { width: 100vw; padding: 2vw; }
.title { font-size: 5vw; } /* 随视口缩放 */

flex / grid 布局

flex 布局：适合横向 / 纵向布局，父元素设置 display: flex，子元素用 flex:1 自适应，配合 flex-wrap: wrap 实现多行自适应
grid 布局：适合复杂网格（如 3 列 2 行），比 flex 更灵活，大厂用于首页、商品列表等复杂布局

java 复制代码

.parent { display: flex; }
.left { width: 200px; }
.right { flex: 1; } /* 自适应剩余宽度 */

百分比布局
核心：子元素宽度 / 高度相对父元素，如 width: 50%（占父元素一半）
注意事项：

百分比是相对父元素的 "内容区"（不包含 padding/border），若父元素有 padding，子元素百分比会偏差
高度百分比：父元素必须有固定高度（如 height: 500px），否则子元素 height: 50% 无效
避免嵌套百分比（如父元素 50%，子元素 50%，最终是父元素父元素的 25%，易混乱）
响应式补充考点
图片响应式：img { max-width: 100%; height: auto; }（避免图片超出容器），配合 srcset（不同屏幕加载不同尺寸图片，优化性能）
移动端适配坑：viewport 标签必须写对（否则适配失效）、fixed 定位在软键盘弹出时会偏移、rem 适配时根字体计算错误

9. 高频 CSS 考点

（1）CSS 优先级补充

补充：!important 会提升单个样式的优先级，但不推荐滥用（
特殊情况：继承的样式优先级最低，即使父元素有 !important，子元素继承的样式也不如自身的普通样式
面试题："两个相同优先级的样式，哪个生效？"（后定义的生效，就近原则）

（2）CSS 继承性
可继承属性（常用）：font-size、color、text-align、line-height、font-family、visibility
不可继承属性（常用）：width、height、margin、padding、border、background、position
考点："为什么 color 能继承，而 background 不能？"（继承属性多是文本相关，布局相关属性不可继承）

（3）CSS 盒模型补充
补充：outline（轮廓）与 border 的区别：outline 不占空间，不影响布局，常用于聚焦样式（如 input 聚焦 outline）
盒模型计算：
- 标准盒模型：总宽度 = content + padding + border + margin
- 怪异盒模型：总宽度 = width（content+padding+border） + margin
（4）移动端 CSS 适配
禁止页面缩放：user-scalable=no（viewport 标签中）
解决移动端 1px 边框问题：

java 复制代码

/* 用 transform 缩放，避免 1px 变粗 */
.border-1px::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;
  transform: scaleY(0.5);
}

移动端滚动优化：overflow-scrolling: touch（开启原生滚动，更流畅）
（5）CSS 性能优化
减少重排重绘（核心）
合并 CSS 文件（减少 HTTP 请求）
压缩 CSS（删除注释、空格，减小文件体积）
使用 link 引入 CSS（避免 @import，@import 会阻塞页面渲染）
避免使用复杂选择器（如 div > p:nth-child(2)，性能差），优先用类选择器
图片优化：精灵图、懒加载、WebP 格式（比 JPG/PNG 更小）
避免 !important、避免嵌套过深（超过 3 层）

HTML和CSS的复习2