html+css+jq+js面试题

355 阅读16分钟

html+css+css3

单标签 双标签

  1. 单标签
  • input img hr link mate br
  1. 双标签
  • div ul li table tr td ol body

####两列三列布局

  1. 浮动
  2. 定位
  3. display:flex(弹性)

css动画

  1. 线性动画(会显示过渡的图形)
    • 1.1 平移动画
      • transform:平移translate/旋转rotate/放大scale/倾斜skew
      • 旋转可以用origin属性来设置
    • 1.2 过渡动画
      • transrion: 属性 延时 时间 过渡方式
  2. 帧动画(没有过渡时间,每一个时间点到达的位置)
    • 2.1 自定义动画
      • anmiation:动画名称 时间 运动方式 是否循环
    • 2.2 动画播放序列
      • 可以用from{}to{}从哪里到哪
      • 运用百分比

px rem em 的区别

  1. px实际上就是像素 固定的
  2. em 相对于他的父级的属性来计算
  3. rem 相对对于根元素

媒体查询

  • 自适应根据设置的屏幕大小随着缩放的比例显示不一样的布局

垂直居中布局

  1. 定位(相对)
  2. 定位(绝对)
  3. display:flex
  4. margin:0 auto

浮动 以及浮动产生的副作

  1. float:left/right
  2. 背景不能显示 3.边框不能撑开 4.margin padding不能正常显示

清除浮动

  1. 父级设置合适的宽高
  2. overflow:hidden
  3. clear:both
  4. after 伪类清除浮动

h5的新特性和h5新标签

  1. 标签语义化
  • 页面呈现出清晰的结构
  • 方便设备进行解析
  • 有利于搜索引擎优化
  • 便于维护
  1. 新增本地存储
  2. 表单新增功能 form placeholder
  3. 多媒体特性(对视频音频的支持)

更改标签的默认样式

  • a ext-decoration: none;
  • li list-style:none

常见的浏览器内核

  1. ie trident内核
  2. firefox gecko内核
  3. safari webkit内核 4.chrome blink blink

解释一下浏览器内核的理解

  1. 渲染引擎
  • 渲染图像 html xml css
  1. js引擎
  • 执行js

href和src的区别

  • href标识超文本引用 用于link和a元素上 用于关联页面
  • src表示引用源

浏览器如何渲染页面

  • 解析html文件创建dom树 自上而下 遇到任何样式脚本都会阻塞 外联样式不会阻塞
  • 解析css 浏览器默认样式<用户设置<外部样式<内联样式<行内样式
  • 将css和dom合并 构建渲染树
  • 布局和绘制 重绘和重排

前端页面分层

  • 结构
  • 修饰
  • 行为

xhtml和html区别

  • xhtml
  • 标签必须要闭合
  • 标签必须要小写
  • 必须要有根元素

锚点的作用是什么 如何创建锚点

  • 锚点是文档某行的一个标记记号 类似于书签 用于连接到文档中的某个位置
  • 给标签一个name或id值 在下面a标签时#值

alt和title的区别

  • title为元素提供标题信息
  • alt 是图片不能显示提示的文字信息

iframe的优缺点

  1. 优点
  • 解决加载缓慢的第三方内容
  • 并行加载脚本
  1. 缺点
  • 内容为空也需要加载时间
  • 元素不够语义化

h5标签

  • nva footer header vido aido asdie conent

display:none 和 visibility:hidden的区别

  1. 相同
  • 他们都是让元素不可见
  1. 不同
  • display 是让其再dom树上消失 渲染时不占用任何空间 非继承属性
  • visiblity 会占据空间不会在dom树上面消失只是内容不见 继承属性

让元素隐藏的方法

  • opacity:0 透明度
  • visibility :hidden
  • display:none
  • height:0 display none

标准盒模型和怪异盒模型

  • 标准盒模型 width = content.width
  • 怪异盒模型 width = content+border+padding

可以继承的样式

  • 文本和字体相关的都能继承
  • 不可 padding margin width border

实现元素的垂直水平

  • 给该元素宽度 margin-left/right: auto
  • 父元素 text-align center
  • 绝对定位 position:absolute
  • flex布局

双冒号和单冒号有什么区别

  • :: 这是为元素
  • : 这是伪类

bootstrap栅格系统执行原理

  • 把页面分为12等份 基于jq开发的组件结合媒体查询调整内外边距

position 有那些值

  • absolute 绝对 相对于根元素定位 如果父级有relative 则相对于父级定位
  • reative 相对 相对于当位置进行定位
  • fixed 固定 相对于自身进行定位

