WEB面试题（1）

最新推荐文章于 2023-07-16 00:57:39 发布

郝鑫芸

最新推荐文章于 2023-07-16 00:57:39 发布

阅读量2.7k

点赞数

分类专栏： WEB面试题

本文链接：https://blog.csdn.net/qq_40041509/article/details/108384088

版权

WEB面试题专栏收录该内容

3 篇文章 1 订阅

订阅专栏

HTML部分问题汇总

1.列举一些块级标签和行内标签(越多越好)
块级元素bai(block element)
<div>最常用的块级元素</div>
<dl> 和<dt> <dd>搭配使用的块级元素
<form> 交互表单
<h1> 大标题</h1>
<hr> - 水平分隔线
<ol> -排序表单</ol>
<p> 段落</p>
<ul> -无序列表</ul>

行内元素(inline element)
<a> 锚点</a>
<b> 粗体</b>
<br> 换行
<em> 强调</em>
<i>斜体文本效果</i>
<sup>上标</sup>;
<sub>下标</sub>;
<u>下划线</u>;
<input>文本框</input>;
<del>删除线</del>;
<strong>加粗</strong>;

~~····························································~~
2.标签的四大通用属性是什么?分别的作用是什么?

title：鼠标提示文本；
id：属性可用作链接锚(锚点)，配合css选择器使用，选择指定的唯一的元素；
class：属性规定元素的类名，配合css使用；
style：属性规定元素的行内样式，给元素添加样式；

~~····························································~~
3.a标签的四个作用分别是什么?以及功能阐述

外部页面链接
href本地页面链接
锚点链接
下载文件

~~····························································~~
4.什么是语义化标签?有什么作用?
什么是语义化标签?
语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。
作用：

有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
支持多终端设备的浏览器渲染。

列举

<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表;
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。

~~····························································~~
5.meta标签都能干嘛?作用分别是什么

meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；
它可以用于鉴别作者，设定页面格式，标注内容提要和关键字;
还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。

Meta 对象代表 HTML 的一个 <meta> 元素。<meta> 元素可提供有关某个 HTML 元素的元信息 (meta-information)，比如描述、针对搜索引擎的关键词以及刷新频率。
Content：设置或返回 <meta> 元素的 content 属性的值。
httpEquiv：把 content 属性连接到一个 HTTP 头部。
Name：把 content 属性连接到某个名称。
Scheme：设置或返回用于解释 content 属性的值的格式。

~~····························································~~
6.表单中的name属性是干嘛的?
name 属性规定 input 元素的名称。
①name 属性用于对提交到服务器后的表单数据进行标识；
②或者在客户端通过 JavaScript 引用表单数据。
注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

<input name="value">

input标签的name属性的作用：name是用来提交内容时的键；表单中的 input 标签必须设置 name 属性，否则在提交表单时，用户在其中输入的数据不会被发送给服务器；
form 标签的 name 属性可以用来为表单设置一个独一无二的标识符，以便使用 DOM 时可以区分各个表单；

~~····························································~~
7.如果表单中有文件域,如何实现文件上传?需要修改哪些地方?
文件域
文件域的使用以及文件上传的配置：
当前表单中如果有file文件控件那么必须做如下配置

把form标签的entype=“mutilpart/form-data”；
form标签的method改成post；
解释:
为什么提交方式是post？
我们知道 get方式是在地址栏拼接，地址栏是有上限了，大小是大概2~3k；我们上传的文件一般，
普通手机拍个照片是 2~3M 高清照片 20M往上；所以大小肯定不够，而post不一样大小理论上无限制；
为什么要改这个enctype 原来默认值是什么?
entype的默认值是application/x-www-form-urlencodeed；
application/x-www-form-urlencoded表示的意思就是把表单数据以url编码的字符串方式提交；这种方式无法适用于文件上传
所以要改成 enctype="mutilpart/form-data"；
mutilpart/form-data 表示二进制流的多部分表单数据流方式提交。

~~····························································~~
8.元素在使用时需要注意什么？如果使用错误会出现什么问题？

代码规范问题： 不要把代码全部都写到一块，这样不仅影响效率，更加影响视觉，当出现问题的时候往往很难找到原因所在;
布局问题： 首先构造好网页的整个框架，然后对每个框架逐一进行完善，这样当那个部分出现问题的时候，我们就可以单独找到那个模块进行修改；
属性设置问题： 相应的标签对应着自己的属性，因为各个标签对应的属性实在是太多了，很容易混淆，如果我们想给某个标签内的内容设置相应的属性，我们必须在该标签内找到相应的；
块级元素： 独占一行，默认有宽没高，可设置宽高；p标签不能嵌块级标签;
行内元素： 在一行内显示，默认有高一个文字的高度，不能这是宽高；
行内块： 在一行内显示，可以设置宽高；
一些元素有默认的padding和margin;
ol,ul的子元素必须是li;dt、dd只能在dl里面；dl里面只能有dt、dd；
行内和行内块不能嵌套块级；
行内可以嵌套行内和行内块；
引用问题： 当我们在外部设置了css样式，并且要引用这个样式表时，我们必须要在<head></head>标签内添加<link>标签，如外部样式表为style.css，那么我们需要在head标签中添加的是<link href="css/style.css" rel="stylesheet" type="text/css"/>,首先href是引入样式的地址必不可少，rel定义了文档与链接的关系，stylesheet是定义一个外部加载样式表。

~~····························································~~
9.Html中如何提高页面性能’’

减少HTTP请求，改善响应时间最简单的途径就是减少HTTP请求的数量；
使用雪碧图CSS Sprites，降低下载量；
使用CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量，CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力；CDN的缺点：1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。2、如果CDN服务质量下降了，那么你的工作质量也将下降3、无法直接控制组件服务器；
添加Expires头，页面的初次访问者会进行很多HTTP请求，但是通过使用一个长久的Expires头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的HTPP请求，从而提高加载速度；
压缩组件，代理缓存；
将样式表放在头部，使页面内容逐步呈现，改善用户体验，防止“白屏”。
将脚本放在底部，减少页面首屏出现的时间，使页面内容逐步呈现；
避免CSS表达式，用js事件处理机制来动态改变元素的样式，使函数运行次数在可控范围之内；
使用外部的JavaScript和CSS，加载后下载；
减少DNS查找；
精简JavaScript，CSS；
删除重复脚本；
避免重定向；

~~····························································~~
10.阐述主流的浏览器内核分别是什么

IE浏览器内核：Trident内核，也是俗称的IE内核；
Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
Firefox浏览器内核：Gecko内核，俗称Firefox内核；
Safari浏览器内核：Webkit内核；
Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
360浏览器、猎豹浏览器内核：IE+Chrome双内核；
百度浏览器、世界之窗内核：IE内核；

~~····························································~~
11.xhtml和html有什么区别

一、其基础语言不同
1、XHTML是基于可扩展标记du语言（XML）。zhi
2、HTML是基于标dao准通用标记语言（SGML）。
二、语法严格程度不同
1、XHTML语法比较严格，存在DTD定义规则。
2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。
三、可混合应用不同
1、XHTML可以混合各种XML应用，比如MathML、SVG。
2、HTML不能混合其它XML应用。
四、大小写敏感度不同
1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。
2、HTML对大小写不敏感。
五、公布时间不同
1、XHTML是2000年W3C公布发行的。
2、HTML4.01是1999年W3C推荐标准。

扩展资料：
HTML到XHTML的过渡：
从HTML到XHTML过渡的变化比较小，主要是为了适应XML。最大的变化在于文档必须是良构的，所有标签必须闭合，也就是说开始标签要有相应的结束标签。另外，XHTML中所有的标签必须小写。
而按照HTML 2.0以来的传统，很多人都是将标签大写，这点两者的差异显著。在XHTML中，所有的参数值，包括数字，必须用双引号括起来（而在SGML和HTML中，引号不是必须的，当内容只是数字、字母及其它允许的特殊字符时，可以不用引号）。所有元素，包括空元素，比如img、br等，也都必须闭合，实现的方式是在开始标签末尾加入斜扛，比如<img … /> 、<br />。

CSS部分问题汇总

1.阐述CSS的三种引入方式以及优先级
1.行内样式
2.内嵌样式
3.外链样式
行内>内嵌>链接

~~····························································~~
2.CSS选择器有哪些?权值分别是多少?
默认样式(<0)<通配符选择器(0)<标签选择器(1)<class选择器(10)<id选择器(100)<行内样式(1000)<!important(>1000);
基本选择器：通配符选择器，标签选择器，class选择器，id选择器，
复合选择器：交集选择器（#.），并集选择器(,)，子代选择器，后代选择器，

~~····························································~~
3.阐述CSS三大特性(层叠继承优先级)
继承：子类可以使用父类的属性

不是所有的属性都可以继承,只有以color/font-/text-/line开头的属性才可以继承
在css中的继承不仅是儿子才可以继承,只要是后代就可以继承
css继承性中的特殊性
a标签的文字颜色和下划线是不能被继承的
h标签的文字大小是不能被继承的

层叠：层叠性只有在多个选择器选中"同一个标签",然后又设置了"相同的属性",才会发生层叠性

优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

~~····························································~~
4.说一下伪类选择器的使用顺序
链接被访问之前选中

a:link{}

链接被访问之后选中

a:visited{}

鼠标悬停被选中

a:hover{}

链接被按下之后

a:active{}

由于样式的叠加特性和用户的操作先后顺序影响，
以上四个伪类选择器在书写时尽量按照link vistied hover active的顺序来书写。

首先伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活）规则是由于CSS特殊性导致，css特殊性有一个按顺序的规则（同一条css规则，后出现会覆盖前面的同样规则）
在这里，比如把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色；
如果把visited放在hover的后面，那么已经访问过的链接始终触发visited伪类，根据第一条会覆盖hover里面的颜色。其实link visited 这两个伪类，并不需要顺序关系。（他们两的位置可以交换）

~~····························································~~
5.background背景属性都有哪些 ?以及连写的时候要注意什么
background-color：指定要使用的背景颜色;默认transparent；
background-image：指定要使用的一个或多个背景图像
background-repeat：指定如何重复背景图像
background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。scroll 背景图片随页面的其余部分滚动。这是默认；fixed 背景图像是固定的；inherit 指定background-attachment的设置应该从父元素继承；local 背景图片随滚动元素滚动。
background-position：指定背景图像的位置
background-size：指定背景图片的大小；cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
background-clip：指定背景图像的绘画区域；padding-box 背景图像填充框的相对位置；border-box 背景图像边界框的相对位置；content-box 背景图像的相对位置的内容框。

