郝鑫芸

WEB面试题（1）

HTML部分问题汇总

1.列举一些块级标签和行内标签(越多越好)
块级元素bai(block element)

最常用的块级元素

搭配使用的块级元素

交互表单

大标题

- 水平分隔线

段落

行内元素(inline element)
锚点
粗体
换行
强调
斜体文本效果
^上标;
_下标;
下划线;
文本框;
删除线;
加粗;

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

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

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

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

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

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

列举

：</code>页面主体内容。</li> <li><code><hn></code>：h1~h6，分级标题，<code><h1> 与 <title></code> 协调有利于搜索引擎优化。</li> <li><code><ul>：</code>无序列表;</li> <li><code><li>：</code>有序列表。</li> <li><code><header></code>：页眉通常包括网站标志、主导航、全站链接以及搜索框。</li> <li><code><nav>：</code>标记导航，仅对文档中重要的链接群使用。</li> <li><code><main>：</code>页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。</li> <li><code><aside>：</code>定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。</li> <li><code><section>：</code>定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。</li> <li><code><footer></code>：页脚，只有当父级是body时，才是整个页面的页脚。</li> <li></li> </ol> <s>····························································</s> 5.meta标签都能干嘛?作用分别是什么 <ol> <li><code>meta</code>标签通常用来为搜索引擎<code>robots</code>定义页面主题，或者是定义用户浏览器上的cookie；</li> <li>它可以用于鉴别作者，设定页面格式，标注内容提要和关键字;</li> <li>还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置<code>RASC</code>内容等级，等等。</li> </ol> <blockquote> Meta 对象代表 HTML 的一个 <code><meta></code> 元素。<code><meta></code> 元素可提供有关某个 HTML 元素的元信息 <code>(meta-information)</code>，比如描述、针对搜索引擎的关键词以及刷新频率。 <code>Content</code>：设置或返回 <code><meta></code> 元素的 <code>content</code> 属性的值。 <code>httpEquiv</code>：把 <code>content</code> 属性连接到一个 <code>HTTP</code> 头部。 <code>Name</code>：把 <code>content</code> 属性连接到某个名称。 <code>Scheme</code>：设置或返回用于解释 <code>content</code> 属性的值的格式。 </blockquote> <s>····························································</s> 6.表单中的name属性是干嘛的? <code>name</code> 属性规定 <code>input</code> 元素的名称。 ①<code>name</code> 属性用于对提交到服务器后的表单数据进行标识； ②或者在客户端通过 <code>JavaScript</code> 引用表单数据。 <code>注释</code>：只有设置了 <code>name</code> 属性的表单元素才能在提交表单时传递它们的值。 <pre><code class="prism language-html"><input name="value"> </code></pre> <code>input</code>标签的<code>name</code>属性的作用：<code>name是用来提交内容时的键；</code>表单中的 <code>input</code> 标签必须设置 <code>name</code> 属性，否则在提交表单时，用户在其中输入的数据不会被发送给服务器； <code>form</code> 标签的 <code>name</code> 属性可以用来为表单设置一个独一无二的标识符，以便使用 <code>DOM</code> 时可以区分各个表单； <s>····························································</s> 7.如果表单中有文件域,如何实现文件上传?需要修改哪些地方? 文件域 文件域的使用以及文件上传的配置： 当前表单中如果有file文件控件那么必须做如下配置 <ol> <li>把<code>form</code>标签的entype=“mutilpart/form-data”；</li> <li><code>form</code>标签的<code>method</code>改成post； 解释: 为什么提交方式是post？ 我们知道 get方式是在地址栏拼接，地址栏是有上限了，大小是大概2~3k；我们上传的文件一般， 普通手机拍个照片是 2~3M 高清照片 20M往上；所以大小肯定不够，而post不一样大小理论上无限制； 为什么要改这个enctype 原来默认值是什么? <code>entype</code>的默认值是<code>application/x-www-form-urlencodeed</code>； <code>application/x-www-form-urlencoded</code>表示的意思就是把表单数据以url编码的字符串方式提交；这种方式无法适用于文件上传 所以要改成 <code>enctype="mutilpart/form-data"</code>； mutilpart/form-data 表示二进制流的多部分表单数据流方式提交。</li> </ol> <s>····························································</s> 8.元素在使用时需要注意什么？如果使用错误会出现什么问题？ <ol> <li>代码规范问题： 不要把代码全部都写到一块，这样不仅影响效率，更加影响视觉，当出现问题的时候往往很难找到原因所在;</li> <li>布局问题： 首先构造好网页的整个框架，然后对每个框架逐一进行完善，这样当那个部分出现问题的时候，我们就可以单独找到那个模块进行修改；</li> <li>属性设置问题： 相应的标签对应着自己的属性，因为各个标签对应的属性实在是太多了，很容易混淆，如果我们想给某个标签内的内容设置相应的属性，我们必须在该标签内找到相应的；</li> <li>块级元素： 独占一行，默认有宽没高，可设置宽高；p标签不能嵌块级标签;</li> <li>行内元素： 在一行内显示，默认有高一个文字的高度，不能这是宽高；</li> <li>行内块： 在一行内显示，可以设置宽高；</li> <li>一些元素有默认的padding和margin;</li> <li>ol,ul的子元素必须是li;dt、dd只能在dl里面；dl里面只能有dt、dd；</li> <li>行内和行内块不能嵌套块级；</li> <li>行内可以嵌套行内和行内块；</li> <li>引用问题： 当我们在外部设置了css样式，并且要引用这个样式表时，我们必须要在<code><head></head></code>标签内添加<code><link></code>标签，如外部样式表为style.css，那么我们需要在head标签中添加的是<code><link href="css/style.css" rel="stylesheet" type="text/css"/>,</code>首先href是引入样式的地址必不可少，rel定义了文档与链接的关系，stylesheet是定义一个外部加载样式表。</li> </ol> <s>····························································</s> 9.Html中如何提高页面性能’’ <ol> <li>减少HTTP请求，改善响应时间最简单的途径就是减少HTTP请求的数量；</li> <li>使用雪碧图CSS Sprites，降低下载量；</li> <li>使用CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量，CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力；CDN的缺点：<code>1、</code>响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。<code>2、</code>如果CDN服务质量下降了，那么你的工作质量也将下降<code>3、</code>无法直接控制组件服务器；</li> <li>添加Expires头，页面的初次访问者会进行很多HTTP请求，但是通过使用一个长久的Expires头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的HTPP请求，从而提高加载速度；</li> <li>压缩组件，代理缓存；</li> <li>将样式表放在头部，使页面内容逐步呈现，改善用户体验，防止“白屏”。</li> <li>将脚本放在底部，减少页面首屏出现的时间，使页面内容逐步呈现；</li> <li>避免CSS表达式，用js事件处理机制来动态改变元素的样式，使函数运行次数在可控范围之内；</li> <li>使用外部的JavaScript和CSS，加载后下载；</li> <li>减少DNS查找；</li> <li>精简JavaScript，CSS；</li> <li>删除重复脚本；</li> <li>避免重定向；</li> </ol> <s>····························································</s> 10.阐述主流的浏览器内核分别是什么 <ol> <li>IE浏览器内核：Trident内核，也是俗称的IE内核；</li> <li>Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；</li> <li>Firefox浏览器内核：Gecko内核，俗称Firefox内核；</li> <li>Safari浏览器内核：Webkit内核；</li> <li>Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；</li> <li>360浏览器、猎豹浏览器内核：IE+Chrome双内核；</li> <li>百度浏览器、世界之窗内核：IE内核；</li> </ol> <s>····························································</s> 11.xhtml和html有什么区别 <ul> <li> 一、其基础语言不同 1、XHTML是基于可扩展标记du语言（XML）。zhi 2、HTML是基于标dao准通用标记语言（SGML）。 </li> <li> 二、语法严格程度不同 1、XHTML语法比较严格，存在DTD定义规则。 2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。 </li> <li> 三、可混合应用不同 1、XHTML可以混合各种XML应用，比如MathML、SVG。 2、HTML不能混合其它XML应用。 </li> <li> 四、大小写敏感度不同 1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。 2、HTML对大小写不敏感。 </li> <li> 五、公布时间不同 1、XHTML是2000年W3C公布发行的。 2、HTML4.01是1999年W3C推荐标准。 </li> </ul> <blockquote> 扩展资料： HTML到XHTML的过渡： 从HTML到XHTML过渡的变化比较小，主要是为了适应XML。最大的变化在于文档必须是良构的，所有标签必须闭合，也就是说开始标签要有相应的结束标签。另外，XHTML中所有的标签必须小写。 而按照HTML 2.0以来的传统，很多人都是将标签大写，这点两者的差异显著。在XHTML中，所有的参数值，包括数字，必须用双引号括起来（而在SGML和HTML中，引号不是必须的，当内容只是数字、字母及其它允许的特殊字符时，可以不用引号）。所有元素，包括空元素，比如img、br等，也都必须闭合，实现的方式是在开始标签末尾加入斜扛，比如<code><img … /></code> 、<code> </code>。 </blockquote> <h3>CSS部分问题汇总</h3> 1.阐述CSS的三种引入方式以及优先级 1.行内样式 2.内嵌样式 3.外链样式 行内>内嵌>链接 <s>····························································</s> 2.CSS选择器有哪些?权值分别是多少? 默认样式<code>(<0)</code><通配符选择器<code>(0)</code><标签选择器<code>(1)</code><class选择器<code>(10)</code><id选择器<code>(100)</code><行内样式<code>(1000)</code><!important<code>(>1000)</code>; 基本选择器：通配符选择器，标签选择器，class选择器，id选择器， 复合选择器：交集选择器（#.），并集选择器(,)，子代选择器，后代选择器， <s>····························································</s> 3.阐述CSS三大特性(层叠继承优先级) 继承：子类可以使用父类的属性 <ol> <li>不是所有的属性都可以继承,只有以color/font-/text-/line开头的属性才可以继承</li> <li>在css中的继承不仅是儿子才可以继承,只要是后代就可以继承</li> <li>css继承性中的特殊性 a标签的文字颜色和下划线是不能被继承的 h标签的文字大小是不能被继承的</li> </ol> 层叠：层叠性只有在多个选择器选中"同一个标签",然后又设置了"相同的属性",才会发生层叠性 优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 <s>····························································</s> 4.说一下伪类选择器的使用顺序 链接被访问之前选中 <pre><code class="prism language-css">a:link{} </code></pre> 链接被访问之后选中 <pre><code class="prism language-css">a:visited{} </code></pre> 鼠标悬停被选中 <pre><code class="prism language-css">a:hover{} </code></pre> 链接被按下之后 <pre><code class="prism language-css">a:active{} </code></pre> 由于样式的叠加特性和用户的操作先后顺序影响， 以上四个伪类选择器在书写时尽量按照<code>link vistied hover active</code>的顺序来书写。 <blockquote> 首先伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活）规则是由于CSS特殊性导致，css特殊性有一个按顺序的规则（同一条css规则，后出现会覆盖前面的同样规则） 在这里，比如把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色； 如果把visited放在hover的后面，那么已经访问过的链接始终触发visited伪类，根据第一条会覆盖hover里面的颜色。其实link visited 这两个伪类，并不需要顺序关系。（他们两的位置可以交换） </blockquote> <s>····························································</s> 5.background背景属性都有哪些 ?以及连写的时候要注意什么 <code>background-color</code>：指定要使用的背景颜色;默认transparent； <code>background-image</code>：指定要使用的一个或多个背景图像 <code>background-repeat</code>：指定如何重复背景图像 <code>background-attachment</code>：设置背景图像是否固定或者随着页面的其余部分滚动。scroll 背景图片随页面的其余部分滚动。这是默认；fixed 背景图像是固定的；inherit 指定background-attachment的设置应该从父元素继承；local 背景图片随滚动元素滚动。 <code>background-position</code>：指定背景图像的位置 <code>background-size</code>：指定背景图片的大小；cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 <code>background-clip</code>：指定背景图像的绘画区域；padding-box 背景图像填充框的相对位置；border-box 背景图像边界框的相对位置；content-box 背景图像的相对位置的内容框。 <code>background: color url() repeat attachment position</code>; 连写的时候要注意空格，中间要隔开最后写封号结束 W3C:<code>background: color position size repeat origin clip attachment image</code>; <s>····························································</s> 6.阐述盒子模型 MDN中的定义： W3C盒模型是 CSS 规范的一个模块，它定义了一个长方形的盒子，每个盒子拥有各自的内边距和外边距，并根据视觉格式化模型来对元素进行布局。 标准盒模型： 其中最主要的五个属性： width：内容区（content）的宽度。 height：内容区（content）的高度。 padding：内边距。 border：边框。 margin：外边距。 <blockquote> 在标准盒模型中，整个div可以看做一个盒子，而此时整个盒子的宽度并不等于width，而是width+2border+2padding，最中间的content宽度等于width; 此时设置的宽度只能应用到内容区。 值得一提的是，虽然margin也属于存在于盒子模型中，但并不参与盒子模型的宽度和高度计算，可以看做是用于控制与其他元素之间的距离关系。 </blockquote> IE盒模型： IE5.5及更早的版本使用的是IE盒模型，而IE6之后，也遵从了标准盒模型。它的计算方法与标准盒模型不同，接下来会阐述不同在哪。 <blockquote> 设置宽度后，效果和宽度一样：因此若改动任意一个width、padding或border都会导致盒子的大小发生改变，这对布局来说十分不友好。 </blockquote> 解决办法：使用<code>box-sizing</code>属性改变盒子模型的计算方式。 MDN中写道：如果<code>box-sizing</code>为默认值<code>content-box，width、min-width、max-width、height、min-height 与 max-height</code>控制内容大小。 ····························································~ 7.margin使用的时候注意点有哪些? <blockquote> 父盒子没有定位，子盒子margin-top边框塌陷：解决方法： 1.给父盒子加上border边框 2.给父盒子加上overflow：hidden </blockquote> <blockquote> margin的合并现象,相邻的地方同时使用了外边距,只取较大的那个外边距值。 </blockquote> <blockquote> 行内元素不生效 </blockquote> <s>····························································</s> 8.padding使用时候注意点有哪些? <ol> <li>padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。 默认是0，负值是不允许的。</li> <li>上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。</li> <li>连写： padding:上右下左; padding:上左右下 ; padding:上下左右 ;</li> <li>没有继承性</li> <li>padding的作用主要是控制边框与内容的距离，即内边距。</li> </ol> <s>····························································</s> 9.什么是边框塌陷?如何解决? 边框塌陷：父子元素边框塌陷；大div没有设置高度，那么大（父）div的高度是由这四个小（子）div的高度撑起来的，但是子div脱离了标准文档流使得子元素无法撑起文档流的时候，就会边框塌陷。 解决： <ol> <li>父级元素加border: 1px solid transparent；</li> <li>父元素加overflower：hidden；</li> <li>为父DIV添加padding，或者至少添加padding-top；</li> <li>BFC 1.position: absolute 2.display:inline-block 3.float:left 4.overflow:hidden</li> </ol> <s>····························································</s> 10.阐述一下什么是标准文档流 标准文档流：文档的流向，文档默认排布方式； 什么是标准文档流：每一类标准属性不同，默认文档流向也不同。块级元素：从上到下，行内元素：从左到右，行内块元素：有大小从左到右。 <s>····························································</s> 11.浮动如何设置?以及清除浮动的四种方式? 设置浮动：float：left/right; 清除浮动的四种方式: <ol> <li> 给浮动元素的父元素添加高度; </li> <li> clear:both;在最后一个子元素新添加一个块级元素，然后将其设置clear:both,这样就可以清除浮动。 </li> <li> 伪元素清除浮动;元素:after; <a href="http://img.e-com-net.com/image/info8/4b8d72fad1714b86a8da1245411e0457.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4b8d72fad1714b86a8da1245411e0457.jpg" alt="WEB面试题（1）_第1张图片" width="550" height="223" style="border:1px solid black;"></a> </li> <li> br标签清浮动:br标签存在一个属性：clear。这个属性就是能够清除浮动的利器，在br标签中设置属性clear，并赋值all。即能清除掉浮动。 </li> </ol> <s>····························································</s> 12.rgba()和opacity的透明效果有什么不同？ <ol> <li>rgba:只会对当前设置元素进行透明度的变换。不会带着子元素或者前景色。</li> <li>opacity：会对当前元素和内部内容一起变透明。</li> </ol> <s>····························································</s> 13.CSS中隐藏盒子有几种方式?请表述分别是否占位问题 占位: position=relative; Margin-left=-500px; opacity=“0”; visibility=hidden; background=transparent; 背景透明 不占位: position=absolute/fixed; display=none; marginTop=-500px; 同方向的不占位会带着后面元素一起走 marginLeft=-500px; 不同方向的则占位 float=left; 让当前元素不占位 <s>····························································</s> 14.CSS中position定位属性分别都是什么?有什么区别?分别按照什么定位? 在CSS中关于定位的内容是： position:relative | absolute | static | fixed； <ol> <li> relative： 相对定位： 按原本应出现的位置偏移； 相对定位以元素自身位置为基准设置位置； 相对定位占位。 </li> <li> absolute： 绝对定位：（元素变成行内块） 直接按照坐标值定位； 是按照有定位属性<code>(absolute/relative/fixed)</code>的父盒子进行定位的，如果父系盒子都没有定位属性，按照body定位。 如果当前元素直接在body里面那么绝对定位按照body去定位； 如果当前元素有父元素但是父元素并没有设置position值(父元素没有定位)祖先元素也没有定位，则还按照body。 如果父系盒子有定位属性那么当前元素的绝对定位按照那个父盒子进行定位。 绝对定位不占位。 子绝父相 (子元素绝对定位父元素相对定位)； </li> <li> static 静态定位是默认值 (默认没定位) </li> <li> fixed 固定定位: 固执型 直接按照浏览器窗体定位不会随着浏览器的滚动而滚动； 固定定位一定要注意不能定位到窗体外部，一旦定位外部了，那么就永远看不见了； </li> </ol> <s>····························································</s> 15.关于CSS中浏览器前缀有哪些?分别对应哪个浏览器 Opera浏览器: -o- 火狐浏览器: -moz- 谷歌和Safari: -webkit- IE前缀: -ms- <s>····························································</s> 16.Line-height行高在什么情况下会失效 在用css对行高进行设置时，line-height的属性必须在font的下面，否则无效！ <s>····························································</s> 17.CSS中有哪些兼容问题?是如何处理的?(越多越好最少5个) <ol> <li>不同浏览器的标签默认的margin和padding不同； 解决：CSS里 <code>*{margin:0;padding:0;}</code></li> <li>块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大； 解决：在float的标签样式控制中加入 <code>display:inline;</code>将其转化为行内属性；</li> <li>设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度； 解决：给超出高度的标签设置<code>overflow:hidden;</code>或者设置行高<code>line-height</code> 小于你设置的高度。</li> <li>行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug 解决：在<code>display:block;</code>后面加入<code>display:inline;display:table;</code></li> <li>图片默认有间距； 解决：使用float属性为img布局；</li> <li>标签最低高度设置<code>min-height</code>不兼容 解决：如果我们要设置一个标签的最小高度200px，需要进行的设置为<code>：{min-height:200px; height:auto !important; height:200px; overflow:visible;}</code></li> <li>各种特殊样式的兼容，比如透明度、圆角、阴影等； 特殊样式每个浏览器的代码区别很大，所以，只能现查资料通过给不同浏览器写不同的代码来解决；</li> </ol> 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； <s>····························································</s> 18.你自己认为的CSS性能优化有哪些? <ol> <li>尽量将样式写在单独的css文件里面,在head元素中引用；</li> <li>避免使用复杂的选择器,层级越少越好；</li> <li>精简页面的样式文件,去掉不用的样式；</li> <li>利用CSS继承减少代码量；</li> <li>不滥用浮动，web字体；</li> <li>合理命名，增强可维护性；</li> <li>遵守盒模型规则</li> </ol> <s>····························································</s> 19.CSS精灵是什么? 优点有什么?为什么要使用CSS精灵? css精灵即CSS Sprite，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所z有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了; CSS Sprites 优点： 1、减少图片的字节 2、减少了网页的http请求，从而大大的提高了页面的性能，优化页面展示速度。 4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。 CSS Sprites 缺点： 1、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂； <s>····························································</s> 20.CSS中颜色取值有哪些? <ol> <li>颜色名称 ，如red black white</li> <li>十六进制颜色，网页中常用，每两位代表红绿蓝的值的比例，如 #ffffff白色 #000000黑色；</li> <li>rgba颜色，如 rgba(255,255,255,0.5) 半透明白色；</li> <li>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之间。</li> </ol> <s>····························································</s> 21.块级元素,行内元素,行内块元素之间有什么区别? <blockquote> 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。 块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。 块级元素从新行开始，结束接着一个断行。 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效； </blockquote> <blockquote> 行内不独占一行不能设置宽高宽度与内容有关同站一行 块级独占一行有宽没高在没设置宽默认100% 行内块在一行内显示可以设置宽高 </blockquote> 区别： <ol> <li>行内元素与bai块级函数可以相互转换，通过修改display属性值du来切换块zhi级元素和行内元dao素，行内元素display：inline，块级元素display：block。</li> <li>行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。</li> <li>行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。</li> <li>块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。</li> </ol> <s>····························································</s> 22.线性渐变与径向渐变的用法 <code>渐变使用的是background-image</code>； <code>线性渐变 linear-gradient</code>； <code>径向渐变 radial-gradient</code>； <ol> <li>线性渐变</li> </ol> 用法1: <pre><code class="prism language-css">linear-gradient(颜色1,颜色2,颜色3,...颜色n); background-image:linear-gradient(red,#0f0,purple); 都是平均分的渐变; </code></pre> 用法2: <pre><code class="prism language-css">linear-gradient(颜色1 百分比,颜色2 百分比,...颜色n 百分比); background-image:linear-gradient(red 10%,#0f0 50%,blue 80%) </code></pre> 用法3: <pre><code class="prism language-css">linear-gradient(角度deg,颜色1 百分比....) background-image: linear-gradient(180deg,red,blue); </code></pre> <ol> <li>径向渐变</li> </ol> <pre><code class="prism language-css">用法1 background-image: radial-gradient(red,blue); </code></pre> <pre><code class="prism language-css">用法2 background-image: radial-gradient(red 10%,blue 30%); </code></pre> <pre><code class="prism language-css">改变圆心位置 center表示默认是中心 background-image: radial-gradient(circle at center ,red 10%,blue 30%); </code></pre> <pre><code class="prism language-css">圆心还可以写px值 background-image: radial-gradient(circle at 100px 100px ,red 10%,blue 30%); </code></pre> <pre><code class="prism language-css">如果后面两个数是相等的那么就是正圆的径向如果不相等这就是椭圆 background-image: radial-gradient(ellipse at 100px 100px ,red 10%,blue 30%); </code></pre> <pre><code class="prism language-css">线性渐变重复 background-image: repeating-linear-gradient(60deg,red 10%,blue 30%);*/ 径向渐变重复 background-image: repeating-radial-gradient(red 10%,#0f0 20%); </code></pre> <s>····························································</s> 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设置为宽度的负一半拉回来， <a href="http://img.e-com-net.com/image/info8/e4f0943c3ecf457d9fd6caa0c2da517b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e4f0943c3ecf457d9fd6caa0c2da517b.jpg" alt="WEB面试题（1）_第2张图片" width="650" height="383" style="border:1px solid black;"></a> <s>····························································</s> 24.为什么要初始化样式? <ol> <li>因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异；</li> <li>也可使页面风格统一；</li> </ol> <s>····························································</s> 25.CSS中link和@import的区别是? <ol> <li>link属于HTML标签，而@import是CSS提供的;</li> <li>页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;</li> <li>import只在IE5以上才能识别，而link是HTML标签，无兼容问题;</li> <li>link方式的样式的权重高于@import的权重</li> </ol> <h3>CSS3部分问题汇总</h3> 1.CSS3中动画与过渡有什么区别? transition需要触发一个事件才会随着时间改变其CSS属性； animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。 1）动画不需要事件触发，过渡需要。 2）过渡只有一组（两个：开始-结束）关键帧，动画可以设置多个。 <blockquote> 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" </blockquote> <s>····························································</s> 2.将你知道的CSS3选择器列举出来（越多越好） <ol> <li>相邻兄弟选择器:</li> </ol> <pre><code class="prism language-css">选择器1+选择器2{ css代码} </code></pre> <ol start="2"> <li>通用兄弟选择器:</li> </ol> <pre><code class="prism language-css">选择器1~选择器2{css代码} </code></pre> <ol start="3"> <li>属性选择器（8个)</li> </ol> <pre><code class="prism language-css">[属性名]{css代码} </code></pre> <pre><code class="prism language-css">选择器[属性名]{css代码} </code></pre> <pre><code class="prism language-css">选择器[属性名1][属性名2]{css代码} </code></pre> <pre><code class="prism language-css">选择器[属性名="属性值"]{css代码} </code></pre> <pre><code class="prism language-css">选择器[class~="class名字"]{css代码} </code></pre> <pre><code class="prism language-css">选择器[class^="字符串"]{css代码} </code></pre> <pre><code class="prism language-css">选择器[class*="字符串"]{css代码} </code></pre> <pre><code class="prism language-css">选择器[class$="字符串"]{css代码} </code></pre> <ol start="4"> <li>动态伪类选择器（5个）</li> </ol> <pre><code class="prism language-handlebars">:link :visitied :hover :active :focus表示当前元素获取焦点时触发的伪类， 只针对获取能够获取焦点的元素生效。 </code></pre> <ol start="5"> <li>目标伪类:</li> </ol> <pre><code class="prism language-css">选择器:target </code></pre> <ol start="6"> <li>元素状态伪类 <code>:enabled,</code>匹配每个已启用的元素(大多用在表单元素上) <code>:disabled,</code>匹配每个被禁用的元素(大多用在表单元素上) <code>:checked</code>，匹配每个已被选中的input元素(只用于单选按钮和复选框)</li> <li>结构伪类</li> </ol> <pre><code class="prism language-css">1.子元素选择器:nth-child(number){CSS代码} </code></pre> <pre><code class="prism language-css">2.第一个子元素 :first-child{css代码} </code></pre> <pre><code class="prism language-css">3.最后一个子元素 :last-child{css代码} </code></pre> <pre><code class="prism language-css">4.找到没有子元素的元素本身选择器:empty{css代码} </code></pre> <pre><code class="prism language-css">5.匹配只有一个子元素的元素选择器:only-child{css代码} </code></pre> <ol start="8"> <li>否定伪类</li> </ol> <pre><code class="prism language-css">:not(选择器){不是该选择器的元素生效该样式} </code></pre> <ol start="9"> <li>伪元素选择器</li> </ol> <pre><code class="prism language-css"> :first-letter{表示当前选择器选择的元素的第一个字符} </code></pre> <pre><code class="prism language-css">:first-line{表示当前选择器选择的元素第一行文字} </code></pre> <pre><code class="prism language-css">::selection{表示选中文字时文字的样式} 注意: 文字大小不生效 </code></pre> <s>····························································</s> 3.简述C3的2D 3D转换有哪些如何设置转换圆心？ css中的所谓转换指的是改变元素位置,尺寸,形状的一种属性；分为 2D转换和 3D转换。 转换分为四大方向: <code>旋转(transform: rotate)</code> <code>位移(translate)</code> <code>缩放（scale）</code> <code>倾斜（skew）</code> 分别进行2D和3D的效果转换 所谓的3D转换就是在父元素里面添加一个属性 <code>perspective:px值</code>; 100~900之间，值越小 3D效果越明显，值越大 3D效果越不明显； 默认的旋转圆心是中心点也可以通过 <code>transform-origin</code>去改变圆心 <code>transform-origin:x轴圆心 y轴圆心 z轴圆心</code>(只有3D转换才生效) <s>····························································</s> 4.CSS3有哪些新特性 <ol> <li>边框</li> </ol> <code>border-radius：</code>为元素添加圆角边框，border-radius 属性是一个简写属性，用于设置四个 border-radius 属性； <pre><code class="prism language-css">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; </code></pre> <code>box-shadow：</code>向框添加一个或多个阴影。 语法：<code>box-shadow: 水平位移垂直位移 [模糊半径阴影尺寸阴影颜色 inset(内部阴影)];</code> <pre><code class="prism language-css">box-shadow: 10px 10px 5px #888888; </code></pre> <code>border-image：</code>设置边框图像，该属性是一个简写属性，用于设置以下属性： <pre><code class="prism language-css">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; </code></pre> <ol start="2"> <li>背景</li> </ol> <code>background-size：</code>背景图片的尺寸。 <pre><code class="prism language-css">background-size: 100px 100px;/* 第一个值设置宽度，第二个值设置高度 */ background-size: 50% 50%;/* 以父元素的百分比来设置背景图像的宽度和高度 */ background-size: cover;/* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 */ background-size: contain;/* 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 */ </code></pre> <code>background-origin：</code>规定 background-position 属性相对于什么位置来定位。 <pre><code class="prism language-css">background-origin: padding-box;/* 背景图像相对于内边距框来定位（默认值） */ background-origin: border-box;/* 背景图像相对于边框盒来定位 */ background-origin: content-box;/* 背景图像相对于内容框来定位 */ </code></pre> <code>background-clip：</code>规定背景的绘制区域。 <pre><code class="prism language-css">background-clip: padding-box;/* 背景被裁剪到内边距框 */ background-clip: border-box;/* 背景被裁剪到边框盒（默认值） */ background-clip: content-box;/* 背景被裁剪到内容框 */ </code></pre> <ol start="3"> <li>渐变</li> </ol> <code>linear-gradient()：</code>线性渐变。 语法：<code>background: linear-gradient(方向, start-color, ..., last-color)</code>; <pre><code class="prism language-css">background: linear-gradient(red, blue); /* 省略方向默认从上到下 */ background: linear-gradient(to right, red , blue);/* 从左侧开始的线性渐变，从红色开始，转为蓝色 */ background: linear-gradient(to bottom right, red , blue); /* 从左上角到右下角的线性渐变 */ </code></pre> <code>radial-gradient()：</code>径向渐变。 语法：<code>background: radial-gradient(圆的类型渐变的大小 at 渐变的位置, start-color, ..., last-color);</code> <pre><code class="prism language-css">/* 椭圆形渐变 */ 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); </code></pre> <ol start="4"> <li>文本效果</li> </ol> <code>word-break：</code>定义如何换行。 <a href="http://img.e-com-net.com/image/info8/c1bd19e78f4c4f579e6319ba41747eb7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c1bd19e78f4c4f579e6319ba41747eb7.jpg" alt="WEB面试题（1）_第3张图片" width="650" height="151" style="border:1px solid black;"></a> <code>word-wrap：</code>允许长的内容可以自动换行。 <a href="http://img.e-com-net.com/image/info8/165b5a94003d4df7b8a3ed0879d0be5b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/165b5a94003d4df7b8a3ed0879d0be5b.jpg" alt="WEB面试题（1）_第4张图片" width="650" height="114" style="border:1px solid black;"></a> <code>text-overflow：</code>指定当文本溢出包含它的元素，应该发生什么。 <a href="http://img.e-com-net.com/image/info8/505e113b96ff4d90b4918079cede5bc1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/505e113b96ff4d90b4918079cede5bc1.jpg" alt="WEB面试题（1）_第5张图片" width="650" height="150" style="border:1px solid black;"></a> <code>text-shadow：</code>文字阴影。 语法：<code>text-shadow: 水平位移垂直位移 [模糊半径阴影颜色];</code> <ol start="5"> <li>转换</li> </ol> <code>transform：</code>应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 语法：<code>transform: none（默认)|transform-functions;</code> <code>transform-origin：</code>允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。 语法：<code>transform-origin: x-axis y-axis z-axis</code>; <a href="http://img.e-com-net.com/image/info8/5b69403b9b1b451f8a36bc97d569513f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5b69403b9b1b451f8a36bc97d569513f.jpg" alt="WEB面试题（1）_第6张图片" width="650" height="322" style="border:1px solid black;"></a> <pre><code class="prism language-css">transform-origin: 0% 0%;/* 将元素左上角设为旋转点 */ </code></pre> <code>transform-style：</code>指定嵌套元素是怎样在三维空间中呈现。 <a href="http://img.e-com-net.com/image/info8/51d87e12795b43d098093273ad700463.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/51d87e12795b43d098093273ad700463.jpg" alt="WEB面试题（1）_第7张图片" width="650" height="119" style="border:1px solid black;"></a> <ol start="6"> <li>2D转换方法</li> </ol> <code>rotate(angle)：</code>定义 2D 旋转，在参数中规定角度。 <code>translate(x,y)：</code>指定元素在二维空间中的位移。X轴方向向右，Y轴方向向下。 <code>translateX(n)：</code>指定元素在X轴中的位移。 <code>translateY(n)：</code>指定元素在Y轴中的位移。 <code>scale(n)：</code>定义 2D 缩放转换。 <pre><code class="prism language-css">transform: scale(2);/* 放大两倍 */ </code></pre> <code>scaleX(n)：</code>定义 X 轴方向的缩放转换。 <code>scaleY(n)：</code>定义 Y 轴方向的缩放转换。 <code>matrix(a,b,c,d,e,f)：</code>定义 2D 转换，使用六个值的矩阵。 <a href="http://img.e-com-net.com/image/info8/6836781743af400f84afba68c34cf9d1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6836781743af400f84afba68c34cf9d1.jpg" alt="WEB面试题（1）_第8张图片" width="650" height="260" style="border:1px solid black;"></a> <pre><code class="prism language-css">transform: matrix(2, 1, 0, 2, 50, 50); /* 水平放大两倍，水平倾斜，垂直放大两倍，水平向左移动50%，垂直向下移动50% */ </code></pre> <code>skew(x-angle,y-angle)：</code>定义沿着 X 和 Y 轴的 2D 倾斜转换。 <code>skewX(angle)：</code>定义沿着 X 轴的 2D 倾斜转换。 <code>skewY(angle)：</code>定义沿着 Y 轴的 2D 倾斜转换。 <ol start="7"> <li>3D转换方法</li> </ol> <code>perspective(n)：</code>为 3D 转换元素定义透视视图。 <a href="http://img.e-com-net.com/image/info8/9b1ff0b39a6e4c9092b092be00db870c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9b1ff0b39a6e4c9092b092be00db870c.jpg" alt="WEB面试题（1）_第9张图片" width="650" height="121" style="border:1px solid black;"></a> <code>translate3d(x,y,z)：</code>指定元素在三维空间中的位移。X轴方向向右，Y轴方向向下，Z轴方向向你。 <code>translateX(x)</code>：指定元素在X轴中的位移。 <code>translateY(y)</code>：指定元素在Y轴中的位移。 <code>translateZ(z)</code>：指定元素在Z轴中的位移。 <code>scale3d(x,y,z)</code>：定义 3D 缩放转换。 <code>scaleX(x)</code>：通过设置 X 轴的值来定义缩放转换。 <code>scaleY(y)</code>：通过设置 Y 轴的值来定义缩放转换。 <code>scaleZ(z)</code>：通过设置 Z 轴的值来定义缩放转换。 <code>rotate3d(x,y,z,angle)</code>：定义 3D 旋转。 <code>rotateX(x)</code>：定义沿着 X 轴的 3D 旋转。 <code>rotateY(y)</code>：定义沿着 Y 轴的 3D 旋转。 <code>rotateZ(z)</code>：定义沿着 Z 轴的 3D 旋转。 <code>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)</code>：定义 3D 转换，使用 16 个值的 4x4 矩阵。 <ol start="8"> <li>过渡</li> </ol> <code>transition</code>：设置元素当过渡效果，四个简写属性为： <code>transition-property</code>：过渡属性名。 <code>transition-duration</code>：规定完成过渡效果需要花费的时间（以秒或毫秒计）。 <code>transition-timing-function</code>：指定切换效果的速度。 <a href="http://img.e-com-net.com/image/info8/c77e5dd9f3d94844aebaca030576f8a0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c77e5dd9f3d94844aebaca030576f8a0.jpg" alt="WEB面试题（1）_第10张图片" width="650" height="121" style="border:1px solid black;"></a> <code>cubic-bezier(x1,y1,x2,y2)</code>：贝塞尔曲线，是控制变化的速度曲线。 <a href="http://img.e-com-net.com/image/info8/63e237633bff41ccaa5076fceb437fb1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/63e237633bff41ccaa5076fceb437fb1.jpg" alt="WEB面试题（1）_第11张图片" width="382" height="322" style="border:1px solid black;"></a> <blockquote> 从上图中我们可以看到，cubic-bezier有四个点：两个默认的，即：P0(0,0)，P3(1,1)； 两个控制点，即：P1(x1,y1)，P2(x2,y2)； 注：X轴的范围是0~1，超出cubic-bezier将失效，Y轴的取值没有规定，但是也不宜过大。 我们只要调整两个控制点P1和P2的坐标，最后形成的曲线就是动画曲线。 </blockquote> <code>transition-delay</code>：指定何时将开始切换效果。 <ol start="8"> <li>动画</li> </ol> <code>animation</code>：为元素添加动画，是一个简写属性。 语法：<code>animation: name duration timing-function delay iteration-count direction fill-mode play-state;</code> <code>animation-name：为 @keyframes 动画名称</code>。 <code>animation-duration：动画指定需要多少秒或毫秒完成</code>。 <code>animation-timing-function：设置动画将如何完成一个周期</code>。 <a href="http://img.e-com-net.com/image/info8/c57b75e0067747cead74b5f6a1870a0c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c57b75e0067747cead74b5f6a1870a0c.jpg" alt="WEB面试题（1）_第12张图片" width="650" height="311" style="border:1px solid black;"></a> <code>animation-delay：设置动画在启动前的延迟间隔，可以是秒或毫秒</code>。 <code>animation-iteration-count：定义动画的播放次数</code>。 <a href="http://img.e-com-net.com/image/info8/cb7b26bafbee4c5fabb397f013e4564a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cb7b26bafbee4c5fabb397f013e4564a.jpg" alt="WEB面试题（1）_第13张图片" width="650" height="119" style="border:1px solid black;"></a> <code>animation-direction：指定是否应该轮流反向播放动画</code>。 <a href="http://img.e-com-net.com/image/info8/6e1fe8b65a724593ae7b45fd2ec76835.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6e1fe8b65a724593ae7b45fd2ec76835.jpg" alt="WEB面试题（1）_第14张图片" width="650" height="194" style="border:1px solid black;"></a> <code>animation-fill-mode：规定当动画不播放时</code>（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。该属性可重写该行为。 <a href="http://img.e-com-net.com/image/info8/3eda82957e4d476fb518880c6e679dd1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3eda82957e4d476fb518880c6e679dd1.jpg" alt="WEB面试题（1）_第15张图片" width="650" height="253" style="border:1px solid black;"></a> <code>animation-play-state：指定动画是否正在运行或已暂停</code>。<a href="http://img.e-com-net.com/image/info8/270a481542164be8949a93f38579ef21.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/270a481542164be8949a93f38579ef21.jpg" alt="WEB面试题（1）_第16张图片" width="650" height="121" style="border:1px solid black;"></a> <code>@Keyframes规则：使用@keyframes规则，你可以创建动画</code>。 语法： <pre><code class="prism language-css">@keyframes animationname { keyframes-selector {css-styles;} } </code></pre> <a href="http://img.e-com-net.com/image/info8/f654131212294043b67a3d67f8100519.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f654131212294043b67a3d67f8100519.jpg" alt="WEB面试题（1）_第17张图片" width="650" height="260" style="border:1px solid black;"></a> <pre><code class="prism language-css">@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;} } </code></pre> <s>····························································</s> 5.CSS3的兼容问题如何处理 <pre><code class="prism language-css">{ transform:rotate(30deg); -ms-transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -o-transform:rotate(30deg); } </code></pre> <ol> <li>圆角的兼容 <a href="http://img.e-com-net.com/image/info8/5e3c8c24d9b047cbb9d196fe31a44af5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5e3c8c24d9b047cbb9d196fe31a44af5.jpg" alt="WEB面试题（1）_第18张图片" width="568" height="152" style="border:1px solid black;"></a></li> </ol> <pre><code class="prism language-css">-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浏览器 */ </code></pre> <ol start="2"> <li>阴影 <a href="http://img.e-com-net.com/image/info8/510a8965983143bfaa24f2640f9301b2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/510a8965983143bfaa24f2640f9301b2.jpg" alt="WEB面试题（1）_第19张图片" width="650" height="203" style="border:1px solid black;"></a></li> </ol> <pre><code class="prism language-css">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))); </code></pre> <ol start="3"> <li>元素阴影 <a href="http://img.e-com-net.com/image/info8/798af725f3d8456d94dd2fd42fe39b8d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/798af725f3d8456d94dd2fd42fe39b8d.jpg" alt="WEB面试题（1）_第20张图片" width="494" height="134" style="border:1px solid black;"></a></li> </ol> <pre><code class="prism language-css">-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 * </code></pre> <s>····························································</s> 6.你能想到几种页面动画效果,想到几个说几个(最少5个) 粒子动画特效； 太极图； 旋转卡片； 文字飘动； 手风琴； 波纹效果； <s>····························································</s> 7.canvas和svg有什么区别? 阐述分别适用的场景 <ol> <li> Canvas作为一个容器只有一个dom元素元素; 内部元素无法独立用dom操作; Canvas是配合js完成各种绘制效果; Canvas是位图,依赖像素; </li> <li> Svg虽然也是一个容器,但是内部有各种各样的dom元素操作; Svg是矢量图,不依赖像素(放大缩小不会失真); Svg不是H5新推出的标签,而是在老基础上扩展的功能; </li> </ol> canvas和svg的区别比较： <ul> <li>canvas绘制位图，放大失真；svg绘制矢量图，放大不失真；</li> </ul> 时间上看canvas与svg的区别： <ol> <li>canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。</li> <li>svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。</li> </ol> 从功能上看canvas与svg的区别： <ol> <li>SVG 是一种使用 XML 描述 2D 图形的语言。</li> <li>SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。</li> <li>在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。</li> <li>Canvas 通过 JavaScript 来绘制 2D 图形。</li> <li>Canvas 是逐像素进行渲染的。</li> <li>在 canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。</li> </ol> canvas与svg技术应用上的比较： <ol> <li>canvas不依赖分辨率。</li> <li>canvas支持事件处理器。</li> <li>canvas最适合带有大型渲染区域的应用程序（比如谷歌地图）。</li> <li>canvas复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）。</li> <li>canvas不适合游戏应用。</li> <li>svg依赖分辨率。</li> <li>svg不支持事件处理器。</li> <li>svg弱的文本渲染能力。</li> <li>svg能够以 .png 或 .jpg 格式保存结果图像。</li> <li>svg最适合图像密集型的游戏，其中的许多对象会被频繁重绘。</li> </ol> <s>····························································</s> <h3>HTML5问题汇总</h3> 1.简述H5新特性有哪些？ <ol> <li>用于绘画的 canvas 元素</li> <li>用于媒介回放的 video 和 audio 元素</li> <li>对本地离线存储的更好的支持</li> <li>新的特殊内容元素，比如 article、footer、header、nav、section；</li> <li>新的表单控件，比如 calendar、date、time、email、url、search；</li> </ol> <s>····························································</s> 2.请阐述video和audio标签的使用,以及video和audio的缺点 <ul> <li> video和audio标签的使用： 1.video和audio共有的可读写属性： <code>src</code>媒体数据的url地址; <code>loop</code>是否循环播放; <code>autoplay</code>是否在页面加载后自动播放（注意：如果audio不加controls属性，音频是默认隐藏的）; <code>controls</code>是否添加浏览器自带的播放控制条，控制条中具有播放、暂停等按钮。当然也可以在脚本中自定义控制条，而不使用浏览器默认的控制条; <code>preload</code>媒体数据是否在页面加载时预加载，并预备播放，可以加快播放速度。可选值有none（不进行预加载）、metadata（部分预加载，只预加载媒体的元数据，如媒体字节数、第一帧、播放列表、持续时间等）、auto（全部预加载）。默认为auto。如果使用 “autoplay”，则忽略该属性; <code>muted</code>媒体数据是否应该被静音; <code>volume</code>媒体数据的播放音量，范围从0到1，0为表单，1为最大音量; <code>currentTime</code>媒体数据的当前播放位置，从开始到现在播放的时间; <code>defaultPlaybackRate</code>媒体数据的默认播放速率; <code>playbackRate</code>媒体数据的当前播放速率; <code>width</code>媒体数据的宽度（以像素为单位）; <code>height</code>媒体数据的高度（以像素为单位）; 2.video元素独有的属性： <code>poster</code>视频封面，当视频不可用时，使用该元素向用户展示一幅替代用的图片; </li> <li> js控制video常用方法： <code>video.play()</code>播放媒体数据，自动将元素的paused属性变为false; <code>video.pause()</code>暂停播放媒体数据，自动将元素的paused属性变为true; <code>video.paused</code>判断当前是否是暂停状态； <code>video.muted=true/false</code>静音/取消静音； <code>video.volume+=/-=0.1</code>控制音量，音量范围0-1； video.playbackRate+=/-=0.1播放倍率控制，最小值是0.1，小于1的时候是慢速播放，倍率最小0.06,最大小于16； <code>video.currentTime</code>获取当前播放时长 </li> <li> video和audio的缺点： 1.暂时没有对流视频的支持和规范。流媒体分HTTP渐进流式下载和实时流式传输，video和audio属于HTTP渐进流式下载，不需要流媒体服务器，普通HTTP服务器就可以。 2.播放媒体类型不统一。由于各种原因，HTML5没有对播放媒体类型做规定，这可以通过source来改进，如果不支持播放第一个文件就播放下一个，以此类推。 3.资源受跨域共享的限制。跨域的媒体数据需要统统下载到本地服务器。 4.全屏无法通过脚本控制。从安全性角度来看，让脚本元素控制全屏操作是不合适的。不过，如果要让用户在全屏方式下播放视频，浏览器可以提供其他控制手段。 </li> </ul> <s>····························································</s> 3.列举一些你知道的表单新的type类型 Color,email,number,tel,url,search <s>····························································</s> 4.Canvas如何使用描述出验证码的绘制步骤 Canvas如何使用: <pre><code class="prism language-html"><canvas>元素是HTML5中的新元素，通过使用该元素，可以在网页中绘制所需的图形;</canvas> 创建一个画布</canvas> <canvas id="myCanvas" width="200" height="100"></canvas> </code></pre> <pre><code class="prism language-javascript">首先，找到 <canvas> 元素: var c=document.getElementById("myCanvas"); 然后，创建 context 对象： var ctx=c.getContext("2d"); </code></pre> 描述出验证码的绘制步骤: <ol> <li><code>随机的点</code> 点的x值和y值随机</li> <li><code>随机的颜色</code> 0~255随机一个数一共三个放到rgb里面</li> <li><code>随机的线</code> lineTo的x值和y值随机</li> <li><code>随机的字符</code> 从一个长字符串中随机索引值</li> <li><code>随机的位置</code> x值和y值的随机数</li> </ol> <pre><code class="prism language-css">input,canvas,button{ vertical-align: bottom; } </code></pre> <pre><code class="prism language-html"><input type="text" id="codeinp"> <canvas title="点我刷新验证码" width="120" height="40" style="border: 1px solid #000;"> 对不起,您的浏览器不支持canvas </canvas> <button>验证</button> </code></pre> <pre><code class="prism language-javascript">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(); }; </code></pre> <pre><code class="prism language-javascript">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; } </code></pre> <pre><code class="prism language-javascript">// 获取一个随机数的方法(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+")"; } </code></pre> <s>····························································</s> 5.SVG如何使用？如何利用js生成一个矩形？ <pre><code class="prism language-html"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x=“” y=“” width="300" height="100"></rect> //矩形标签 </svg> </code></pre> <s>····························································</s> 6.本地存储当中有几种方式？有什么区别？ <code>Cookie</code>，<code>IndexDB</code>，<code>WebSQL</code>,<code>localStorage</code> 本地永久存储,<code>sessionStorage</code> 一次会话; <ol> <li><code>localStorage</code> 本地永久存储只要用户不清除<code>cookie</code> (清理浏览器缓存),数据永远在;只要没有手动清除，就会一直保留，永久存储，以文件形式存储;</li> <li><code>sessionStorage</code> 一次会话本次打开的标签不关闭,数据一直在;只会在窗口打开的时候才有效，一次性缓存会话，关闭浏览器自动释放; 方法详解: 存:<code>localStorage.setItem("字符串键",值)</code>; 取:<code>var 数据= localStorage.getItem("字符串键")</code>; 根据键取值 无论存的时候是什么类型,取出来都是字符串类型! 根据键取值,如果键不存在,则返回 null。 <code>localStorage.length</code>属性获取数据总个数 <code>localStorage.key(index)</code>：根据索引值取出指定数据的键,然后自己再调用getItem 根据键取值; <code>localStorage.removeItem("字符串键")</code>：根据键移除数据; <code>localStorage.clear()</code> 清空所有数据; <code>sessionStorage和localStorage</code>的方法一模一样!</li> </ol> <s>····························································</s> 7.地理定位的使用方法如何在页面中绘制一个某个地方的地图？ API:application programming interface (引用程序变成接口) <ol> <li>引入百度地图JS连接 - http://api.map.baidu.com/api?v=2.0&ak=密匙;必须先申请应用密匙 HbUVYMUg6PwbOnXkztdgSQlQ; key值可以从高德地图api获取key值这是自己申请的key值’</li> <li>在HTML页面中定义用于显示百度地图的容器（元素）, 使用 <div></div>元素;</li> <li>3使用百度地图的对象（Map） 构造器 - BMap.Map(容器ID)，通过centerAndZoom()进行地图的初始化，该方法是必要的</li> <li>百度地图坐标拾取系统</li> </ol> <blockquote> 百度地图 百度地图 - http://developer.baidu.com/map/ 注册百度开发者账户 http://developer.baidu.com/ 在HTML页面中，引入百度地图的JS：http://api.map.baidu.com/api?v=2.0&ak=秘钥 定义显示地图的容器<code><div id="" style=""></div></code>； </blockquote> <pre><code class="prism language-javascript">在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类 - 标注类 </code></pre> <s>····························································</s> 8.Html5的兼容问题如何处理 HTML5中新特性的向后兼容 广义的HTML5，是包括了HTML5、CSS3以及新的API。因为新特性或多或少会存在浏览器的兼容问题，所以在使用新特性时检测浏览器是否支持此特性是非常必要的。当浏览器不支持新特性时，可以做合适的向后兼容处理。目前，并没有一个统一的方法检测新特性的支持，有些新特性有对应的API可以识别，有些新特性则只能通过一些技巧来识别。好在国外有热心的工程师们开发了多个检测新特性的框架，其中检测准确率和使用率较高的是Modernizr。 Modernizr框架的原理是自动检测浏览器是否支持新特性，并在标签上添加对应的类。如果浏览器支持某个特性，则会添加一个以特性名称命名的类，反之，则添加一个以“no-”为前缀加上特性名称命名的类。同时也会生成一个名为modernizr的对象，通过判断此对象上的代表各特性的属性值，可以知道当前浏览器是否支持此新特性。Modernizr框架同时也包含了html5shim框架的功能，即可以让IE8及以下浏览器支持新标签。 <blockquote> 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标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。 </blockquote> <s>····························································</s> 9.你对语义化标签是如何理解的 通过标签判断内容语义，例如根据h1标签判断出内容是标题，根据<code></code>判断内容是段落、<code><input></code>标签是输入框等。 <ol> <li>去掉样式能让页面结构呈现清晰</li> <li>屏幕阅读器会按标记“读”你的网页</li> <li>有益于SEO</li> <li>便于团队开发和维护</li> </ol> <s>····························································</s> 10.请描述一下sessionStorage和localStorage的区别 <code>window.localStorage</code> 本地永久存储，存储没有截止日期的数据； <code>window.sessionStorage</code> 一次会话，针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）； <s>····························································</s> <h3>JavaScript问题汇总</h3> 1.JS的引入方式有几种? 区别在哪里? <ol> <li> 内部js: 在直接在页面的<code><script></script></code>标签内写js代码 优点：相对于使用行内js，内部js代码较为集中，与页面结构的实现代码耦合度较低，比较便于维护; 缺点：js代码仅限于当前页面的使用，代码无法被多个页面重复使用，导致代码冗余度较高; </li> <li> 外部js: 引入外部的js文件(推荐使用) 优点： 1.页面代码跟js代码实现有效分离，降低耦合度 2.便于代码的维护和扩展 3.有利于代码的复用 </li> <li> 行内js: 直接嵌套在html的语句 开发中不推荐这种方式，因为这种方式跟页面结构代码耦合性太强了，后期维护很不方便，而且这种方式在开发过程中会导致产生很多的冗余代码; </li> </ol> 三种方式的区别：主要是js加载，js执行，DOM解析区别 <s>····························································</s> 2.JS数据类型有哪些? <s>····························································</s> 3.JS的三大核心是什么? <code>ECMAScript</code>(语法基础)，文档对象模型<code>（DOM）</code>，浏览器对象模型<code>（BOM）</code> <s>····························································</s> 4.JS中将字符串解析成整数的方法有哪些?有什么区别? <s>····························································</s> 5.= =和===有什么区别? <code>==</code>是判断等于的意思，返回的是一个布尔值（不判断类型） <code>===</code>严格相等，会比较两个值的类型和值。 <s>····························································</s> 6.JS创建数组有几种方式?分别是什么 <s>····························································</s> 7.JS中数组的方法有哪些? (英文名) (至少说7种,参数怎么使用也要说) <code>slice()</code>;数组截取; 单个参数从指定位置开始截取到末尾； 两个参数从指定位置开始截取到指定位置包含头不包含尾（不会改变原数组）; <code>splice()</code>;数组删除; 单个参数从指定位置开始，删除到数组最后一位元素，返回删除的元素组成的新数组; 两个参数从指定位置开始删除多少个返回删除的元素组成的新数组; 多个参数从指定位置开始删除多少个后面传入多少个参数，是向数组填充指定元素; <code>indexOf()</code>;数组查找; 单个参数根据元素查找所在位置; 两个参数可选的整数参数。规定在字符串中开始检索的位置; <code>reverse()</code>;数组翻转，会改变原数组； <code>concat()</code>;数组合并; <code>join()</code>;将数组转成字符串； 传入指定的分隔符如（“丨”）； 传入空字符串（""）; 不传参数()；转换成以“，”分割的字符串 <code>toString()</code>将数组装换成以","分割的字符串 <code>puch()</code>向数组最后一位添加元素，返回新的长度； <code>pop()</code>数组最后一位删除元素并返回被删除的元素，会改变原数组。 <code>unshift()</code>数组第一位添加元素并返回添加后的新长度。 <code>shift()</code>;数组第一位删除元素并返回被删除的元素，会改变数组。 <code>sort()</code>;数组升序排列，会改变原数组 <s>····························································</s> 8.遍历数组有哪几种方式? 那五个遍历数组的方法是什么?分别都有什么区别? <ol> <li>[every]对数组中每一项运行以下函数，如果都返回true，every返回true，如果有一项返回false，则停止遍历 every返回false；</li> <li>[filter]对数组中每一项运行以下函数，该函数返回结果是true的项,组成的新数组[ ]；</li> <li>[forEach] 遍历数组，单纯的遍历数组，从头执行到尾，没有返回值;</li> <li>[map]对数组中每一项运行以下函数，该函数返回的结果组成的新数组</li> <li>[some]对数组中每一项运行以下函数，如果该函数对某一项返回true，则some返回true；</li> </ol> <s>····························································</s> 9.清空数组有哪几种方式? 推荐使用哪种? 6. <code>arr.splice(0)</code>; 7. <code>arr.length=0</code>;//数组的length赋值为0，长度为0了，数组肯定就是空的; 8. <code>arr=[]</code>;//给数组重新赋值为[]; <s>····························································</s> 10.阐述一下冒泡排序原理,以及四次优化如何做 冒泡排序法四次优化 <ol> <li>内层for循环：变量<.length-1; 原因：最后一个数，不能和后面比较，所以最大索引是倒数第二个索引。</li> <li>外层for循环：变量<.length-1; 原因：n个数，冒泡（n-1）次就会出现顺序。</li> <li>内层for循环：变量<.length-1-外层for循环变量； 原因：每轮冒泡结束后，就会诞生一个最下值，下一轮可少比较一次。</li> <li>开闭原则：排出顺序立即停止。</li> </ol> <blockquote> 开闭原则：在面向对象编程领域中，开闭原则规定“软件中的对象（类，模块，函数等等）应该对于扩展是开放的，但是对于修改是封闭的”，这意味着一个实体是允许在不改变它的源代码的前提下变更它的行为。 </blockquote> <s>····························································</s> 11.阐述回调函数的使用,以及作用是什么? 回调函数还是一个函数，它也是有函数名和函数实现这两个部分组成，区别在回调函数是可以被当作参数一样被传递（可移动的）， 当回调函数被当作参数传递时，相当于一个指向函数的一个指针（函数指针），回调函数的函数名就是一个函数指针，注意不能带括号 在需要用到回调函数的功能的时候，就可以通过函数名+（）的形式去使用 作用：回调函数能保证代码执行的顺序性，能避免异步带来的问题 也就是说回调就是一种方法，帮我们确保某些代码直到另一些代码已经执行完毕后才执行。 <s>····························································</s> 12.阐述一下面向对象和面向过程的概念 什么事面向对象 面向对象是一种基于面向过程峰编程思想。 什么是面向过程 亲力亲为亲自面向程序的每一个步骤，在每一个执行步骤当中我们都是参与者。说白了，就是一堆函数调用典型代表：c语言。 如果代码量少，逻辑简单，那么面向过程很适合；如果代码量大，逻辑复杂，在用面向过程就会结构混乱。 面向对象概念 将面向过程的每一个步骤封装起来，功能类似的封装到一起，由我们去调用，这就是面向对象。 <s>····························································</s> 13.对象创建有哪几种方式?优缺点是什么? <ol> <li> 字面量创建 </li> <li> new对象创建new Object（）； 以上两种方式创建对象的弊端: 1.每次创建一个对象都要单独绑定属性跟方法步骤很麻烦 2.这种造对象的方式不可能大批量创建所以我们需要一个工厂来造对象 </li> <li> 工厂函数造对象 优点: 把对象绑定属性跟方法的过程封装起来反复调用 那么代码的复用率很高而且很方便的重复大批量造对象 缺点: 对象类型很不明确 </li> <li> 构造函数造对象 new关键字的四个作用 构造函数之所以能够创建出对象跟new关键字的作用密不可分。 开辟内存空间，存储新创建的对象； 将this指向当前对象； 执行内部代码，为当前对象绑定属性和方法； 返回新创建的对象。 </li> </ol> <s>····························································</s> 14.new关键字和this关键字分别代表什么?作用是什么?都在哪使用的? new关键字的四个作用 构造函数之所以能够创建出对象跟new关键字的作用密不可分。 <ol> <li>开辟内存空间，存储新创建的对象；</li> <li>将this指向当前对象；</li> <li>执行内部代码，为当前对象绑定属性和方法；</li> <li>返回新创建的对象。</li> </ol> this表示当前对象，谁new就指向谁； 构造函数 : new 函数名(); 构造函数就用构造函数的模式调用 new； <s>····························································</s> 15.你是怎么理解构造函数的? 把构造函数当作类来说，然后通过new这个构造函数来创建实例，简单的想就可以这样，但是构造函数本身就是函数，在new的过程中执行了一遍。在执行的过程中，只是改变了上下文环境，导致this所指的方向发生了改变，然后就像绑定属性和方法那样，把构造函数里面的this所附带的方法属性都给了那个新的对象; 构造函数用于创建特定类型的对象——不仅声明了使用的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数，然后在里面声明自定义类型对象的属性或方法。 特点： <ul> <li>构造函数的首字母必须大写，用来区分于普通函数</li> <li>内部使用的this对象，来指向即将要生成的实例对象</li> <li>使用New来生成实例对象</li> </ul> <s>····························································</s> 16.构造函数和普通函数有什么区别 构造函数和普通函数调用方式不同: <ul> <li>普通函数 : 函数名();</li> <li>构造函数 : new 函数名(); 我们如何知道该函数是构造函数还是普通函数呢?</li> <li>就看函数名是否大写所以要求我们如果当前函数被我们定义为构造函数；</li> <li>那么函数名必须大写(虽然不大写也不报错但是潜规则为了区分一定要大写)；</li> </ul> 总结: 构造函数和普通函数从函数定义上来看没有任何区别； 但是调用方式有区别。 <ul> <li>构造函数就用构造函数的模式调用 new；</li> <li>普通函数就用普通函数的调用模式函数名()</li> </ul> <s>····························································</s> 17.属性绑定的方式有哪些? 函数绑定两种方式: <ol> <li> 绑定匿名函数 <code>对象.函数名=function(){}</code>； </li> <li> 绑定一个已经定义好的函数名字 <code>对象.函数名=有名字的函数</code>； </li> </ol> <s>····························································</s> 18.阐述一下变量提升和函数提升 变量提升: 在预解析阶段用var 声明的变量会被提升;会被提升到当前作用域的第一行 但是只会提升变量名 不会提升变量的值; 想要知道提升,先要知道 js运行虽然是一行一行执行执行到哪就解析到哪,但是js有一个预解析阶段页面加载时会把带var和function关键字的变量先进行预解析;解析也就是提升. 函数提升 <code>function 函数名(){ }</code>; 函数提升也会提升到当前作用域第一行,函数提升时提升整个函数; 只有函数模式定义的函数才会被整个提升 <s>····························································</s> 19.在js中作用域有哪些?区别是什么? <ol> <li>全局作用域 在函数外 script标签内定义的变量就是全局变量；在任意位置都可以使用。</li> <li>局部作用域 在函数内部声明的变量就是局部变量；只能在当前函数内使用。 ps:形式参数也是局部变量.</li> </ol> <s>····························································</s> 20.说一下json对象和json字符串区别是什么?分别怎么使用的 JSON字符串转换为JSON对象；用t<code>oJSONString()</code>； JSON对象转化为JSON字符串：全局方法<code>JSON.stringify()</code>。 Json字符串就是字符串，只不过字符串的内容格式是json格式的； json对象是对象，是json格式的对象， 键值对是json格式，键可以是字符串也可以数字，值可以是字符串也是可以是数值，还可以是数组； json对象可以通过javascript存取属性！json对象装成json字符串经常用于前后台传输数据！ <s>····························································</s> 21.说几个js的内置对象(至少3个),以及作用 <code>String对象</code>：字符串对象，提供了对字符串进行操作的属性和方法。 <code>Array对象</code>：数组对象，提供了数组操作方面的属性和方法。 <code>Date对象</code>：日期时间对象，可以获取系统的日期时间信息。 <code>Boolean对象</code>：布尔对象，一个布尔变量就是一个布尔对象。(没有可用的属性和方法) <code>Number对象</code>：数值对象。一个数值变量就是一个数值对象。 <code>Math对象</code>：数学对象，提供了数学运算方面的属性和方法。 <code>Object对象</code>、<code>RegExp对象</code>、 <code>Global对象</code>、<code>Function对象</code>。 <s>····························································</s> 22.说一下String字符串的方法(英文名)(至少7种以及参数的使用) <s>····························································</s> 23.数组去重的方法有哪些?阐述原理即可 <pre><code class="prism language-javascript">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); </code></pre> <s>····························································</s> 24.如何实现字符串翻转? <s>····························································</s> <h3>DOM问题汇总</h3> 1.JS都有哪些事件?(至少说10种英文) <code>onlick</code> 当点击的时候 <code>onmouseover</code> 鼠标移入 <code>onmouseout</code> 鼠标移出 <code>onmouseup</code>：鼠标按下后松开鼠标时触发此事件 <code>onmousemove</code>：鼠标移动时触发此事件 <code>onfocus</code>：获得焦点事件 <code>onblur</code>：失去焦点事件 <code>onselect</code>：内容被选中事件 <code>ondblclick</code>：鼠标双击事件 <code>onload</code>:加载事件 <s>····························································</s> 2.获取页面元素的方法有哪些? <s>····························································</s> 3.阐述一下DOM中节点访问关系以及兼容性写法 //获取下一个兄弟节点的兼容性封装 <pre><code class="prism language-javascript">function getNext(ele) { return ele.nextElementSibling || ele.nextSibling; } </code></pre> //获取第一个子节点的封装 <pre><code class="prism language-javascript">function getFirst(parentNode) { return parentNode.firstElementChild || parentNode.firstChild; } </code></pre> //获取最后一个子节点的封装 <pre><code class="prism language-javascript">function getLast(parentNode) { return parentNode.lastElementChild || parentNode.lastChild; } </code></pre> //获取所有的兄弟节点(不包括自己) <pre><code class="prism language-javascript">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; } </code></pre> <s>····························································</s> 4.InnerHTML和innerText的区别 调用者都是父元素 <ol> <li>设置: 相同点:HTML/Text都会将父元素原本的内部所有内容覆盖成新内容, 如果设置的是一个普通的不带标签的字符串那么两个结果一样; 如果设置的字符串内容里面包含标签则出现了不同: <code>innerHTML</code>:会识别字符串中标签并渲染到页面显示出指定标签效果; <code>innerText</code>:不会识别标签只会把字符串原封不动的放到页面上; 总结:在设置的时候 <code>innerHTML</code>会识别标签,<code>innerText</code>不会识别标签;</li> <li>获取: innerHtml:把当前元素里面的所有内容 回车换行元素节点文本内容全部获取,以字符串的形式返回; innerText:把当前元素的后代所有元素的内部文本和回车换行全都获取到,并不包含元素标签本身只获取文本内容;</li> </ol> <s>····························································</s> 5.如何操作标签的属性?方法是什么? <code>元素对象.setAttribute(“属性节点名字”,”属性节点值”)</code>；给标签增加一个属性节点 <code>元素对象.getAttribute(“属性节点名字”)</code>; 获取标签的属性节点值 <code>元素对象.removeAttribute(“属性节点名字”)</code>; 删除一个属性节点根据属性节点的名称 <s>····························································</s> 6.nodeType,nodeName和nodeValue的区别? <ol> <li>nodeType: 元素节点调用: 1 属性节点调用: 2 文本节点调用: 3</li> <li>nodeName: 元素节点调用: 标签名大写!!! 属性节点调用: 属性名字 文本节点调用: #text</li> <li>nodeValue: 元素节点调用: null 属性节点调用: 属性值 文本节点调用: 空字符串</li> </ol> <s>····························································</s> 7.JS设置元素样式有哪几种方式? <ol> <li>利用标签四大通用属性中的style属性(设置的是行内样式)</li> <li>通过class的方式给元素增加样式 元素对象.className= 有=就是赋值没有=就是获取 元素对象.setAttribute()；增加指定属性 元素对象.getAttribute(); 获取指定属性值 元素对象.removeAttribut(); 移除指定属性 元素对象.classList.add() remove() H5新推出</li> <li>通过元素对象.style.cssText="样式字符串"属性操作行内样式—>也是设置行内样式 ul.style.cssText=“font-size:50px;background-color:red;margin-left:50px;”; 操作的就是标签上面style属性的值直接设置行内样式 而且可以一次性设置多个</li> </ol> <s>····························································</s> 8.JS中创建节点的方式有哪几种?放到页面上的方式有那种? 创建一个元素对象: <code>var 新的元素对象= document(只能是document调用!!!).createElement("节点名称")</code>;新创建出来的是一个内容为空的元素对象; document.createElement(tagName) 创建一个元素节点，即 nodeType=1 的节点;tagName为HTML的标签名称，返回一个节点对象。 document.createTextNode(text) 创建一个文本节点，即 nodeType=3的节点;text为文本节点内容，返回一个节点对象； document.createComment(comment) 创建一个注释节点，即 nodeType=8的节点;comment为注释节点内容，返回一个节点对象； document.createDocumentFragment() 创建文档碎片节zhi点，文档碎片节点是若干DOM系欸但的集合，可以包括各种类型的节点，如元素节点，文本节点，注释节点。文档碎片节点在创建之初是空的，需要向他添加节点。 <s>····························································</s> 9.JS删除节点的方式,替换节点的方式,克隆节点的方式以及参数如何使用 创建一个元素对象： <code>var新的元素对象=document.cerateElement(“节点名称”)</code>； <code>父元素对象.appendChild(元素对象)</code>；将该元素对象拼接到父元素最后一位； <code>父节点.insertBefore(“新插入的节点对象”,”被参考的旧节点对象”)</code>; <code>父元素.removaChild(子元素对象)</code>; <code>父元素.replaceChild(新元素对象,被替换的老元素对象)</code> ; <code>节点对象自己.cloneNode(boolean值(默认flase))</code>; <s>····························································</s> 10.JS中给元素绑定事件大的方法有几种?兼容性如何写? 给元素添加事件的3种方式: <ol> <li>行内添加事件 <code><div onclick="show()"></div></code>；</li> <li>属性绑定的方式添加事件: <code>ele.onclick=function(){}</code>有事件层叠覆盖问题；</li> <li>添加事件监听的方式 <code>ele.addEventListener("不带on的事件名称",事件驱动函数,布尔值)</code>： 谷歌/火狐/IE9+ 返回:完整的函数对象 /// IE678返回: undefined； <code>元素对象.attachEvent("带on的事件名称",事件驱动函数)</code>： 谷歌/火狐/IE11+ 返回: undefined /// IE10-6 返回: 整个函数对象(IE678是反着来的后添加的事件先执行)；</li> </ol> <blockquote> addEventlistener和attachEvent的区别.html区别： 事件名称的区别 addEventLisener中第一个参数type是click、load，不带on attachEvent中一个参数type是onclick、onload this的区别 addEventLisener：事件处理程序会在当前对象的作用域运行，因此，时间处理程序的this就是当前对象 attachEvent：事件处理程序是在全局作用域下运行因此this就是window </blockquote> 针对添加事件的兼容性封装 参数: <ol> <li>ele 元素对象</li> <li>不带on的事件名称</li> <li>事件驱动函数</li> </ol> <pre><code class="prism language-javascript">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(); } } } } </code></pre> <s>····························································</s> 11.JS中解绑事件的方法有几种?兼容性如何写? <ol> <li>元素.onclick绑定的:就用<code>元素.onclick=null</code>解绑</li> <li>元素.addEventListener绑定的事件: 就用<code>元素.removeEventListener("不带on的要解绑的事件名称",已经定义好有名字的那个驱动函数)</code>解绑</li> <li>.元素.attachEvent绑定的事件 就用<code>元素.detachEvent("带on的要解绑的事件名称,已经定义好有名字的那个驱动函数")</code>解绑</li> </ol> 解绑事件的兼容性和绑定事件的是一样的！ 兼容性写法： <pre><code class="prism language-javascript">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; } } </code></pre> <s>····························································</s> 12.setInterval和setTimeout有什么区别? <code>setTimeout()</code>和<code>setInterval()</code>经常被用来处理延时和定时任务。 <code>setTimeout()</code> 方法用于在指定的毫秒数后调用函数或计算表达式; <code>setInterval()</code>则可以在每隔指定的毫秒数循环调用函数或表达式，直到<code>clearInterval()</code>把它清除。 <code>setTimeout()</code>只执行一次，而<code>setInterval()</code>可以多次调用。 <h3>BOM 问题汇总</h3> 1.能够实现页面跳转的方式有哪些? <ol> <li>window.open打开方式主要是两种：_blank(打开一个空白页面)和_self（在自身页面打开）,window.navigate（ie专用）;</li> <li><code>window.location.href="https://www.baidu.com链接地址"</code>;页面跳转 href属性的直接替换可以跳转.</li> <li><code>Location.assign("地址")</code>;</li> <li><code>Location.replace("地址")</code>页面跳转到该网址,跳转之后不可返回前一页面.</li> <li>后退、前进跳转（当前页面跳转） <code>window.history.back()</code>; <code>window.history.go(1)</code>;</li> </ol> <blockquote> 调整页面： window.moveTo(x,y)移动页面到某一位置，位置由x,y决定。 window.resizeTo（宽，高）调整页面的宽度和高度。 window.scrollTo(x,y)滚动页面至哪里，y代表纵向滚动。 模态对话框和非模态对话框 打开模态对话框：window.showModalDialog（“url”,“向目标对话框传的值”，“窗口特征参数”）。 打开非模态对话框：window.showModelessDialog(“url”,“向目标对话框传的值”，“窗口特征参数”) </blockquote> <s>····························································</s> 2.Navigator对象能获取什么?有什么作用? navigator对象里面保存着浏览器的各种信息，判断浏览器的各种信息就是从该对象里的属性来读取; 控制台输入<code>navigator.userAgent</code>,可以获取当前的系统版本和浏览器版本，判断浏览器的名称和版本号,判断出当前是pc端设备还是移动端设备，从而返回不同的页面。 cookicEnablcd:判断是否启用cookic plugins:保存浏览器中所有插件信息的集合 <pre><code class="prism language-javascript">浏览器代号:navigator.appCodeName; 浏览器名称:navigator.appName ; 浏览器版本:navigator.appVersion; 启用Cookies:navigator.cookieEnabled; 硬件平台:navigator.platform; 用户代理:navigator.userAgent; 用户代理语言: navigator.systemLanguage; </code></pre> <s>····························································</s> 3.history对象是干嘛的?有哪些方法? history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。出于安全考虑，开发人员不能知道用户浏览过的网址的具体url，但是我们可以通过下面方法在不知道具体历史url的情况下控制用户页面前进或后退。 前进功能 <code>history.forward()</code> 或者<code>history.go(n)</code>; 后退功能 <code>history.back()</code> 或者<code>history.go(-n)</code>; <code>history.go(0)</code>;//页面刷新; <s>····························································</s> 4.BOM和DOM有啥区别? BOM是浏览器对象模型,DOM是文档对象模型 BOM没有相关标准,DOM是W3C的标准 BOM的最根本对象是window,DOM最根本对象是document <s>····························································</s> <h3>JS特效问题汇总</h3> 1.JS动画有哪几种? <ol> <li>闪动动画</li> <li>匀速动画</li> <li>缓动动画</li> </ol> <s>····························································</s> 2.阐述offset家族的四个属性分别的作用 <ol> <li>offsetWidth：当前元素距离；</li> <li>offsetHeight：当前元素高度；自身包括padding 、边框、内容区的宽度。(width + border + padding)</li> <li>offsetLeft：当前元素距有定位的父系元素的偏移量；</li> <li>offsetTop：元素相对第一个有定位的父元素上方的偏移。（父盒子必须有定位，如果没有最终以body为准）；</li> <li>offsetParent：作为偏移参照点的父级元素,返回当前对象的父级(带有定位)的盒子，可能是父亲或者爷爷，没有定位则取body，都有定位则就近取，区别与parentNode。</li> </ol> <blockquote> offsetHeight/offsettWidth = 内容 + 内边距 + 边框, 这对兄弟获得的是数值，直接style.left获得的是字符串且必须在行内设置属性才能获取到（仅包含内容区域）； </blockquote> <s>····························································</s> 3.offsetLeft和style.left的区别? <ol> <li>最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以；</li> <li>offsetleft返回的是数字，而style.left是字符串；</li> <li>offsetTop 只读，而 style.top 可读写；style.left是带单位"px"的，而offsetLeft没有单位。</li> <li>如果没有给HTML指定过left样式，则style.left返回空字符串；</li> <li>如果元素行内样式有定位值，那么style.left返回的就是那个定位值，而offsetleft如果父系元素都没有定位则按body算左边偏移量；</li> </ol> <blockquote> 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 </blockquote> <s>····························································</s> 4.匀速框架封装的步骤是什么? <ol> <li>要用定时器先清除定时器；</li> <li>判断获取步长；</li> <li>启动定时器；</li> <li>位移元素；</li> <li>判断停止定时器；</li> </ol> <pre><code class="prism language-javascript">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”} </code></pre> <s>····························································</s> 5.阐述无缝轮播的实现原理 <ol> <li>无缝轮播图，最后一张和第一张的切换是平滑过渡；</li> <li>把焦点图和左右滑动图加入，并且保持同步；</li> <li>开始定时器，自动轮播；</li> </ol> <blockquote> 在滚动层<code>ul</code>最后插入最前面一个元素，然后在动画滚到最后的时候，初始化滚动层的位置样式(style.left=0)，速度很快(闪动动画)，无法察觉，就如同无缝一般。 </blockquote> <blockquote> 5号图片到1号图片之间是相连的，要有两个1号图片，开头一个结尾一个，5号到1号是平滑过渡，等再次位移要到第二张时，瞬间闪动动画，把ul拉到最开始的位置，然后向第二张位移，每次都这样。 </blockquote> <s>····························································</s> 6.缓动框架的实现原理是什么? 原理：盒子位移的距离=盒子当前的距离+步长（步长越来越小） <blockquote> 1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。 2.核心算法： (终点位置 – 当前位置) / 10 做为每次移动的距离步长。 3.停止的条件是：让当前盒子位置等于目标位置就停止定时器。 4.注意步长值需要取整。 </blockquote> <ol> <li>要用定时器先清除定时器；</li> <li>启动定时器；</li> <li>创建步长</li> <li>步长二次加工；</li> <li>位移元素；</li> <li>判断停止定时器；</li> </ol> <s>····························································</s> 7.Scroll家族的四个属性分别的作用是什么?有什么兼容问题?如何封装? 四个属性分别的作用： <ol> <li>scrollWidth:谷歌/火狐/IE所有版本:内部不超出获取盒子本身的宽度<code>则获取元素本身的宽+padding</code>，内容超出获取内容宽度；</li> <li>scrollHeight:谷歌/火狐/IE8+:内部不超出获取盒子本身的高度<code>则获取元素本身的高+padding</code>，内容超出获取内容高度， IE67内容超不超出获取内容高度；</li> <li>scrollLeft/scrollTop当前盒子必须可以滚动，并且有滚动条，才能获取；</li> <li>scrollTop:如果是元素调用–表示当前元素纵向滚动了多少也就是当前元素被卷去的头部的距离；</li> <li>scrollLeft:如果是元素调用–表示当前元素横向滚动了多少也就是当前元素被卷去的左侧的距离；</li> <li>body/html调用scrollTop/Left(实际开发用的最多)，获取的是当前页面被卷去的头部和左侧；</li> </ol> 兼容问题： <ol> <li> 谷歌/火狐/IE所有版本: document.documentElment调用都可以获取被卷去的左侧和上边的距离； </li> <li> 谷歌/火狐/IE所有版本 document.body都获取不到被卷去的左侧和上边的距离; </li> </ol> <code>加入DTD头部的兼容性分析</code>: DTD: <code>Document</code>(文档) <code>Type</code>(类型) <code>Defined</code>(定义) 有DTD头部表示当前页面处在标准模式下，没有DTD头部表示当前页面处在怪异模式； 一. 标准模式: 所有浏览器: <code>document.documentElment</code>都可以获取; <code>document.body</code>都获值为0; 二. 怪异模式: <code>documentElement</code>: 谷歌/火狐:<code>document.documentElement</code>获取为0; IE所有版本:<code>document.documentElement</code>都能获取值; <code>document.body</code>: 谷歌/火狐/IE10+:<code>document.body</code>能获取值; IE9及以下:<code>document.body</code>获取值为0; 提取关键点: 无论是怪异模式还是标准模式: <code>IE</code>所有版本只认识: <code>document.documentElement</code>; 无论是否有DTD: <code>window.pageXOffset/window.pageYOffset</code>; 谷歌/火狐/IE9+,能够获取; IE8及以下,该属性返回<code>undefined</code>. 如何封装： <pre><code class="prism language-javascript">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 } } } </code></pre> <s>····························································</s> 8.Event对象是什么?获取的兼容性写法是如何写的? Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！ 获取的兼容性写法: event事件对象的获取有兼容问题: <code>参数接收</code>: 谷歌/火狐/IE9+ 能获取:IE678返回undefined; <code>直接获取全局event(不声明参数)</code>: IE678这样能获取到,谷歌/火狐/IE所有版本都能获取; <pre><code class="prism language-javascript">function(event){ event= event||window.event; } </code></pre> <s>····························································</s> 9.event对象都有哪些属性,分别的作用是什么?(尤其是三个坐标属性) <ol> <li><code>event.timeStamp</code>: 距离上一次刷新页面到本次事件触发的间隔时间;</li> <li><code>event.type</code>:当前的事件类型;</li> <li><code>event.target</code>:指的是当前事件具体是触发在了哪一个子元素上面;</li> <li><code>event.button</code>:需要结合鼠标按下或者抬起事件, 鼠标按键:0:左键;1:滚轮键按下;2.右键.</li> <li><code>event.pageX/pageY</code>:鼠标到body;</li> <li><code>event.screenX/screenY</code>:鼠标到屏幕;</li> <li><code>event.clientX/clientY</code>:鼠标到可视区域;</li> </ol> <s>····························································</s> 10.鼠标在盒子中的位置是如何计算的? event的page属性有兼容问题: 谷歌/火狐/IE9+:可以使用; IE678:返回undefined; 所以我们自己计算: 鼠标到body=被卷去的头部+鼠标到浏览器可视区域的距离; 兼容性封装: <pre><code class="prism language-javascript">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 } } } </code></pre> <s>····························································</s> 11.client家族的四个属性分别的作用是什么?有什么兼容问题?如何封装? 四个属性分别的作用: <ol> <li> clientWidth/Height 如果调用者是盒子: <code>clientWidth/Height=盒子自身宽高+padding</code> (不包含margin和border); 则<code>获取盒子本身宽高+padding</code>; 如果调用者是body/html(实际开发用的最多): <code>body/html.clientWidth/Height=浏览器可视区域宽高</code>; 则<code>获取浏览器可视区域宽高</code> </li> <li> clientLeft/Top(没用) 获取当前左边框/上边框的宽度(所以没用) 所以client经常借用 event.clientX/Y来使用 </li> </ol> <code>window.onresize</code>事件: 当前浏览器可视区域变化时触发的事件,理论上每变化1px都会触发; 兼容问题? clientWidth/Height兼容性分析: <ol> <li>有DTD头部时: <code>document.documentElement</code>: 谷歌/火狐/IE所有版本,都可以获取到可视区域宽高的值;</li> <li>没有DTD头部时: <code>document.body</code>: 谷歌/火狐/IE10+:可以获取到可视区域宽高的值;</li> </ol> 总结: <ol> <li>有DTD时,使用<code>document.documentElement</code>;</li> <li>没有DTD时,使用<code>document.body</code>;</li> <li>IE9及以下,不管有没有DTD都使用<code>document.documentElement</code>;</li> <li>不管有没有DTD:<code>window.innerWidth/Height</code>:获取浏览器可视区域宽高;谷歌/火狐/IE9+ 能够获取,IE8及以下返回undefined; 如何封装?</li> </ol> <pre><code class="prism language-javascript">// 封装获取浏览器可视区域宽高的方法 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 } } } </code></pre> <s>····························································</s> 12.如何获取屏幕分辨率?如何实现响应式布局 分辨率宽度:<code>window.screen.width</code> 分辨率高度<code>:window.screen.height</code> 响应式: 根据当前设备的分辨率不同切换不同的布局显示; 自适应: 根据当前浏览器的可视区域大小变化而变化布局大小(单位百分比或者em/rem动态单位) <pre><code class="prism language-javascript">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" } } </code></pre> <s>····························································</s> 13.什么是事件冒泡?如何解决?兼容问题是如何处理的? 什么是事件冒泡:当子元素的某一个事件被触发时,父元素的同样事件也会被触发 一直往上触发直到dom树的最上层即document对象（有的浏览器是window）; 事件冒泡如何阻止: <ol> <li>谷歌/火狐/IE9+<code>event.stopPropagation()</code>;</li> <li>所有浏览器都可以阻止:event.cancelBubble=true;</li> </ol> 兼容性封装: <pre><code class="prism language-javascript">function stopBubble(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } </code></pre> <s>····························································</s> 14.什么是事件委托?解决什么问题的?事件委托如何实现? 事件委托:新创建的元素没有老事件,把原本需要绑定的事件委托给父元素，让父元素负责事件监听。 如何处理:不再把事件添加给距离的每一个子元素了,而是把事件添加给了父元素;原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能. 事件委托如何实现:事件委托将事件委托给父元素; <pre><code class="prism language-javascript">box.onclick=function (event) { event=event||window.event; event.target=event.target||event.srcElement; if(event.target.nodeName=="LI"){ alert(event.target.innerHTML); } } </code></pre> <s>····························································</s> 15.如何获取元素的内嵌和外链css样式?兼容性封装如何完成? 获取元素的行内样式 如果行内没有则返回空字符串:元素.style.css属性名; 获取内嵌和外链样式的属性: <code>window.getComputedStyle(元素,伪类)</code> 返回一个总的css对象,里面包含所有当前元素所有的css属性和默认值,谷歌/火狐/IE9+ ; IE所有版本: <code>元素.currentStyle.css属性名</code> ; 兼容性封装: <pre><code class="prism language-javascript">function getStyle(ele,attrName) { if(window.getComputedStyle!=undefined){ return window.getComputedStyle(ele)[attrName]; }else{ return ele.currentStyle[attrName]; } } </code></pre> <s>····························································</s> <h3>综合问题汇总</h3> 1.前端的SEO手段有哪些? seo 的工作目的是为了让网站更利于让各大搜索引擎抓取和收录，增加产品的曝光率。 <s>····························································</s> 2.JS兼容性有哪些?如何处理? //DOM获取子元素 问题描述: childNodes、firstChild、lastChild会获取包括文本节点在内的所有子节点，但是在IE8及以下的浏览器中，不会把文本节点算作子节点。 解决方案: 如果不需要文本节点，使用带Element的属性或方法获取对象。 //获取非行内样式 <pre><code class="prism language-javascript">function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentStyle[attr]; }else{ return getComputedStyle(ele,false)[attr]; } } </code></pre> //事件对象的获取兼容 <pre><code class="prism language-javascript">function getEvent(ele){ var e = ele || window.event; } </code></pre> //事件冒泡的兼容 <pre><code class="prism language-javascript">function stopBubble(e){ if(e.stopPropagation){ e.stopPropagation(); }else { e.cancelBubble = true; } } </code></pre> //阻止默认事件的兼容 <pre><code class="prism language-javascript">function prevent(eve){ var e = eve || window.event; if(e.preventDefault){ e.preventDefault(); }else { e.event.returnValue = false; } } </code></pre> //监听式绑定 <pre><code class="prism language-javascript">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; } } </code></pre> //删除绑定 <pre><code class="prism language-javascript">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; } } </code></pre> //键盘检测兼容 <pre><code class="prism language-javascript">function KeyC(eve){ var e = eve || window.event; var keyc = e.keyCode || e.which; return keyc; } </code></pre> <s>····························································</s> 3.什么是响应式?什么是自适应? 响应式设计（Responsive design）：就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 自适应设计（Adaptive Design）：自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。 <a href="http://img.e-com-net.com/image/info8/01390921089d45ad80af2cb11fb992ee.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/01390921089d45ad80af2cb11fb992ee.jpg" alt="WEB面试题（1）_第21张图片" width="650" height="355" style="border:1px solid black;"></a> <s>····························································</s> 4.CSS动画和JS动画有什么区别? 如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。它可以让你将动画逻辑放在样式文件里面，而不会让你的页面充斥 Javascript 库。然而如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。所以，在实现一些小的交互动效的时候，就多考虑考虑CSS动画。对于一些复杂控制的动画，使用javascript比较可靠。 <s>····························································</s> 5.页面中如何图片过大加载缓慢如何处理? <ol> <li>首先要尽可能的压缩，看用户的忍受程度。jpg 可以用很多方法压缩。</li> <li>不太“在乎”用户体验的省事方法： 图片保存成渐进式的，加载会慢慢变清晰，而不是从上往下依次加载，然后放在 CDN，设置缓存之类。</li> <li>比较“在乎”用户体验的高端方案： a。判断用户的设备（主要用在移动端）、网络等，分别加载不同质量的图片（例如高端 iPhone wifi 情况下，就可以加载双倍高清图等，蜂窝网络下面，就加载个单倍或者有损压缩过的）。 b。或者先加载低质量的图片，让浏览者可以看到，然后再在后台加载更高清的，等加载完了，浏览者还在观看，就插入替换掉。 c。或者先加载低质量小图片列表，然后让用户点击，触发类似 fancybox 的效果，弹窗出现大图片。</li> </ol> <s>····························································</s> 6.script标签引入外部资源的时候放在上面和放在最后面的区别 放在head中：统一管理，方便维护；但浏览器会首先加载js文件，如果js文件过大，会造成页面在加载js的时候“无反应”时间过长，影响用户体验。 放在body中（或放在body后）：浏览器会首先加载js文件之前的元素，并显示到界面上，这样给用户的体验较好，但是不方便维护。 建议：页面初始化需要用到的JS或者比较小的JS文件，放在head中。比较特殊的用于页面指定位置的JS文件放在body中对应位置。较大的，影响用户体验的js文件放在body后。 <s>····························································</s> 7.如果页面加载缓慢,你会从哪几个方面去优化?(任何方面都可以) <ol> <li>按需加载，把统计、分享等 js 在页面 onload 后再进行加载，可以提高访问速度；</li> <li>优化 cookie ，减少 cookie 体积；</li> <li>避免 <code><img></code> 的 <code>src</code> 为空；</li> <li>尽量避免设置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能；</li> <li>合理使用display属性：</li> <li>字体图标</li> <li>雪碧图</li> <li>图片地图</li> </ol> <s>····························································</s> 8.你了解rem和em么? 有什么区别? <ol> <li>rem与em的本质区别 rem(root element)是参照html的font-size, em(element)是参照父元素的font-size。</li> <li>使用rem与em的优点 以rem/em为单位比px更方便,屏幕尺寸发生变化时只需要更改html/body基数即可,不需要再重新给每个标签写不同的font-size</li> </ol> <s>····························································</s> 9.谷歌和IE的盒子模型一样么? 如果不一样请阐述 IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。 <blockquote> w3c中的盒子模型的宽:包括<code>margin+border+padding+width</code>; <code>width:margin*2+border*2+padding*2+width</code>; <code>height:margin*2+border*2+padding*2+height</code>; 1.iE中的盒子模型的width:也包括<code>margin+border+padding+width</code>; 不过在IE中content的宽度包括padding和border这两个属性； </blockquote> <s>····························································</s> 10.伪数组如何转换成数组? 一、创建一个新数组，遍历这个伪数组，并将其每一项添加到新数组中。 <pre><code class="prism language-javascript">var ul=document.getElementsByTagName("li"); var newArr=[]; for(var i=0;i<ul.length;i++){ newArr.push(ul[i]); } console.log(newArr)' </code></pre> 二、借用Array对象的slice方法，并使用call或apply将调用者改为伪数组。 <pre><code class="prism language-javascript">var ul=document.getElementsByTagName("li"); var arrUl=Array.prototype.slice.call(ul); </code></pre> 三、使用ES6的新API，Array.from。 <pre><code class="prism language-javascript">var ul=document.getElementsByTagName("li"); var arrUl=Array.from(ul); </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1722970282156699648"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(WEB面试题)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835511912843014144.htm" title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a> 范范0825 <a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico</div> </li> <li><a href="/article/1835504218178416640.htm" title="Google earth studio 简介" target="_blank">Google earth studio 简介</a> 陟彼高冈yu <a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G</div> </li> <li><a href="/article/1835502578050363392.htm" title="PHP环境搭建详细教程" target="_blank">PHP环境搭建详细教程</a> 好看资源平台 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835495517774245888.htm" title="python八股文面试题分享及解析(1)" target="_blank">python八股文面试题分享及解析(1)</a> Shawn________ <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>#1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变</div> </li> <li><a href="/article/1835495170972413952.htm" title="git - Webhook让部署自动化" target="_blank">git - Webhook让部署自动化</a> 大猪大猪 <div>我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时</div> </li> <li><a href="/article/1835493753557708800.htm" title="每日算法&面试题，大厂特训二十八天——第二十天（树）" target="_blank">每日算法&面试题，大厂特训二十八天——第二十天（树）</a> 肥学 <a class="tag" taget="_blank" href="/search/%E2%9A%A1%E7%AE%97%E6%B3%95%E9%A2%98%E2%9A%A1%E9%9D%A2%E8%AF%95%E9%A2%98%E6%AF%8F%E6%97%A5%E7%B2%BE%E8%BF%9B/1.htm">⚡算法题⚡面试题每日精进</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> dmengmeng <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835470931783413760.htm" title="「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验" target="_blank">「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验</a> 张风捷特烈 <a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www</div> </li> <li><a href="/article/1835469672334585856.htm" title="Java企业面试题3" target="_blank">Java企业面试题3</a> 马龙强_ <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分</div> </li> <li><a href="/article/1835464504918503424.htm" title="Java面试题精选：消息队列(二)" target="_blank">Java面试题精选：消息队列(二)</a> 芒果不是芒 <a class="tag" taget="_blank" href="/search/Java%E9%9D%A2%E8%AF%95%E9%A2%98%E7%B2%BE%E9%80%89/1.htm">Java面试题精选</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会</div> </li> <li><a href="/article/1835455048277127168.htm" title="Python神器！WEB自动化测试集成工具 DrissionPage" target="_blank">Python神器！WEB自动化测试集成工具 DrissionPage</a> 亚丁号 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率</div> </li> <li><a href="/article/1835454921990828032.htm" title="Java爬虫框架（一）--架构设计" target="_blank">Java爬虫框架（一）--架构设计</a> 狼图腾-狼之传说 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BB%BB%E5%8A%A1/1.htm">任务</a><a class="tag" taget="_blank" href="/search/html%E8%A7%A3%E6%9E%90%E5%99%A8/1.htm">html解析器</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8/1.htm">存储</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/1.htm">电子商务</a> <div>一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast</div> </li> <li><a href="/article/1835454543471669248.htm" title="Java：爬虫框架" target="_blank">Java：爬虫框架</a> dingcho <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分</div> </li> <li><a href="/article/1835451016456269824.htm" title="MongoDB知识概括" target="_blank">MongoDB知识概括</a> GeorgeLin98 <a class="tag" taget="_blank" href="/search/%E6%8C%81%E4%B9%85%E5%B1%82/1.htm">持久层</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数</div> </li> <li><a href="/article/1835443823287824384.htm" title="Python实现下载当前年份的谷歌影像" target="_blank">Python实现下载当前年份的谷歌影像</a> sand&wich <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在GIS项目和地图应用中，获取最新的地理影像数据是非常重要的。本文将介绍如何使用Python代码从Google地图自动下载当前年份的影像数据，并将其保存为高分辨率的TIFF格式文件。这个过程涉及地理坐标转换、多线程下载和图像处理。关键功能该脚本的核心功能包括：坐标转换：支持WGS-84与WebMercator投影之间转换，以及处理中国GCJ-02偏移。自动化下载：多线程下载地图瓦片，提高效率。图像</div> </li> <li><a href="/article/1835443569968640000.htm" title="Spring MVC 全面指南：从入门到精通的详细解析" target="_blank">Spring MVC 全面指南：从入门到精通的详细解析</a> 一杯梅子酱 <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%E5%AD%A6%E4%B9%A0/1.htm">技术栈学习</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri</div> </li> <li><a href="/article/1835438028768768000.htm" title="Spring Boot中实现跨域请求" target="_blank">Spring Boot中实现跨域请求</a> BABA8891 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>在SpringBoot中实现跨域请求（CORS，Cross-OriginResourceSharing）可以通过多种方式，以下是几种常见的方法：1.使用@CrossOrigin注解在SpringBoot中，你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用：importorg.springframework.web.bind.annotation.</div> </li> <li><a href="/article/1835438028009598976.htm" title="WebMagic：强大的Java爬虫框架解析与实战" target="_blank">WebMagic：强大的Java爬虫框架解析与实战</a> Aaron_945 <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> 有一只柴犬 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> 全能全知者 <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835413064636264448.htm" title="Day_11" target="_blank">Day_11</a> ROC_bird.. <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>面试题16.15.珠玑妙算-力扣（LeetCode）/***Note:Thereturnedarraymustbemalloced,assumecallercallsfree().*///下标和对应位置的值都一样，answer[0]+1,对应位置的值猜对了，但是下标不对，answer[1]+1int*masterMind(char*solution,char*guess,int*returnSiz</div> </li> <li><a href="/article/1835399198405652480.htm" title="uniapp使用内置地图选择插件，实现地址选择并在地图上标点" target="_blank">uniapp使用内置地图选择插件，实现地址选择并在地图上标点</a> 神夜大侠 <a class="tag" taget="_blank" href="/search/Uniapp/1.htm">Uniapp</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a> <div>uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na</div> </li> <li><a href="/article/1835395418381447168.htm" title="【Golang】实现 Excel 文件下载功能" target="_blank">【Golang】实现 Excel 文件下载功能</a> RumIV <a class="tag" taget="_blank" href="/search/Golang/1.htm">Golang</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在当今的网络应用开发中，提供数据导出功能是一项常见的需求。Excel作为一种广泛使用的电子表格格式，通常是数据导出的首选格式之一。在本教程中，我们将学习如何使用Go语言和GinWeb框架来创建一个Excel文件，并允许用户通过HTTP请求下载该文件。准备工作在开始之前，请确保您的开发环境中已经安装了Go语言和相关的开发工具。此外，您还需要安装GinWeb框架和excelize包，这两个包都将用于我</div> </li> <li><a href="/article/1835393400380157952.htm" title="VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。" target="_blank">VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。</a> 焚木灵 <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，</div> </li> <li><a href="/article/1835392769678471168.htm" title="metaRTC8.0，一个全新架构的webRTC SDK库" target="_blank">metaRTC8.0，一个全新架构的webRTC SDK库</a> metaRTC <a class="tag" taget="_blank" href="/search/webrtc/1.htm">webrtc</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a> <div>概述metaRTC8.0是metaRTC开源以来架构变化最大的一个版本，是metaIPC3.0等高性能的基础。metaRTC8.0是一个全新架构版本，并非在metaRTC7.0版本上简单升级，在QOS/语音对讲/内存占用/视频文件录制读取等方面新增多个模块，在弱网对抗/语音对讲/内存优化等效果上有显著提升。metaRTC8.0在一年多的开发中进行了近200次迭代，metaRTC8.0社区版计划在2</div> </li> <li><a href="/article/1835392770102095872.htm" title="metaRTC/webRTC QOS 方案与实践" target="_blank">metaRTC/webRTC QOS 方案与实践</a> metaRTC <a class="tag" taget="_blank" href="/search/metaRTC/1.htm">metaRTC</a><a class="tag" taget="_blank" href="/search/%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">解决方案</a><a class="tag" taget="_blank" href="/search/webrtc/1.htm">webrtc</a><a class="tag" taget="_blank" href="/search/qos/1.htm">qos</a> <div>概述质量服务(QOS/QualityofService)是指利用各种技术方案提高网络通信质量的技术，网络通信质量需要解决下面两个问题：网络问题：UDP/不稳定网络/弱网下的丢包/延时/乱序/抖动数据量问题：发送数据量超带宽负载和平滑发送拥塞控制是各种技术方案的数据基础，丢包恢复解决丢包问题，抗乱序抖动解决网络乱序抖动问题，流量控制解决平滑发送数据/数据超带宽负载/延时问题。拥塞控制(Congest</div> </li> <li><a href="/article/1835392391662628864.htm" title="metaRTC5.0 API编程指南(一)" target="_blank">metaRTC5.0 API编程指南(一)</a> metaRTC <a class="tag" taget="_blank" href="/search/metaRTC/1.htm">metaRTC</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/webrtc/1.htm">webrtc</a> <div>概述metaRTC5.0版本API进行了重构，本篇文章将介绍webrtc传输调用流程和例子。metaRTC5.0版本提供了C++和纯C两种接口。纯C接口YangPeerConnection头文件:include/yangrtc/YangPeerConnection.htypedefstruct{void*conn;YangAVInfo*avinfo;YangStreamConfigstreamco</div> </li> <li><a href="/article/27.htm" title="rust的指针作为函数返回值是直接传递，还是先销毁后创建？" target="_blank">rust的指针作为函数返回值是直接传递，还是先销毁后创建？</a> wudixiaotie <a class="tag" taget="_blank" href="/search/%E8%BF%94%E5%9B%9E%E5%80%BC/1.htm">返回值</a> <div> 这是我自己想到的问题，结果去知呼提问，还没等别人回答，我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a</div> </li> <li><a href="/article/154.htm" title="java编程思想 -- 数据的初始化" target="_blank">java编程思想 -- 数据的初始化</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%9A%84%E5%88%9D%E5%A7%8B%E5%8C%96/1.htm">数据的初始化</a> <div> 1.使用构造器确保数据初始化 /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }</div> </li> <li><a href="/article/281.htm" title="[航天与宇宙]为什么发射和回收航天器有档期" target="_blank">[航天与宇宙]为什么发射和回收航天器有档期</a> comsci <div> 地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁... 所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &</div> </li> <li><a href="/article/408.htm" title="linux下批量替换文件内容" target="_blank">linux下批量替换文件内容</a> 商人shang <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E6%9B%BF%E6%8D%A2/1.htm">替换</a> <div>1、网络上现成的资料　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi</div> </li> <li><a href="/article/535.htm" title="网页在线天气预报" target="_blank">网页在线天气预报</a> oloz <a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5/1.htm">天气预报</a> <div>网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit</div> </li> <li><a href="/article/662.htm" title="SpringMVC和Struts2比较" target="_blank">SpringMVC和Struts2比较</a> 杨白白 <a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a> <div>1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2</div> </li> <li><a href="/article/789.htm" title="refuse copy, lazy girl!" target="_blank">refuse copy, lazy girl!</a> 小桔子 <a class="tag" taget="_blank" href="/search/copy/1.htm">copy</a> <div> 妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！ </div> </li> <li><a href="/article/916.htm" title="apache与php整合" target="_blank">apache与php整合</a> aichenglong <a class="tag" taget="_blank" href="/search/php+apache+web/1.htm">php apache web</a> <div>一 apache web服务器 1 apeche web服务器的安装 1)下载Apache web服务器 2)配置域名(如果需要使用要在DNS上注册) 3)测试安装访问http://localhost/验证是否安装成功 2 apache管理 1)service.msc进行图形化管理 2)命令管理，配</div> </li> <li><a href="/article/1043.htm" title="Maven常用内置变量" target="_blank">Maven常用内置变量</a> AILIKES <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al</div> </li> <li><a href="/article/1170.htm" title="java的类和对象" target="_blank">java的类和对象</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/JAVA%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1+%E7%B1%BB+%E5%AF%B9%E8%B1%A1/1.htm">JAVA面向对象类对象</a> <div>java中的类： java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决 java使用 class 类名来创建类，在Java中类名要求和构造方法，Java的文件名是一样的创建一个A类： class A{ } java中的类：将某两个事物有联系的属性包装在一个类中，再通</div> </li> <li><a href="/article/1297.htm" title="JS控制页面输入框为只读" target="_blank">JS控制页面输入框为只读</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。 </div> </li> <li><a href="/article/1424.htm" title="AngularJS与服务器交互" target="_blank">AngularJS与服务器交互</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/%24http/1.htm">$http</a> <div> 对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange</div> </li> <li><a href="/article/1551.htm" title="[Maven学习笔记八]Maven常用插件应用" target="_blank">[Maven学习笔记八]Maven常用插件应用</a> bit1129 <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>常用插件及其用法位于：http://maven.apache.org/plugins/ 1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin 1. Jetty Pl</div> </li> <li><a href="/article/1678.htm" title="【Hive六】Hive用户自定义函数(UDF)" target="_blank">【Hive六】Hive用户自定义函数(UDF)</a> bit1129 <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B0/1.htm">自定义函数</a> <div>1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括：文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么</div> </li> <li><a href="/article/1805.htm" title="杀掉nginx进程后丢失nginx.pid，如何重新启动nginx" target="_blank">杀掉nginx进程后丢失nginx.pid，如何重新启动nginx</a> ronin47 <a class="tag" taget="_blank" href="/search/nginx+%E9%87%8D%E5%90%AF+pid%E4%B8%A2%E5%A4%B1/1.htm">nginx 重启 pid丢失</a> <div>nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng</div> </li> <li><a href="/article/1932.htm" title="UI设计中我们为什么需要设计动效" target="_blank">UI设计中我们为什么需要设计动效</a> brotherlamp <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/ui%E6%95%99%E7%A8%8B/1.htm">ui教程</a><a class="tag" taget="_blank" href="/search/ui%E8%A7%86%E9%A2%91/1.htm">ui视频</a><a class="tag" taget="_blank" href="/search/ui%E8%B5%84%E6%96%99/1.htm">ui资料</a><a class="tag" taget="_blank" href="/search/ui%E8%87%AA%E5%AD%A6/1.htm">ui自学</a> <div>随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。一、加强体验舒适度嗯，就是让用户更加爽更加爽的用你的产品。 </div> </li> <li><a href="/article/2059.htm" title="Spring中JdbcDaoSupport的DataSource注入问题" target="_blank">Spring中JdbcDaoSupport的DataSource注入问题</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin</div> </li> <li><a href="/article/2186.htm" title="数据库连接池的工作原理" target="_blank">数据库连接池的工作原理</a> chicony <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">数据库连接池</a> <div> 随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对</div> </li> <li><a href="/article/2313.htm" title="java 关键字" target="_blank">java 关键字</a> CrazyMizzz <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> 关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：（1）访问修饰符 public,private,protected p</div> </li> <li><a href="/article/2440.htm" title="Hive中的排序语法" target="_blank">Hive中的排序语法</a> daizj <a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/order+by/1.htm">order by</a><a class="tag" taget="_blank" href="/search/DISTRIBUTE+BY/1.htm">DISTRIBUTE BY</a><a class="tag" taget="_blank" href="/search/sort+by/1.htm">sort by</a> <div>Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。</div> </li> <li><a href="/article/2567.htm" title="单态设计模式" target="_blank">单态设计模式</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div> 单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{ // 保存类实例在此属性中 private static&</div> </li> <li><a href="/article/2694.htm" title="svn locked" target="_blank">svn locked</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/Lock/1.htm">Lock</a> <div>post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a </div> </li> <li><a href="/article/2821.htm" title=" ARM寄存器学习" target="_blank"> ARM寄存器学习</a> e200702084 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/F%23/1.htm">F#</a> <div>无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。 ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是</div> </li> <li><a href="/article/2948.htm" title="常用编码资料" target="_blank">常用编码资料</a> gengzg <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81/1.htm">编码</a> <div> List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) { </div> </li> <li><a href="/article/3075.htm" title="进程 vs. 线程" target="_blank">进程 vs. 线程</a> hongtoushizi <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%9B%E7%A8%8B/1.htm">进程</a> <div>我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。如果用多线程实现</div> </li> <li><a href="/article/3202.htm" title="Linux定时Job：crontab -e 与 /etc/crontab 的区别" target="_blank">Linux定时Job：crontab -e 与 /etc/crontab 的区别</a> Josh_Persistence <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/crontab/1.htm">crontab</a> <div>一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来：第一段代表分钟 0—59 第二段代表小时 0—23 第三段代表日期 1—31 第四段代表月份 1—12 第五段代表星期几，0代表星期日 0—6 如： */1 * * * * 每分钟执行一次。 * </div> </li> <li><a href="/article/3329.htm" title="KMP算法详解" target="_blank">KMP算法详解</a> hm4123660 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E7%AC%A6%E4%B8%B2/1.htm">字符串</a><a class="tag" taget="_blank" href="/search/KMP/1.htm">KMP</a> <div> 字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。假设主串s="ababcabcacbab",模式串为t="</div> </li> <li><a href="/article/3456.htm" title="枚举类型的单例模式" target="_blank">枚举类型的单例模式</a> zhb8015 <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a> <div>E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*</div> </li> <li><a href="/article/3583.htm" title="Kafka+Storm+HDFS" target="_blank">Kafka+Storm+HDFS</a> ssydxa219 <a class="tag" taget="_blank" href="/search/storm/1.htm">storm</a> <div>cd /myhome/usr/stormbin/storm nimbus &bin/storm supervisor &bin/storm ui &Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk</div> </li> <li><a href="/article/3710.htm" title="Java获取本地服务器的IP" target="_blank">Java获取本地服务器的IP</a> 中华好儿孙 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E8%8E%B7%E5%8F%96%E6%9C%8D%E5%8A%A1%E5%99%A8ip%E5%9C%B0%E5%9D%80/1.htm">获取服务器ip地址</a> <div> System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>