胡熙国

2023-07-20 面试

提问

HTML 标签语义化的好处

  • HTML 结构清晰，易读性和维护性更好。
  • 代码可读性好
  • 无障碍阅读更友好，对于读屏器等设备，能够播报的更流畅准确。
  • 搜索引擎可根据标签的语言确定上下文和权重问题。更利于 SEO 优化，语义化标签能够提升页面质量，有利于爬虫爬取页面时获取更多的有效信息。
  • 移动设备能更完美的展示页面
  • 便于团队维护开发

CSS3 新特性

  • 选择器

    • 属性选择器

      权重为 10

    input[type="text"] {
  color: blue;
}

    • 结构伪类选择器

      权重为 10

    /*匹配父元素中的第一个子元素*/
ul:first-child {
  color: pink;
}
/*匹配父元素中的第一个li子元素*/
ul li:first-child {
  color: pink;
}
/*匹配父元素中的最后一个li子元素*/
ul li:last-child {
  color: red;
}
/*n从0开始*/
ul li:nth-child(Xn + X) {
  color: blue;
}

    • 伪元素选择器

      权重为 1，必须有 content 属性

    .box::before {
  content: "before";
  color: red;
}

.box::after {
  content: "after";
  color: blue;
}

边框

  • border-radius：创建圆角边框
  • box-shadow：为元素添加阴影
  • border-image：使用图片来绘制边框

文字

  1. word-wrap

语法：word-wrap: normal|break-word

  • normal：使用浏览器默认的换行
  • break-all：允许在单词内换行
  1. text-overflow

text-overflow 设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择：

  • clip：修剪文本
  • ellipsis：显示省略符号来代表被修剪的文本
  1. text-shadow

text-shadow 可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

text-shadow: 1px 1px 1px #000;
  1. text-decoration

CSS3 里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：

  • text-fill-color: 设置文字内部填充颜色
  • text-stroke-color: 设置文字边界填充颜色
  • text-stroke-width: 设置文字边界宽度

颜色

css3新增了新的颜色表示方式rgba与hsla

  • rgba分为两部分，rgb为颜色值，a为透明度
  • hsla分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

transition

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：

  • 过度效果
  • 持续时间

简写

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

详细

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

transform

animation

选择器

  • id 选择器（#box），选择 id 为 box 的元素
  • 类选择器（.one），选择类名为 one 的所有元素
  • 标签选择器（div），选择标签为 div 的所有元素
  • 后代选择器（#box div），选择 id 为 box 元素内部所有的 div 元素
  • 子选择器（.one>one_1），选择父元素为.one 的所有.one_1 的元素
  • 相邻同胞选择器（.one+.two），选择紧接在.one 之后的所有.two 元素
  • 群组选择器（div,p），选择 div、p 的所有元素
  • 伪类选择器
:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素
  • 伪元素选择器
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容

优先级

  • !important
  • 行内样式;
  • ID 选择器, 权重:100;
  • class,属性选择器和伪类选择器，权重:10;
  • 标签选择器和伪元素选择器，权重:1

!important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器

#nav-global > ul > li > a.nav-link;
/* 100+1+ 1+ 1+ 10= 113 */

规则

  1. 权重大的 css 生效
  2. 相同的权重，后面的规则覆盖前面的规则
  3. 拥有更高权重等级的 css 权重更高

布局

  1. float

  2. flex

  3. grid

为什么要清除浮动

动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属 于文档流中的普通流，当元素浮动之后， 不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮 动框不存在一样的布局模式。当包含框 的高度小于浮动框的时候，此时就会出现“高度塌陷”。

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使 我们页面后面的布局不能正常显示

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

ES6 新语法

let const

解构复制

箭头函数

Promise

继承

继承的实现

Promise

是异步编程的一种解决方案，解决传统回调函数的弊端

Vue2 和 Vue3 的区别

  1. 数据双向绑定的实现原理不同