background: color url() repeat attachment position;
连写的时候要注意空格，中间要隔开最后写封号结束
W3C:background: color position size repeat origin clip attachment image;

~~····························································~~
6.阐述盒子模型
MDN中的定义： W3C盒模型是 CSS 规范的一个模块，它定义了一个长方形的盒子，每个盒子拥有各自的内边距和外边距，并根据视觉格式化模型来对元素进行布局。
标准盒模型：
其中最主要的五个属性：
width：内容区（content）的宽度。
height：内容区（content）的高度。
padding：内边距。
border：边框。
margin：外边距。

在标准盒模型中，整个div可以看做一个盒子，而此时整个盒子的宽度并不等于width，而是width+2border+2padding，最中间的content宽度等于width;
此时设置的宽度只能应用到内容区。
值得一提的是，虽然margin也属于存在于盒子模型中，但并不参与盒子模型的宽度和高度计算，可以看做是用于控制与其他元素之间的距离关系。

IE盒模型：
IE5.5及更早的版本使用的是IE盒模型，而IE6之后，也遵从了标准盒模型。它的计算方法与标准盒模型不同，接下来会阐述不同在哪。

设置宽度后，效果和宽度一样：因此若改动任意一个width、padding或border都会导致盒子的大小发生改变，这对布局来说十分不友好。

解决办法：使用box-sizing属性改变盒子模型的计算方式。

MDN中写道：如果box-sizing为默认值content-box，width、min-width、max-width、height、min-height 与 max-height控制内容大小。
_{····························································}~

7.margin使用的时候注意点有哪些?

父盒子没有定位，子盒子margin-top边框塌陷：解决方法：
1.给父盒子加上border边框
2.给父盒子加上overflow：hidden

margin的合并现象,相邻的地方同时使用了外边距,只取较大的那个外边距值。

行内元素不生效

~~····························································~~
8.padding使用时候注意点有哪些?

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。 默认是0，负值是不允许的。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。
连写： padding:上右下左; padding:上左右下 ; padding:上下左右 ;
没有继承性
padding的作用主要是控制边框与内容的距离，即内边距。

~~····························································~~

9.什么是边框塌陷?如何解决?
边框塌陷：父子元素边框塌陷；大div没有设置高度，那么大（父）div的高度是由这四个小（子）div的高度撑起来的，但是子div脱离了标准文档流使得子元素无法撑起文档流的时候，就会边框塌陷。
解决：

父级元素加border: 1px solid transparent；
父元素加overflower：hidden；
为父DIV添加padding，或者至少添加padding-top；
BFC
1.position: absolute
2.display:inline-block
3.float:left
4.overflow:hidden

~~····························································~~
10.阐述一下什么是标准文档流
标准文档流：文档的流向，文档默认排布方式；
什么是标准文档流：每一类标准属性不同，默认文档流向也不同。块级元素：从上到下，行内元素：从左到右，行内块元素：有大小从左到右。
~~····························································~~

11.浮动如何设置?以及清除浮动的四种方式?
设置浮动：float：left/right;
清除浮动的四种方式:

给浮动元素的父元素添加高度;
clear:both;在最后一个子元素新添加一个块级元素，然后将其设置clear:both,这样就可以清除浮动。
伪元素清除浮动;元素:after;
br标签清浮动:br标签存在一个属性：clear。这个属性就是能够清除浮动的利器，在br标签中设置属性clear，并赋值all。即能清除掉浮动。

~~····························································~~
12.rgba()和opacity的透明效果有什么不同？

rgba:只会对当前设置元素进行透明度的变换。不会带着子元素或者前景色。
opacity：会对当前元素和内部内容一起变透明。

~~····························································~~
13.CSS中隐藏盒子有几种方式?请表述分别是否占位问题
占位:
position=relative;
Margin-left=-500px;
opacity=“0”;
visibility=hidden;
background=transparent; 背景透明
不占位:
position=absolute/fixed;
display=none;
marginTop=-500px; 同方向的不占位会带着后面元素一起走
marginLeft=-500px; 不同方向的则占位
float=left; 让当前元素不占位

~~····························································~~
14.CSS中position定位属性分别都是什么?有什么区别?分别按照什么定位?
在CSS中关于定位的内容是：
position:relative | absolute | static | fixed；

relative： 相对定位：
按原本应出现的位置偏移；
相对定位以元素自身位置为基准设置位置；
相对定位占位。
absolute： 绝对定位：（元素变成行内块）
直接按照坐标值定位；
是按照有定位属性(absolute/relative/fixed)的父盒子进行定位的，如果父系盒子都没有定位属性，按照body定位。
如果当前元素直接在body里面那么绝对定位按照body去定位；
如果当前元素有父元素但是父元素并没有设置position值(父元素没有定位)祖先元素也没有定位，则还按照body。
如果父系盒子有定位属性那么当前元素的绝对定位按照那个父盒子进行定位。
绝对定位不占位。
子绝父相 (子元素绝对定位父元素相对定位)；
static 静态定位是默认值 (默认没定位)
fixed 固定定位: 固执型
直接按照浏览器窗体定位不会随着浏览器的滚动而滚动；
固定定位一定要注意不能定位到窗体外部，一旦定位外部了，那么就永远看不见了；

~~····························································~~
15.关于CSS中浏览器前缀有哪些?分别对应哪个浏览器
Opera浏览器: -o-
火狐浏览器: -moz-
谷歌和Safari: -webkit-
IE前缀: -ms-

~~····························································~~
16.Line-height行高在什么情况下会失效
在用css对行高进行设置时，line-height的属性必须在font的下面，否则无效！
~~····························································~~

17.CSS中有哪些兼容问题?是如何处理的?(越多越好最少5个)

不同浏览器的标签默认的margin和padding不同；
解决：CSS里 *{margin:0;padding:0;}
块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大；
解决：在float的标签样式控制中加入 display:inline;将其转化为行内属性；
设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度；
解决：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
解决：在display:block;后面加入display:inline;display:table;
图片默认有间距；
解决：使用float属性为img布局；
标签最低高度设置min-height不兼容
解决：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
各种特殊样式的兼容，比如透明度、圆角、阴影等；
特殊样式每个浏览器的代码区别很大，所以，只能现查资料通过给不同浏览器写不同的代码来解决；

1、双倍浮动BUG：
描述：块状元素设置了float属性后，又设置了横向的margin值，在IE6下显示的margin值要比设置的值大；
解决方案：给float的元素添加 display:inline;将其转换为内联元素；
2、表单元素行高不一致：
解决方案：
　　①、给表单元素添加vertical-align:middle;
　　②、给表单元素添加float:left；
3、IE6（默认16px为最小）不识别较小高度的标签（一般为10px）：
解决方案：
　　①、给标签添加overflow:hidden;
　　②、给标签添加font-size:0;
4、图片添加超链接时，在IE浏览器中会有蓝色的边框：
解决方案：
　　给图片添加border:0或者border：none;
5、最小高度min-height不兼容IE6;
解决方案：
　　①、min-height:100px;_height:100px;
　　②、min-height:100px;height:auto!important;height:100px;
6、图片默认有间隙：
解决方案:
　　①、给img添加float属性；
　　②、给img添加display：block;
7、按钮默认大小不一：
解决方案：
　　①、如果按钮是一张图片，直接用背景图作为按钮图片；
　　②、用a标记模拟按钮，使用JS实现其他功能；
8、百分比BUG：
描述：父元素设置100%，子元素各50%，在IE6下，50%+50%大于100%；
解决方案：
　　给右边的浮动元素添加clear:right；

~~····························································~~
18.你自己认为的CSS性能优化有哪些?

尽量将样式写在单独的css文件里面,在head元素中引用；
避免使用复杂的选择器,层级越少越好；
精简页面的样式文件,去掉不用的样式；
利用CSS继承减少代码量；
不滥用浮动，web字体；
合理命名，增强可维护性；
遵守盒模型规则

~~····························································~~
19.CSS精灵是什么? 优点有什么?为什么要使用CSS精灵?
css精灵即CSS Sprite，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所z有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了;
CSS Sprites 优点：
1、减少图片的字节
2、减少了网页的http请求，从而大大的提高了页面的性能，优化页面展示速度。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
CSS Sprites 缺点：
1、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

~~····························································~~
20.CSS中颜色取值有哪些?

颜色名称 ，如red black white
十六进制颜色，网页中常用，每两位代表红绿蓝的值的比例，如 #ffffff白色 #000000黑色；
rgba颜色，如 rgba(255,255,255,0.5) 半透明白色；
hsla颜色值，HSLA(H,S,L,A)
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360；
S：Saturation(饱和度)。取值为：0.0% - 100.0%；
L：Lightness(亮度)。取值为：0.0% - 100.0%；
A：Alpha透明度。取值0~1之间。

~~····························································~~
21.块级元素,行内元素,行内块元素之间有什么区别?

行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。
块级元素从新行开始，结束接着一个断行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效；

行内不独占一行不能设置宽高宽度与内容有关同站一行
块级独占一行有宽没高在没设置宽默认100%
行内块在一行内显示可以设置宽高

区别：

行内元素与bai块级函数可以相互转换，通过修改display属性值du来切换块zhi级元素和行内元dao素，行内元素display：inline，块级元素display：block。
行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。
行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

~~····························································~~
22.线性渐变与径向渐变的用法

渐变使用的是background-image；
线性渐变 linear-gradient；
径向渐变 radial-gradient；

线性渐变

用法1:

