先从我们最熟悉的html+css开始

1、请简述css盒子模型

一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）
默认情况下，盒子的width和height属性只是设置content（内容）的宽和高
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框直接上图！！！！

2、视频/音频标签的使用

3、HTML5新增的内容有哪些

新增语义化标签新增表单类型表单元素表单属性表单事件多媒体标签

4、Html5 新增的语义化标签有哪些

提升可访问性 2.seo 3.结构清晰，利于维护
Header页面头部
main页面主要内
footer页面底部
Nav导航栏
aside侧边栏
article加载页面一块独立内容
Section相当于div
figure加载独立内容（上图下字） figcaption figure的标题
Hgroup标题组合标签
mark高亮显示
dialog 加载对话框标签（必须配合open属性）
Embed加载插件的标签
video加载视频
audio加载音频（支持格式ogg，mp3，wav）

5、Css3新增的特性

边框： border-radius添加圆角边框
border-shadow：给框添加阴影（水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr（内/外部阴影））
border-image：设置边框图像
border-image-source 边框图片的路径
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺（repeat平铺 round铺满 stretch 拉伸）

背景： Background-size 背景图片尺寸
Background-origin规定background-position属性相对于什么位置定位
Background-clip 规定背景的绘制区域（padding-box，border-box，content-box）

渐变： Linear-gradient（）线性渐变
Radial-gradient（）径向渐变

文本效果： Word-break：定义如何换行
Word-wrap：允许长的内容可以自动换行
Text-overflow：指定当文本溢出包含它的元素，应该干啥
Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）

转换： Transform 应用于2D3D转换，可以将元素旋转，缩放，移动，倾斜
Transform-origin 可以更改元素转换的位置，（改变xyz轴）
Transform-style 指定嵌套元素怎么样在三位空间中呈现

2D转换方法：rotate旋转 translate（x，y）指定元素在二维空间的位移 scale（n）定义缩放转换

3D转换方法：Perspective（n）为3D转换 translate rotate scale

过渡：Transition-property过渡属性名
Transition-duration 完成过渡效果需要花费的时间
Transition-timing-function 指定切换效果的速度
Transition-delay 指定什么时候开始切换效果

动画：animation
Animation-name 为@keyframes动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画

6、清除浮动的方式有哪些？请说出各自的优点

高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。
清除浮动方式1：给父元素单独定义高度
优点：快速简单，代码少缺点：无法进行响应式布局
清除浮动方式2：父级定义overflow：hidden；zoom：1（针对ie6的兼容）
优点：简单快速、代码少，兼容性较高缺点：超出部分被隐藏，布局时要注意
清除浮动方式3：在浮动元素后面加一个空标签，clear：both；height：0；
overflow：hidden
优点：简单快速、代码少，兼容性较高。
缺点：增加空标签，不利于页面优化
清除浮动方式4：父级定义overflow：auto
优点：简单，代码少，兼容性好
缺点：内部宽高超过父级div时，会出现滚动条
清除浮动方式5：万能清除法：
给塌陷的元素添加伪对象
.father：after{
Content：“随便写”；
Clear：both；
display：block；
Height：0；
Overflow：hidden；
Visibility：hidden
}
优点：写法固定，兼容性高缺点：代码多

7、子元素如何在父元素中居中

水平居中：
1.子父元素宽度固定，子元素设置margin：auto，并且子元素不能设置浮动，否则居中失效
2.子父元素宽度固定，父元素设置text-align：center，子元素设置display：inline-block，并且子元素不能设置浮动，否则居中失效

