前端面试常见问题整理（html+css+js篇）

最新推荐文章于 2024-08-09 18:20:18 发布

白执落

最新推荐文章于 2024-08-09 18:20:18 发布

阅读量507

点赞数

分类专栏：前端面试文章标签：前端

本文链接：https://blog.csdn.net/qq_39331257/article/details/103273980

版权

前端面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端面试题

HTML

对 WEB 标准以及 W3C 的理解与认识
- Web 标准由万维网联盟（W3C）组织制定的，它不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构层（html）、表现层（css）和行为层（js），web 标准一般是将该三部分独立分开，使其更具有模块化。
- W3C 代码规范：
1. 结构要求：标签字母要小写，标签要闭合，标签不允许随意嵌套
2. 对于 css 和 js：
  - (1) 尽量使用外链 css 样式表和 js 脚本。提高页面渲染速度和用户体验
  - (2) 样式尽量少用行间样式表，使结构与表现分离，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
  - (3) 不需要变动页面内容，提高网站易用性
xhtml 和 html 有什么区别
- HTML 是一种基本的 WEB 网页设计语言
- XHTML 是一个基于 XML 的置标语言
- 最主要的不同，XHTML 更为严格
  - XHTML 元素必须被正确地嵌套；
  - XHTML 元素必须被关闭；
  - 标签名必须用小写字母；
  - XHTML 文档必须拥有根元素。
什么是语义化的 HTML?
- 直观的认识标签，对于搜索引擎的抓取有好处
你如何理解 HTML 结构的语义化？
- 语义化的 HTML 是最新的 HTML5 提出的理论，也就是通过一些有具体含义的标签来代替之前用 class 名或者 ID 来赋予意义的标签。如用<nav></nav>替代<div id="nav"></div>一眼就知道里面要写的就是导航菜单
Doctype 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
- 区别：严格模式是浏览器根据规范去显示页面；混杂模式是以一种向后兼容的方式去显示
- 意义：决定浏览器如何渲染网站（浏览器使用那种规范去解析网页）
- 触发：浏览器根据 doctype 是否存在和使用的是那种 DTD(文档类型定义)来决定。
说说 HTML 中<title>和<h1>、<b>和<strong>各有哪些不同?
- 主要区别是语义不同
- <title>针对浏览器，<h1>表示页面内容标题，搜索引擎更重视<h1>
- <b>仅表示视觉上加粗，<strong>表示语气强调+样式加粗
  - 读屏软件阅读文字时会对<strong>加强语气, 而会忽略<b>;
  - 搜索引擎亦会加大<strong>内容的权重
img 标签上 title 与 alt 属性的区别是什么?
- alt 属性是替换文本，图片不能正常显示时用 alt 中的文本替代
- title 属性是用于提供信息，当鼠标放在图片上时显示的信息
<strong>与<em>的异同
- strong:粗体强调标签，强调，表示内容的重要性
- em:斜体强调标签，更强烈强调，表示内容的强调点
简述一下 src 与 href 的区别
- src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
- src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
- href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。
iframe 有那些缺点

iframe 会阻塞主页面的 onload 事件；
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript
动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。

知道的网页制作会用到的图片格式有哪些

png-8，png-24，jpeg，gif，svg，Webp(面试官希望听到,谷歌 google 开发的一种旨在加快图片加载速度的图片格式,在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%)

CSS

css 的基本语句构成

选择器{属性 1:值 1;属性 2:值 2;……}

2.CSS 有哪些选择器？
标签/HTML 选择器（用 HTML 标签申明）
id 选择器（用 DOM 的 ID 申明）
类选择器（用一个样式类名申明）
属性选择器（用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，不知道就算了）
除了前 3 种基本选择器，还有一些扩展选择器，包括
- 后代选择器（利用空格间隔，比如 div .a{ }）
- 群组选择器（利用逗号间隔，比如 p,div,#a{ }）

弹性布局的理解？及其对应的 css 定义

容器会根据布局的需要，调整内容尺寸顺序来更好地填充可用空间。当容器尺寸变化时，其中内容也会动态调整。弹性盒布局是与方向无关的。
图例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SVq2yCnG-1574831710993)(./assets/flex.png)]

background-size 有哪四种值类型

图片宽和高
图片相对背景定位的百分比
图片缩放成完全覆盖背景定位区域的最小大小
图片缩放成适合覆盖背景定位区域的最小大小

