Html/Css/Jquery知识点集锦

2024年2月6日 113次阅读 来源: 看煙花墜落的淺殤

Html

1、Html5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区别HTML和HTML5?

  • HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
  • 拖拽释放(Drag and drop) API
    语义化更好的内容标签（header,nav,footer,aside,article,section）
    音频、视频API(audio,video)
    画布(Canvas) API
    地理(Geolocation) API
  • getCurrentPosition() 方法来获得用户的位置

1.检测是否支持地理定位

2.如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。

3.如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象

4.showPosition() 函数获得并显示经度和纬度

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

新的技术webworker, websocket, Geolocation

移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
HTML5新标签兼容：

  • IE8/IE7/IE6支持通过document.createElement方法产生的标签，
    可以利用这一特性让这些浏览器支持HTML5新标签，
    浏览器支持新标签后，还需要添加标签默认的样式：
  • 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
    首先利用条件注释判断是不是IE9之前版本，如果是就执行js。先把所有新标签写入e数组中，然后遍历整个数组，并创建副本。

该脚本已经托管在Google Project Hosting上，你可以直接外链这个脚本：
<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.c…;</script>
<![endif]–>
　另外，这段脚本需要放在页面起始的部分，最好是head中，不要放在底部。这样IE在解析页面标签之前就会先运行这段代码。

如何区分： DOCTYPE声明新增的结构元素功能元素

2.目前主流的浏览器内核有哪些，有哪些常见的兼容性问题

Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

兼容性问题：

  • png24位的图片在iE6浏览器上出现背景

解决方案：做成PNG8，也可以引用一段脚本处理.

  • 浏览器默认的margin和padding不同

解决方案：加一个全局的 *{margin:0;padding:0;} 来统一。

  • IE6 双边距 bug：在 IE6 下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。
 #box{ float:left; width:10px; margin:0 0 0 10px;} 

这种情况之下 IE6 会产生20px的距离

解决方案：在float的标签样式控制中加入
display:inline; 将其转化为行内属性。( 这个符号只有 IE6 会识别)

  • 渐进识别的方式，从总体中逐渐排除局部。 

首先，巧妙的使用“9”这一标记，将IE游览器从所有情况中分离出来。 
接着，再次使用 “+” 将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{
    background-color:#f1ee18; /所有识别/
    .background-color:#00deff9; /IE6、7、8识别/
    +background-color:#a200ff; /IE6、7识别/
    _background-color:#1e0bd1; /IE6识别/ 
} 

  • IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下,只能使用getAttribute()获取自定义属性

解决方法：统一通过getAttribute()获取自定义属性

  • IE下，event对象有 x、y 属性，但是没有 pageX、pageY属性; Firefox下，event对象有 pageX、pageY 属性，但是没有 x、y 属性

解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

  • Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示

解决方法：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决

  • 超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active 了

解决方法：改变CSS属性的排列顺序 L-V-H-A

a:link {}

a:visited {}

a:hover {}

