前端求职刷题（第一部分）

快来打我* 2021-11-11 16:31 1969阅读 0赞

### 文章目录 ###

*   *   *  HTML5不在支持的元素：
         *  在Javascript定义一个函数一般有如下三种方式：
         *  CSS清除浮动
         *  表示新开一个标签页的超链接代码是：（）
         *  当/的两边都是整数时，/表示整除，是否正确？
         *  在准备XMLHttpRequest对象时，在send()前需要调用哪个方法？
         *  以下 javascript 代码，在浏览器中运行的结果是
         *  基于以下 HTML 结构和 CSS 样式，文本 Dijkstra的颜色应该是？
         *  bootstrap添加table类
         *  常见的请求头和相应头都有什么
         *  CSS 盒子模型中（ ）是透明的，这部分可以显示背景
         *  白屏时间first paint和可交互时间dom ready的关系是？
         *  void();上面表达式的结果是：
         *  bootstrap3支持的浏览器
         *  javascript数据类型
         *  MVC模型变更之后，只有控制器（Controller）才能驱动视图变更或重新渲染视图
         *  下列代码，页面打开后能够弹出alert(1)的是？
         *  display属性
         *  盒子模型的大小
         *  localStorage的使用
         *  dropdown
         *  iframe使用场景
         *  javascript内部对象
         *  display：none和visibility：hidden
         *  jquery ajax中都支持哪些数据类型？
         *  input元素的type属性的取值可以是
         *  bootstrap栅栏选项
         *  对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
         *  flash和js通过什么类如何交互
         *  页面有一个按钮button id为 button1，通过原生的js如何禁用？
         *  置换元素
         *  DHTML
         *  代码回收
         *  JS运算
         *  position
         *  overflow
         *  CSS Sprites
         *  加亮文本的标签
         *  阻止默认事件的默认操作的方法
         *  事件对象
         *  硬件加速
         *  DOM树状结构
         *  伪类的触发顺序
         *  javascript中实现跨域的方式总结
         *  在css的定位机制有三种，分别是1：文档流，2：浮动（float），3定位（position）
         *  bootstrap栅栏参数
         *  margin的%情况
         *  title和alt属性
         *  Doctype不存在或错误，浏览器默认 混杂模式
         *  锚伪类
         *  Generrator 函数的使用方式
         *  CSS百分比参照
         *  CSS中可以和不可以继承的属性
         *   *  一、无继承性的属性
             *  二、有继承性的属性
             *  三、所有元素可以继承的属性
             *  四、内联元素可以继承的属性
             *  五、块级元素可以继承的属性
         *  disabled和readonly
         *  form标签的enctype属性
         *  类型转换
         *   *  “==”运算符（两个操作数的类型不相同时）
             *  对象到数字的转换
             *  空数组转换为数字0
         *  JS全局函数
         *  html发送图片请求
         *  Array方法
         *  在CSS中，html中的标签元素的分类
         *   *  常用的块状元素有：
             *   *  什么是块级元素？
                 *  块级元素特点：
             *  常用的内联元素有：
             *   *  内联元素特点：
             *  常用的内联块状元素有：
             *   *  inline-block 元素特点：
         *  网页html文档支持的图片格式有jpg、gif 、png和bmp这四种
         *  JS中的内置对象
         *  H5新增标签：
         *  在浏览器端保存数据

### HTML5不在支持的元素： ###

1.  acronym(建议abbr) ： 定义首字母缩写
2.  applet(建议object)： 定义 applet
3.  basefont(使用css控制)
4.  big(使用css控制) ：定义大号文本
5.  center(使用css控制)： 定义居中的文本
6.  font(使用css控制)
7.  strike(使用del) ：定义加删除线的文本
8.  tt（使用css控制）： 定义打字机文本。
9.  u(使用css控制) ：定义下划线文本
10. frame(建议iframe)： 定义子窗口（框架）。
11. frameset ：定义框架的集
12. noframes ：定义 noframe 部分
13. dir ：定义目录列表
14. xmp： 定义预格式文本

### 在Javascript定义一个函数一般有如下三种方式： ###