linear-gradient(颜色1,颜色2,颜色3,...颜色n);
background-image:linear-gradient(red,#0f0,purple);
都是平均分的渐变;

用法2:

linear-gradient(颜色1 百分比,颜色2 百分比,...颜色n 百分比);
background-image:linear-gradient(red 10%,#0f0 50%,blue 80%)

用法3:

linear-gradient(角度deg,颜色1 百分比....)
background-image: linear-gradient(180deg,red,blue);

径向渐变

用法1
background-image: radial-gradient(red,blue);

用法2 
background-image: radial-gradient(red 10%,blue 30%);

改变圆心位置 center表示默认 是中心
background-image: radial-gradient(circle at center ,red 10%,blue 30%);

圆心还可以写px值
background-image: radial-gradient(circle at 100px 100px ,red 10%,blue 30%);

如果后面两个数是相等的 那么就是正圆的径向  如果不相等 这就是椭圆
background-image: radial-gradient(ellipse at 100px 100px ,red 10%,blue 30%);

线性渐变重复
background-image: repeating-linear-gradient(60deg,red 10%,blue 30%);*/
径向渐变重复
background-image: repeating-radial-gradient(red 10%,#0f0 20%);

~~····························································~~

23.盒子绝对居中如何实现?
position-absolute;
Top=0;
Left=0;
Right=0;
Bottom=0;
Margin:auto;

利用css的 position属性，把div2相对于div1的top、left都设置为50%，
然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，

~~····························································~~
24.为什么要初始化样式?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异；
也可使页面风格统一；

~~····························································~~
25.CSS中link和@import的区别是?

link属于HTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
link方式的样式的权重高于@import的权重

CSS3部分问题汇总

1.CSS3中动画与过渡有什么区别?
transition需要触发一个事件才会随着时间改变其CSS属性；
animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。
1）动画不需要事件触发，过渡需要。
2）过渡只有一组（两个：开始-结束）关键帧，动画可以设置多个。

animation概述：
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
CSS3动画
当在@keyframe创建动画,把它绑定到一个选择器,否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器:
规定动画的名称
规定动画的时长 (如果不添加时长则默认是0就等于没有动画执行时间就没有效果)
请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%。
0%是动画的开始, 100%是动画的完成。
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state属性
animation-name 规定@keyframes动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或革秒。默认是0.
animation-timing-function 规定动画的速度曲线。默认是"eage".
animation-delay 规定动画何时开始。默认是0。
animation-iteration-count 规定动画被播放的次数。默认是1
animation-direction 规定动画是否在下一周期逆向地播放。默认是"normal"
animation-fill-mode: 规定动画执行完是否停留最终状态默认值是none forwards(最后义诊) backwards(第一帧)
animation-play-state 规定动画是否正在运行或暂停。默认是"running"

~~····························································~~
2.将你知道的CSS3选择器列举出来（越多越好）

相邻兄弟选择器:

选择器1+选择器2{ css代码}

通用兄弟选择器:

选择器1~选择器2{css代码}

属性选择器（8个)

[属性名]{css代码}

选择器[属性名]{css代码}

选择器[属性名1][属性名2]{css代码}

选择器[属性名="属性值"]{css代码}

选择器[class~="class名字"]{css代码}

选择器[class^="字符串"]{css代码}

选择器[class*="字符串"]{css代码}

选择器[class$="字符串"]{css代码}

动态伪类选择器（5个）

:link  :visitied 
:hover :active 
:focus表示当前元素获取焦点时触发的伪类，
只针对获取能够获取焦点的元素生效。

目标伪类:

选择器:target

元素状态伪类
:enabled,匹配每个已启用的元素(大多用在表单元素上)
:disabled,匹配每个被禁用的元素(大多用在表单元素上)
:checked，匹配每个已被选中的input元素(只用于单选按钮和复选框)
结构伪类

1.子元素
选择器:nth-child(number){CSS代码}

2.第一个子元素
:first-child{css代码}

3.最后一个子元素
 :last-child{css代码}

4.找到没有子元素的元素本身
选择器:empty{css代码}

5.匹配只有一个子元素的元素
选择器:only-child{css代码}

否定伪类

:not(选择器){不是该选择器的元素生效该样式}

伪元素选择器

 :first-letter{表示当前选择器选择的元素的第一个字符}

:first-line{表示当前选择器选择的元素第一行文字}

::selection{表示选中文字时 文字的样式}
注意: 文字大小不生效

~~····························································~~
3.简述C3的2D 3D转换有哪些如何设置转换圆心？
css中的所谓转换指的是改变元素位置,尺寸,形状的一种属性；分为 2D转换和 3D转换。
转换分为四大方向: 旋转(transform: rotate) 位移(translate) 缩放（scale） 倾斜（skew）
分别进行2D和3D的效果转换
所谓的3D转换就是在父元素里面添加一个属性 perspective:px值; 100~900之间，值越小 3D效果越明显，值越大 3D效果越不明显；
默认的旋转圆心是中心点也可以通过 transform-origin去改变圆心
transform-origin:x轴圆心 y轴圆心 z轴圆心(只有3D转换才生效)

~~····························································~~
4.CSS3有哪些新特性

边框

border-radius：为元素添加圆角边框，border-radius 属性是一个简写属性，用于设置四个 border-radius 属性；

border-radius: 10px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-radius: 10px 20px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 20px;
border-radius: 10px 20px 30px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;

box-shadow：向框添加一个或多个阴影。
语法：box-shadow: 水平位移垂直位移 [模糊半径阴影尺寸阴影颜色 inset(内部阴影)];

box-shadow: 10px 10px 5px #888888;

border-image：设置边框图像，该属性是一个简写属性，用于设置以下属性：

border-image-source：边框的图片的路径；
border-image-slice：图片边框向内偏移；
border-image-width：图片边框的宽度；
border-image-outset：边框图像区域超出边框的量；
border-image-repeat：图像边框是否应平铺(repeate)、铺满(round)或拉伸(stretch)。
border-image: url(/i/border.png) 30 30 round;

背景

background-size：背景图片的尺寸。

background-size: 100px 100px;/* 第一个值设置宽度，第二个值设置高度 */
background-size: 50% 50%;/* 以父元素的百分比来设置背景图像的宽度和高度 */
background-size: cover;/* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 */
background-size: contain;/* 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 */

background-origin：规定 background-position 属性相对于什么位置来定位。

background-origin: padding-box;/* 背景图像相对于内边距框来定位（默认值） */
background-origin: border-box;/* 背景图像相对于边框盒来定位 */
background-origin: content-box;/* 背景图像相对于内容框来定位 */

background-clip：规定背景的绘制区域。

background-clip: padding-box;/* 背景被裁剪到内边距框 */
background-clip: border-box;/* 背景被裁剪到边框盒（默认值） */
background-clip: content-box;/* 背景被裁剪到内容框 */

渐变

linear-gradient()：线性渐变。
语法：background: linear-gradient(方向, start-color, ..., last-color);

background: linear-gradient(red, blue); /* 省略方向默认从上到下 */
background: linear-gradient(to right, red , blue);/* 从左侧开始的线性渐变，从红色开始，转为蓝色 */
background: linear-gradient(to bottom right, red , blue); /* 从左上角到右下角的线性渐变 */

radial-gradient()：径向渐变。
语法：background: radial-gradient(圆的类型渐变的大小 at 渐变的位置, start-color, ..., last-color);

/* 椭圆形渐变 */
background: radial-gradient(red, yellow, green); 
/* 圆形渐变 */
background: radial-gradient(circle, red, yellow, green); 
/* 颜色结点不均匀分布 */
background: radial-gradient(red 10%, green 50%, blue 100%); 
/* 圆心在中间 */
background: radial-gradient(at 50% 50%, blue, green, yellow); 
/* 圆心在离左侧60%，离上侧50%的地方，半径长度为从圆心到离圆心最近的边 */
background: radial-gradient(closest-side at 60% 55%, blue, green, yellow);

文本效果

word-break：定义如何换行。

word-wrap：允许长的内容可以自动换行。

text-overflow：指定当文本溢出包含它的元素，应该发生什么。

text-shadow：文字阴影。
语法：text-shadow: 水平位移垂直位移 [模糊半径阴影颜色];

转换

transform：应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

语法：transform: none（默认)|transform-functions;

transform-origin：允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

语法：transform-origin: x-axis y-axis z-axis;

transform-origin: 0% 0%;/* 将元素左上角设为旋转点 */

transform-style：指定嵌套元素是怎样在三维空间中呈现。

2D转换方法

rotate(angle)：定义 2D 旋转，在参数中规定角度。
translate(x,y)：指定元素在二维空间中的位移。X轴方向向右，Y轴方向向下。
translateX(n)：指定元素在X轴中的位移。
translateY(n)：指定元素在Y轴中的位移。
scale(n)：定义 2D 缩放转换。

transform: scale(2);/* 放大两倍 */

scaleX(n)：定义 X 轴方向的缩放转换。
scaleY(n)：定义 Y 轴方向的缩放转换。
matrix(a,b,c,d,e,f)：定义 2D 转换，使用六个值的矩阵。

transform: matrix(2, 1, 0, 2, 50, 50);	/* 水平放大两倍，水平倾斜，垂直放大两倍，水平向左移动50%，垂直向下移动50% */

skew(x-angle,y-angle)：定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)：定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)：定义沿着 Y 轴的 2D 倾斜转换。

3D转换方法

perspective(n)：为 3D 转换元素定义透视视图。

translate3d(x,y,z)：指定元素在三维空间中的位移。X轴方向向右，Y轴方向向下，Z轴方向向你。
translateX(x)：指定元素在X轴中的位移。
translateY(y)：指定元素在Y轴中的位移。
translateZ(z)：指定元素在Z轴中的位移。
scale3d(x,y,z)：定义 3D 缩放转换。
scaleX(x)：通过设置 X 轴的值来定义缩放转换。
scaleY(y)：通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)：通过设置 Z 轴的值来定义缩放转换。
rotate3d(x,y,z,angle)：定义 3D 旋转。
rotateX(x)：定义沿着 X 轴的 3D 旋转。
rotateY(y)：定义沿着 Y 轴的 3D 旋转。
rotateZ(z)：定义沿着 Z 轴的 3D 旋转。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义 3D 转换，使用 16 个值的 4x4 矩阵。

过渡

transition：设置元素当过渡效果，四个简写属性为：
transition-property：过渡属性名。
transition-duration：规定完成过渡效果需要花费的时间（以秒或毫秒计）。
transition-timing-function：指定切换效果的速度。

cubic-bezier(x1,y1,x2,y2)：贝塞尔曲线，是控制变化的速度曲线。

从上图中我们可以看到，cubic-bezier有四个点：两个默认的，即：P0(0,0)，P3(1,1)；
两个控制点，即：P1(x1,y1)，P2(x2,y2)；
注：X轴的范围是0~1，超出cubic-bezier将失效，Y轴的取值没有规定，但是也不宜过大。
我们只要调整两个控制点P1和P2的坐标，最后形成的曲线就是动画曲线。

transition-delay：指定何时将开始切换效果。

动画

animation：为元素添加动画，是一个简写属性。
语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name：为 @keyframes 动画名称。
animation-duration：动画指定需要多少秒或毫秒完成。
animation-timing-function：设置动画将如何完成一个周期。

animation-delay：设置动画在启动前的延迟间隔，可以是秒或毫秒。
animation-iteration-count：定义动画的播放次数。

animation-direction：指定是否应该轮流反向播放动画。

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。该属性可重写该行为。

animation-play-state：指定动画是否正在运行或已暂停。
@Keyframes规则：使用@keyframes规则，你可以创建动画。
语法：

@keyframes animationname {
	keyframes-selector {css-styles;}
}

@keyframes mymove {
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}

~~····························································~~
5.CSS3的兼容问题如何处理