有哪项方式可以对一个 DOM 设置它的 CSS 样式

/* 1.直接设置style属性 */
element.style.height = "100px";
/* 2.直接设置属性 */
element.setAttribute("height", "100px");
/* 3.使用setAttribute设置style属性 */
element.setAttribute("style", "height: 100px !important");
/* 4.使用setProperty设置属性，通过第三个参数设置important */
element.style.setProperty("height", "300px", "important");
/* 5.设置cssText */
element.style.cssText += "height: 100px !important";

CSS 引入的方式有哪些?

CSS 与 HTML 文档结合的 4 中方法：
1. 使用<link>元素链接到外部的样式文件
2. 在<head>元素中使用"style"元素来指定
3. 使用 CSS @import标记来导入样式表单
4. 在<body>内部的元素中使用style属性来定义样式

link和@import的区别是?

本质上，这两种方式都是为了加载 CSS 文件，但还是存在着细微的差别。
1. 老祖宗的差别。link 属于 XHTML 标签，而@import 完全是 CSS 提供的一种方式。link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS，定义 rel 连接属性等，@import 就只能加载 CSS 了。
2. 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link 引用的 CSS 会同时被加载，而@import 引用的 CSS 会等到页面全部被下载完再被加载。
3. 兼容性的差别。由于@import 是 CSS2.1 提出的所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。
4. 使用 dom 控制样式时的差别。当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。

CSS 引入的方式有哪些?
- 外部样式表，引入一个外部 css 文件
- 内部样式表，将 css 代码放在标签内部
- 内联样式，将 css 样式直接定义在 HTML 元素内部
行内元素有哪些？块级元素有哪些？空(void)元素有那些？
- 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
- 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
- 空元素：即系没有内容的 HTML 元素，例如：br、meta、hr、link、input、img
行内元素有哪些?块级元素有哪些?CSS 的盒模型?
- 块级元素：div p h1 h2 h3 h4 form ul
- 行内元素: a b br i span input select
- css 盒模型:内容，border，margin，padding
行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
- 块级元素(block)特性：
  - 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
  - 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
- 内联元素(inline)特性：
  - 和相邻的内联元素在同一行;
  - 宽度(width)、高度(height)、内边距和外边距的 top/bottom 都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的）。
盒子模型
- 盒子模型包括四部分：内容（content）、填充（padding）、边框（border）、边界（margin）
- 盒子模型可以分为两种：IE 盒子模型和 W3C 标准盒子模型
- 区别：两者对于 width 的计算方式不同，前者 width=border+padding+内容宽度，后者 width=内容宽度。
什么是盒子模型？
- 在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4 个部分一起构成了 css 中元素的盒模型。
CSS 的盒模型
- 网页设计中的每个元素都是长方形的盒子
- Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容。盒子本身的大小是这样计算的：
  - width(即 MSIE 中的 offsetWidth)：width + padding-left + padding-right + border-left + border-right
  - height(即 MSIE 中的 offsetHeight)：height + padding-top + padding-bottom + border-top + border-bottom
什么是外边距重叠？重叠的结果是什么？
- 外边距重叠就是 margin-collapse,在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
- 折叠结果遵循下列计算规则：
  - 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  - 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  - 两个外边距一正一负时，折叠结果是两者的相加的和。
position 包含几种属性？absolute 和 relative 的区别？
- static：默认状态、没有定位、正常流
- inherit：从父元素集成 position 属性的值
- fixed：生成绝对定位的元素（相对于浏览器窗口进行定位）
- absolute：生成绝对定位的元素（相位与 static 定位以外的第一个父元素定位）
- relative：生成相对定位的元素（相对于其正常位置定位）
- absolute 和 relative 区别：父元素的 padding 对 relative 的子元素布局有影响，absolute 的子元素不受影响
display:none 与 visibility:hidden 的区别是什么？
- display : 隐藏对应的元素但不挤占该元素原来的空间。
- visibility: 隐藏对应的元素并且挤占该元素原来的空间。
列出 display 的值，说明他们的作用？

block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。

CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？

最基本的：设置 display 属性为 none，或者设置 visibility 属性为 hidden
技巧性：设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000

CSS 选择符有哪些?