z-index 在什么时候生效

  • 堆叠的盒子的时候 absolute和flxed

解决图片与文本之间的留白

  • 将图片设置伪diaplay:block
  • 将div line-height设置的足够小

子元素设置maegin-top父元素跟着移动如何解决

  • 伪元素
父元素::before{
            display: table;
            content: "";
        }
  • 给父元素一个overflow:hidden

box-shadow的参数

  • 水平阴影x 垂直阴影y 模糊半径 阴影尺寸 阴影颜色
  • box-shadow: 3 4 10 3 red

table 合并

  • rowspan 跨行
  • colspan 跨列

css常见的几种布局

  • table布局
  • 盒模型布局
  • 浮动布局
  • flex布局
  • 自适应布局

css3新特性

  • 圆角 radius
  • 阴影 shadow
  • 线性渐变 gradient
  • 变换 tarsform
  • rgba
  • 图片边框
  • 媒体查询
  • 为元素 ::

css 选择器的权重

css选择器权重
标签选择器1
类选择器10
id选择器100
内联样式1000
为元素1
伪类10

a标签的四个状态以及放置他们的顺序

  • link visited hover active

页面重构怎么操作

  • 编写css 让页面更加合理化 提高用户体验

content属性

  • content与:before和:after配合使用 用来插入生成内容

css中自适应的单位有哪些

  • % vw(相对于视口宽度单位) vh rem em

animation 和 tranition

  • 同 功能相同都是通过改变元素的属性值来实现动画效果
  • 异 transition 在两个属性之间平滑过渡实现动画效果因此不能实现复杂的动画 animtion 设置多个关键帧 定义每一个关键帧的属性因此可以实现复杂的动画

谈一谈对sass的理解

  • sass可以使用变量 计算的方式减少代码 sass是预处理器 能够使用嵌套语法 实现代码复用 有循环 有继承

模板字符串有什么有点

  • 可以镶嵌变量 标签 文字 不受回车空格的影响

箭头函数和普通函数的区别

  1. 外形不同
  2. 箭头函数是匿名函数
  3. 没有自己的this指向
  4. 不能new 作为构造函数
  5. 没有object.prototype属性

get和post的区别

  • get ‘get重点在服务器上获取资源 post重点在向服务器发送数据
  • get 是通过地址栏传参以?=value 多数据使用&连接 post将字段封存在请求中发送给服务器 这个过程是不可见的
  • get传输数据小受url影响 post可以传输大量数据
  • get是不安全的post比get安全性高

url

  • 路径

什么是跨域 如何解决跨域

  • 一个域名组成 协议 子域名 主域名 端口号 请求的资源
  • 跨域 由于js的同源策略 浏览器不能执行其他网站的脚本 所谓同源是指 协议 域名 端口一致
  • 解决跨域 jsop script标签 cors 跨资源共享

什么是jsonp 原理

  • json你是一种格式 基于文本优于轻量
  • jsonp jsonp重要的一点是允许用户传递一个callback函数核心是动态添加标签 调用其他网站的脚本

原型 原型链

  1. 每一个js对象都有一个原型对象
  2. 原型链 由于原型本身也是一个对象 他也有自己的原型 而他自己的原型也有自己的原型这样就形成了一个链这个链就叫做原型链
  3. --proto-- prototype 在js创建对象的时候 都有一个--proto--的属性 用于指向构造函数的原型对象prototype 我们把这个由--proto--属性串联起来直到object.prototype.--proto--为空的时候 叫做原型链

call aplay bind 区别

  • bind 调用后不会直接执行 而是返回一个改变上下文的函数副本
  • call和apply是直接执行
  • call传参是数字 apply传参是数组

状态码

  • 1xx 信息类 表示收到web浏览器请求 处理中
  • 2XX 成功 正确接受 理解和处理
  • 200 成功 并返回数据
  • 3XX 重定向 表示没有成功
  • 4XX 客户端错误
  • 400 请求地址无效
  • 404 找不到页面
  • 403 拒绝访问
  • 5XX 服务器出错

ajax是什么 如何创建一个原生的ajax

  • 异步传输+js+xml ajax是一种无需加载整个页面的情况下 能够跟新部分网页的技术
  • 创建一个ajax
(1) 创建xmlhttprequset对象 var xhr  =new XMLhttpRequset()
(2) 与服务器建立连接 open(请求方式 get,地址 url)
(3)发送http请求 xhr.send()
(4)响应 xhr.onreadystatechage  = function(){}
  • 模仿一个接口