{
	transform:rotate(30deg);
	-ms-transform:rotate(30deg);
	-moz-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	-o-transform:rotate(30deg); 
}

圆角的兼容

-moz-border-radius: 2px; /* Firefox */
  -webkit-border-radius: 2px; /* Safari 和 Chrome */
  border-radius: 2px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
  -o-border-radius:2px;
  -khtml-border-radius: 2px;   /* 针对Konqueror浏览器 */

阴影

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);  
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
background:red; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));

元素阴影

-webkit-box-shadow: 0px 0px 10px  #999999; 
 -moz-box-shadow: 0px 0px 10px  #999999; 
 -ms-box-shadow: 0px 0px 10px  #999999; 
 box-shadow: 0px 0px 10px  #999999; 
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=10, Color='#999999')";
 /* For IE 8 */
   filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#999999');     /* For IE 5.5 - 7 *

~~····························································~~
6.你能想到几种页面动画效果,想到几个说几个(最少5个)

粒子动画特效；
太极图；
旋转卡片；
文字飘动；
手风琴；
波纹效果；

~~····························································~~
7.canvas和svg有什么区别? 阐述分别适用的场景

Canvas作为一个容器只有一个dom元素元素;
内部元素无法独立用dom操作;
Canvas是配合js完成各种绘制效果;
Canvas是位图,依赖像素;
Svg虽然也是一个容器,但是内部有各种各样的dom元素操作;
Svg是矢量图,不依赖像素(放大缩小不会失真);
Svg不是H5新推出的标签,而是在老基础上扩展的功能;

canvas和svg的区别比较：

canvas绘制位图，放大失真；svg绘制矢量图，放大不失真；

时间上看canvas与svg的区别：

canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。
svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。

从功能上看canvas与svg的区别：

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

canvas与svg技术应用上的比较：

canvas不依赖分辨率。
canvas支持事件处理器。
canvas最适合带有大型渲染区域的应用程序（比如谷歌地图）。
canvas复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）。
canvas不适合游戏应用。
svg依赖分辨率。
svg不支持事件处理器。
svg弱的文本渲染能力。
svg能够以 .png 或 .jpg 格式保存结果图像。
svg最适合图像密集型的游戏，其中的许多对象会被频繁重绘。

~~····························································~~

HTML5问题汇总

1.简述H5新特性有哪些？

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section；
新的表单控件，比如 calendar、date、time、email、url、search；

~~····························································~~
2.请阐述video和audio标签的使用,以及video和audio的缺点

video和audio标签的使用：
1.video和audio共有的可读写属性：
src媒体数据的url地址;
loop是否循环播放;
autoplay是否在页面加载后自动播放（注意：如果audio不加controls属性，音频是默认隐藏的）;
controls是否添加浏览器自带的播放控制条，控制条中具有播放、暂停等按钮。当然也可以在脚本中自定义控制条，而不使用浏览器默认的控制条;
preload媒体数据是否在页面加载时预加载，并预备播放，可以加快播放速度。可选值有none（不进行预加载）、metadata（部分预加载，只预加载媒体的元数据，如媒体字节数、第一帧、播放列表、持续时间等）、auto（全部预加载）。默认为auto。如果使用 “autoplay”，则忽略该属性;
muted媒体数据是否应该被静音;
volume媒体数据的播放音量，范围从0到1，0为表单，1为最大音量;
currentTime媒体数据的当前播放位置，从开始到现在播放的时间;
defaultPlaybackRate媒体数据的默认播放速率;
playbackRate媒体数据的当前播放速率;
width媒体数据的宽度（以像素为单位）;
height媒体数据的高度（以像素为单位）;
2.video元素独有的属性：
poster视频封面，当视频不可用时，使用该元素向用户展示一幅替代用的图片;
js控制video常用方法：
video.play()播放媒体数据，自动将元素的paused属性变为false;
video.pause()暂停播放媒体数据，自动将元素的paused属性变为true;
video.paused判断当前是否是暂停状态；
video.muted=true/false静音/取消静音；
video.volume+=/-=0.1控制音量，音量范围0-1；
video.playbackRate+=/-=0.1播放倍率控制，最小值是0.1，小于1的时候是慢速播放，倍率最小0.06,最大小于16；
video.currentTime获取当前播放时长
video和audio的缺点：
1.暂时没有对流视频的支持和规范。流媒体分HTTP渐进流式下载和实时流式传输，video和audio属于HTTP渐进流式下载，不需要流媒体服务器，普通HTTP服务器就可以。
2.播放媒体类型不统一。由于各种原因，HTML5没有对播放媒体类型做规定，这可以通过source来改进，如果不支持播放第一个文件就播放下一个，以此类推。
3.资源受跨域共享的限制。跨域的媒体数据需要统统下载到本地服务器。
4.全屏无法通过脚本控制。从安全性角度来看，让脚本元素控制全屏操作是不合适的。不过，如果要让用户在全屏方式下播放视频，浏览器可以提供其他控制手段。

~~····························································~~
3.列举一些你知道的表单新的type类型
Color,email,number,tel,url,search

~~····························································~~
4.Canvas如何使用描述出验证码的绘制步骤
Canvas如何使用:

<canvas>元素是HTML5中的新元素，通过使用该元素，可以在网页中绘制所需的图形;</canvas>
创建一个画布</canvas>
<canvas id="myCanvas" width="200" height="100"></canvas>

首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var ctx=c.getContext("2d");

描述出验证码的绘制步骤:

随机的点 点的x值和y值随机
随机的颜色 0~255随机一个数一共三个放到rgb里面
随机的线 lineTo的x值和y值随机
随机的字符 从一个长字符串中随机索引值
随机的位置 x值和y值的随机数

input,canvas,button{
	vertical-align: bottom;
}

<input type="text" id="codeinp">
<canvas  title="点我刷新验证码" width="120" height="40" style="border: 1px solid #000;">
    对不起,您的浏览器不支持canvas
</canvas>
<button>验证</button>

var mycanvas=document.getElementsByTagName("canvas")[0];
var ctx=mycanvas.getContext("2d");
//干扰点的数量
var pointNum=80;
//干扰线的数量
var lineNum=7;
//随机字符的文本
var str="abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRXTUVWXYZ";
//用来存储每次生成验证码的字符串
var codeStr="";
mycanvas.onclick=function () {
    //每次点击刷新验证码
    codeStr= ranCode();
    // console.log("本次验证码是:"+codeStr);
};
//页面加载时要调用一次 画验证码
codeStr=ranCode();
var codeinp=document.getElementById("codeinp");
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function () {
    if(codeinp.value=="" || codeinp.value.toLowerCase()!=codeStr.toLowerCase()){
        alert("验证码错误!");

        //验证码一定要忽略大小写判断
    }else if(codeinp.value.toLowerCase()==codeStr.toLowerCase()){
        alert("验证码通过!")
    }
    //    无论错误还正确 都要把验证码 刷新一下
    codeStr=ranCode();
};

function ranCode() {
    //每次画之前要清除
    ctx.clearRect(0,0,120,40);
    //每次刷新验证码时 都要重新创建一个字符串变量用来存储验证码
    var text="";
    /*随机画字符的循环*/
    for(var i=0;i<4;i++){
        ctx.beginPath();
        ctx.textBaseline="top";
        ctx.font="20px 宋体";
        ctx.fillStyle=getRanColor(0,100);
        var ranS=str.charAt(getRanNumber(0,str.length-1));
        //把每次循环出来的随机字符拼接上去
        text+=ranS;
        //改进后的代码----------------------↓
        //旋转和位移之前   把状态保存
        ctx.save();
        //改进后的代码----------------------↑
        ctx.translate(i*30,0);
        var ranAngle=Math.PI/180*getRanNumber(-20,20)
        ctx.rotate(ranAngle);
        ctx.fillText(ranS,getRanNumber(10,20),getRanNumber(0,20));
        //改进后的代码----------------------↓
        //画完文字后 把状态读取回来
        ctx.restore();
        //改进后的代码----------------------↑
    }
    /*画随机点的循环*/
    for(var i=0;i<pointNum;i++){
        ctx.beginPath();

        ctx.fillStyle=getRanColor(180,240);
        ctx.arc(getRanNumber(0,120),getRanNumber(0,40),1,0,Math.PI*2);
        ctx.fill();
    }
    /*画干扰线的循环*/
    for(var i=0;i<lineNum;i++){
        ctx.beginPath();
        ctx.strokeStyle=getRanColor(180,240);
        ctx.moveTo(getRanNumber(0,20),getRanNumber(0,40));
        ctx.lineTo(getRanNumber(100,120),getRanNumber(0,40));
        ctx.stroke();
    }
    //把每次随机产生的验证码返回
    return text;
}

//    获取一个随机数的方法(min到max随机 包含max)
function getRanNumber(min,max) {
    return parseInt(Math.random()*(max-min+1)+min);
}
//    获取随机颜色的方法
function getRanColor(min,max) {
    if(min<0 || min>255){
        min=0;
    }
    if(max<0 || max>255){
        max=255;
    }
    var r=getRanNumber(min,max);
    var g=getRanNumber(min,max);
    var b=getRanNumber(min,max);
    return "rgb("+r+","+g+","+b+")";
}

~~····························································~~
5.SVG如何使用？如何利用js生成一个矩形？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<rect x=“” y=“”  width="300" height="100"></rect>	//矩形标签
</svg>

~~····························································~~
6.本地存储当中有几种方式？有什么区别？
Cookie，IndexDB，WebSQL,localStorage 本地永久存储,sessionStorage 一次会话;

localStorage 本地永久存储只要用户不清除cookie (清理浏览器缓存),数据永远在;只要没有手动清除，就会一直保留，永久存储，以文件形式存储;
sessionStorage 一次会话本次打开的标签不关闭,数据一直在;只会在窗口打开的时候才有效，一次性缓存会话，关闭浏览器自动释放;
方法详解:
存:localStorage.setItem("字符串键",值);
取:var 数据= localStorage.getItem("字符串键");
根据键取值
无论存的时候是什么类型,取出来都是字符串类型!
根据键取值,如果键不存在,则返回 null。
localStorage.length属性获取数据总个数
localStorage.key(index)：根据索引值取出指定数据的键,然后自己再调用getItem 根据键取值;
localStorage.removeItem("字符串键")：根据键移除数据;
localStorage.clear() 清空所有数据;
sessionStorage和localStorage的方法一模一样!

~~····························································~~
7.地理定位的使用方法如何在页面中绘制一个某个地方的地图？
API:application programming interface (引用程序变成接口)