CSS 选择符主要有以下 10 类：
1. 通配选择符：*{margin:0px;}
2. 类型选择符：a{text-decoration:none;}
3. 属性选择符：input[type=“button”]{padding:5px;}
4. 包含选择符：div.code a{text-decoration:none;}
5. 子对象选择符：ul.test>li{font-size:14px;}
6. ID 选择符：#test {color:red;}
7. 类选择符：.test{color:red;}
8. 选择符分组：body,ul,li{margin:0px;}
9. 伪类及伪对象选择符：div:first-letter{font-size:16px;}、a.test:hover{text-decoration:underline;}
10. 相邻选择符：li+li{font-weight:bold;}

CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和 important 哪个优先级高?

标签选择符类选择符 id 选择符
Class，伪类 A 标签，列表 UL LI DL DD DT 可继承
Id>class>标签选择
important 优先级高于内联优先级

什么是 css Hack？ie6、ie7、ie8 的 hack 分别是什么？

针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。
background-color:red\9; /all ie/
background-color:yellow; /ie8/
+background-color:pink; /ie7/
_background-color:orange; /ie6/
:root #test { background-color:purple\9; } /ie9/

IE 浏览器 Hack 一般分为几种？

IE 浏览器 Hack 一般又分为三种，条件 Hack、属性级 Hack、选择符 Hack

条件 Hack

<!--[if IE]>
  <style>
    .test {
      color: red;
    }
  </style>
<![endif]-->

属性 Hack