水平垂直居中：（有时候面试官会问哈！！踩坑）
1.子元素相对于父元素绝对定位，子元素top，left设置50%，子元素margin-top和margin-left减去各自宽高的一半
2.子元素相对于父元素绝对定位，子元素上下左右全为0，然后设置子元素margin：auto
3.父元素设置display：table-cell vertical-align：middle，子元素设置margin：auto(多行文本垂直居中）
4.子元素相对父元素绝对定位，子元素top，left值为50%，transform：translate（-50%，-50%）
5.父元素设置弹性盒子，
display：flex； justfy-content：center ；align-item：center；

8、定位的属性值有何区别

Position有四个属性值：relative absolute fixed static sticy
Relative相对定位不脱离文档流，相对于自身定位
Absolute 绝对定位，脱离文档流相对于父级定位
Fixed 固定定位，脱离文档流，相对于浏览器窗口定位
sticy粘性定位，常做吸顶使用
Static 默认值，元素出现在正常的流中

9、如何让chrome浏览器显示小于12px的文字?

本来添加谷歌私有属性 -webkit-text-size-adjust：none，现在-webkit-transform：scale（）css中一个缩放的功能

10、Css选择器有哪些，那些属性可以继承，优先级如何计算？Css3新增的伪类有哪些？

Css2选择器：元素选择器，id选择器，群组选择器，类选择器，*通配符选择器，后代选择器
Css2伪类选择器：a:link/visited/hover/active
Css3选择器：空格 > +相邻兄弟选择器 ~通用选择器（查找后面所有）

结构伪类选择器：
查找第几个nth-child（n）
查找同一类型第几个nth-of-type
查找唯一类型 only-of-type

属性选择器：根据标签属性查找 [attr=value]: root 查找根元素html标签; empty 查赵空标签

目标伪类选择器：（表单）
：enabled 查找可以使用的标签
：disabled 查找禁止使用的标签
：checked 查找被选中的标签

伪元素选择器：：selection设置选中文本内容的高亮显示（只能用于背景色和文本颜色）
否定伪类选择器 not（）
语言伪类选择器 lang（取值）
优先级（权重）：
元素选择器1
伪元素选择器1
class选择器10
伪类选择器10
属性选择器10
Id选择器100
内联样式的权重1000
包含选择器权重为权重之和
继承样式权重为0

那些属性可以继承：
Css继承特性主要是文本方面
所有元素可继承：visibility和cursor
块级元素可继承：text-indent和text-align
列表元素可继承：list-style，list-style-type，list-style-position，list-style-imag
内联元素可继承：letter-spacing，word-spacing，line-height，color，font，font-family，font-size
Font-style，font-variant，font-weight，text-decoration，text-transform，direction
字母间距段落间距行高字体颜色字体种类字体大小字体样式字体粗细小型大写字母文本文本修饰转换不同元素中的文本文本方向

11、行内元素/块级元素有哪些？

行内元素：相邻的行内元素会排列在同一行，不会独占一行设置宽高无效 span
块级元素：会独占一行可以设置宽高等属性div
可变元素：根据上下文预警决定该元素为块元素还是内联元素
块级元素：div h1-h6 hr p ul ol table address blockquote dir from menu
行内元素：a br I em img input select span sub sup u textarea
可变元素：button del iframe ins

12、Px，rem，em的区别

px 实际上就是像素，用PX设置字体大小时，比较稳定和精确。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em的值并不是固定的；
em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，相对的是HTML根元素。

Javascript相关

13、Js基本数据类型有哪些和判断的方法

1.typeof
这个方法很常见，一般用来判断基本数据类型，如：string，number，boolean，symbol，bigint（es10新增一种基本数据类型bigint），undefined等。
typeof 目前能返回string，number，boolean，symbol，bigint，unfined，object，function这八种判断类型
2.instanceof
一般用来判断引用数据类型的判断，如：Object，Function，Array，Date，RegExp等
3.Object.prototype.toString（这个是判断类型最准的方法）

14、如何判断一个数据是NaN

NaN 非数字但是用typeof检测是number类型
利用NaN的定义用typeof判断是否为number类型并且判断是否满足isNaN
利用NaN是唯一一个不等于任何自身的特点 n！n
利用ES6中提供的Object.is()方法（判断两个值是否相等） nnan

15、Js中null与undefined区别

相同点：用if判断时，两者都会被转换成false
不同点：number转换的值不同 number（null）为0 number（undefined）为NaN
Null表示一个值被定义了，但是这个值是空值
Undefined 变量声明但未赋值

16、闭包是什么？使用闭包会造成什么影响

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

特点：
1.函数嵌套函数。
2.函数内部可以引用外部的参数和变量。
3.参数和变量不会被垃圾回收机制回收。
使用：
1.读取函数内部的变量；
2.这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。
优点：
1:变量长期驻扎在内存中；
2:避免全局变量的污染；
3:私有成员的存在；
缺点：会造成内存泄露

17、什么是事件冒泡？

一个事件触发后，会在子元素和父元素之间传播，这种传播分为三个阶段，
捕获阶段（从window对象传导到目标节点（从外到里），这个阶段不会响应任何事件），目标阶段，（在目标节点上触发），冒泡阶段（从目标节点传导回window对象（从里到外）），事件委托/事件代理就是利用事件冒泡的机制把里层需要响应的事件绑定到外层

18、事件委托是什么？如何确定事件源（Event.target 谁调用谁就是事件源）

JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。
事件委托，称事件代理，是js中很常用的绑定事件的技巧，事件委托就是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务，事件委托的原理是DOM元素的事件冒泡

19、localStorage和sessionStorage 与cookie的区别

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
Cookie一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效，4K左右
localStorage除非被清除，否则永久保存，一般为5MB
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除

20、ES6新特性

const和let、模板字符串、箭头函数、函数的参数默认值、对象和数组解构、for…of 和 for…in、ES6中的类

21、Let与var与const的区别

Var声明的变量会挂载在window上，而let和const声明的变量不会
Var声明的变量存在变量提升，let和const不存在变量提升
同一作用域下var可以声明同名变量，let和const、不可以
Let和const声明会形成块级作用域
Let暂存死区
Const一旦声明必须赋值，不能用null占位，声明后不能再修改，如果声明的是复合类型数据，可以修改属性

22、数组方法有哪些请简述

面向对象是一种思想，是基于面向过程而言的，就是说面向对象是将功能等通过对象来实现，将功能封装进对象之中，让对象去实现具体的细节；这种思想是将数据作为第一位，这是对数据一种优化，操作起来更加的方便，简化了过程。

Js本身是没有class类型的，但是每个函数都有一个prototype属性，prototype指向一个对象，当函数作为构造函数时，prototype就起到类似于class的作用

面向对象有三个特点：封装（隐藏对象的属性和实现细节，对外提供公共访问方式），

继承（提高代码复用性，继承是多态的前提），多态（是父类或接口定义的引用变量可以指向子类或具体实现类的实例对象）

23、数组方法有哪些请简述

push() 从后面添加元素，返回值为添加完后的数组的长度
arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素
arr.shift() 从前面删除元素，只能删除一个返回值是删除的元素
arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素
arr.concat() 连接两个数组返回值为连接后的新数组
str.split() 将字符串转化为数组
数组转换拼接成字符串join（char）
arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的
arr.reverse() 将数组反转,返回值是反转后的数组
arr.slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组
arr.forEach(callback) 遍历数组,无return 即使有return，也不会返回任何值，并且会影响原来的数组
arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组。
arr.filter(callback) 过滤数组，返回一个满足要求的数组

24、请简述原型/原型链/（原型）继承

什么是原型：
任何对象实例都有一个原型，也叫原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的prototype指向的对象，即任何对象都是由一个构造函数创建的，但是不是每一个对象都有prototype，只有方法才有prototype。
什么是原型链？
原型链基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。我们知道，每个构造函数都有一个原型对象，每个原型对象都有一个指向构造函数的指针，而实例又包涵一个指向原型对象的内部指针。
原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就一层层的扒出创建对象的构造函数，直至到Object时，就没有_proto_指向了。
因为_proto_实质找的是prototype，所以我们只要找这个链条上的构造函数的prototype。其中Object.prototype是没有_proto_属性的，它==null。

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含指向原型对象内部的指针。我们让原型对象（1）等于另一个原型对象的实例（2）,
此时原型对象（2）将包含一个指向原型对象（1）的指针，
再让原型对象（2）的实例等于原型对象（3），如此层层递进就构成了实例和原型的链条，这就是原型链的概念

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数想指针(constructor)，而实例对象都包含一个指向原型对象的内部指针(proto)。如果让原型对象等于另一个原型对象的实例，此时的原型对象将包含一个指向另一个原型的指针(proto)，另一个原型也包含着一个指向另一个构造函数的指针(constructor)。假如另一个原型又是另一个类型的实例……这就构成了实例与原型的链条。也叫原型链
原型继承是js的一种继承方式，原型链作为实现继承的主要方法,其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法,
原型继承：利用原型中的成员可以被和其相关的对象共享这一特性，可以实现继承，这种实现继承的方式，就叫做原型继承.

25、Promise的理解

一、什么是Promise？我们用Promise来解决什么问题？
我们都知道，Promise是承诺的意思，承诺它过一段时间会给你一个结果。
Promise 是一种解决异步编程的方案，相比回调函数和事件更合理和更强大。
从语法上讲，promise是一个对象，从它可以获取异步操作的消息；
二、promise有三种状态：pending 初始状态也叫等待状态，fulfiled成功状态，rejected失败状态；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。
三、Promise的两个特点
1、Promise对象的状态不受外界影响
2、Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，
四、Promise的三个缺点
1）无法取消Promise,一旦新建它就会立即执行，无法中途取消
2）如果不设置回调函数，Promise内部抛出的错误，不会反映到外部
3）当处于pending（等待）状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成
1.回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象
2.promise可以支持多并发的请求，获取并发请求中的数据
这个promise可以解决异步的问题，本身不能说promise是异步的
Async就是generation和promise的语法糖，async就是将generator的*换成async，将yiled换成await
函数前必须加一个async，异步操作方法前加一个await关键字，意思就是等一下，执行完了再继续走，注意：await只能在async函数中运行，否则会报错
Promise如果返回的是一个错误的结果，如果没有做异常处理，就会报错，所以用try…catch捕获一下异常就可以了

26、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，然后服务器响应并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源
4.此时，Web 服务器提供资源服务，客户端开始下载资源。
通俗的讲：解析你的dns，返回响应的数据，服务器解析数据，客服端显示数据。

27、Css预处理sass less是什么？为什么使用他们

Sass和less都是css预处理器，是css上的一种抽象层，是一种特殊的语法，最终会编译成css，less是一种动态样式语言，给css赋予了动态语言的特性，比如：变量，继承，嵌套。Less既可以在客户端运行，在可以在服务端运行（需要借助node）less会有一些版本的影响而sass没有一班大厂会更倾向于less

28、This指向

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是，指向该函数所属的对象。
全局的this → 指向的是Window
对象中的this → 指向其本身
事件中this → 指向事件对象

29、请输出三种减少页面加载时间的方式

优化图片
图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
优化CSS（压缩合并css，如 margin-top, margin-left…)
网址后加斜杠（如www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。） cdn托管
标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了）
减少http请求（合并文件，合并图片）

