html和css的复习（1）

html和css的复习（1）

文章目录

• html和css的复习（1）
• [一、HTML 复习](#一、HTML 复习)
• • • [1. 什么是 HTML？作用是什么？](#1. 什么是 HTML？作用是什么？)
    • [2. 什么是 HTML 语义化？为什么要用？](#2. 什么是 HTML 语义化？为什么要用？)
    • [3. 作用是什么？不写会怎样？](#3. 作用是什么？不写会怎样？)
    • [4. 行内元素 / 块级元素 / 行内块元素 区别](#4. 行内元素 / 块级元素 / 行内块元素 区别)
    • [5. img 标签的 alt 和 title 区别](#5. img 标签的 alt 和 title 区别)
    • [6. get 和 post 区别](#6. get 和 post 区别)
    • [7. 表单元素必须有的属性：name](#7. 表单元素必须有的属性：name)
    • [8. href 和 src 区别](#8. href 和 src 区别)
    • [9. 浏览器解析 HTML 过程](#9. 浏览器解析 HTML 过程)
• 二、css的复习
• • • [1. CSS 选择器优先级](#1. CSS 选择器优先级)
    • [2. CSS 盒模型](#2. CSS 盒模型)
    • [3. 块元素上下 margin 重叠问题](#3. 块元素上下 margin 重叠问题)
    • [4. 浮动 float 问题（高频）](#4. 浮动 float 问题（高频）)
    • [5. position 定位（必考）](#5. position 定位（必考）)
• 总结

---

一、HTML 复习

1. 什么是 HTML？作用是什么？

• 超文本标记语言，不是编程语言
• 负责网页结构：标题、段落、图片、按钮、表单等
• 给内容语义化，让浏览器、搜索引擎、屏幕阅读器能读懂

2. 什么是 HTML 语义化？为什么要用？

1. 语义化 = 用正确的标签表达正确的内容含义
2. 好处：

• 代码可读性高，别人一看就知道结构
• SEO 更友好，搜索引擎更容易抓取
• 无障碍支持，屏幕阅读器能识别
• 便于维护，结构清晰不乱

3. 常用语义化标签：

<header>    页头
<nav>       导航
<main>      页面主体=
<section>   区块
<article>   文章/内容
<aside>     侧边栏
<footer>    页脚
<h1>~<h6>   标题
<p>         段落
<ul>/<ol>   列表

3. 作用是什么？不写会怎样？

1. 告诉浏览器这是 HTML5 文档
   让浏览器用标准模式渲染
2. 不写会进入怪异模式
   盒模型解析错误
   样式错乱
   布局兼容问题

4. 行内元素 / 块级元素 / 行内块元素 区别

1. 块级元素（block）

• 独占一行
• 可设置宽高、margin、padding
• 默认宽度 100%
• 例：div p h1 ul li header section

2. 行内元素（inline）

• 不独占一行，同行显示
• 不能设置宽高
• 上下 margin 无效
• 例：span a b i strong em

3. 行内块元素（inline-block）

• 不换行
• 可设置宽高
• 例：img button input

5. img 标签的 alt 和 title 区别

• alt：图片加载失败显示的文字，必须写，SEO + 无障碍
• title：鼠标 hover 提示文字，可选

6. get 和 post 区别

GET 与 POST 方法的对比表格

特点	GET 方法	POST 方法
数据位置	URL 里可见	请求体中，不可见
安全性	低	高
数据大小	有限制（受 URL 长度限制）	无限制
缓存	会缓存	不会缓存
用途	查询、搜索	登录、上传、提交敏感数据

7. 表单元素必须有的属性：name

后端接收数据必须靠 name，没有 name 提交不了！

<input name="username">

8. href 和 src 区别

• href：链接、引用（建立关联）

<a href=""> <link href="">

• src：引入资源（替换当前内容）

<img src=""> <script src=""> <video src="">

9. 浏览器解析 HTML 过程

1. 解析 HTML → 生成 DOM 树
2. 解析 CSS → 生成 CSSOM 树
3. 合成渲染树

• 布局（Layout）→ 绘制（Paint）→ 显示

二、css的复习

1. CSS 选择器优先级

• 优先级从高到低：
  !important > 行内样式 > ID选择器 > 类/属性/伪类 > 元素 > 通配符
• 快速计算法：
  ID：100
  类 / 伪类：10
  元素：1
  数值越大优先级越高

2. CSS 盒模型

• 所有元素都是盒子分为两种：
  （1）标准盒模型（默认）

box-sizing: content-box;
宽度 = content
padding + border 会撑大盒子

（2）怪异盒模型

box-sizing: border-box;
宽度 = content + padding + border
padding、border 不会撑大盒子

3. 块元素上下 margin 重叠问题

• 只发生在垂直方向两个相邻块级元素，margin 会合并，取较大值
• 解决方法：

1. 给其中一个加 float
2. 给其中一个加 inline-block
3. 用 flex 布局
4. 加 padding /border 隔开

4. 浮动 float 问题（高频）

1. 浮动特点：

• 元素脱离文档流
• 文字会环绕
• 父元素高度塌陷

2. 清除浮动：

• 最后加一个空标签 clear:both
• 父元素 overflow:hidden
• 伪元素清除法

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}

5. position 定位（必考）

1. static

• 正常文档流
• 不能用 top/left

2. relative（相对定位）

• 相对自己原来位置
• 不脱离文档流
• 不影响别人

3. absolute（绝对定位）

• 相对最近的非 static 父级
• 脱离文档流
• 常配合 relative 使用

4. fixed（固定定位）

• 相对浏览器窗口
• 滚动页面不动

5. sticky（粘性定位）

• 滚动到位置后吸附住

6. 隐藏元素的三种方法区别

• display: none; 隐藏、不占位置、不触发事件
• visibility: hidden; 隐藏、占位置、不触发事件
• opacity: 0; 透明、占位置、可触发事件

7. 水平垂直居中（至少会 3 种）

• 方法 1：flex

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

• 方法 2：定位 + transform

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法 3：定位 + margin:auto

.child {
  position: absolute;
  top:0;left:0;right:0;bottom:0;
  margin:auto;
}

8. flex 布局高频考点

• flex-direction 方向
• justify-content 主轴对齐
• align-items 交叉轴对齐
• flex-wrap: wrap 换行
• flex:1 占满剩余空间
• flex:1 完整含义：
  flex-grow:1;
  flex-shrink:1;
  flex-basis:0%;

9. BFC 是什么？

• BFC = 块级格式化上下文独立渲染区域，内部不影响外部
• 触发 BFC：

overflow:hidden
position:absolute/fixed
display:flex/inline-block
float:left/right

• 作用：
  解决 margin 重叠
  解决浮动塌陷
  避免被浮动元素覆盖

10. 重排与重绘

• 重排：元素布局发生变化 → 消耗性能高
• 重绘：颜色、背景变化 → 消耗低
• 尽量减少重排：
  不要频繁修改 style
  使用 class 替换
  使用 transform=

总结

这个是这几周简单的看来一下关于css和html的知识点，后续会继续复习来补充