.test{ color:#090\9; /* For IE8+ */ *color:#f00; /* For IE7 and earlier */
_color:#ff0; /* For IE6 and earlier */ }

选择符 Hack

* html .test{color:#090;} /* For IE6 and earlier */ * + html
.test{color:#ff0;}/* For IE7 */

css Hack

<!--[ifie6]--><![endif]-->_marging\\ie6+margin\\ie7marging: 0 auto \9 所有Ie
  Margin \0 \\IE8;

你知道哪些 CSS Hack 技巧？分别有什么用？

IE6：_属性名前缀
IE7：+属性名前缀
IE789: \9 后缀
IE7 以下：zoom:1；能解决不少页面错乱的问题；

优先级算法如何计算？

重要性和来源的优先级排序从低到高是：
1. 浏览器默认样式
2. 用户在浏览器中定义的普通样式（normal 规则，不带 important 规则）
3. 开发人员定义的普通样式（ normal 规则，不带 important 规则）
4. 开发人员定义特殊样式（带 important 规则）
5. 用户在浏览器中定义特殊样式（带 important 规则）

CSS 行内样式与 important 谁的优先级高？如果行内样式和外部样式同时定义了 important, 谁的优先级高？

important 优先级高于 important；如果行内样式和外部样式同时定义了 important，那么行内样式的 important 的优先级高；

float 布局有哪些缺点？是否有替代 float 的实现方案？如果有，请说说你的实现方法。

float 不能自由控制对齐方式和换行；需要强制清除浮动，否则后面的内容会错乱；替代 float 的方案主要用：给子元素display:inline-bolck;

清除浮动的几种方式，各自的优缺点
1. 使用空标签清除浮动 clear:both（理论上能清除任何标签，但增加无意义的标签）
2. 使用 overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,使用 zoom:1 用于兼容 IE）
3. 使用 afert 伪元素清除浮动(用于非 IE 浏览器)
如何垂直居中一个浮动元素？

/* 方法一：已知元素的高宽 */
#div1 {
  background-color: #6699ff;
  width: 200px;
  height: 200px;
  position: absolute; //父元素需要相对定位
  top: 50%;
  left: 50%;
  margin-top: -100px; //二分之一的height，width
  margin-left: -100px;
}
/* 方法二:未知元素的高宽 */
#div1 {
  width: 200px;
  height: 200px;
  background-color: #6699ff;
  margin: auto;
  position: absolute; //父元素需要相对定位
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
/* 垂直居中一个<img> */
#container /*<img>的容器设置如下 */
 {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

如何居中 div？如何居中一个浮动元素？

/* 居中div:给div设置一个宽度，然后添加margin:0 auto; */
div {
  width: 200px;
  margin: 0 auto;
}
/* 居中一个浮动元素 */
div {
  width: 500px;
  height: 500px;
  magin: -250px 0 0 -250px;
  position: relative;
  left: 50%;
  top: 50%;
}

写出几种 IE6 BUG 的解决方法
1. 双边距 BUG float 引起的使用 display
2. 像素问题使用 float 引起的使用 dislpay:inline -3px
3. 超链接 hover 点击后失效使用正确的书写顺序 link visited hover active
4. IE z-index 问题给父级添加 position:relative
5. Png 透明使用 js 代码改
6. Min-height 最小高度 !Important 解决’
7. select 在 ie6 下遮盖使用 iframe 嵌套
8. 不能定义 1px 左右的宽度容器(IE6 默认的行高造成的，使用 over:hidden;zoom:0.08;line-height:1px;)
9. IE6 不支持!important
超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不在具有 hover 和 active 了
解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link,visited,hover,active）

px 和 em 的区别

px 和 em 都是长度单位
px 的值是固定的，指定是多少就是多少，计算比较容易。
em 的值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px

div+css 的布局较 table 布局有什么优点？

改版的时候更方便只要改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height
水平方向：letter-spacing

在同一个 CSS 文件中定义的两个类.a{color:blue;} 和.b{color:red;},如果把它们同时应用到同一元素上，他们会怎么显示？为什么？

页面上怎么显示取决于在 css 文件中定义的先后位置，后定义的样式会覆盖前面定义的样式；所以：
- 1. 如果.b 在.a 后面，则.b 的 color 会覆盖.a, 显示为 red;
- 2. 如果.a 在.b 后面，则.a 的 color 会覆盖.b, 显示为 blue;

CSS 哪些属性可以继承?
1. 文字相关：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing
2. 列表相关：list-style-image、list-style-position、list-style-type、list-style
3. 颜色相关:color 4.透明度：opacity(opacity 的继承有问题，子元素会继承祖元素的 opacity，但是无法更改。)
Sass、LESS 是什么？大家为什么要使用他们？

CSS 预处理器,是 CSS 上的一种抽象层,他们是一种特殊的语法/语言编译成 CSS。
结构清晰，便于扩展。（可以方便地屏蔽浏览器私有语法差异。可以封装对浏览器语法差异的重复处理，减少无意义的机械劳动。可以轻松实现多重继承。）

描述一个“reset”的 CSS 文件并如何使用它。知道 Normalize.css 吗？你了解他们的不同之处？

重置样式非常多的 css 样式
不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。
Normalize.css 是一种 CSS reset 的替代方案。它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。
Normalize 没有重置所有的样式风格，他仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。

描述 css reset 的作用和用途

重置浏览器的 css 默认属性，浏览器的种类不同，样式不同，通过重置让他们统一

解释 css sprites（精灵图）如何使用

把一堆小的图片整合到一张大的图片上的好处有以下几点：
1. 减少了图片个数，这样减小了对服务器的请求。
2. 整个图片的变小了，使得图片下载速度更快。
3. 不用使用 javascript 代码，而是使用纯 CSS 就可以。

请用 Css 写一个简单的幻灯片效果页面

div .ani {
  width: 480px;
  height: 320px;
  margin: 50px auto;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 1);
  background-size: cover;
  background-position: center;
  -webkit-animation-name: "loops";
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
  0% {
    background: url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg)
      no-repeat;
  }
  25% {
    background: url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg)
      no-repeat;
  }
  50% {
    background: url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg)
      no-repeat;
  }
  75% {
    background: url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg)
      no-repeat;
  }
  100% {
    background: url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg)
      no-repeat;
  }
}

HTML5

HTML5 废弃了哪些 HTML4 标签？

Frame，frameset，noframe，applet，big，center，basefront

HTML5 和 CSS3 各有哪些新特性？

增加更多的语义化标签：
<header></header> <footer></footer><article></article><aside></aside><nav></nav><section></section>…
全新的<video/>标签，支持播放多种视频格式
增加 canvas API 接口，增加更多的 JS API 支持 web sokect

HTML5 标准提供了哪些新的 API？

HTML5 提供的应用程序 API 主要有：Media API，Text Track API，Application Cache API，User Interaction，Data Transfer API，Command API，Constraint Validation API，History API

HTML5 应用程序缓存和浏览器缓存有什么区别？

应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML、CSS、图片以及 JavaScript。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：

<!DOCTYPE html>
<html manifest="”example.appcache”"></html>

与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

HTML5 存储类型有什么区别？

HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。- HTML5 提供了下面两种本地存储方案：
- localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
- sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储

HTML5 有哪些新增的表单元素？

Datalist，datetime，output，keygen，date，month，week，time，color，number，range，email，url

HTML5 Canvas 元素有什么用？

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作

