html和css的复习（1）
html和css的复习（1）
文章目录
- html和css的复习（1）
- 一、HTML 复习
- 1. 什么是 HTML？作用是什么？
- 2. 什么是 HTML 语义化？为什么要用？
- 3. 作用是什么？不写会怎样？
- 4. 行内元素 / 块级元素 / 行内块元素 区别
- 5. img 标签的 alt 和 title 区别
- 6. get 和 post 区别
- 7. 表单元素必须有的属性：name
- 8. href 和 src 区别
- 9. 浏览器解析 HTML 过程
- 二、css的复习
- 1. CSS 选择器优先级
- 2. CSS 盒模型
- 3. 块元素上下 margin 重叠问题
- 4. 浮动 float 问题（高频）
- 5. position 定位（必考）
- 总结
一、HTML 复习
1. 什么是 HTML？作用是什么？
- 超文本标记语言，不是编程语言
- 负责网页结构：标题、段落、图片、按钮、表单等
- 给内容语义化，让浏览器、搜索引擎、屏幕阅读器能读懂
2. 什么是 HTML 语义化？为什么要用？
- 语义化 = 用正确的标签表达正确的内容含义
- 好处：
- 代码可读性高，别人一看就知道结构
- SEO 更友好，搜索引擎更容易抓取
- 无障碍支持，屏幕阅读器能识别
- 便于维护，结构清晰不乱
- 常用语义化标签：
<header>页头<nav>导航<main>页面主体=<section>区块<article>文章/内容<aside>侧边栏<footer>页脚<h1>~<h6>标题<p>段落<ul>/<ol>列表3. 作用是什么？不写会怎样？
- 告诉浏览器这是 HTML5 文档
让浏览器用标准模式渲染 - 不写会进入怪异模式
盒模型解析错误
样式错乱
布局兼容问题
4. 行内元素 / 块级元素 / 行内块元素 区别
- 块级元素（block）
- 独占一行
- 可设置宽高、margin、padding
- 默认宽度 100%
- 例：div p h1 ul li header section
- 行内元素（inline）
- 不独占一行，同行显示
- 不能设置宽高
- 上下 margin 无效
- 例：span a b i strong em
- 行内块元素（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 过程
- 解析 HTML → 生成 DOM 树
- 解析 CSS → 生成 CSSOM 树
- 合成渲染树
- 布局（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 会合并，取较大值
- 解决方法：
- 给其中一个加 float
- 给其中一个加 inline-block
- 用 flex 布局
- 加 padding /border 隔开
4. 浮动 float 问题（高频）
- 浮动特点：
- 元素脱离文档流
- 文字会环绕
- 父元素高度塌陷
- 清除浮动：
- 最后加一个空标签 clear:both
- 父元素 overflow:hidden
- 伪元素清除法
.clearfix::after{content:"";display:block;clear:both;}5. position 定位（必考）
- static
- 正常文档流
- 不能用 top/left
- relative（相对定位）
- 相对自己原来位置
- 不脱离文档流
- 不影响别人
- absolute（绝对定位）
- 相对最近的非 static 父级
- 脱离文档流
- 常配合 relative 使用
- fixed（固定定位）
- 相对浏览器窗口
- 滚动页面不动
- sticky（粘性定位）
- 滚动到位置后吸附住
- 隐藏元素的三种方法区别
- display: none; 隐藏、不占位置、不触发事件
- visibility: hidden; 隐藏、占位置、不触发事件
- opacity: 0; 透明、占位置、可触发事件
- 水平垂直居中（至少会 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;}- flex 布局高频考点
- flex-direction 方向
- justify-content 主轴对齐
- align-items 交叉轴对齐
- flex-wrap: wrap 换行
- flex:1 占满剩余空间
- flex:1 完整含义：
flex-grow:1;
flex-shrink:1;
flex-basis:0%;
- BFC 是什么？
- BFC = 块级格式化上下文独立渲染区域，内部不影响外部
- 触发 BFC：
overflow:hiddenposition:absolute/fixeddisplay:flex/inline-blockfloat:left/right- 作用：
解决 margin 重叠
解决浮动塌陷
避免被浮动元素覆盖
- 重排与重绘
- 重排：元素布局发生变化 → 消耗性能高
- 重绘：颜色、背景变化 → 消耗低
- 尽量减少重排：
不要频繁修改 style
使用 class 替换
使用 transform=
总结
这个是这几周简单的看来一下关于css和html的知识点，后续会继续复习来补充