引入百度地图JS连接 - http://api.map.baidu.com/api?v=2.0&ak=密匙;必须先申请应用密匙 HbUVYMUg6PwbOnXkztdgSQlQ; key值可以从高德地图api获取key值这是自己申请的key值’
在HTML页面中定义用于显示百度地图的容器（元素）, 使用
元素;
3使用百度地图的对象（Map）
构造器 - BMap.Map(容器ID)，通过centerAndZoom()进行地图的初始化，该方法是必要的
百度地图坐标拾取系统

百度地图
百度地图 - http://developer.baidu.com/map/
注册百度开发者账户 http://developer.baidu.com/
在HTML页面中，引入百度地图的JS：http://api.map.baidu.com/api?v=2.0&ak=秘钥
定义显示地图的容器<div id="" style=""></div>；

在HTML页面中
　　　　* 引入百度地图的JS
　　　　　　http://api.map.baidu.com/api?v=2.0&ak=秘钥
　　　　* 定义显示地图的容器
　　　　　　<div id="" style=""></div>
　　　　* 在javascript代码中
　　　　　　* 创建百度地图Map对象
　　　　　　　　var map = new BMap.Map(容器id);
　　　　　　* 进行地图的初始化
　　　　　　　　map.centerAndZoom();
　　　　* 百度地图的组件
　　　　　　* 核心类 - Map类
　　　　　　　　* 构造器 - BMap.Map(容器id);
　　　　　　* 方法
　　　　　　　　* centerAndZoom() - 初始化方法
　　　　　　　　* addControl() - 添加控件
　　　　　　　　* addOverlay() - 添加标注
　　　　　　　　* Control类 - 控件类
　　　　　　　　* ScaleControl类 - 表示地图的比例尺
　　　　　　* 构造器 - 创建比例尺对象
　　　　　　　　* NavigationControl类 - 表示移动缩放控件
　　　　　　* 构造器 - 创建移动缩放控件
　　　　　　　　* Overlay类 - 遮盖物类
　　　　　　　　* Marker类 - 表示地图的一个标注
　　　　　　* 构造器 - Marker(point)
　　　　　　　　* Point类 - 标注类

~~····························································~~
8.Html5的兼容问题如何处理
HTML5中新特性的向后兼容

广义的HTML5，是包括了HTML5、CSS3以及新的API。因为新特性或多或少会存在浏览器的兼容问题，所以在使用新特性时检测浏览器是否支持此特性是非常必要的。当浏览器不支持新特性时，可以做合适的向后兼容处理。目前，并没有一个统一的方法检测新特性的支持，有些新特性有对应的API可以识别，有些新特性则只能通过一些技巧来识别。好在国外有热心的工程师们开发了多个检测新特性的框架，其中检测准确率和使用率较高的是Modernizr。

Modernizr框架的原理是自动检测浏览器是否支持新特性，并在标签上添加对应的类。如果浏览器支持某个特性，则会添加一个以特性名称命名的类，反之，则添加一个以“no-”为前缀加上特性名称命名的类。同时也会生成一个名为modernizr的对象，通过判断此对象上的代表各特性的属性值，可以知道当前浏览器是否支持此新特性。Modernizr框架同时也包含了html5shim框架的功能，即可以让IE8及以下浏览器支持新标签。

HTML5已形bai成了最终的标准，概括来讲，它主要是关du于图像zhi，位置，存储，多任务等功能的增加。dao
新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。
内容元素，article、footer、header、nav、section。
表单控件，calendar、date、time、email、url、search。
控件元素，webworker, websockt, Geolocation。
移出的元素有下列这些：
显现层元素：basefont，big，center，font, s，strike，tt，u。
性能较差元素：frame，frameset，noframes。
如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
处理兼容问题有两种方式：
1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2.使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。
处理兼容问题有两种方式：
1.IE8/IE7/IE6支持通过5261document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2.使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

~~····························································~~
9.你对语义化标签是如何理解的
通过标签判断内容语义，例如根据h1标签判断出内容是标题，根据<p>判断内容是段落、<input>标签是输入框等。

去掉样式能让页面结构呈现清晰
屏幕阅读器会按标记“读”你的网页
有益于SEO
便于团队开发和维护

~~····························································~~
10.请描述一下sessionStorage和localStorage的区别
window.localStorage 本地永久存储，存储没有截止日期的数据；
window.sessionStorage 一次会话，针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）；

~~····························································~~

JavaScript问题汇总

1.JS的引入方式有几种? 区别在哪里?

内部js: 在直接在页面的<script></script>标签内写js代码
优点：相对于使用行内js，内部js代码较为集中，与页面结构的实现代码耦合度较低，比较便于维护;
缺点：js代码仅限于当前页面的使用，代码无法被多个页面重复使用，导致代码冗余度较高;
外部js: 引入外部的js文件(推荐使用)
优点：
1.页面代码跟js代码实现有效分离，降低耦合度
2.便于代码的维护和扩展
3.有利于代码的复用
行内js: 直接嵌套在html的语句
开发中不推荐这种方式，因为这种方式跟页面结构代码耦合性太强了，后期维护很不方便，而且这种方式在开发过程中会导致产生很多的冗余代码;

三种方式的区别：主要是js加载，js执行，DOM解析区别

~~····························································~~
2.JS数据类型有哪些?

~~····························································~~
3.JS的三大核心是什么?
ECMAScript(语法基础)，文档对象模型（DOM），浏览器对象模型（BOM）

~~····························································~~
4.JS中将字符串解析成整数的方法有哪些?有什么区别?

~~····························································~~
5.= =和===有什么区别?
==是判断等于的意思，返回的是一个布尔值（不判断类型）
===严格相等，会比较两个值的类型和值。

~~····························································~~
6.JS创建数组有几种方式?分别是什么

~~····························································~~
7.JS中数组的方法有哪些? (英文名) (至少说7种,参数怎么使用也要说)
slice();数组截取;
单个参数从指定位置开始截取到末尾；
两个参数从指定位置开始截取到指定位置包含头不包含尾（不会改变原数组）;
splice();数组删除;
单个参数从指定位置开始，删除到数组最后一位元素，返回删除的元素组成的新数组;
两个参数从指定位置开始删除多少个返回删除的元素组成的新数组;
多个参数从指定位置开始删除多少个后面传入多少个参数，是向数组填充指定元素;
indexOf();数组查找;
单个参数根据元素查找所在位置;
两个参数可选的整数参数。规定在字符串中开始检索的位置;
reverse();数组翻转，会改变原数组；
concat();数组合并;
join();将数组转成字符串；
传入指定的分隔符如（“丨”）；
传入空字符串（""）;
不传参数()；转换成以“，”分割的字符串
toString()将数组装换成以","分割的字符串
puch()向数组最后一位添加元素，返回新的长度；
pop()数组最后一位删除元素并返回被删除的元素，会改变原数组。
unshift()数组第一位添加元素并返回添加后的新长度。
shift();数组第一位删除元素并返回被删除的元素，会改变数组。
sort();数组升序排列，会改变原数组

~~····························································~~
8.遍历数组有哪几种方式? 那五个遍历数组的方法是什么?分别都有什么区别?

[every]对数组中每一项运行以下函数，如果都返回true，every返回true，如果有一项返回false，则停止遍历 every返回false；
[filter]对数组中每一项运行以下函数，该函数返回结果是true的项,组成的新数组[ ]；
[forEach] 遍历数组，单纯的遍历数组，从头执行到尾，没有返回值;
[map]对数组中每一项运行以下函数，该函数返回的结果组成的新数组
[some]对数组中每一项运行以下函数，如果该函数对某一项返回true，则some返回true；

~~····························································~~
9.清空数组有哪几种方式? 推荐使用哪种?
6. arr.splice(0);
7. arr.length=0;//数组的length赋值为0，长度为0了，数组肯定就是空的;
8. arr=[];//给数组重新赋值为[];

~~····························································~~
10.阐述一下冒泡排序原理,以及四次优化如何做
冒泡排序法四次优化

内层for循环：变量<.length-1;
原因：最后一个数，不能和后面比较，所以最大索引是倒数第二个索引。
外层for循环：变量<.length-1;
原因：n个数，冒泡（n-1）次就会出现顺序。
内层for循环：变量<.length-1-外层for循环变量；
原因：每轮冒泡结束后，就会诞生一个最下值，下一轮可少比较一次。
开闭原则：排出顺序立即停止。

开闭原则：在面向对象编程领域中，开闭原则规定“软件中的对象（类，模块，函数等等）应该对于扩展是开放的，但是对于修改是封闭的”，这意味着一个实体是允许在不改变它的源代码的前提下变更它的行为。

~~····························································~~
11.阐述回调函数的使用,以及作用是什么?
回调函数还是一个函数，它也是有函数名和函数实现这两个部分组成，区别在回调函数是可以被当作参数一样被传递（可移动的），
当回调函数被当作参数传递时，相当于一个指向函数的一个指针（函数指针），回调函数的函数名就是一个函数指针，注意不能带括号
在需要用到回调函数的功能的时候，就可以通过函数名+（）的形式去使用
作用：回调函数能保证代码执行的顺序性，能避免异步带来的问题
也就是说回调就是一种方法，帮我们确保某些代码直到另一些代码已经执行完毕后才执行。

~~····························································~~
12.阐述一下面向对象和面向过程的概念
什么事面向对象
面向对象是一种基于面向过程峰编程思想。

什么是面向过程
亲力亲为亲自面向程序的每一个步骤，在每一个执行步骤当中我们都是参与者。说白了，就是一堆函数调用典型代表：c语言。
如果代码量少，逻辑简单，那么面向过程很适合；如果代码量大，逻辑复杂，在用面向过程就会结构混乱。

面向对象概念
将面向过程的每一个步骤封装起来，功能类似的封装到一起，由我们去调用，这就是面向对象。

~~····························································~~
13.对象创建有哪几种方式?优缺点是什么?

字面量创建
new对象创建new Object（）；
以上两种方式创建对象的弊端:
1.每次创建一个对象都要单独绑定属性跟方法步骤很麻烦
2.这种造对象的方式不可能大批量创建所以我们需要一个工厂来造对象
工厂函数造对象
优点:
把对象绑定属性跟方法的过程封装起来反复调用
那么代码的复用率很高而且很方便的重复大批量造对象
缺点: 对象类型很不明确
构造函数造对象
new关键字的四个作用
构造函数之所以能够创建出对象跟new关键字的作用密不可分。
开辟内存空间，存储新创建的对象；
将this指向当前对象；
执行内部代码，为当前对象绑定属性和方法；
返回新创建的对象。

~~····························································~~
14.new关键字和this关键字分别代表什么?作用是什么?都在哪使用的?

new关键字的四个作用
构造函数之所以能够创建出对象跟new关键字的作用密不可分。