<canvas id="”canvas1″" width="”300″" height="”100″"></canvas>

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage 和 cookie 的区别：
- 区别是它是为了更大容量存储设计的。Cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了宽带，另外 cookie 还需要指定作用域，不可以跨域调用。
除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在，而 Web Storage 仅仅是为了在本地“存储”数据而生。

CSS3

CSS3 有哪些新特性?

圆角（border-radius:8px）
阴影（box-shadow:10px）
对文字加特效（text-shadow）
线性渐变（gradient）

旋转（transform）

 transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
 <!-- 旋转,缩放,定位,倾斜 -->

rgba()和 opacity 的透明效果有什么不同?

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

CSS3 中的 transform 属性和 transition 属性？

transform：使元素变形,配合 rotate（旋转角度）、scale（缩放倍数）、skew（扭曲元素）等参数一起使用
transition：设置元素由样式一变为样式二所需要的一些变化效果。语法：transition: property duration timing-function delay;

JavaScript

JavaScript 是一门什么样的语言，它有哪些特点？

一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。JavaScript 兼容于 ECMA 标准，因此也称为 ECMAScript。
Js 具有简单性，动态性，跨平台型，安全性。

document load 和 document ready 的区别

document.onload 是在结构和样式加载完才执行 js
document.ready 原生种没有这个方法，jquery 中有 $().ready(function)

"“和”="的不同

"=="会自动转换类型，比较的是数值
"==="比较的是数值类型和数值

javascript 的 typeof 返回哪些数据类型

Object（typeof null;//Object） number function boolean underfind

form 中的 input 有哪些类型？

text:文本框，password:密码框，radio:单选按钮，checkbox:复选框，file:文件选择域，hidden:隐藏域，button:按钮，reset:重置按钮，submit:表单提交按钮

javaScript 的 2 种变量范围有什么不同？

全局变量：当前页面内有效
局部变量：方法内有效

form 中的 input 可以设置为 readonly 和 disable，请问两者有什么区别?

readonly 不可编辑，但可以选择和复制；值可以传递到后台
disabled 不能编辑，不能复制，不能选择；值不可以传递到后台

js 中的 3 种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式什么？

Alert confirm prompt

列举 javaScript 的 3 种主要数据类型，2 种复合数据类型和 2 种特殊数据类型。

主要数据类型：string, boolean, number
复合数据类型：function, object

程序中捕获异常的方法

window.error
try{}catch(){}finally{}

浏览器的对象模型

Window：顶级对象
History：当用户浏览网页时，浏览器保存了一个最近所访问网页的 url 列表。这个列表就是用 history 对象表示。
Location：表示当前打开的窗口或框架的 URL 信息。
Navigator：表示浏览器的信息及 js 运行的环境
Screen：用于显示网页的显示器的大小和颜色

javascript 的常用对象有哪些?

String, Math, Date 和 Array 对象

innerHTML，innerText，outerHTML，innerText 的区别？

innerHTML 是符合 W3C 标准的属性，而 innerText、outerText、outerHTML 只适用于 IE 浏览器
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本

超链接的属性 target 的可选值：_blank, _parent, _self, _top 和框架名称有什么区别？

_blank 浏览器会另开一个新窗口显示链接
_self 在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。
_parent 将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self 参数一样。
_top 在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架

添加插入替换删除到某个接点的方法，怎样创建和查找节点？

obj.appendChild()
obj.innersetBefore insertBefore() //插入
obj.replaceChild
obj.removeChild
1. 创建新节点
- createDocumentFragment() //创建一个 DOM 片段
- createElement() //创建一个具体的元素
- createTextNode() //创建一个文本节点
1. 查找
- getElementsByTagName() //通过标签名称
- getElementsByName() //通过元素的 Name 属性的值
- getElementById() //通过元素 Id，唯一性

javascript 怎样选中一个 checkbox，怎样设置它无效？

document.all.cb1[0].disabled = true;

b 继承 a 的方法

  function A(name){
    this.name = name;
    this.sayHello = function(){
      alert(this.name+” say Hello!”);
    };
}
function B(name,id){
    this.temp = A;
    this.temp(name);        //相当于new A();
    delete this.temp;       
    this.id = id;   
    this.checkId = function(ID){
      alert(this.id==ID)
    };
}

split() join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

call、apply、bind 的区别