1，函数关键字(function)语句： function fnMethodName(x)\{alert(x);\} (最常用的方法)

2，函数字面量(Function Literals)： var fnMethodName = function(x)\{alert(x);\}

3，Function()构造函数： var fnMethodName = new Function(‘x’,’alert(x);’)

后两种都是把一个函数复制给变量fnMethodName，而这个函数是没有名字的，即匿名函数（拉达姆函数）。

定义函数的三种方式有：function函数、Function()构造函数、对象字面量。

从解析顺序来分析，它们的不同在于：function函数：优先解析；Function()构造函数、函数字面量定义:顺序解析。  
示例：

// 4 2 3 3 5 6
    function f(){
        return 1;}                 // 函数1     优先解析
    alert(f());        //返回值为4 说明第1个函数被第4个函数覆盖    
    var f = new Function("return 2;");        // 函数2 
    alert(f());        //返回值为2 说明第4个函数被第2个函数覆盖
    var f = function(){
        return 3;}            // 函数3 
    alert(f());           //返回值为3 说明第2个函数被第3个函数覆盖    
    function f(){
        return 4;}                 // 函数4    优先解析 覆盖函数1
    alert(f());        //返回值为3 说明第4个函数被第3个函数覆盖
    var f = new Function("return 5");         // 函数5 
    alert(f());    //返回值为5 说明第3个函数被第5个函数覆盖    
    var f = function(){
        return 6 ;}            // 函数6 
    alert(f());        //返回值为6 说明第5个函数被第6个函数覆盖

### [CSS清除浮动][CSS] ###

### 表示新开一个标签页的超链接代码是：（） ###

正确答案: C

特殊的目标 有 4 个保留的目标名称用作特殊的文档重定向操作： \_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。 \_self 这个目标的值对所有没有指定目标的 a 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 base 标签中的 target 属性一起使用。 \_parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 \_self 等效。 \_top 这个目标使得文档载入包含这个超链接的窗口，用 \_top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。 提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

### 当/的两边都是整数时，/表示整除，是否正确？ ###

正确答案: B

整除的意思是相除之后是一个整数，除数与被除数之间是倍数的关系。

### 在准备XMLHttpRequest对象时，在send()前需要调用哪个方法？ ###

Ajax技术核心就是XMLHttpRequest对象。

Ajax技术的工作原理：可以分成3步

1.创建Ajax对象：var xhr = new XMLHttpRequest();

2.xhr 发送请求：xhr.open(‘get’,‘test.html’,‘true’);

xhr.send();

3.xhr获取响应：