开辟内存空间，存储新创建的对象；
将this指向当前对象；
执行内部代码，为当前对象绑定属性和方法；
返回新创建的对象。

this表示当前对象，谁new就指向谁；
构造函数 : new 函数名();
构造函数就用构造函数的模式调用 new；

~~····························································~~
15.你是怎么理解构造函数的?
把构造函数当作类来说，然后通过new这个构造函数来创建实例，简单的想就可以这样，但是构造函数本身就是函数，在new的过程中执行了一遍。在执行的过程中，只是改变了上下文环境，导致this所指的方向发生了改变，然后就像绑定属性和方法那样，把构造函数里面的this所附带的方法属性都给了那个新的对象;

构造函数用于创建特定类型的对象——不仅声明了使用的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数，然后在里面声明自定义类型对象的属性或方法。

特点：

构造函数的首字母必须大写，用来区分于普通函数
内部使用的this对象，来指向即将要生成的实例对象
使用New来生成实例对象

~~····························································~~
16.构造函数和普通函数有什么区别
构造函数和普通函数调用方式不同:

普通函数 : 函数名();
构造函数 : new 函数名();
我们如何知道该函数是构造函数还是普通函数呢?
就看函数名是否大写所以要求我们如果当前函数被我们定义为构造函数；
那么函数名必须大写(虽然不大写也不报错但是潜规则为了区分一定要大写)；

总结: 构造函数和普通函数从函数定义上来看没有任何区别；

但是调用方式有区别。

构造函数就用构造函数的模式调用 new；
普通函数就用普通函数的调用模式函数名()

~~····························································~~
17.属性绑定的方式有哪些?
函数绑定两种方式:

绑定匿名函数
对象.函数名=function(){}；
绑定一个已经定义好的函数名字
对象.函数名=有名字的函数；

~~····························································~~
18.阐述一下变量提升和函数提升
变量提升:
在预解析阶段用var 声明的变量会被提升;会被提升到当前作用域的第一行
但是只会提升变量名 不会提升变量的值;
想要知道提升,先要知道 js运行虽然是一行一行执行执行到哪就解析到哪,但是js有一个预解析阶段页面加载时会把带var和function关键字的变量先进行预解析;解析也就是提升.
函数提升 function 函数名(){ };
函数提升也会提升到当前作用域第一行,函数提升时提升整个函数;
只有函数模式定义的函数才会被整个提升

~~····························································~~
19.在js中作用域有哪些?区别是什么?

全局作用域
在函数外 script标签内定义的变量就是全局变量；在任意位置都可以使用。
局部作用域
在函数内部声明的变量就是局部变量；只能在当前函数内使用。
ps:形式参数也是局部变量.

~~····························································~~
20.说一下json对象和json字符串区别是什么?分别怎么使用的
JSON字符串转换为JSON对象；用toJSONString()；
JSON对象转化为JSON字符串：全局方法JSON.stringify()。
Json字符串就是字符串，只不过字符串的内容格式是json格式的；
json对象是对象，是json格式的对象， 键值对是json格式，键可以是字符串也可以数字，值可以是字符串也是可以是数值，还可以是数组；
json对象可以通过javascript存取属性！json对象装成json字符串经常用于前后台传输数据！

~~····························································~~
21.说几个js的内置对象(至少3个),以及作用

String对象：字符串对象，提供了对字符串进行操作的属性和方法。
Array对象：数组对象，提供了数组操作方面的属性和方法。
Date对象：日期时间对象，可以获取系统的日期时间信息。
Boolean对象：布尔对象，一个布尔变量就是一个布尔对象。(没有可用的属性和方法)
Number对象：数值对象。一个数值变量就是一个数值对象。
Math对象：数学对象，提供了数学运算方面的属性和方法。
Object对象、RegExp对象、 Global对象、Function对象。

~~····························································~~

22.说一下String字符串的方法(英文名)(至少7种以及参数的使用)

~~····························································~~
23.数组去重的方法有哪些?阐述原理即可

var arr= ["c","a","c","z","d","a","x","a","x","a"];
var newArr=[];
arr.forEach(function (item,index,arr) {
    if(arr.indexOf(item)==index){
        newArr.push(item);
    }
});
console.log(newArr);

~~····························································~~
24.如何实现字符串翻转?

~~····························································~~

DOM问题汇总

1.JS都有哪些事件?(至少说10种英文)
onlick 当点击的时候
onmouseover 鼠标移入
onmouseout 鼠标移出
onmouseup：鼠标按下后松开鼠标时触发此事件
onmousemove：鼠标移动时触发此事件
onfocus：获得焦点事件
onblur：失去焦点事件
onselect：内容被选中事件
ondblclick：鼠标双击事件
onload:加载事件

~~····························································~~
2.获取页面元素的方法有哪些?

~~····························································~~
3.阐述一下DOM中节点访问关系以及兼容性写法

//获取下一个兄弟节点的兼容性封装

function getNext(ele) {
    return ele.nextElementSibling || ele.nextSibling;
}

//获取第一个子节点的封装

function getFirst(parentNode) {
    return parentNode.firstElementChild || parentNode.firstChild;
}

//获取最后一个子节点的封装

function getLast(parentNode) {
    return parentNode.lastElementChild || parentNode.lastChild;
}

//获取所有的兄弟节点(不包括自己)

function getAllSiblings(ele) {
    var siblingArr=[];
    var childArr=ele.parentNode.children;
    for(var i=0;i<childArr.length;i++){
        if(childArr[i]!=ele){
            siblingArr.push(childArr[i])
        }
    }
    return siblingArr;
}

~~····························································~~
4.InnerHTML和innerText的区别
调用者都是父元素

设置:
相同点:HTML/Text都会将父元素原本的内部所有内容覆盖成新内容,
如果设置的是一个普通的不带标签的字符串那么两个结果一样;
如果设置的字符串内容里面包含标签则出现了不同:
innerHTML:会识别字符串中标签并渲染到页面显示出指定标签效果;
innerText:不会识别标签只会把字符串原封不动的放到页面上;
总结:在设置的时候 innerHTML会识别标签,innerText不会识别标签;
获取:
innerHtml:把当前元素里面的所有内容 回车换行元素节点文本内容全部获取,以字符串的形式返回;
innerText:把当前元素的后代所有元素的内部文本和回车换行全都获取到,并不包含元素标签本身只获取文本内容;

~~····························································~~
5.如何操作标签的属性?方法是什么?
元素对象.setAttribute(“属性节点名字”,”属性节点值”)；给标签增加一个属性节点
元素对象.getAttribute(“属性节点名字”); 获取标签的属性节点值
元素对象.removeAttribute(“属性节点名字”); 删除一个属性节点根据属性节点的名称

~~····························································~~
6.nodeType,nodeName和nodeValue的区别?

nodeType:
元素节点调用: 1
属性节点调用: 2
文本节点调用: 3
nodeName:
元素节点调用: 标签名大写!!!
属性节点调用: 属性名字
文本节点调用: #text
nodeValue:
元素节点调用: null
属性节点调用: 属性值
文本节点调用: 空字符串

~~····························································~~
7.JS设置元素样式有哪几种方式?

利用标签四大通用属性中的style属性(设置的是行内样式)
通过class的方式给元素增加样式
元素对象.className= 有=就是赋值没有=就是获取
元素对象.setAttribute()；增加指定属性
元素对象.getAttribute(); 获取指定属性值
元素对象.removeAttribut(); 移除指定属性
元素对象.classList.add() remove() H5新推出
通过元素对象.style.cssText="样式字符串"属性操作行内样式—>也是设置行内样式
ul.style.cssText=“font-size:50px;background-color:red;margin-left:50px;”;
操作的就是标签上面style属性的值直接设置行内样式
而且可以一次性设置多个

~~····························································~~
8.JS中创建节点的方式有哪几种?放到页面上的方式有那种?
创建一个元素对象:
var 新的元素对象= document(只能是document调用!!!).createElement("节点名称");新创建出来的是一个内容为空的元素对象;
document.createElement(tagName) 创建一个元素节点，即 nodeType=1 的节点;tagName为HTML的标签名称，返回一个节点对象。
document.createTextNode(text) 创建一个文本节点，即 nodeType=3的节点;text为文本节点内容，返回一个节点对象；
document.createComment(comment) 创建一个注释节点，即 nodeType=8的节点;comment为注释节点内容，返回一个节点对象；
document.createDocumentFragment() 创建文档碎片节zhi点，文档碎片节点是若干DOM系欸但的集合，可以包括各种类型的节点，如元素节点，文本节点，注释节点。文档碎片节点在创建之初是空的，需要向他添加节点。

~~····························································~~
9.JS删除节点的方式,替换节点的方式,克隆节点的方式以及参数如何使用
创建一个元素对象： var新的元素对象=document.cerateElement(“节点名称”)；
父元素对象.appendChild(元素对象)；将该元素对象拼接到父元素最后一位；
父节点.insertBefore(“新插入的节点对象”,”被参考的旧节点对象”);
父元素.removaChild(子元素对象);
父元素.replaceChild(新元素对象,被替换的老元素对象) ;
节点对象自己.cloneNode(boolean值(默认flase));

~~····························································~~
10.JS中给元素绑定事件大的方法有几种?兼容性如何写?
给元素添加事件的3种方式:

行内添加事件 <div onclick="show()"></div>；
属性绑定的方式添加事件: ele.onclick=function(){}有事件层叠覆盖问题；
添加事件监听的方式
ele.addEventListener("不带on的事件名称",事件驱动函数,布尔值)：
谷歌/火狐/IE9+ 返回:完整的函数对象 /// IE678返回: undefined；
元素对象.attachEvent("带on的事件名称",事件驱动函数)：
谷歌/火狐/IE11+ 返回: undefined /// IE10-6 返回: 整个函数对象(IE678是反着来的后添加的事件先执行)；

addEventlistener和attachEvent的区别.html区别：
事件名称的区别
addEventLisener中第一个参数type是click、load，不带on
attachEvent中一个参数type是onclick、onload
this的区别
addEventLisener：事件处理程序会在当前对象的作用域运行，因此，时间处理程序的this就是当前对象
attachEvent：事件处理程序是在全局作用域下运行因此this就是window

针对添加事件的兼容性封装
参数:

ele 元素对象
不带on的事件名称
事件驱动函数