call 和 apply 这两个方法都可以改变一个函数的上下文对象，只是接受参数的方式不一样，调用时会直接触发函数。
- call 接收的是逗号分隔的参数。
- apply 接收的是参数列表。
bind 也可以改变函数的上下文对象，接收的是逗号分隔的参数，但是不会立刻触发函数，只会创建一个新的函数，在调用时设置 this 关键字为提供的值

javascript 中 callee 和 caller 的作用?

caller 是返回一个对函数的引用，该函数调用了当前函数；
callee 是返回正在被执行的 function 函数，也就是所指定的 function 对象的正文。

数组方法 pop() push() unshift() shift()

push()尾部添加 pop()尾部删除 unshift()头部添加 shift()头部删除

例举 3 种强制类型转换和 2 种隐式类型转换?

强制（parseInt,parseFloat,number）
隐式（== ===）

事件绑定和普通事件有什么区别

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。

JS 和 JAVA 的作用域有什么区别

java 是块级作用域，js 是函数作用域，没有块级作用域。

foo = foo||bar ，这行代码是什么意思？为什么要这样写？

 if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。

短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

JS 继承与原型问题

Js 所有的函数都有一个 prototype 属性，这个属性引用了一个对象，即原型对象，也简称原型。每一个对象都有原型，在浏览器中它体现在一个隐藏的 proto 属性上。当一个对象需要调用某个方法时，它回去最近的原型上查找该方法，如果没有找到，它会再次往下继续查找。这样逐级查找，一直找到了要找的方法。这些查找的原型构成了该对象的原型链条。原型最后指向的是 null。我们说的原型继承，就是将父对像的方法给子类的原型。子类的构造函数中不拥有这些方法和属性

27.同源策略
同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源
同源策略 SOP（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，其初衷是为了浏览器的安全性，通过以下三种限制，保证浏览器不易受到 XSS、CSFR 等攻击。
同源策略限制了以下行为：
- （1）Cookie、LocalStorage 和 IndexDB 无法读取
- （2）DOM 和 Js 对象无法获得
- （3）AJAX 请求不能发送

事件委托

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行event.target

javascript 的本地对象，内置对象和宿主对象

本地对象为 array obj regexp 等可以 new 实例化
内置对象为 gload Math 等不可以实例化的
宿主对象为浏览器自带的 document,window 等

什么是伪数组？如何将伪数组转化为标准数组？

伪数组(类数组):无法直接调用数组方法或期望 length 属性有什么特殊的行为,不具有数组的 push,pop 等方法,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的 argument 参数
转换方法Array.prototype.slice.call(伪数组)

当一个 DOM 节点被点击时候，我们希望能够执行一个函数，应该怎么做？

直接在 DOM 里绑定事件：<div onclick=”test()”></div>
在 JS 里通过 onclick 绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)

es6 是一个新的标准，它包含了许多新的语言特性和库，是 JS 最实质性的一次升级。他还引入 module 模块的概念
阮一峰 ES6 入门https://es6.ruanyifeng.com/

如何实现一个对页面某个节点的拖曳？

onmousedown 控制节点扩展的属性 droping 为 true(表示可以移动节点了)
onmousemove 控制节点的位置(判断是否可以移动如果是就移动)
ommouseup 控制节点的扩展属性为 false(表示不能移动节点了)

<!DOCTYPE html>
<html>
  <head>
    <title>演示</title>
    <style type="text/css"></style>
  </head>
  <body>
    <div id="dropDiv">
      我可以拖动
    </div>
    <script type="text/javascript">
      function dropDivFun(Element) {
        //设置节点的定位为fixed
        Element.style.position = "fixed"; //获取事件对象函数 方便获取事件的clientX
        function getEvent() {
          if (event) {
            e = event;
          } else if (window.event) {
            e = window.event;
          } else {
            e = arguments.callee.arguments[0];
          }
          return e;
        } //添加mousedown事件
        Element.addEventListener("mousedown", function() {
          var e = getEvent();
          if (!Element.droping) {
            //设置droping为true并记录初始的位置
            Element.droping = true;
            Element.start_x = e.clientX - Element.offsetLeft;
            Element.start_y = e.clientY - Element.offsetTop;
          }
        });
        Element.addEventListener("mousemove", function() {
          var e = getEvent(); //移动节点
          if (Element.droping) {
            Element.style.left = e.clientX - Element.start_x + "px";
            Element.style.top = e.clientY - Element.start_y + "px";
          }
        });
        Element.addEventListener("mouseup", function() {
          if (Element.droping) {
            //设置droping为false并释放初始的变量
            Element.droping = false;
            Element.start_x = null;
            Element.start_y = null;
          }
        });
      }
      //为节点添加drop事件
      dropDivFun(document.getElementById("dropDiv"));
    </script>
  </body>