30、为什么会造成跨域/请简述同源策略

在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。在请求的过程中我们要想回去数据一般都是post/get请求，所以…跨域问题出现

跨域问题来源于JavaScript的同源策略，即只有协议+主机名+端口号(如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。

同源策略是由NetScape提出的一个著名的安全策略。所谓的同源，指的是协议，域名，端口相同。浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。

31、foreEach与map循环有什么区别

orEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。
相同点：
1.都是循环遍历数组中的每一项
2.forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）
3.匿名函数中的this都是指向window
4.只能遍历数组
不同点：
1.forEach()没有返回值。
2.map() 有返回值，可以return 出来。

32、什么是进程，什么是线程

进程是：一个程序的运行到结束就是一个进程，运行的过程中有多个持续的或者断断续续的片段组成，这就是线程，一个进程包含多个线程。Js是单线程。

33、什么是微任务，什么是宏任务？

宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。
script、setTimeOut、setInterval、setImmediate
微任务：当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。 promise.then,process.nextTick、Object.observe、MutationObserver
宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。
异步任务分为宏任务和微任务，先执行微任务再执行宏任务

34、什么是防抖，什么是节流

答：防抖：在一定的时间内再次触发此事件,会清空上次的事件重新开始
节流：在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次出发（手机验证码短信）
防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的情况会每隔一定时间（参数wait）调用函数。

以上都是自己平时积累整合的一些只是和面试的题目对于vue和react的会只持续更新最新的知识和面试题目供大家参考早日拿到合意的offer！！！

大前端面试题总结（html+css+js）相关推荐

前端面试题汇总（css基础篇）
前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需要显示的背景图案. ...
2023年最全前端面试题考点HTML5+CSS3+JS
合集:2023年最全前端面试题考点HTML5+CSS3+JS+Vue3+React18+八股文+手写+项目+笔试_参宿7的博客-CSDN博客本章内容为一面基础面为了简洁,相关文章参考链接在标题里 ...
前端攻城狮学习笔记七：常见前端面试题之HTML/CSS部分（二）
前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面"内容是什么"的问题. 2.表示层:由 ...
前端面试题（HTML、JS、Vue、React、小程序）
前端面试题 HTML && CSS HTML 1.Div 里面有个一个div ***** Q:有几种方法可以水平,垂直居中 2.doctype的作用 * 3.link标签和import ...
前端面试题全集(html+CSS)
文章目录 HTML Doctype 作用?标准模式与兼容模式各有什么区别? HTML5 为什么只需要写 ``? 行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 页面导入样式时,使用 li ...
前端面试题及答案---CSS篇
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取. CSS伪类与伪元素区别伪类(pseudo-classes) 其核心就是用来选择DOM树之外的信息,不能够被 ...
前端面试题 HTML、CSS、JS、Vue、Es6
第一部分 HTML&CSS整理答案什么是HTML5? 答:HTML5是最新的HTML标准. 注意:讲述HTML5推出的设计目的,以及现在市场的使用情况,浏览器支持情况等.... 设计目的 H ...
前端面试题整理（vue/js/css）
什么是盒子模型把所有的网页元素都看成一个盒子,它具有content,padding,border,margin 四个属性,这就是盒子模型盒子模型有两种形式:标准盒子模型,怪异盒子模型标准模式,总 ...
前端面试题总结(HTML+CSS部分)
一.HTML和CSS 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2.每个 HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 3.Quirks 模式是什么 ...
前端面试题之html css篇
文章目录 1.什么是盒模型 2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么区别? 3.简述src和href的区别 4.什么是css Hack 5.什么叫优雅降 ...

大前端面试题总结（html+css+js）