HTML与CSS

HTML

1. HTML5 新特性

1. 新的语义化元素：main（主要内容区）、footer（底部）、header（头部）、nav（导航）、section（块）

• 什么是语义化：有利于 SEO，有利于开发者去开发
• 什么是 SEO：搜索引擎优化（让你的网站在搜索排名靠前）
• SEO 优化：SSR 服务端渲染（nuxt）

2. 新的表单控件：date、time、email、url、search（可说可不说）

• 功能可以，但是样式太丑了，不好修改，实际开发不怎么使用。
• 开发一般使用 UI 组件库：element-ui、element-plus 等

3. 新的 API：

• 音视频：audio 和 video 元素
  • 扩展：流媒体视频播放技术（未来讲）
• 绘图图形：canvas 元素 -> echarts
  • 扩展：大屏数据可视化（图形图表展示、适配、数据实时交互）（未来讲）
• 本地存储：localStorage，sessionStorage
  • 一般用于存储：token 和 用户数据
  • 扩展 1：localStorage 和 sessionStorage 区别：
    • localStorage 持久化存储，不删除会一直在
    • sessionStorage 会话存储，浏览器一旦关闭会自动清除
  • 扩展 2：将登录持久化（7 天免登录）：
    • token -> jwt
      • 登录将 token 给存储起来（vuex/pinia 访问速度更快，访问速度更快, localStorage 持久化存储
      • 发送请求携带 token（在封装 axios 函数的请求拦截器中添加 token 请求头参数发送给服务器）
    • cookie/session
      • 服务器返回 cookie，浏览器会自动存储
      • 发送请求浏览器会自动携带 cookie
    • 扩展 3：无痛刷新 token（未来讲）
• 多线程操作：Web Worker（未来讲）
  • 扩展：Web Worker 可以开启分线程，将来大量计算工作会交给分线程做（优化）

2. 常见的行内元素和块级元素有哪些？它们的区别？

1. 行内元素 span i a
2. 块级元素 div p ul/li header/footer form
3. 行内块元素 img input

区别：

1. 行内和行内块元素一行多个，块级元素独占一行
2. 行内元素不能设置 width/height，行内块和块级元素可以设置

3. 谈谈 iframe

1. 概念

在当前页面嵌套其他页面（父页面套多个子页面）

2. 通信

• 同源情况
  • 父 -> 子
    • 获取子页面 iframe 标签
    • 给子页面绑定 onload 事件
    • 在事件回调函数中才能获取（操作）子页面的 DOM 元素
  • 子 -> 父
    • window.parent
• 不同源情况
  • 传递数据：postMessage 方法
  • 接受数据：onmessage 事件

3. 应用

A 项目使用 B 项目

iframe 升级版：微前端框架（qiankun）

4.script标签的async和defer有什么区别

• 普通的script标签：当解析到这个标签时，会停止html解析，先去请求和执行js代码，之后再继续往下解析html，会阻塞页面渲染
• async script标签：当解析到这个标签时，异步发送请求获取js资源，当js资源请求回来后，如果html还没解析完，会停止解析，先执行js代码，执行完后再往下解析html，所以这个有可能会阻塞页面渲染
• defer script标签：当解析到这个标签时，会异步发送请求获取js资源，js资源请求回来后，会等待html解析完成后再去执行js代码，所以这个不会阻塞页面的渲染

CSS

1. CSS3 新特性

1. 新增了选择器

• :last-child 匹配父元素的最后一个子元素
• :nth-child(n) 匹配父元素的第 n 个子元素

2. 边框特性

• border-radius 圆角

3. 颜色与不透明度

• opacity: 0.5;
• color: rgba(0, 0, 0, 0.5)

4. 阴影

• text-shadow 文字阴影
• box-shadow 盒子阴影

5. transform 变形

• transform: rotate(9deg) 旋转
• transform: scale(0.5) 缩放
• transform: translate(100px, 100px) 位移

6. 过渡与动画

• transition 过渡
• animation 动画

Vue 中 transition 组件，用来给显示隐藏切换的元素一个动画/过渡效果

7. 媒体查询