vue2 的双向数据绑定是利用 ES5 的一个 API Object.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的

vue3 中使用了 ES6 的 Proxy API 对数据代理

优势

  • defineProperty只能监听某个属性，不能对全对象监听
  • 可以监听数组，不用再去单独的对数组做特异性操作,vue3 可以检测到数组内部数据的变化
  1. API 不一样

  • vue2 使用选项类型 api，选项型 api 在代码里分割了不同的属性：data,computed,methods 等。

  • vue3 使用组合式 api，新的组合式 api 能让我们使用方法来分割，相比于旧的 api 使用属性来分组，这样代码会更加简便和整洁。

  1. 生命周期钩子函数不同

vue2 中的生命周期：

  • beforeCreate 组件创建之前
  • created 组件创建之后
  • beforeMount 组价挂载到页面之前执行
  • mounted 组件挂载到页面之后执行
  • beforeUpdate 组件更新之前
  • updated 组件更新之后

vue3 中的生命周期：

  • setup 开始创建组件
  • onBeforeMount 组价挂载到页面之前执行
  • onMounted 组件挂载到页面之后执行
  • onBeforeUpdate 组件更新之前
  • onUpdated 组件更新之后
  1. 指令与插槽不同

vue2 中使用 slot 可以直接使用 slot；v-for 与 v-if 在 vue2 中优先级高的是 v-for 指令，而且不建议一起使用。

vue3 中必须使用 v-slot 的形式；vue3 中 v-for 与 v-if,只会把当前 v-if 当做 v-for 中的一个判断语句，不会相互冲突；

vue3 中移除 keyCode 作为 v-on 的修饰符，当然也不支持 config.keyCodes；

vue3 中移除 v-on.native 修饰符；vue3 中移除过滤器 filter

vue 常用的命令

  • v-on
  • v-bind
  • v-model
  • v-for
  • v-if
  • v-else
  • v-show

vue 自定义指令

vue2

局部指令

directives: {
  style: {
    bind(el,binding) {
      console.log(binding,'binding')
      el.style.fontSize = "30px";
      el.style.color = "blue";
    },
  },
},

全局指令

Vue.directive("style", {
  bind(el) {
    el.style.fontSize = "30px";
    el.style.color = "blue";
  },
});

vue3

局部注册

// 局部指令, 变量名为驼峰命名(vFocus = v-focus)
const vFocus = {
  mounted: (el: any) => {
    el.focus();
    console.log(el, "已经自动获得焦点");
  },
};

全局注册

// directives/focus.ts
const directives: any = {
  mounted(el: any) {
    el.focus();
    el.value = "1";
  },
};
export default {
  name: "focus",
  directives,
};

// directives/index.ts
import type { App } from "vue";
import focus from "./focus";
export default function installDirective(app: App) {
  app.directive(focus.name, focus.directives);
}

// main.ts

import directives from "./directives";
const app = createApp(App);
app.use(directives);

class 在 vue 里面的应用

封装 axios

git 是多人协作还是自己用

自己的项目也会使用 git,为了对代码版本的更好管理

也有过多人合作开发的经历，将代码放到 github 的远程仓库，进行多人协作

Linux 的常用命令

  • ls 命令 --- 显示指定工作目录下的内容和属性信息
  • cp 命令 --- 复制文件或目录
  • mkdir 命令 --- 创建目录
  • mv 命令 --- 移动或改名文件
  • pwd 命令 --- 显示当前路径
  • echo 命令 --- 输出字符串或提取 Shell 变量的值
  • rm 命令 --- 移除文件或目录

Linux 的权限

TCP/IP 三次握手，是不是能百分百确定通信

不能百分百确定能够建立连接，

后端返回的响应头里面设置 set-cookie,满足条件会自动携带 cookie 在请求里面给后台

了解的算法

排序算法

基本数据结构

链表

队列

栈

图

树

了解的设计模式

单例模式

贡献者: huxiguo