xhr.onreadystatechange = function()\{

if(xhr.readystate == 4)\{//请求的状态码

/\*

0:请求还没有建立（open执行前）

1：请求建立了还没发送（执行了open）

2：请求正式发送（执行了send）

3：请求已受理，有部分数据可以用，但还没有处理完成

4：请求完全处理完成

\*/

alert(xhr.responseText);//返回的数据

可以看到，send()前是open()

### 以下 javascript 代码，在浏览器中运行的结果是 ###

### 基于以下 HTML 结构和 CSS 样式，文本 Dijkstra的颜色应该是？ ###

\[外链图片转存失败(img-yymLa4QE-1565054892601)(.//picture/ti1.png)\]

正确答案:orange

4个等级的定义如下： 第一等：代表内联样式，如: style=””，权值为1000。 第二等：代表ID选择器，如：\#content，权值为100。 第三等：代表类，伪类和属性选择器，如.content，权值为10。 第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

### bootstrap添加table类 ###

\[外链图片转存失败(img-GxXZKhP2-1565054892602)(./picture/ti2.png)\]

### 常见的请求头和相应头都有什么 ###

1)请求(客户端->服务端\[request\])  
GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号)  
Accept: */*(客户端能接收的资源类型)  
Accept-Language: en-us(客户端接收的语言类型)  
Connection: Keep-Alive(维护客户端和服务端的连接关系)  
Host: localhost:8080(连接的目标主机和端口号)  
Referer: [http://localhost/links.asp(告诉服务器我来自于哪里)][http_localhost_links.asp]  
User-Agent: Mozilla/4.0(客户端版本号的名字)  
Accept-Encoding: gzip, deflate(客户端能接收的压缩数据的类型)  
If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT(缓存时间)  
Cookie(客户端暂存服务端的信息)  
Date: Tue, 11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)

2)响应(服务端->客户端\[response\])  
HTTP/1.1(响应采用的协议和版本号) 200(状态码) OK(描述信息)  
Location: [http://www.baidu.com][http_www.baidu.com](服务端需要客户端访问的页面路径)  
Server:apache tomcat(服务端的Web服务端名)  
Content-Encoding: gzip(服务端能够发送压缩编码类型)  
Content-Length: 80(服务端发送的压缩数据的长度)  
Content-Language: zh-cn(服务端发送的语言类型)  
Content-Type: text/html; charset=GB2312(服务端发送的类型及采用的编码方式)  
Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)  
Refresh: 1;url=http://www.it315.org(服务端要求客户端1秒钟后，刷新，然后访问指定的页面路径)  
Content-Disposition: attachment; filename=aaa.zip(服务端要求客户端以下载文件的方式打开该文件)  
Transfer-Encoding: chunked(分块传递数据到客户端）  
Set-Cookie:SS=Q0=5Lb\_nQ; path=/search(服务端发送到客户端的暂存数据)  
Expires: -1//3种(服务端禁止客户端缓存页面数据)  
Cache-Control: no-cache(服务端禁止客户端缓存页面数据)  
Pragma: no-cache(服务端禁止客户端缓存页面数据)  
Connection: close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)  
Date: Tue, 11 Jul 2000 18:23:51 GMT(服务端响应客户端的时间)

**在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息，解决跨域的一种方法。**

### CSS 盒子模型中（ ）是透明的，这部分可以显示背景 ###

*  Margin(外边距) - 清除边框外的区域，外边距是透明的。
 *  Border(边框) - 围绕在内边距和内容外的边框。
 *  Padding(内边距) - 清除内容周围的区域，内边距是透明的。
 *  Content(内容) - 盒子的内容，显示文本和图像。
 *  Margin margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的
 *  Padding（填充）当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

### 白屏时间first paint和可交互时间dom ready的关系是？ ###

页面的性能指标详解：

白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止

首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间

用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作

总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间

### void();上面表达式的结果是： ###

typeof (1);//'number'
    typeof (); //SyntaxError 语法错误
    void  0; //undefined
    void (0);//undefined
    void (); //SyntaxError 语法错误

### bootstrap3支持的浏览器 ###

\[外链图片转存失败(img-VJz1756a-1565054892603)(./picture/ti3.png)\]

### javascript数据类型 ###

js七种数据类型：Sting Object null undefined Array Boolean Number  
js五种基本类型：String Boolean Number null undefined  
typeof六种返回格式：‘string’ ‘number’ ‘object’ ‘function’ ‘boolean’ ‘undefined’

### MVC模型变更之后，只有控制器（Controller）才能驱动视图变更或重新渲染视图 ###

### 下列代码，页面打开后能够弹出alert(1)的是？ ###

A 加载页面的时候触发；  
B onerror 事件 当图片不存在时,将触发；  
C 在ie 7下会连续弹出， IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。参考资料 [http://www.blueidea.com/tech/site/2006/3705.asp][http_www.blueidea.com_tech_site_2006_3705.asp]  
D 不可以,因为div里没有内容，盒子的宽度为0所以点击不了的；

### display属性 ###

一、display:block  
display:block就是将元素显示为块级元素，一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。  
二、display:inline  
display:inline就是将元素显示为内联元素，内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”  
三、display:inline-block  
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

### 盒子模型的大小 ###

\[外链图片转存失败(img-FCwEFxsC-1565054892605)(./picture/ti4.png)\]

\[外链图片转存失败(img-YxwTV7eF-1565054892606)(./picture/ti5.png)\]

### localStorage的使用 ###

写入字段有三种方式：

*  localStorage\[“a”\]=1;
 *  localStorage.b=1;
 *  localStorage.setItem(“c”,3);  
    读取字段也有三种方式：
 *  var a= localStorage.a;
 *  var b= localStorage\[“b”\];
 *  var c= localStorage.getItem(“c”);

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

localStorage 属性是只读的。

提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性， 改数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

### dropdown ###

通过向 .dropdown-menu 添加 .pull-right 类来向右对齐下拉菜单。

Bootstrap默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

### iframe使用场景 ###

1.  典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
2.  ajax上传文件。
3.  加载别的网站内容，例如google广告，网站流量分析。
4.  在上传图片时，不用flash实现无刷新。
5.  跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

### javascript内部对象 ###

Navigator：提供有关浏览器的信息  
Window：Window对象处于对象层次的最顶层，它提供了处理Navagator窗口的方法和属性

Location：提供了与当前打开的URL一起工作的方法和属性，是一个静态的对象

History：提供了与历史清单有关的信息

Document：包含与文档元素一起工作的对象，它将这些元素封装起来供编程人员使用

### display：none和visibility：hidden ###

display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint  
visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint

### jquery ajax中都支持哪些数据类型？ ###

$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。

通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。

### input元素的type属性的取值可以是 ###

\[外链图片转存失败(img-V7ChjlIM-1565054892607)(./picture/ti6.png)\]

### bootstrap栅栏选项 ###

bootstrap3.x使用了四种栅格选项来形成栅格系统，这里跟大家详解一下四种栅格选项之间的区别， 其实区别只有一条就是适合不同尺寸的屏幕设备 。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是extremely small的缩写。

### 对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。 ###

### flash和js通过什么类如何交互 ###

Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback，call的作用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。

### 页面有一个按钮button id为 button1，通过原生的js如何禁用？ ###

disabled和readOnly都是表单的公有属性， readOnly是只读， disabled是禁用。这里问的是禁用，所以是disabled。

### 置换元素 ###

a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。  
例如：浏览器会根据标签的src属性的 值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；标签的type属性来决定是显示输入 框，还是单选按钮等。 (x)html中 的、、、、 都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。

b) 不可替换元素：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。

例如： label中的内容 标签是一个非置换元素，文字label中的内容”将全被显示。

### DHTML ###

DHTML实现了网页从Web服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。

包括：

①动态内容(Dynamic Content)：动态地更新网页内容，可“动态”地插入、修改或删除网页的元件，如文字、图像、标记等。

②动态排版样式(Dynamic Style Sheets)：W3C的CSS样式表提供了设定HTML标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能，而“动态排版样式”即可以“动态”地改变排版样式。

### 代码回收 ###

代码回收规则如下：

1.  全局变量不会被回收。
2.  局部变量会被回收，也就是函数一旦运行完以后，函数内部的东西都会被销毁。
3.  只要被另外一个作用域所引用就不会被回收

### JS运算 ###

\[外链图片转存失败(img-FLyct9IF-1565054892607)(./picture/ti7.png)\]

### position ###

\[外链图片转存失败(img-efhUHRSO-1565054892608)(./picture/ti8.png)\]

### overflow ###

参数是scroll时候，必会出现滚动条。 参数是auto时候，子元素内容大于父元素时出现滚动条。 参数是visible时候，溢出的内容出现在父元素之外。 参数是hidden时候，溢出隐藏。

### CSS Sprites ###

1.简介  
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。  
2.优点  
（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；  
（2）CSS Sprites能减少图片的字节；  
（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。  
（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。  
3.缺点  
（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。  
（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。  
（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。  
（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

### 加亮文本的标签 ###

标签定义带有记号的文本,显示为黄色高亮，是 HTML 5 中的新标签，Internet Explorer 8 以及更早的版本不支持 mark 标签。

### 阻止默认事件的默认操作的方法 ###

stopPropagation() 阻止事件冒泡。 这个事件不会阻止定义在元素上的其他事件。

stopImmediatePropagation() 会彻底的阻止事件， 在其之后的绑定在元素上的其他监听事件都不会触发

preventDefault() 阻止事件的默认动作

### 事件对象 ###

DOM中的事件对象：（符合W3C标准）  
preventDefault() 取消事件默认行为  
stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。  
stopPropagation() 取消事件冒泡对当前节点无影响。  
IE中的事件对象：  
cancelBubble() 取消事件冒泡  
returnValue() 取消事件默认行为

### 硬件加速 ###

滥用硬件加速会导致严重性能问题，因为它增加了内存使用，并且它会导致移动端电池寿命减少。

### DOM树状结构 ###

Element类型（元素节点）、Text类型（文本节点）、Comment类型（注释节点）、Document类型（document节点）

看到评论里一大堆 “字符串也是对象”，“在 JS 中，一切都是对象” 的言论，我真的是醉了！JS 没好好学，就不要在这里误人子弟好吗！  
JS 中值的类型分为原始值类型和对象类型。原始值类型包括 number, string, boolean, null 和 undefined；对象类型即 object。首先原始值类型它就不是对象。  
另外，要注意 ‘hello’ 和 new String(‘hello’) 的区别，前者是字符串字面值，属于原始类型，而后者是对象。用 typeof 运算符返回的值也是完全不一样的：

typeof 'hello';  // 'string'
    typeof new String('hello');  // 'object'

之所以很多人分不清字符串字面值和 String 对象，归根结底就是 JS 的语法对你们太过纵容了。当执行 ‘hello’.length 时，发现可以意料之中的返回 5，你们就觉得 ‘hello’ 就是 String 对象，不然它怎么会有 String 对象的属性。其实，这是由于 JS 在执行到这条语句的时候，内部将 ‘hello’ 包装成了一个 String 对象，执行完后，再把这个对象丢弃了，这种语法叫做 “装箱”，在其他面向对象语言里也有（如 C\#）。不要认为 JS 帮你装箱了，你就可以在写代码的时候不分箱里箱外了！

### 伪类的触发顺序 ###

触发顺序为link–>visited—>hover—>active即记为love and hate

然后单独记住focus在hover和active之间即可

:active 向被激活的元素添加样式。  
:focus 向拥有键盘输入焦点的元素添加样式。  
:hover 当鼠标悬浮在元素上方时，向元素添加样式。  
:link 向未被访问的链接添加样式。  
:visited 向已被访问的链接添加样式

### javascript中实现跨域的方式总结 ###

*  第一种方式：jsonp请求；jsonp的原理是利用

### 在css的定位机制有三种，分别是1：文档流，2：浮动（float），3定位（position） ###

position: absolute;

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；都绝对定位了，肯定脱离了文档流。。

position: fixed;

生成绝对定位的元素，相对于浏览器窗口进行定位;相对于浏览器了，也和正常顺序排下来没什么关系。。

position: relative;

生成相对定位的元素，相对于其正常位置进行定位。生成相对定位，也就是说还在原本的上下左右之间，上下左右的元素都不变，so这个没有能脱离文档流。。就这个了

float: left;都浮动出去了，还上哪保持原位置去

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。【 脱离文档流即是元素打乱了这个排列】 ， 或是从排版中拿走 。  
所以我们可以知道，除了 position: absolute;和 position: fixed;会直接将元素从排版中拿走从而脱离文档流之外，设置float对象也会 “打乱这个排列”从而也被称为脱离文档流。  
float：right 显然就打乱了从左到右的文档流排列，而为什么说float：left也会脱离文档流呢？  
我的理解是当子元素设置了float属性而父元素没有设置（或保持默认的 position:static ），则子元素会从父元素中溢出（即父元素不会根据子元素的大小进行扩大），因为当元素设置了float属性之后，其他没有设置float属性的盒子会无视这个元素，即文档流下面的没有设置浮动的元素会何其进行叠加。即可以当作其脱离了文档流，但需要注意的是，其与position：absolute不同的是，其他盒子元素内的文本依然会为float元素让出位置，围绕在周围，所以不会看到文本相互叠加的情况，而absolute定位的元素则会出现文本叠加。所以亦可以理解为脱离了文档流，这种情况通常消除浮动就可以解决。

### bootstrap栅栏参数 ###

\[外链图片转存失败(img-BFdrncY1-1565054892609)(./picture/ti9.png)\]

### margin的%情况 ###

可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）

如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。

什么margin-top/margin-bottom的百分数也是相对于width而不是height呢？

### title和alt属性 ###

title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。  
而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。

### Doctype不存在或错误，浏览器默认 混杂模式 ###

### 锚伪类 ###

这几个伪类必须按照一定的顺序(l-v-h-a)，a:hover必须被置于a:link和a:visited之后，才是有效的；a:active必须被置于a:hover之后，才是有效的。书写顺序很重要：a:link - a:visited - a:hover - a:actived。

记法 ： Love and hate

### Generrator 函数的使用方式 ###

[Generrator 函数][Generrator]

### CSS百分比参照 ###

参照父元素宽度的元素：padding margin width text-indent

参照父元素高度的元素：height

参照父元素属性:font-size line-height

特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

### CSS中可以和不可以继承的属性 ###

#### 一、无继承性的属性 ####

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

#### 二、有继承性的属性 ####

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

#### 三、所有元素可以继承的属性 ####

1、元素可见性：visibility

2、光标属性：cursor

#### 四、内联元素可以继承的属性 ####

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

#### 五、块级元素可以继承的属性 ####

1、text-indent、text-align

### disabled和readonly ###

disabled指当 input 元素加载时禁用此元素。input内容不会随着表单提交  
readonly规定输入字段为只读。input内容会随着表单提交。  
无论设置readonly还是disabled，通过js脚本都能更改input的value

### form标签的enctype属性 ###

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

属性值

application/x-www-form-urlencoded  
在发送前编码所有字符（默认）

multipart/form-data  
不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。

text/plain  
空格转换为 “+” 加号，但不对特殊字符编码

### 类型转换 ###

#### “==”运算符（两个操作数的类型不相同时） ####

*  如果一个值是null，另一个值是undefined，则它们相等
 *  如果一个值是数字，另一个值是字符串，先将字符串转换为数学，然后使用转换后的值进行比较。
 *  如果其中一个值是true，则将其转换为1再进行比较。如果其中的一个值是false，则将其转换为0再进行比较。
 *  如果一个值是对象，另一个值是数字或字符串，则将对象转换为原始值，再进行比较。

#### 对象到数字的转换 ####

*  如果对象具有valueOf()方法，后者返回一个原始值，则JavaScript将这个原始值转换为数字（如果需要的话）并返回一个数字。
 *  否则，如果对象具有toString()方法，后者返回一个原始值，则JavaScript将其转换并返回。（对象的toString()方法返回一个字符串直接量（作者所说的原始值），JavaScript将这个字符串转换为数字类型，并返回这个数字）。
 *  否则，JavaScript抛出一个类型错误异常。

#### 空数组转换为数字0 ####

*  数组继承了默认的valueOf()方法，这个方法返回一个对象而不是一个原始值，因此，数组到数学的转换则调用toString()方法。空数组转换为空字符串，空字符串转换为数字0.

### JS全局函数 ###

\[外链图片转存失败(img-3ejvPP4h-1565054892610)(./picture/ti10.png)\]

### html发送图片请求 ###

\[外链图片转存失败(img-y7LA43Bg-1565054892611)(./picture/ti11.png)\]

### Array方法 ###

\[外链图片转存失败(img-3oThiMwm-1565054892611)(./picture/ti12.png)\]

### 在CSS中，html中的标签元素的分类 ###

在CSS中，html中的标签元素大体被分为三种不同的类型： 块状元素、内联元素(又叫行内元素)和内联块状元素。

#### 常用的块状元素有： ####

div、p、h1、h6、ol、ul、dl、table、address、blockquote 、form

##### 什么是块级元素？ #####

在html中 div、p、h1、form、ul和li就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a\{display:block;\}

##### 块级元素特点： #####

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）;  
2、元素的高度、宽度、行高以及顶和底边距都可设置。  
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

#### 常用的内联元素有： ####

a、span、br、i、em、strong、label、q、var、cite、code 在html中，span、a、label、strong 和em就是典型的内联元素（行内元素）（inline）元素。  
当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使div 元素具有内联元素特点。

div{ display:inline; } ...... <div>我要变成内联元素</div>

##### 内联元素特点： #####

1、和其他元素都在一行上；  
2、元素的高度、宽度及顶部和底部边距不可设置； （这是答案\-）  
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

#### 常用的内联块状元素有： ####

img、input

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。

##### inline-block 元素特点： #####

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

### 网页html文档支持的图片格式有jpg、gif 、png和bmp这四种 ###

### JS中的内置对象 ###

\[外链图片转存失败(img-9kSw2GNS-1565054892612)(./picture/ti13.png)\]

### H5新增标签： ###

article: 标签定义外部的内容。

aside:标签定义 article 以外的内容。a

audio:h5新增音频标签。没有高宽属性。

canvas:h5新增画布标签。

command: 定义命令按钮(未测试)

datalist：标签定义选项列表。

datalist 及其选项不会被想显示出来，它仅仅是合法的输入值列表。

details：标签用于描述文档或文档某个部分的细节。

figure：标签用于对元素进行组合。

figcaption：定义 figure 元素的标题。

footer：定义 section 或 document 的页脚。

header：定义 section 或 document 的页眉。

hgroup：用于对网页或区段（section）的标题进行组合。

keygen:标签规定用于表单的密钥对生成器字段

mark：标签定义带有记号的文本。

meter：通过min=“0” max="20"的方式定义度量衡。仅用于已知最大和最小值的度量。

nav：定义document或section或article的导航。

output：定义不同的输出类型，比如脚本。

progress：定义任何类型的任务的进度。

rp:定义若浏览器不支持 ruby 元素显示的内容

rt：定义 ruby 注释的解释

ruby：定义 ruby 注释

section：标签定义文档中的节、区段。比如章节、页眉、页脚或文档中的其他部分。

source:audio和video的属性之一。为audio和video定义媒介源。

summary:为details定义标题。

time:定义日期或时间。

video：h5新增视频标签。具有高宽属性。

### 在浏览器端保存数据 ###

有时需要将网页中的一些数据保存在浏览器端，这样做的好处是，当下次访问页面时，不需要再次向服务器请求数据，直接就可以从本地读取数据。目前常用的有以下几种方法：

**cookie**

cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。

**Flash ShareObject**

这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash，当浏览器没有安装Flash控件时就不能用了。所幸的是，没有安装Flash的用户极少。

缺点：需要安装Flash插件。

**Google Gear**

Google开发出的一种本地存储技术。

缺点：需要安装Gear组件。

**userData**

IE浏览器可以使用userData来存储数据，容量可达到640K，这种方案是很可靠的，不需要安装额外的插件。缺点：它仅在IE下有效。

**sessionStorage**

使用于Firefox2+的火狐浏览器，用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了。

缺点：IE不支持、不能实现数据的持久保存。

**globalStorage**

使用于Firefox2+的火狐浏览器，类似于IE的userData。

globalStorage[location.hostname]['name'] = 'tugai'; //赋值
    globalStorage[location.hostname]['name']; //读取 globalStorage[location.hostname].removeItem('name'); //删除

缺点：IE不支持。

**localStorage**

localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。

缺点：低版本浏览器不支持。

结论：  
Flash shareobject是不错的选择，如果你不想在页面上嵌入Flash，可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。

session是服务器端的

[CSS]: https://segmentfault.com/a/1190000004865198
[http_localhost_links.asp]: http://localhost/links.asp%28%E5%91%8A%E8%AF%89%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%88%91%E6%9D%A5%E8%87%AA%E4%BA%8E%E5%93%AA%E9%87%8C%29
[http_www.baidu.com]: http://www.baidu.com
[http_www.blueidea.com_tech_site_2006_3705.asp]: http://www.blueidea.com/tech/site/2006/3705.asp
[Generrator]: https://www.jianshu.com/p/f703d3f54ebd