//easy-mock模拟一个get接口
var url = "https://www.easy-mock.com/mock/5bad8210a1b7f6239a61664f/pcTest";
//新建一个HTTP请求
var xhr = new XMLHttpRequest();
xhr.open("get",url);
xhr.send();//发送请求
xhr.onreadystatechange = function(){
//当请求成功时
    if(xhr.readyState === 4 && xhr.status == 200){
        var reponse = xhr.responseText;
        //JSON.parse()将字符串转为json对象
        var name = JSON.parse(reponse).data.name;
        console.log(name)
    }
}
  • readystate存有xhlhttprequset状态
  • 0: 请求初始化
  • 1:服务器连接已建立
  • 2:请求已接受
  • 3:请求处理中
  • 4:请求已完成 且响应已就绪

http请求和响应组成

  • http请求格式 请求行 由请求方法字段 url字段和http协议字段三个字段组成
  • http请求响应 状态码 数字和文字组成 显示成功还是失败 响应头 包含服务器来行 日期时间内容类型长度等响应体

同步异步是什么

  • 同步 客户端在等服务器相应的过程中不做任何事情
  • 异步 客户端发起请求 在服务器响应的过程中 可以进行其他操作

任务队列 js执行机制

  • js执行机制是从上到下执行 单线程 执行前一个任务下一个任务需要等待 但出现了延迟执行的任务 会跳过 延迟任务进入任务队列 等到主线程执行完之后在执行任务队列里的代码 因此产生了同步 异步

使用let声明变量会使变量提前吗

  • 不会 在js中存在这样一种机制 在程序执行前会将var声明的变量和function声明的函数 回到作用域的最顶端

document.write和innerHtml的区别

  • document.wirte 重写整个页面
  • innerHTML 只会重写所属元素的内容

浏览器缓存机制

  • 浏览器缓存分为两种 强缓存和协商缓存
  • 强缓存在规定时间内 不询问浏览器强制使用浏览器缓存

let const var 的区别

  • const定义常量 不可以修改 必须初始化
  • var 定义变脸可修改 可以重复声明 不初始化输出undefined 不会报错
  • let 是块级作用域 函数内部使用let定义后对函数外面没有影响

jq中ajax传参

$.ajax({
    url:"地址",
    type:"POST" //发送方式
    dataType: "jsonp"//解析方式
    success:function(res){
            var  subjects = res.subjects;
    }
})

js中this怎么理解

  • 方法中 谁调用方法指向谁
  • 事件中 指向当前对象
  • 构造函数中指向实例化对象
  • 普通函数 this指向window
  • 定时器本身就是window的方法

promise原理以及如何使用promise

  • promise 能够把异步代码转化为同步代码解决回调地狱 把复杂的异步回调模块化
  • promise是一个构造函数 创建一个实例 在其自带的resolve,reject方法注入代码中
  • 传统异步代码不会有返回值不会抛出异常promise 会抛出异常直到冒泡被捕获

es6 有哪些新特性

  • let 和 const
  • 解构赋值 ...
  • 箭头函数
  • class 类
  • promise tent
  • 模板字符串
  • 导入导出 import exports

深拷贝和浅拷贝的区别

  • 基本类型 名值存储在栈内存中
  • 引用数据类型 名存在栈中 值存在堆中 栈会提供一个引用地址指向堆中
  • 浅拷贝 两个变量还是指向同一个地址 修改其中一个值 另一个值也会改变
var obj = {
            name: "li",
        }
        var xu = obj;
        xu.name = "xu";
        console.log(obj, xu);
  • 深拷贝 将对象值复制 给其新的变量 俩个对象修改其中一个另一个不会改变
        var an = { ...obj };
        an.name = "an";
        console.log(obj, an);

回调函数

  • 函数的参数是另一个函数
  • 回调地狱 回调函数是异步的 每一层的回调函数都要依赖于上一个函数执行完之后 所以形成了回调地狱

定时器的区别

  • settimeout 在指定的时间后执行一次
  • setinterval 以致电给时间为周期循环执行

dom加载顺序

  • 解析HTML结构 加载外部脚本和样式表文件 解析执行脚本 加载图片 外部文件 页面加载完毕

form表单里发送action的请求

  • action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.

什么是路由

  • 路由是根据不同的url显示不同的页面
  • 安装相应的模块 配置router.js
name
path
component:指定路由使用的组件
{
  path: '/detail/:id',
  name: 'detail',
  component: () => import('./views/Detail.vue')
}
  • 实现路由之间的切换和跳转 直接使用标签 <router-link to="/about">about</router-link>
定义事件
  handleClick(){
    this.$router.push('/about');
  }