</html>

如何阻止冒泡事件和默认事件?

阻止冒泡事件：

function stopBubble(e) {
  if (e && e.stopPropagation) {
    e.stopPropagation();
  } else {
    window.event.cancelBubble = true;
  }
}

阻止默认行为

function stopDefault(e) {
  if (e && e.preventDefault) {
    e.preventDefalut();
  } else {
    window.event.returnValue = false;
  }
}

JavaScript 的数据类型都有什么？

基本数据类型：String,boolean,Number,Undefined, Null
引用数据类型：Object(Array,Date,RegExp,Function)
ES6 新增数据类型：Symbol

数组去重的方法

function func(arr) {
  let newArr = [...new Set(arr)];
  return newArr;
}

统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数

s='abananbaacnncn'
[...s].reduce((res, c) => {
  res[c]?res[c]++:res[c]=1;
  return res
  }, {})

实现对该数组的倒排

var reverse = function(str) {
  var stack = []; //生成一个栈
  for (var len = str.length, i = len; i >= 0; i--) {
    stack.push(str[i]);
  }
  return join("");
};

var reverse = function(arr) {
  return arr.reverse();
};

var result = numberArray.sort(function(a, b) {
  return b - a;
});

写一个 function，清除字符串前后的空格。（兼容所有浏览器）

function trim(str) {
  if (str && typeof str === "string") {
    return str.replace(/(^\s*)|(\s*)$/g, ""); //去除前后空白符
  }
}

实现函数 clone，可对 JavaScript 中的 5 种主要的数据类型（Number、String、Object、Array、Boolean）进行值复制。

function clone(obj) {
  var o;
  switch (typeof obj) {
    case "undefined":
      break;
    case "string":
      o = obj + "";
      break;
    case "number":
      o = obj - 0;
      break;
    case "boolean":
      o = obj;
      break;
    case "object":
      // object 分为两种情况 对象（Object）或数组（Array）
      if (obj === null) {
        o = null;
      } else {
        if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
          o = [];
          for (var i = 0; i < obj.length; i++) {
            o.push(clone(obj[i]));
          }
        } else {
          o = {};
          for (var k in obj) {
            o[k] = clone(obj[k]);
          }
        }
      }
      break;
    default:
      o = obj;
      break;
  }
  return o;
}

已知 ID 的 Input 输入框，如何获取这个输入框的输入值？

document.getElementById(“ID”).value

设置一个 ID 为 DIV 的 html 内容为 xxxx，字体颜色设置为黑色

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”
var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”

y 和 z 的值

var x = 1;
var y = 0;
var z = 0;
function add(n) {
  n = n + 1;
}
y = add(x);
function add(n) {
  n = n + 3;
}
z = add(x);
//都为undefined，因为没有返回值

写出函数 DateDemo 的返回结果，系统时间假定为今天

function DateDemo() {
  var d,
    s = "今天日期是：";
  d = new Date();
  s += d.getMonth() + "/";
  s += d.getDate() + "/";
  s += d.getYear();
  return s;
  //今天的日期是:日/月/年（当前日期的年月日数字）
}

运行结果

for (i = 0, j = 0; i < 10, j < 6; i++, j++) {
  k = i + j;
}
//10 i=5 j=5结束

运行结果

function hi() {
  var a;
  alert(a);//undefined
}
function hi() {
  var a = null;
  alert(a);//null
}

Ajax 与 json

ajax 请求的时候 get 和 post 方式的区别

GET 请求只能 URL 编码，而 POST 支持多种编码方式
GET 请求只接受 ASCII 字符的参数，而 POST 则没有限制
GET 请求的参数通过 URL 传送，而 POST 放在 Request Body 中
GET 相对于 POST 更不安全，因为参数直接暴露在 URL 中
GET 请求会被浏览器主动缓存，而 POST 不会（除非自己手动设置）
GET 请求在 URL 传参有长度限制，而 POST 则没有限制
GET 产生的 URL 地址可以被收藏，而 POST 不可以
GET 请求的参数会被完整的保留在浏览器的历史记录里,POST 的参数不会
GET 在浏览器回退时是无害的，而 POST 会再次提交请求
GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包
- 对于 GET 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200（返回数据）；
- 而对于 POST，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服务器响应 200 ok（返回数据）。