function addEvent(ele,eventName,fn) {
	if(ele.addEventListener){
//            匹配到此处表示 谷歌/火狐/IE9+
		ele.addEventListener(eventName,fn);
	}else if(ele.attachEvent){
//            IE678匹配到此处
		ele.attachEvent("on"+eventName,fn);
	}else{
        //可以使用onclick 虽然不太可能匹配此处
        //需要使用没有层叠覆盖问题的onclick
		// 1.先获取老事件
		var oldEvent=ele["on"+eventName];
		//2.判断有没有老事件
		if(oldEvent==null){
			//表示没有老事件就可以直接添加新事件 则直接绑定参数传进来的事件驱动函数
			ele["on"+eventName]=fn;
		}else{
			//3.如果有 则把老事件代码先保留
			ele["on"+eventName]=function () {// 4.再注册新事件
               // 5.在执行新事件之前把老事件的代码先执行
				oldEvent();
				fn();
			}
		}
	}
}

~~····························································~~
11.JS中解绑事件的方法有几种?兼容性如何写?

元素.onclick绑定的:就用元素.onclick=null解绑
元素.addEventListener绑定的事件:
就用元素.removeEventListener("不带on的要解绑的事件名称",已经定义好有名字的那个驱动函数)解绑
.元素.attachEvent绑定的事件
就用元素.detachEvent("带on的要解绑的事件名称,已经定义好有名字的那个驱动函数")解绑

解绑事件的兼容性和绑定事件的是一样的！

兼容性写法：

function removeEvent(ele,eventName,fn) {
	if(ele.removeEventListener){
	//证明是  谷歌/火狐/IE9+
		ele.removeEventListener(eventName,fn);
	}else if(ele.detachEvent){
		ele.detachEvent("on"+eventName,fn);
	}else{
		ele["on"+eventName]=null;
	}
}

~~····························································~~
12.setInterval和setTimeout有什么区别?

setTimeout()和setInterval()经常被用来处理延时和定时任务。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式;
setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval()把它清除。
setTimeout()只执行一次，而setInterval()可以多次调用。

BOM 问题汇总

1.能够实现页面跳转的方式有哪些?

window.open打开方式主要是两种：_blank(打开一个空白页面)和_self（在自身页面打开）,window.navigate（ie专用）;
window.location.href="https://www.baidu.com链接地址";页面跳转 href属性的直接替换可以跳转.
Location.assign("地址");
Location.replace("地址")页面跳转到该网址,跳转之后不可返回前一页面.
后退、前进跳转（当前页面跳转）
window.history.back();
window.history.go(1);

调整页面：
window.moveTo(x,y)移动页面到某一位置，位置由x,y决定。
window.resizeTo（宽，高）调整页面的宽度和高度。
window.scrollTo(x,y)滚动页面至哪里，y代表纵向滚动。
模态对话框和非模态对话框
打开模态对话框：window.showModalDialog（“url”,“向目标对话框传的值”，“窗口特征参数”）。
打开非模态对话框：window.showModelessDialog(“url”,“向目标对话框传的值”，“窗口特征参数”)

~~····························································~~
2.Navigator对象能获取什么?有什么作用?
navigator对象里面保存着浏览器的各种信息，判断浏览器的各种信息就是从该对象里的属性来读取;
控制台输入navigator.userAgent,可以获取当前的系统版本和浏览器版本，判断浏览器的名称和版本号,判断出当前是pc端设备还是移动端设备，从而返回不同的页面。
cookicEnablcd:判断是否启用cookic
plugins:保存浏览器中所有插件信息的集合

浏览器代号:navigator.appCodeName;
浏览器名称:navigator.appName ;
浏览器版本:navigator.appVersion;
启用Cookies:navigator.cookieEnabled;
硬件平台:navigator.platform;
用户代理:navigator.userAgent;
用户代理语言: navigator.systemLanguage;

~~····························································~~
3.history对象是干嘛的?有哪些方法?
history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。出于安全考虑，开发人员不能知道用户浏览过的网址的具体url，但是我们可以通过下面方法在不知道具体历史url的情况下控制用户页面前进或后退。
前进功能 history.forward() 或者history.go(n);
后退功能 history.back() 或者history.go(-n);
history.go(0);//页面刷新;

~~····························································~~
4.BOM和DOM有啥区别?
BOM是浏览器对象模型,DOM是文档对象模型
BOM没有相关标准,DOM是W3C的标准
BOM的最根本对象是window,DOM最根本对象是document

~~····························································~~

JS特效问题汇总

1.JS动画有哪几种?

闪动动画
匀速动画
缓动动画

~~····························································~~
2.阐述offset家族的四个属性分别的作用

offsetWidth：当前元素距离；
offsetHeight：当前元素高度；自身包括padding 、边框、内容区的宽度。(width + border + padding)
offsetLeft：当前元素距有定位的父系元素的偏移量；
offsetTop：元素相对第一个有定位的父元素上方的偏移。（父盒子必须有定位，如果没有最终以body为准）；
offsetParent：作为偏移参照点的父级元素,返回当前对象的父级(带有定位)的盒子，可能是父亲或者爷爷，没有定位则取body，都有定位则就近取，区别与parentNode。

offsetHeight/offsettWidth = 内容 + 内边距 + 边框, 这对兄弟获得的是数值，直接style.left获得的是字符串且必须在行内设置属性才能获取到（仅包含内容区域）；

~~····························································~~
3.offsetLeft和style.left的区别?

最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以；
offsetleft返回的是数字，而style.left是字符串；
offsetTop 只读，而 style.top 可读写；style.left是带单位"px"的，而offsetLeft没有单位。
如果没有给HTML指定过left样式，则style.left返回空字符串；
如果元素行内样式有定位值，那么style.left返回的就是那个定位值，而offsetleft如果父系元素都没有定位则按body算左边偏移量；

a) style.left只能获取行内的，而offsetLeft则可以获取到所有的；
b) offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
c) offsetLeft是只读的，而style.left是可读写；
d) 如果没有给当前元素指定过 top 样式，则 style.top 返回的是空字符串。
e) offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px;
注意：可以用parseInt进行转化；比如：styleLeft=‘300px’ —> parseInt(styleLft) —> 300

~~····························································~~
4.匀速框架封装的步骤是什么?

要用定时器先清除定时器；
判断获取步长；
启动定时器；
位移元素；
判断停止定时器；

1.要用定时器先清除定时器；
ClearInterval(timer)
2.设置步长
Var=step=(endX-box.offsetLeft)>0?10:-10;
3.启动定时器
Var timer=setInterval(function(){},25)
4.位移元素
box.style.left=box.offsetLeft+step+”px”
5.判断停止定时器（终点位置-当前位置）绝对值<=步长绝对值
if(box.offsetLeft<=endX){
clearInterval（timer）
ele.style.left=endX+”PX”}

~~····························································~~
5.阐述无缝轮播的实现原理

无缝轮播图，最后一张和第一张的切换是平滑过渡；
把焦点图和左右滑动图加入，并且保持同步；
开始定时器，自动轮播；

在滚动层ul最后插入最前面一个元素，然后在动画滚到最后的时候，初始化滚动层的位置样式(style.left=0)，速度很快(闪动动画)，无法察觉，就如同无缝一般。

5号图片到1号图片之间是相连的，要有两个1号图片，开头一个结尾一个，5号到1号是平滑过渡，等再次位移要到第二张时，瞬间闪动动画，把ul拉到最开始的位置，然后向第二张位移，每次都这样。

~~····························································~~
6.缓动框架的实现原理是什么?
原理：盒子位移的距离=盒子当前的距离+步长（步长越来越小）

1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2.核心算法： (终点位置 – 当前位置) / 10 做为每次移动的距离步长。
3.停止的条件是：让当前盒子位置等于目标位置就停止定时器。
4.注意步长值需要取整。

要用定时器先清除定时器；
启动定时器；
创建步长
步长二次加工；
位移元素；
判断停止定时器；

~~····························································~~
7.Scroll家族的四个属性分别的作用是什么?有什么兼容问题?如何封装?

四个属性分别的作用：

scrollWidth:谷歌/火狐/IE所有版本:内部不超出获取盒子本身的宽度则获取元素本身的宽+padding，内容超出获取内容宽度；
scrollHeight:谷歌/火狐/IE8+:内部不超出获取盒子本身的高度则获取元素本身的高+padding，内容超出获取内容高度， IE67内容超不超出获取内容高度；
scrollLeft/scrollTop当前盒子必须可以滚动，并且有滚动条，才能获取；
scrollTop:如果是元素调用–表示当前元素纵向滚动了多少也就是当前元素被卷去的头部的距离；
scrollLeft:如果是元素调用–表示当前元素横向滚动了多少也就是当前元素被卷去的左侧的距离；
body/html调用scrollTop/Left(实际开发用的最多)，获取的是当前页面被卷去的头部和左侧；

兼容问题：

谷歌/火狐/IE所有版本:
document.documentElment调用都可以获取被卷去的左侧和上边的距离；
谷歌/火狐/IE所有版本
document.body都获取不到被卷去的左侧和上边的距离;

加入DTD头部的兼容性分析:
DTD: Document(文档) Type(类型) Defined(定义)
有DTD头部表示当前页面处在标准模式下，没有DTD头部表示当前页面处在怪异模式；

一. 标准模式:
所有浏览器:
document.documentElment都可以获取;
document.body都获值为0;

二. 怪异模式:
documentElement:
谷歌/火狐:document.documentElement获取为0;
IE所有版本:document.documentElement都能获取值;
document.body:
谷歌/火狐/IE10+:document.body能获取值;
IE9及以下:document.body获取值为0;

提取关键点:
无论是怪异模式还是标准模式:
IE所有版本只认识: document.documentElement;
无论是否有DTD:
window.pageXOffset/window.pageYOffset;
谷歌/火狐/IE9+,能够获取;
IE8及以下,该属性返回undefined.

如何封装：

function scroll() {
	if(window.pageXOffset!=undefined){
//无论是否有头部下的 谷歌/火狐/IE9+
		return {
			left:window.pageXOffset,
			top:window.pageYOffset
		}
	}else{
    //IE8及以下 无论是否有头部
		return{
			left:document.documentElement.scrollLeft,
			top:document.documentElement.scrollTop
		}
	}
}

~~····························································~~
8.Event对象是什么?获取的兼容性写法是如何写的?
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

获取的兼容性写法:
event事件对象的获取有兼容问题:
参数接收:
谷歌/火狐/IE9+ 能获取:IE678返回undefined;
直接获取全局event(不声明参数):
IE678这样能获取到,谷歌/火狐/IE所有版本都能获取;

function(event){
	event= event||window.event;
}

~~····························································~~
9.event对象都有哪些属性,分别的作用是什么?(尤其是三个坐标属性)