a:active {}

  • 怪异模式问题：漏写 DTD 声明，Firefox 仍然会按照标准模式来解析网页，但在 IE 中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写 DTD 声明的好习惯。现在可以使用html5 推荐的写法：`<!DOCTYPE html>
  • 上下margin重合问题：ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。

解决方法：养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

  • ie6对png图片格式支持不好

解决方案：引用一段脚本处理

3.怎么存储和读取localstorage

存值setItem localStorage.setItem(‘a’,’1′); //存储的值为’1′

取值getItem var a3 = localStorage.getItem(‘a’);//获取a的值

http://www.cnblogs.com/yunkou…

4.描述一段语义的html代码

（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）就是基于语义化设计原则）

< div id=”header”>
< h1>标题< /h1>
< h2>专注Web前端技术< /h2>
< /div>

语义 HTML 具有以下特性：

文字包裹在元素中，用以反映内容。例如：

段落包含在 <p> 元素中。

顺序表包含在<ol>元素中。

从其他来源引用的大型文字块包含在<blockquote>元素中。

HTML 元素不能用作语义用途以外的其他目的。例如：

<h1>包含标题，但并非用于放大文本。

<blockquote>包含大段引述，但并非用于文本缩进。

空白段落元素 ( <p></p> ) 并非用于跳行。

文本并不直接包含任何样式信息。例如：

不使用 <font> 或 <center> 等格式标记。

类或 ID 中不引用颜色或位置。

5.99%的网站都需要被重构是那本书上写的？

网站重构：应用web标准进行设计（第2版）

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

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

7.页面重构怎么操作？

编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。

页面重构就是根据原有页面内容和结构的基础上，通过div+css写出符合web标准的页面结构。

具体实现要达到以下三点：

  1. 结构完整，可通过标准验证
  2. 标签语义化，结构合理
  3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化

8.语义化的理解？

直观的认识标签，对于搜索引擎的抓取有好处

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

9.HTML5的离线储存？

localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 数据在浏览器关闭后自动删除。

10.Document.write和innerHTML的区别

document.write是重写整个document, 写入内容是字符串的html

innerHTML是HTMLElement的属性，是一个元素的内部html内容

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

1、write是DOM方法,向文档写入HTML表达式或JavaScript代码，可列出多个参数，参数被顺序添加到文档中 ；innerHTML是DOM属性,设置或返回调用元素开始结束标签之间的HTML元素。
2、两者都可向页面输出内容,innerHTML比document.write更灵活。
当文档加载时调用document.write直接向页面输出内容，文档加载结束后调用document.write输出内容会重写整个页面。通常按照两种的方式使用 write() 方法：一是在使用该方在文档中输出 HTML，二是在调用该方法的的窗口之外的窗口、框架中产生新文档（务必使用close关闭文档）。
在读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记，在写模式下，innerHTML会根据指定的值创建新的DOM树替换调用元素原先的所有子节点。
3、两者都可动态包含外部资源如JavaScript文件
通过document.write插入<script>元素会自动执行其中的脚本；
大多数浏览器中，通过innerHTML插入<script>元素并不会执行其中的脚本。

11.前端页面有哪三层构成，分别是什么？作用是什么？

结构层（由 html 或 xhtml 之类的标记语言负责创建）

表示层（主要是指页面渲染,由css控制）

行为层（javascript语言和dom主宰的领域）

12.Div+css的布局较table布局有什么优点？

代码少，页面文件小，下载快

布局灵活，网页有小的改动不影响搜索引擎收录

影响搜索排名

13.Meta标签的常用属性有几种？作用是什么？

meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

http://blog.csdn.net/fu_manxi…

14.盒子模型模式是什么？它和标准模式有什么区别？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域。4个部分一起构成了css中元素的盒模型。

15.为什么 DOCTYPE 只用添加<!DOCTYPE html> 就可以了?
http://www.cnblogs.com/zhangb…

16.HTML5 为什么只需要写 <!DOCTYPE HTML>？

HTML5 不基于 SGML（标准通用标记语言），因此不需要对DTD（指定公开文本类，即所引用的对象类型。）进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

17.请简述Doctype的用途？严格模式与混杂模式如何区分？它们有何意义

（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式（html/Xhtml）来渲染文档。

（2）、严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。（如果页面上有完整的dtd声明则是严格模式）

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（即可实现IE5.5以下版本浏览器的渲染方式）

（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

18.IE和标准下有哪些兼容性的写法5种

Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement || ev.target

19.SGML、HTML、XML之间是什么关系？

SGML是标准通用标记语言

HTML是超文本标记语言，主要是用于规定怎么显示网页

XML是可扩展标记语言 是未来网页语言的发展方向，可能会替代HTML，他和HTML都是由SGML延伸转变而来的，你可以理解SGML是最早的版本，但现在已经淘汰不用了

XML和HTML的最大区别就在于 XML的标签是可以自己创建的，数量无限多，而HTML的标签都是固定的而且数量有限。

还有一个是XHTML也是现在基本上所有网页都在用的标记语言，他其实和HTML没什么本质的区别标签都一样，用法也都一样，就是比HTML更严格，比如标签必须都用小写，标签都必须有闭合标签等。

20.HTML和XHTML—二者有什么区别，你觉得应该使用哪一个并说出理由

区别：HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。简单来说，XHTML 可以认为是 XML 版本的 HTML，为符合 XML 要求，XHTML 语法上要求更严谨些。

  • 语法上XHTML要求：

1、XHTML元素必须被正确地嵌套。

2、XHTML所有元素必须关闭

3、标签名必须用小写字母

4、XHTML 文档必须拥有根元素。

5、所有的属性必须用引号””括起来

6、把所有<和&特殊符号用编码表示

7、给所有属性赋一个值

8、不要在注释内容中使“–”

9、图片必须有说明文字

  • 功能上：

主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。

21.浏览器标准模式和怪异模式之间的区别是什么?

盒子模型、渲染模式的不同

使用 window.top.document.compatMode可显示为什么模式

标准模式是指浏览器按W3C标准解析执行代码；

怪异模式则是使用浏览器自己的方式解析执行代码。因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

22.标签上title与alt属性的区别是什么?

Alt 当图片不显示时，用文字代表。

Title 为该属性提供信息

23、对WEB标准以及W3C的理解与认识

（1）web标准：

  • 什么是web标准：一系列标准的集合，包括结构化标准语言（html等）、表现标准语言（css）、行为标准语言（EMCAScript等）。这些标准大部分由万维网联盟起草和发布
  • 为什么使用web标准：为了解决因浏览器版本不同、软硬件设备不同导致的需多版本开发的问题

（2）W3C：万维网联盟，是一个web开发的国际性联盟

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

CSS

1、元素居中的几种方法

方法1：
绝对定位法（transform属性）不需要知道元素的宽、高

使用css3的transform设置元素进行水平垂直居中，不需要知道元素的宽、高

用绝对定位来实现的垂直居中，取决与元素的宽度和高度，可以用下面这两个公式来计算元素的左边距和上边距：

元素的宽度/2 = 负左边距

元素的高度/2 = 负上边距

#father{
    //假设主框为600*300
    position: relative；     /*很重要*/
    width: 600px;
    height: 300px;
    background-color: blue:
}
#child{
   position: absolute;     /*很重要*/
   /*子元素左上角定位到父级元素的正中间*/
   top: 50%;
   left: 50%;    
   /*子元素相对于自身左移上移到中间，实现居中定位*/ 
   transform: translate(-50%,-50%);   
   background-color: lawngreen;
}

上述方法利用了CSS3中的 transform:translate(x,y) 属性，这是子元素相对于自身的定位实现的x轴和y轴的偏移，如果子元素没有设置宽和高值的话可以用这个方法实现（做自适应页面的时候用到）

方法2：
定位法（相对位置）已知子元素的宽和高

利用position生成绝对定位的元素进行水平垂直居中，该方法需要知道元素的宽、高

#father{
    position:relative;
    width:600px;
    height:300px;
    background-color:deepskyblue;
    border: 2px red dashed;
}
#child{
    position: absolute;
    width:200px;
    height:100px;
    top: 50%;
    left: 50%;
    /*transform: translate(-50%,-50%);*/
    margin-left:-100px;
    margin-top:-50px;
    background-color: lawngreen;
    /*内容居中*/
    text-align: center;
    line-height:100px;  /*行间距和div宽度相同*/
}

方法3：
定位法 margin：auto

使用position生成绝对定位与margin:auto结合让元素进行水平垂直居中，改方法需要设置元素的宽、高

#father{
            position:relative;
            width:600px;
            height:300px;
            background-color:deepskyblue;
            border: 2px red dashed;
        }
#child{
    position: absolute;
    width : 200px;
    height : 100px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: lawngreen;
}

仅实现水平居中（子元素）：
margin：0 auto； (当子元素position为非默认及relative时，这种设置会失效)

仅实现垂直居中（子元素）：margin：auto 0；
上述文字没有实现居中，可参考方法2中的居中，但是要注意：如<p>等标签中内的文字内容水平居中：使用{text-align:center}。垂直居中设置该元素的行高等于元素的高。

方法4： display：table-cell 实现法
display：table-cell 主要针对多行文字内容的垂直居中对齐。
通过display转化成为表格的形式，再采用垂直居中的方法得到需要的结果
display:table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
display:table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

div {
    display: table-cell;
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #F00;
}

2、CSS3动画（360度旋转、旋转放大、放大、移动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width:120px;
            height:120px;
            line-height:120px;
            margin: 20px;
            background-color: #5cb85c;
            float: left;
            font-size: 12px;
            text-align: center;
            color:orangered;
        }
        /*效果一：360°旋转 修改rotate(旋转度数)*/
        .img1 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img1:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }

        /*效果二：放大 修改scale(放大的值)*/
        .img2 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img2:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
        }
       /*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/
        .img3 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img3:hover {
            transform: rotate(360deg) scale(1.2);
            -webkit-transform: rotate(360deg) scale(1.2);
            -moz-transform: rotate(360deg) scale(1.2);
            -o-transform: rotate(360deg) scale(1.2);
            -ms-transform: rotate(360deg) scale(1.2);
        }
        /*效果四：上下左右移动 修改translate(x轴,y轴)*/
        .img4 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img4:hover {
            transform: translate(0, -10px);
            -webkit-transform: translate(0, -10px);
            -moz-transform: translate(0, -10px);
            -o-transform: translate(0, -10px);
            -ms-transform: translate(0, -10px);
        }
    </style>
</head>
<body>
<div class="img1">效果一：360°旋转 </div>
<div class="img2">效果二：放大</div>
<div class="img3">效果三：旋转放大</div>
<div class="img4">效果四：上下左右移动 </div>

</body>
</html>

3、CSS 实现左侧固定，右侧自适应两栏布局的方法: https://www.cnblogs.com/vicky…

1>将左侧div浮动，右侧div设置margin-left

2>固定区采用绝对定位，自适应区设置margin

3>标准浏览器的方法 table-cell

4>双float + calc()计算属性

5>双inline-block + calc()计算属性

6>float + BFC方法

7>flex

4、纯CSS写三角形-border法
https://www.cnblogs.com/blosa…
https://blog.csdn.net/linda_4…


#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

5、css3实现loading :https://www.cnblogs.com/lhb25…

<!DOCTYPE html>
<html>
<head>
    <title>加载效果</title>
    <style type="text/css">
        .loading{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 5px solid #BEBEBE;
            border-left: 5px solid #498aca;
            animation: load 1s linear infinite;
            -moz-animation:load 1s linear infinite;
            -webkit-animation: load 1s linear infinite;
            -o-animation:load 1s linear infinite;
        }
        @-webkit-keyframes load
        {
            from{-webkit-transform:rotate(0deg);}
            to{-webkit-transform:rotate(360deg);}
        }
        @-moz-keyframes load
        {
            from{-moz-transform:rotate(0deg);}
            to{-moz-transform:rotate(360deg);}
        }
        @-o-keyframes load
        {
            from{-o-transform:rotate(0deg);}
            to{-o-transform:rotate(360deg);}
        }
    </style>
</head>
<body>
<div class="loading"></div>
</body>
</html>

6、flex

flex布局是围绕父元素和轴来进行布局的，只需要给直接父容器设置为display: flex;，子元素就默认具有了可收缩性。

https://www.jianshu.com/p/c25…

7、深入理解CSS盒模型：https://www.cnblogs.com/cheng…

盒模型的组成大家肯定都懂，由里向外content,padding,border,margin.

盒模型是有两种标准的，一个是标准模型，一个是IE模型。

盒模型的宽高只是内容（content）的宽高，而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

css如何设置两种模型：box-sizing

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

8、行内元素和块级元素的区别：

行内元素：

与其他行内元素并排；

不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

霸占一行，不能与其他任何元素并列；

能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

9、文档流的理解

文档流就是网页渲染呈现的时候，按照HTML文档从上到下的顺序呈现，也就是HTML文档中先写的内容，会呈现在网页的前面。

1、从左至右，从上至上的布局。
2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。

在这几种定位机制中，有几种方式是脱离文档流的。什么是脱离文档流呢？可以这样理解，本来这个标签是属于文档流管理的，那么它应该按照文档流的正常布局方式从左至右从上之下，并且符合标签本身的含义。 脱离文档流是指，这个标签脱离了文档流的管理。不受文档流的布局约束了，并且更重要的一点是，这个标签在原文档流中所占的空间也被清除了。
css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动：float
（2）绝对定位:absolute
（3）固定定位:fixed

10、浮动：https://www.cnblogs.com/smyhv…

一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。

性质1：浮动的元素脱离标准流

性质2：浮动的元素互相贴靠

性质3：浮动的元素有“字围”效果

性质4：收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。

清除浮动：

方法1：给浮动元素的祖先元素加高度

如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

方法2：clear:both;
clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。
3>方法3：overflow:hidden;
overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。

盒子居中margin:0 auto;

注意：
（1）使用margin:0 auto;的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的witdh，那么它的witdh就是霸占整行，没有意义）
（2）只有标准流的盒子，才能使用margin:0 auto;居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
（3）margin:0 auto;是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用text-align:center;

margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
11、meta viewport原理：https://www.cnblogs.com/2050/…
https://www.cnblogs.com/pigta…
12、float和display：inline-block；的区别：

区别：

①inline-block: 水平排列一行，即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不回有第二行元素上浮补位。可以设置默认的垂直对齐基线。

②float: 让元素脱离当前文档流，呈环绕装排列，如遇上行有空白，而当前元素大小可以挤进去，这个元素会在上行补位排列。默认是顶部对齐。

场景：
①inline-block： 当我们要设置某些元素在一行显示，并且排列方向一致的情况下，我们尽可能去用inline-block。因为inline-block的元素仍然在当前文档流里面，这样就减少了程序对DOM的更改操作，因为DOM的每一次更改，浏览器会重绘DOM树。理论上会增加性能消耗。这样也不用像flaot那样麻烦，需要清除flaot.
②float： 即使inline-block为布局首选，但是也有inline-block所不能涉及的一些业务需求，比如：有两个元素，我们需要一个向左，一个向右排列，这时候我们就只能用float来实现，对于新手来说，会纠结float不好调，比较麻烦，想到达到预期效果，需要多次调整，有时候我们给元素设置了浮动，元素显示的顺序却变了，一时搞不清楚就改变HTML中元素的前后顺序等等。因为浏览器的解析顺序是逐行解析，当设置两个元素的右浮动时，顺序在前面的元素会先被解析，他是右浮动，那么在前边的元素就先往右浮动占位置，后边的元素依次被解析到以后，才往右排列，这样我们看到的顺序就是反的，当弄明白原因之后，调试就方便多了。

https://www.cnblogs.com/scot/…
13、兼容ie６的水平垂直居中：https://www.cnblogs.com/hongc…
14、h5和原生android的优缺点：https://www.jianshu.com/p/091…
15、编写h5需要注意什么：https://www.jianshu.com/p/e95…
16、css优先级：https://www.cnblogs.com/nange…
17、如何实现点击radio的文字描述控制radio的状态（通过label实现）：https://ykyfendou.iteye.com/b…
18、display:none与visible:hidden的区别：https://www.cnblogs.com/shenx…
19、三栏布局:https://www.cnblogs.com/p2227…
20、url、href、src 详解：https://segmentfault.com/a/11…
21、CSS Flex布局属性整理：https://www.jianshu.com/p/bd9…
22、CSS中<li>标签横向排列出现间距问题

原因：<li>标签和<li>标签之间有空格引起

方式1：
解决：第一个<li>标签和第二个<li>标签直接注释掉或者紧挨着没有空格
方式2：
解决：li选择器中加入 float: left; 让li变成浮动，让各个<li>标签紧挨着排列。同时还可以看到 float具有inline元素特性。
方式3：
解决：设置ul标签的属性 font-size ＝ 0，再重新设置li标签的 font-size 。
个人建议 方式2是最后考虑的一种方式。

23、请使用三种以上方法css实现一个左右200px，中间自适应的布局
https://www.cnblogs.com/guoqi…
https://www.cnblogs.com/ikong…
24、移动端布局可选
https://blog.csdn.net/chenjua…
https://www.cnblogs.com/axl23…
25、几种方式可以隐藏一个元素?

CSS display的值是none。

type=”hidden”的表单元素。

宽度和高度都显式设置为0。

一个祖先元素是隐藏的，该元素是不会在页面上显示。

CSS visibility的值是hidden。

CSS opacity的指是0。

设置z-index位置在-1000

26、为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

27、列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

diaplay取值有：

block :设置元素以块样式显示

inline：设置元素以行内形式显示

inline-block：向行内元素一样显示，但内容向块级元素一样

none：隐藏元素，在页面中不占据空间

list-item：向块级一样显示，但添加列表样式

absolute 是绝对定位，相对于父级定位元素定位；
relative 是相对定位，相对于自身定位。

  • absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  • fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
  • relative生成相对定位的元素，相对于其正常位置进行定位。
  • static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
  • inherit 规定从父元素继承 position 属性的值。

28、Display:none和visibility:hidden的区别是什么？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

29、CSS引入的方式有哪些?

CSS引入的方式：内联 内嵌 外链 导入

30、link和@import的区别是?

link和@import虽然都是引入外部的css文件，link属于HTML标签，而@import是CSS提供的方式，要写在css文件或者style标签中。

link和@import虽然都是引入外部的css文件，link属于HTML标签，而@import是CSS提供的方式，要写在css文件或者style标签中。

link （链接式）语法为：

<link rel="stylesheet" href="style.css" type="text/css"/>

@import （导入式）语法为：

<style type="text/css">
    @import url("style.css");
</style>

加载顺序不同，页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

@import只在IE5以上才能识别， CSS2.1以下浏览器不支持， 而link是HTML标签，无兼容问题; 

Link 支持使用javascript改变样式，import不可。当使用javascript控制DOM去改变css样式的时候，只能使用link标签，因为import是不能被DOM控制的。

link方式的样式的权重高于@import的权重.

31、请解释一下block，inline以及inline-block的区别？

block独占一行，宽度继承父级，可设置宽高，但设置后还是独占一行。

inline不占一行，宽度随元素内容，不可设置宽高。

inline-block上面二者强强联合，可设置宽高，可同行。

display:block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

block元素可以设置margin和padding属性。

display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

inline元素设置width,height属性无效。

inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

32、CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

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

增加了更多的CSS选择器 多背景 rgba

在CSS3中唯一引入的伪元素是::selection.

媒体查询，多栏布局

border-image

33、简述一下src与href的区别

href 表示超文本引用，在 link和a 等元素上使用。

src 表示来源地址，在 img、script、iframe 等元素上使用。

src 的内容，是页面必不可少的一部分，是引入。
href 的内容，是与该页面有关联，是引用。

区别就是，引入和引用。

34、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

35、写出几种IE6 BUG的解决方法5种，解释css sprites，如何使用
双边距BUG float引起的 使用display
3像素问题 使用float引起的 使用dislpay:inline -3px
超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
Ie z-index问题 给父级添加position:relative
Png 透明 使用js代码改
Min-height 最小高度 ！Important 解决’
select 在ie6下遮盖 使用iframe嵌套
为什么没有办法定义1px左右的宽度容器 IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px

http://www.frontopen.com/1130…

css sprites: css精灵 就是把网站中需要使用的小图片，做成一张大图，使用的时候，用背景定位获得需要的图片，减轻服务器对图片的请求数量。

这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了 http2。

36、你使用css预处理器吗？如果使用，描述你的喜好

css预处理器：用一种专门的编程语言，编写web样式，再编译成css文件格式。让css像其他语言一样可以做一些预定的处理。(SASS,Compass,Stylus,LESS)

目前主流的预处理器里最常用的三种有：Sass，Less，Stylus 。

用一些 CSS 的预处理能有效的提高开发效率，节约成本。

目前选择的是LESS，有很多开源项目都使用他，可以阅读学习。他没有SASS要求那么严谨，比如要mixin（中文不知道怎么翻译）时，SASS要求被mixin样式需要添加声明，调用时也要求调用。

用过LESS，仅限于简单的尝试，没有应用于实际的项目中，优点来说，结构更清晰吧，而且可以继承，这个很方便，缺点的话就是需要额外的工具来编译吧。

37、在书写高效css文件时会有哪些问题需要考虑

布局遵循从全局到局部，从左到右，从上到下

Class、Id命名尽量简短且通俗易懂

提取公共样式，提高代码复用率

开始要Css样式初始化

大项目可以考虑三层架构

样式是：从右向左的解析一个选择器；

ID最快，Universal最慢有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal ；

不要tag-qualify（永远不要这样做ul#main-navigation{}ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）；

后代选择器最糟糕（换句话说，下面这个选择器是很低效的：html body ul li a{}）；

想清楚你为什么这样写；

CSS3的效率问题（CSS3选择器（比如:nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）；

我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性。

38、你使用过media queries(媒体查询)吗，或者移动网站相关的css布局

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示；即响应式布局

媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。
语法结构及用法：@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}。

/* 当浏览器的可视区域小于980px */
@media screen and （max-width： 980px） {
#content {width： 60%;padding： 5%;}
}
/* 当浏览器的可视区域小于650px */
@media screen and （max-width： 650px） {
#sidebar {width： 100%; float： none; margin： 0;}
}

39、清除浮动的几种方式，各自的优缺点，分别适用于什么情形？

第一种：添加新的元素，应用clear：both；

<div style=”clear:both;”></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

第二种：给父级元素定义overflow； 设置
overflow为
hidden或者auto

第三种：使用after伪类 :after（注意：作用于浮动元素的父亲）（最佳方式）

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
    }

使用空标签清除浮动 clear:both（理论上能清除任何标签，增加无意义的标签）

使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）

使用afert伪元素清除浮动(用于非IE浏览器)

40、如何居中div？如何居中一个浮动元素？
http://www.w3cplus.com/css/el…

41、CSS垂直居中的方法

负边距

<div class="inner"></div>
.inner{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px; 
 }

绝对定位和0

.inner{
  width: 50%; 
  height: 50%; 
  background:red;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}

这里是通过margin:auto和top,left,right,bottom都设置为0实现居中。不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。

未知元素宽高：

CSS3的transform属性来实现移位

通过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。

.box6 span{   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: red;
    width: 100px;
    height: 100px; }

使用CSS3的弹性布局（flex）

只要设置父元素（这里是指body）的display的值为flex即可

.body{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: flex;
      align-items: center; //定义body的元素垂直居中
      justify-content: center; //定义body的里的元素水平居中
 }
 .inner{
      border: 1px solid #546461;
      width: 100px;
      height: 100px;
 }

display:-webkit-box

.box{
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient: vertical;
    text-align: center;
    background: red;
    width: 200px;
    height: 200px;
  }
  .inner{
    width: 100px;
    height: 100px;
    background: blue;
 }

table布局： ie8以下不支持。

可以将父容器设置为display:table ，然后将子元素也就是要垂直居中显示的元素设置为 display:table-cell 。但是，这是不值得推荐的，因为会破坏整体的布局。

<div class="box">
        <div class="inner">hello world-1</div>
</div>
.box{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.inner{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

当要被居中的元素是inline或者inline-block元素

.box{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: red;
    width: 200px;
    height: 200px;
  }
  .inner{
    width: 100px;
    height: 100px;
    background: blue;
    display: inline-block;
 }

42、描述css reset的作用和用途

Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

43、谈谈css盒模型，标准盒模型与Ie盒模型的区别；box-sizing常用的属性有哪些？分别有什么作用？

css盒模型: 内容(content)、填充(padding)、边框(border)、边界(margin)

区别：

W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和padding。

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

box-sizing: content-box|border-box|inherit;
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；

content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

44、CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高? CSS3新增伪类有那些？

常用的有标签选择器、类选择器、ID选择器等

CSS 选择符：

1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = “external”])
9.伪类选择器(a: hover, li:nth-child)

可继承的样式：

1.font-size
2.font-family
3.color
4.text-indent

不可继承的样式：

1.border
2.padding
3.margin
4.width
5.height

优先级算法：
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important >  id > class > tag  
4.important 比 内联优先级高，但内联比 id 要高

CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

4个等级的定义如下：

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表类，伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

45、<div><h1></h1><p></p><p></p><p></p><span></span></div>,使用css选择div中的非p元素或选择div中偶数下标p元素；

div p:nth-child(even) //偶数

div :not(p) //非P

46、使用CSS3把一个div顺时针旋转90度，或者长和宽缩放为原来的两倍。

 -webkit-transform: rotate(90deg);  
-webkit-transform: scale(2,2);

47、CSS3实现动画的两种方式：https://www.cnblogs.com/donte…

Jquery

1、jquery怎么获取每个li元素下的第三个a元素

:eq（index）选择器

$(‘li’).find(‘a:eq(2)’);

2、jQuery 事件绑定

bind 是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数

 $("#div li").bind("click",myFun);

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。最常用的一种$(selector).on(event,childSelector,data,function);

3、jQuery实现的全选、反选和不选功能：

$(function () {
    //全选或全不选
    $("#all").click(function(){   
        if(this.checked){   
       $("#list :checkbox").prop("checked", true);  
        }else{   
        $("#list :checkbox").prop("checked", false);
        }   
     }); 
    //全选  
    $("#selectAll").click(function () {
         $("#list :checkbox,#all").prop("checked", true);  
    });  
    //全不选
    $("#unSelect").click(function () {  
         $("#list :checkbox,#all").prop("checked", false);  
    });  
    //反选 
    $("#reverse").click(function () { 
         $("#list :checkbox").each(function () {  
              $(this).prop("checked", !$(this).prop("checked"));  
         });
         allchk();
    });    
    //设置全选复选框
    $("#list :checkbox").click(function(){
        allchk();
    }); 
    //获取选中选项的值
    $("#getValue").click(function(){
        var valArr = new Array;
        $("#list :checkbox[checked]").each(function(i){
            valArr[i] = $(this).val();
        });
        var vals = valArr.join(',');
          alert(vals);
    });
}); 
function allchk(){
    var chknum = $("#list :checkbox").size();//选项总个数
    var chk = 0;
    $("#list :checkbox").each(function () {  
        if($(this).prop("checked")==true){
            chk++;
        }
    });
    if(chknum==chk){//全选
        $("#all").prop("checked",true);
    }else{//不全选
        $("#all").prop("checked",false);
    }
}

https://www.helloweba.net/jav…
4、jQuery库冲突解决办法:https://www.cnblogs.com/staro…
5、jquery的bind跟on绑定事件的区别

jquery文档中bind和on函数绑定事件的用法：

.bind(events [,eventData], handler)

.on(events [,selector] [,data], handler)

从文档中可以看出，.on方法比.bind方法多一个参数’selector’

.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

$(‘ul’).on(‘click’, ‘li’, function(){console.log(‘click’);})就是筛选出ul下的li给其绑定click事件；

$(‘ul li’).bind(‘click’, function(){console.log(‘click’);})

6、jQuery对象与js对象互相转换

两种转换方式将一个jQuery对象转换成js对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的js对象。
如：var $v =$(“#v”) ; //jQuery对象
var v=$v[0]; //js对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供，通过.get(index)方法，得到相应的js对象
如：var $v=$(“#v”); //jQuery对象
var v=$v.get(0); //js对象
alert(v.checked) //检测这个checkbox是否被选中

js对象转成jQuery对象:

对于已经是一个js对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(js对象)

如：var v=document.getElementById(“v”); //js对象

var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。

7、Jquery与jQuery UI 有啥区别？

jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。

提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

8、jquery 中如何将数组转化为json字符串，然后再转化回来？

现代浏览器中提供了JSON.stringify()方法将数组，对象转成json。

JSON.stringify 把一个对象转换成json字符串，

JSON.parse 把一个json字符串解析成对象。

不支持的可以引入json2.js

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：

 $.fn.stringifyArray = function(array) {
return JSON.stringify(array)
  }
 $.fn.parseArray = function(array) {
     return JSON.parse(array)
    }

然后调用：

 $("").stringifyArray(array)

9、body中的onload（）函数和jquery中的document.ready（）有什么区别？

onload()和document.ready()的区别有以下两点：

1、我们可以在页面中使用多个document.ready()，但只能使用一次onload()。

2、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。

dom文档加载的步骤为：

1.解析html结构

2.加载外部脚本和样式表文件

3.解析并执行脚本代码

4.dom树构建完成 // DOMContentLoaded

5.加载图片等外部文件

6.页面加载完毕

domready（也叫DOMContentLoaded ），在第4步完成后触发；

图片onload是在第5步完成后触发；

页面onload是第6步完成后触发。

由此可见三者执行顺序为：domready→图片load→页面load。

document load 与document ready的区别

页面加载完成有两种事件
1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

https://www.cnblogs.com/hangu…

10、jquery的优缺点

优点：

jQuery消除了JavaScript跨平台兼容问题。

相比其他JavaScript和JavaScript库，jQuery更容易使用。

jQuery有一个庞大的库/函数。

jQuery有良好的文档和帮助手册。

jQuery支持AJAX。

与JavaScript相比，jQuery的语法更加简单。通过jQuery，可以很容易地浏览文档、选择元素、处理事件以及添加效果等，同时还允许开发者定制插件。

缺点：
jQuery严格意义来说不是一个前端框架，只是一个前端js类库，如果你开发比较大型的应用的话，使用jQuery代码相对会比较难于维护和更改，并且要求开发的程序员比较熟练。
由于不是原生JavaScript语言，理解起来可能会受到限制。
项目中需要包含jQuery库文件。如果包含多个版本的jQuery库，可能会发生冲突。

11、请写出jquery绑定事件的方法，不少于两种

$("").click()
$("").ready()
$("").change()
$("").focus()

12、$(this)和this关键字在Jquery中有何不同

1、this表示javascript的dom对象

2、$(this)表示把dom对象转换为jquery对象

3、jquery包的方法只能由jquery对象调用，不能用javascript的的dom对象使用

$(“input”).click(function(){

//这里的this表示被点击的输入框对象,可以使用javascript对该对象进行操作

var value=this.value;

//jquery对象与dom对象取值方法不一样，要用jquery方法必须使用$(dom对象)转换

var val=$(this).val();

})

$(this)是jquery对象，能调用jquery的方法，例如click(), keyup()。
而this,则是html元素对象，能调用元素属性，例如this.id,this.value。
例如假设已经使得this和$(this)都指向了input对象了，若要获得input的值,可以this.value，但$(this)就得$(this).val()。

其他

1、关于移动端适配的技术方案：https://blog.csdn.net/chenjua…

（1）通过媒体查询的方式即CSS3的meida queries

（2）以天猫首页为代表的 flex 弹性布局

（3）以淘宝首页为代表的 rem+viewport缩放

（4）rem 方式

2、懒加载：https://www.jianshu.com/p/e86…

我们之前看到的懒加载一般是这样的形式：

浏览一个网页，准备往下拖动滚动条

拖动一个占位图片到视窗

占位图片被瞬间替换成最终的图片

我们可以在Medium中看到懒加载是如何使用的，网页首先用一张轻量级的图片占位，当占位图片被拖动到视窗，瞬间加载目标图片，然后替换占位图片。

懒加载图片和视频，可以减少页面加载的时间、页面的大小和降低系统资源的占用，这些对于性能都有显著地提升

3、XMLHTTP与后台交互时返回的一个状态码：https://www.cnblogs.com/small…

1XX 信息性状态码（Informational） 服务器正在处理请求

2XX 成功状态码（Success） 请求已正常处理完毕

3XX 重定向状态码（Redirection） 需要进行额外操作以完成请求

4XX 客户端错误状态码（Client Error） 客户端原因导致服务器无法处理请求

5XX 服务器错误状态码（Server Error） 服务器原因导致处理请求出错

4、GET和POST的区别

GET产生一个TCP数据包；POST产生两个TCP数据包。

GET在浏览器回退时是无害的，而POST会再次提交请求。

GET产生的URL地址可以被Bookmark，而POST不可以。

GET请求会被浏览器主动cache，而POST不会，除非手动设置。

GET请求只能进行url编码，而POST支持多种编码方式。

GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

GET请求在URL中传送的参数是有长度限制的，而POST么有。

对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

GET参数通过URL传递，POST放在Request body中。

5、响应式布局的两种实现形式： https://www.cnblogs.com/luowe…
6、移动端横竖屏判断

JS

//判断手机横竖屏状态： 
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { 
            if (window.orientation === 180 || window.orientation === 0) {  
               //alert('竖屏状态！'); 
            }  
            if (window.orientation === 90 || window.orientation === -90 ){  
                //alert('横屏状态！'); 
            }   
        }, false);  
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

CSS

@media all and (orientation : landscape) {
 
/*横屏时*/
 
}
 
@media all and (orientation : portrait){
 
/*竖屏时*/
 
}

7、常见自适应布局/等分布局/九宫格布局
https://www.jianshu.com/p/3cf…
8、谷歌浏览器调试技巧
https://blog.csdn.net/u010001…
9、DIV+CSS有什么优点？
https://zhidao.baidu.com/ques…
10、前端工程化方面做了哪些东西，怎么做。：https://www.cnblogs.com/fsyz/…
11、前端优化策略列举：https://www.cnblogs.com/wzndk…
雅虎优化：https://www.cnblogs.com/xiany…
12、域名收敛是什么：https://www.cnblogs.com/coco1…

PC 时代为了突破浏览器的域名并发限制。有了域名发散。

浏览器有并发限制，是为了防止DDOS攻击。

域名收敛：就是将静态资源放在一个域名下。减少DNS解析的开销。

域名发散：是将静态资源放在多个子域名下，就可以多线程下载，提高并行度，使客户端加载静态资源更加迅速。

域名发散是pc端为了利用浏览器的多线程并行下载能力。而域名收敛多用与移动端，提高性能，因为dns解析是是从后向前迭代解析，如果域名过多性能会下降，增加DNS的解析开销。

13、请你描述下用户从输入url到看到完整页面这个过程发生的事情，尽可能的详细。：https://blog.csdn.net/samjust…
14、WEB前端开发必备之浏览器兼容性处理方法大全：https://wenku.baidu.com/view/…

15、有了解过哪些web前端框架(jQuery,bootstrap,jquery,JQuery,Ui等)?请简要介绍。

jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。特点是轻量级，丰富的DOM选择器，事件、样式、动画支持，Ajax操作支持，可扩展性强

boostrap是一套追求一致性的框架。特点是跨设备，跨浏览，响应布局，支持html5 css3，支持less动态样式扩展

jquery ui是jquery对桌面端的扩展，可以通过可视化界面进行配置。

16、PC端页面适配
http://www.cnblogs.com/itlich…

17、你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏品字布局如何设计?

  • 首先划分成头部、body、尾部；。。。。。
  • 实现效果图是最基本的工作，精确到2px；
    与设计师，产品经理的沟通和项目的参与
    做好的页面结构，页面重构和用户体验
    处理hack，兼容、写出优美的代码格式
    针对服务器的优化、拥抱 HTML5。

18、前端优化、性能优化，你如何管理你的项目

前期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；

编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

页面进行标注（例如 页面 模块 开始和结束）；

CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

JS 分文件夹存放 命名以该JS功能为准的英文翻译。

图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

19、对网站重构的理解

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是：

表格(table)布局改为DIV+CSS
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
对于移动平台的优化
针对于SEO进行优化
深层次的网站重构应该考虑的方面

减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的API
代替旧有的框架、语言(如VB)
增强用户体验
通常来说对于速度的优化也包含在重构中

压缩JS、CSS、image等前端资源(通常是由服务器来解决)
程序的性能优化(如数据读写)
采用CDN来加速资源加载
对于JS DOM的优化
HTTP服务器的文件缓存
20、你都使用哪些工具来测试代码的性能？

Profiler, JSPerf（
http://jsperf.com/nexttick-vs…）, Dromaeo

21、你如何对网站的文件和资源进行布局与优化？以及写出至少三种减低页面加载时间的方法

文件和资源进行布局与优化

期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用 CDN 托管

缓存的使用（多个域名来提供缓存）

其他

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

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

22、描述一下你制作一个网页的工作流程

内容分析：分清展现在网络中内容的层次和逻辑关系

结构设计：写出合理的html结构代码

布局设计：使用html+css进行布局

样式设计：首先要使用reset.css

交互设计：鼠标特效

行为设计：js代码，ajax页面行为和从服务器获取数据

测试兼容性；优化性能

23、你最厉害的技能是什么

描述界面的语言：HTML, CSS

描述数据的语言（格式）：JSON, XML

连接数据和界面的语言：JavaScript

jQuery只是JavaScript的一个框架，因为便利，应用很广，当然也应该掌握。

AngularJS最近比较火，建议也学学。

若要用好JavaScript（其实其他语言也一样），正则表达式是必须学会的，达不到精通也要会。

作为前端，设计界面，免不了要和图片打交道，不会PhotoShop恐怕也说不过去。

另外，虽然是前端，服务器方面的知识也应该具备一些，比如Linux/Apache/PHP/MySQL（简称LAMP）。

24、一个页面有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，请从幻灯片、CSS图片、图片过大、图片过小四种情况来说明。

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

25、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
26、项目制作流程

我们这的工作流程是这样：

  1. 产品人员提需求
  2. 需求讨论通过后交给UE做交互设计
  3. 交互通过之后交给UI出PS效果图
  4. 效果图出来之后builder切图、写CSS、写HTML
  5. 后端同学根据Builder的HTML结构生成动态页面
  6. 前端JS同学根据Builder的CSS和HTML以及后端的给的Ajax URL，写HTML代码，完成一些动态效果和交互。

27、对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
1、实现界面交互
2、提升用户体验
3、有了Node.js，前端可以实现服务端的一些事情

前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到100 分，甚至更好，
参与项目，快速高质量完成实现效果图，精确到1px；
与团队成员，UI设计，产品经理的沟通；
做好的页面结构，页面重构和用户体验；
处理hack，兼容、写出优美的代码格式；
针对服务器的优化、拥抱最新前端技术

    原文作者：看煙花墜落的淺殤
    原文地址: https://segmentfault.com/a/1190000018568103
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