什么是 Ajax 和 JSON，它们的优缺点

Ajax Ajax 是基于 HTTP 请求和 JS 语法的异步刷新技术，用于在 Web 页面中实现异步数据交互。

实现思路
1. 获得 XMLHttpRequest 对象;
2. 注册回调函数 xhr.onreadystatechange=callback;
3. 设置和服务器端的链接信息 xhr.open(请求方式 get/post,url,设置异步或同步方式交互 true/false);
4. 发送数据开始交互。xhr.send(null);
5. 接受服务器端传回来的响应数据
实现代码

var httpRequest; //请求对象
// 1.创建XMLHttpRequest对象
function getXMLHttpRequest() {
  if (window.XMLHttpRequest) {
    httpRequest = new XMLHttpRequest();
  } else {
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    //兼容IE低版本
  }
}
function test() {
  getXMLHttpRequest();
  // 2.指定获取数据的方式(常用POST和GET)和路径  true异步 false同步
  httpRequest.open("GET", "data.txt", false);
  // 3.接受服务器端传回来的数据
  httpRequest.onreadystatechange = function() {
    /* 
   XMLHttpRequest的 readyState对象状态值，从0到4发生变化 ： 
   0 = （未初始化）请求未初始化（还没有调用open()方法） 
   1 = （加载）服务器连接已建立，正在加载（已调用send()方法，正在改善请求） 
   2 = （加载完成）请求已接收（send()方法完成，已全部响应内容） 
   3 = （交互）请求处理中（正在解析响应内容） 
   4 = （完成）请求已完成，且响应已就绪（响应内容解析完成） 
   */
    /* status是请求后的状态码 */
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
      let m = httpRequest.responseText; //获得响应的文本型数据
      console.log(m);
    }
  };
  //4.发送请求
  httpRequest.send();
}

优缺点
- 优点
  1. 无刷新更新局部数据
  2. 异步与服务器通信
  3. 提高用户体验
- 缺点
  1. 跨域问题限制
  2. 对搜索引擎支持较弱
  3. 造成请求数增多
  4. AJAX 干掉了 Back 和 History 功能，即对浏览器机制的破坏，实现前进后退成本大。

JSON
- JSON 是一种轻量级的数据交换格式，ECMA 的一个子集。
- 解析 JSON
  - JSON.parse(string) ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。
  - JSON.stringify(obj) ：接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。
- 优点
  1. 数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小
  2. 易于解析, 客户端 javascript 可通过 eval()进行 JSON 数据的读取搜索
  3. 支持多种服务端语言, 包括 ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, php, Python, Ruby 等语言, 便于服务端解析
  4. 轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

解释 jsonp 的原理，以及为什么不是真正的 ajax

Ajax 的核心是通过 XMLHttpRequest 获取数据，而 JSONP 的核心则是动态添加<script>标签来调用服务器提供的 js 文件。

post 和 put 方式的区别

PUT 请求：如果两个请求相同，后一个请求会把第一个请求覆盖掉。（所以 PUT 用来改资源）
Post 请求：后一个请求不会把第一个请求覆盖掉。（所以 Post 用来增资源）

闭包与关键字 this

闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。
闭包的特性：
1. 封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
2. 持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在系统中，闭包中的数据依然存在，从而实现对数据的持久使用。
优点：减少全局变量、减少传递函数的参数量、封装；
缺点：使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等.

js 中 this 的工作原理

this 是 js 的一个关键字，随着函数使用场合不同，this 的值会发生变化。但是有一个总原则，那就是 this 指的是调用函数的那个对象。this 一般情况下：是全局对象 Global/Window
- 全局范围内：指向全局对象；
- 函数调用：指向全局对象
- 方法调用：this 指向 test 对象
- 调用构造函数：this 指向新创建的对象
- 显示的设置 this：使用 call 或者 apply 方法时，this 指向第一个参数

性能优化

知道哪些性能优化的方法？

减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存，图片服务器。
前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数
用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能。
当需要设置的样式很多时设置 className 而不是直接操作 style。
少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。
避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属性)。
图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显示出来，显示比 div+css 布局慢。

其他

什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带