• @media 用来做响应式布局

BootStrap 的栅格布局，Element-Plus 中 Row / Col 组件

2. 盒模型

1. 概念：页面渲染时，DOM 元素所采用的布局模型。 可通过 box-sizing 进行设置。
2. 分类：

• content-box (W3C 标准盒模型)
  当给元素设置 width 和 height 时，只会改变 width + height。
• border-box (IE 盒模型)
  当给元素设置 width 和 height 时，会改变 width + height + padding。
• 其他未实现了

3. BFC

1. 概念

• BFC，又称为块级格式化上下文，指的是：一个独立的渲染区域.

2. 触发条件（开启 BFC）

• 设置 overflow，即 hidden，auto，scroll
• 设置浮动，不包括 none
• 设置定位，absolute 或者 fixed 等方式
• display: flow-root

3. 具体规则

• BFC 是一个块级元素，块级元素在垂直方向上依次排列。
• BFC 是一个独立的容器，内部元素不会影响容器外部的元素。
• 属于同一个 BFC 的两个盒子，外边距 margin 会发生重叠，并且取最大外边距。
• 计算 BFC 高度时，浮动子元素也要参与计算。

4. 应用

• 阻止 margin 重叠
• 清除浮动，防止高度塌陷
• 阻止标准流元素被浮动元素覆盖

4. 选择器权重&优先级

• !important > 行内样式 > #id > .class > tag > * > 继承 > 默认
• CSS 选择器浏览器是 从右往左 依次解析

5. CSS 预处理器(Sass/Less/Stylus)

1. 概念：CSS 预处理器定义了一种新的语言，增强了 css 功能，可以更方便的维护和管理 CSS 代码

他一共有：Less、Sass、Stylus

2. 比如我最常用的 Sass

• 可以使用 $ 来定义变量
• 可以样式嵌套
• 可以通过 mixin 来定义混合，复用代码
• 可以通过 extends 来继承复用代码

3. 开发中写样式

• 一般都会定义 variables.scss 来定义项目样式常量：颜色、大小、阴影等
• 会定义 mixins.scss 来定义项目公共样式：单行/多行文字溢出隐藏、清除浮动等

6. flex 布局

1. 概念

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：主轴和交叉轴（也叫做侧轴）。默认水平方向的为主轴，垂直方向为侧轴。

2. 容器的属性

• flex-direction 定义主轴的方向
• flex-wrap 定义是否换行
• flex-flow 是 flex-direction 属性和 flex-wrap 属性的简写形式
• justify-content 定义项目在主轴上的对齐方式
• align-items 定义项目在侧轴上的对齐方式
• align-content 定义换行的项目在侧轴上如何对齐

3. 项目的属性

• order 定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
• flex-grow 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
• flex-shrink 定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
• flex-basis 定义了在分配多余空间之前，项目占据的主轴空间。它的默认值为 auto，即项目的本来大小。
• flex 是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。
• align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

4. 扩展：flex: 1 啥意思

• flex-grow: 1 如果存在剩余空间, 该项目会放大。
• flex-shrink: 1 如果剩余空间不足，该项目会缩小。
• flex-basis: 0% 设置为 0% 之后，即不占据主轴空间，但是因为有 flex-grow 和 flex-shrink 的设置，该项目会自动放大或缩小。

7. 实现两栏布局

.container {
  display: flex;
  height: 400px;
}
.left {
  width: 200px;
  height: 100%;
  background: pink;
}
.right {
  flex: 1;
  height: 100%;
  background: deeppink;
}

8. 隐藏页面元素方式

1. display: none 不占位。不会响应 DOM 事件。
2. opacity: 0 占位，但不可见。会响应 DOM 事件。
3. visibility: hidden 占位，但不可见。不会响应 DOM 事件。
4. transform: scale(0)
5. transform: rotateY(90deg)
6. 定位到屏幕外
7. 定位到父元素外，父元素 overflow: hidden

9. 让元素水平垂直居中方式

1. 利用绝对定位, 子元素未知宽高

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

2. 利用绝对定位, 子元素必须明确宽高

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

3. 利用 flex

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