event.timeStamp: 距离上一次刷新页面到本次事件触发的间隔时间;
event.type:当前的事件类型;
event.target:指的是当前事件具体是触发在了哪一个子元素上面;
event.button:需要结合鼠标按下或者抬起事件, 鼠标按键:0:左键;1:滚轮键按下;2.右键.
event.pageX/pageY:鼠标到body;
event.screenX/screenY:鼠标到屏幕;
event.clientX/clientY:鼠标到可视区域;

~~····························································~~
10.鼠标在盒子中的位置是如何计算的?
event的page属性有兼容问题:
谷歌/火狐/IE9+:可以使用;
IE678:返回undefined;

所以我们自己计算:
鼠标到body=被卷去的头部+鼠标到浏览器可视区域的距离;

兼容性封装:

function getpageXY(event) {
	if(event.pageX!=undefined){
		return{
			x:event.pageX,
			y:event.pageX
		}
	}else{
		return{
			x:scroll().left+event.clientX,
			y:scroll().top+event.clientY
		}
	}
}

~~····························································~~
11.client家族的四个属性分别的作用是什么?有什么兼容问题?如何封装?
四个属性分别的作用:

clientWidth/Height
如果调用者是盒子:
clientWidth/Height=盒子自身宽高+padding (不包含margin和border);
则获取盒子本身宽高+padding;
如果调用者是body/html(实际开发用的最多):
body/html.clientWidth/Height=浏览器可视区域宽高;
则获取浏览器可视区域宽高
clientLeft/Top(没用)
获取当前左边框/上边框的宽度(所以没用)
所以client经常借用 event.clientX/Y来使用

window.onresize事件: 当前浏览器可视区域变化时触发的事件,理论上每变化1px都会触发;

兼容问题?
clientWidth/Height兼容性分析:

有DTD头部时:
document.documentElement:
谷歌/火狐/IE所有版本,都可以获取到可视区域宽高的值;
没有DTD头部时:
document.body:
谷歌/火狐/IE10+:可以获取到可视区域宽高的值;

总结:

有DTD时,使用document.documentElement;
没有DTD时,使用document.body;
IE9及以下,不管有没有DTD都使用document.documentElement;
不管有没有DTD:window.innerWidth/Height:获取浏览器可视区域宽高;谷歌/火狐/IE9+ 能够获取,IE8及以下返回undefined;
如何封装?

//    封装获取浏览器可视区域宽高的方法
function getClient() {
	if(window.innerWidth!=undefined){
//表示谷歌/火狐/IE9+ 不管有没有DTD都能获取
		return{
			width:window.innerWidth,
			height:window.innerHeight
		}
	}else{
//IE8及以下  不管有没有DTD都能获取
		return {
			width:document.documentElement.clientWidth,
			height:document.documentElement.clientHeight
		}
	}
}

~~····························································~~
12.如何获取屏幕分辨率?如何实现响应式布局
分辨率宽度:window.screen.width
分辨率高度:window.screen.height
响应式: 根据当前设备的分辨率不同切换不同的布局显示;
自适应: 根据当前浏览器的可视区域大小变化而变化布局大小(单位百分比或者em/rem动态单位)

window.onresize=function () {
	getColor();
}
function getColor() {
	if(getClient().width<=640){
		document.body.style.backgroundColor="hotpink"
	}else if(getClient().width>640 && getClient().width<=960){
		document.body.style.backgroundColor="orange"
	}else{
		document.body.style.backgroundColor="blue"
	}
}

~~····························································~~
13.什么是事件冒泡?如何解决?兼容问题是如何处理的?
什么是事件冒泡:当子元素的某一个事件被触发时,父元素的同样事件也会被触发
一直往上触发直到dom树的最上层即document对象（有的浏览器是window）;

事件冒泡如何阻止:

谷歌/火狐/IE9+event.stopPropagation();
所有浏览器都可以阻止:event.cancelBubble=true;

兼容性封装:

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

~~····························································~~
14.什么是事件委托?解决什么问题的?事件委托如何实现?
事件委托:新创建的元素没有老事件,把原本需要绑定的事件委托给父元素，让父元素负责事件监听。
如何处理:不再把事件添加给距离的每一个子元素了,而是把事件添加给了父元素;原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能.

事件委托如何实现:事件委托将事件委托给父元素;

box.onclick=function (event) {
	event=event||window.event;
	event.target=event.target||event.srcElement;
	if(event.target.nodeName=="LI"){
		alert(event.target.innerHTML);
	}
}

~~····························································~~
15.如何获取元素的内嵌和外链css样式?兼容性封装如何完成?
获取元素的行内样式 如果行内没有则返回空字符串:元素.style.css属性名;
获取内嵌和外链样式的属性: window.getComputedStyle(元素,伪类) 返回一个总的css对象,里面包含所有当前元素所有的css属性和默认值,谷歌/火狐/IE9+ ;
IE所有版本: 元素.currentStyle.css属性名 ;

兼容性封装:

function getStyle(ele,attrName) {
	if(window.getComputedStyle!=undefined){
		return window.getComputedStyle(ele)[attrName];
	}else{
		return ele.currentStyle[attrName];
	}
}

~~····························································~~

综合问题汇总

1.前端的SEO手段有哪些?
seo 的工作目的是为了让网站更利于让各大搜索引擎抓取和收录，增加产品的曝光率。

~~····························································~~
2.JS兼容性有哪些?如何处理?
//DOM获取子元素
问题描述: childNodes、firstChild、lastChild会获取包括文本节点在内的所有子节点，但是在IE8及以下的浏览器中，不会把文本节点算作子节点。
解决方案: 如果不需要文本节点，使用带Element的属性或方法获取对象。

//获取非行内样式

function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}

//事件对象的获取兼容

function getEvent(ele){
    var e = ele || window.event;
}

//事件冒泡的兼容

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

//阻止默认事件的兼容

function prevent(eve){
    var e = eve || window.event;
    if(e.preventDefault){
        e.preventDefault();
    }else {
        e.event.returnValue = false;
    }
}

//监听式绑定

function addEvent(ele,type,cb){
    if(ele.addEventListener){
        ele.addEventListener(type,cb);
    }else if(ele.attachEvent){
        ele.attachEvent("on"+type,cb);
    }else {
        ele["on" + type] = cb;
    }
}

//删除绑定

function romoveEvent(ele,type,cb){
    if(ele.removeEventListener){
        ele.romoveEventListener(type,cb);
    }else if(ele.detachEvent){
        ele.detachEvent("on"+type,cb);
    }else {
        ele["on"+type] = null;
    }
}

//键盘检测兼容

function KeyC(eve){
    var e = eve || window.event;
    var keyc = e.keyCode || e.which;
    return keyc;
}

~~····························································~~
3.什么是响应式?什么是自适应?
响应式设计（Responsive design）：就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
自适应设计（Adaptive Design）：自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。
在这里插入图片描述

~~····························································~~
4.CSS动画和JS动画有什么区别?

如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。它可以让你将动画逻辑放在样式文件里面，而不会让你的页面充斥 Javascript 库。然而如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。所以，在实现一些小的交互动效的时候，就多考虑考虑CSS动画。对于一些复杂控制的动画，使用javascript比较可靠。
~~····························································~~
5.页面中如何图片过大加载缓慢如何处理?

首先要尽可能的压缩，看用户的忍受程度。jpg 可以用很多方法压缩。
不太“在乎”用户体验的省事方法：
图片保存成渐进式的，加载会慢慢变清晰，而不是从上往下依次加载，然后放在 CDN，设置缓存之类。
比较“在乎”用户体验的高端方案：
a。判断用户的设备（主要用在移动端）、网络等，分别加载不同质量的图片（例如高端 iPhone wifi 情况下，就可以加载双倍高清图等，蜂窝网络下面，就加载个单倍或者有损压缩过的）。
b。或者先加载低质量的图片，让浏览者可以看到，然后再在后台加载更高清的，等加载完了，浏览者还在观看，就插入替换掉。
c。或者先加载低质量小图片列表，然后让用户点击，触发类似 fancybox 的效果，弹窗出现大图片。

~~····························································~~
6.script标签引入外部资源的时候放在上面和放在最后面的区别

放在head中：统一管理，方便维护；但浏览器会首先加载js文件，如果js文件过大，会造成页面在加载js的时候“无反应”时间过长，影响用户体验。
放在body中（或放在body后）：浏览器会首先加载js文件之前的元素，并显示到界面上，这样给用户的体验较好，但是不方便维护。
建议：页面初始化需要用到的JS或者比较小的JS文件，放在head中。比较特殊的用于页面指定位置的JS文件放在body中对应位置。较大的，影响用户体验的js文件放在body后。
~~····························································~~
7.如果页面加载缓慢,你会从哪几个方面去优化?(任何方面都可以)

按需加载，把统计、分享等 js 在页面 onload 后再进行加载，可以提高访问速度；
优化 cookie ，减少 cookie 体积；
避免 <img> 的 src 为空；
尽量避免设置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能；
合理使用display属性：
字体图标
雪碧图
图片地图

~~····························································~~
8.你了解rem和em么? 有什么区别?

rem与em的本质区别
rem(root element)是参照html的font-size, em(element)是参照父元素的font-size。
使用rem与em的优点
以rem/em为单位比px更方便,屏幕尺寸发生变化时只需要更改html/body基数即可,不需要再重新给每个标签写不同的font-size

~~····························································~~
9.谷歌和IE的盒子模型一样么? 如果不一样请阐述
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。

w3c中的盒子模型的宽:包括margin+border+padding+width;
width:margin*2+border*2+padding*2+width;
height:margin*2+border*2+padding*2+height;
1.iE中的盒子模型的width:也包括margin+border+padding+width;
不过在IE中content的宽度包括padding和border这两个属性；

~~····························································~~
10.伪数组如何转换成数组?
一、创建一个新数组，遍历这个伪数组，并将其每一项添加到新数组中。

var ul=document.getElementsByTagName("li");
 var newArr=[];
for(var i=0;i<ul.length;i++){
newArr.push(ul[i]);
}
console.log(newArr)'

二、借用Array对象的slice方法，并使用call或apply将调用者改为伪数组。

var ul=document.getElementsByTagName("li");
var arrUl=Array.prototype.slice.call(ul);

三、使用ES6的新API，Array.from。

var ul=document.getElementsByTagName("li");
 var arrUl=Array.from(ul);

郝鑫芸

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
WEB面试题（1）

HTML部分问题汇总1.列举一些块级标签和行内标签(越多越好)····························································2.标签的四大通用属性是什么?分别的作用是什么?title：鼠标提示文本；id：属性可用作链接锚(锚点)，配合css选择器使用，选择指定的唯一的元素；class：属性规定元素的类名，配合css使用；style：属性规定元素的行内样式，给元素添加样式；······························
复制链接

扫一扫