js中判断数据类型的方法

  • 判断基本数据类型 typeof
  • 基本数据类型: number string boolean undefined null
  • 判断引用数据类型 instantof
  • 引用数据类型:array object function

输出为false的类型

  • ""
  • 0
  • null
  • undefined
  • false
  • nan

js创建对象的方法

  • 字面量 缺点只能创建一次 复用性较差
  • 构造函数
  • 通过object
 var person = new Object();
 person.name = "li";
 person.age = 21;
 person.Introduce = function () {
         alert("My name is " + this.name + ".I'm " + this.age);
     };
 person.Introduce();

window.onLoad与document.ready的区别

  • document.ready(不包含图片等非文字媒体文件) 快 在jq中使用
  • window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。

面向对象的三大特性

  • 多态 封装 继承
  • 面向对象是一种开发思想 根据传入的参数不同决定调用那种函数

js语言特性

  • 闭包性 代码执行的异步性 回调函数实现同步和异步 同步和异步 阻塞和非阻塞

new一个对象的时候发生了什么

  • 实例化一个对象
  • 调用构造函数 将构造函数的this指向该实例化对象
  • 新对象共享函数基本方法和属性
  • 返回新对象

js 内置对象以及函数

  1. 数据封装类对象
  • string()
  • number()
  • boolean()
  • array()
  • function()
  • object()
  • data()
  • math()
  • arguments()
  • error()
  1. 内置方法
  • alert()
  • eval()
  • parseln()
  • prompt
  1. 数组arr的方法

事件的冒泡与捕获

  • 当一个子元素的时间被触发的时候 该事件会从事件源开始逐级向上传播 触发父级的点击事件
  • 事件从最外层开始发生 知道具体的元素 addEventListener true捕获 false冒泡

事件委托

  • 利用dom事件捕获前阶段 把具体dom上发生的事情 委托给更大范围的dom去处理 给父元素一个事件所有子元素都能够使用该事件叫做事件委托

js 增删改查

  1. 创建
  • createElement()创建具体元素
  • createTextNode 创建一个文本节点
  1. 添加 移除 替换 插入
  • appendchild 添加
  • removechild 移除
  • replacechild 替换
  • inserBefore 插入
  1. 查找
  • getElementsByTagName() //通过标签名称   - getElementsByName() //通过元素的Name属性的值   - getElementById() //通过元素Id,唯一性

变量作用域

  • 变量有效的范围 与变量定义的位置密切相关 作用域从空间角度描述变量,可理解为变量的可用范围 按照作用域的不同,变量可分为局部变量和全局变量

dom事件流

  • 自上而下的捕获
  • 作用域在最深处的目标阶段
  • 自上而下的冒泡

清除事件冒泡 与 事件默认行为

  • 给目标函数一个event对象
  • event.stopPropagation 阻止冒泡
  • event.preventDefault 阻止默认行为

js数据类型以及区别

  • 基本数据类型 值不可变 比较是值比较 变量放在栈区
  • 引用数据类型 值可变 比较是值和地址比较
  • 值放在栈区 址放在堆区

js是什么

  • 客户端和服务端的脚本语言 是面向对象的编程语言

hasOwnProperty

  • obj.hasOwnProperty(key) //obj为对象 key为所要判断的字符串 判断一个对象属性里是否包含某个key,key为字符串, 此方法不会去判断原型

es5 es6 实例化对象

  • var 创建 函数对象
  • class 创建

闭包

  • 一个闭包就是当一个函数返回时,一个没有释放资源的栈区 JS允许使用内部函数——即函数定义和函数表达式位于另一个函数的函数体内 这些内部函数可以使用所在外部函数中声明的所有局部变量、参数和声明的其他内部函数 当内部函数在包含它的外部函数之外被调用时就形成闭包

break和contiune的区别

  • break从当前循环跳出
  • contiune 跳出本次循环 进入下一次循环

如何让所有浏览器都支持es6

  • 使用webpack 编译成es5

cookie localstorage seessionstorage

  • 相同 都是浏览器存储数据的
  • 存储大小 cookie 4kb 一般后台用的比较多 locakstorage和sessionstorage 5-20mb 一个永久存储 一个关闭页面清除 安全性比较高

css动画和js动画区别

  • 解析过程js性能没有css好
  • js能实现暂停 播放 清除
  • js相对复杂

谈谈你对模块化的理解

  • 方便 模块化开发是一种思想 他把复杂的页面变得简单化

谈一谈你对前端工程师的理解

  • 最贴近用户的程序员
  • 实现页面交互
  • 能解决适配器问题
  • 进行优化 提高用户体验