html语言理论题,2020前端面试题整理

不要删除

0、概念HTML：超文本标记语言(HyperText Markup Language)

XHTML：可扩展超文本标记语言(eXtensible HyperText Markup Language)

CSS：层叠样式表 / 级联样式表(Cascading Style Sheets)

JavaScript：一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

1、前端层结构层(structural layer)

由 [X]HTML 语言负责，由标签组成。表示层(presentation layer)

由 CSS 负责。行为层(behaviorlayer)

由Javascript 语言负责，回答：“内容应该如何对事件做出反应”这一问题。

2、positionstatic【默认值】

relative

fixed

absolute

3、行内元素、块级元素、盒模型块级元素：div p h1 h2 h3 h4 form ul

行内元素：a b br i span input select

Css盒模型：内容，border ,margin，padding

4、XHTML VS HTML

XHTML 更规范：XHTML 文档必须拥有根元素。

XHTML 要求正确嵌套

XHTML 所有元素必须关闭

XHTML 区分大小写

XHTML 属性值要用双引号

XHTML 用 id 属性代替 name 属性

XHTML 特殊字符的处理：< => <

XHTML 混合各种XML应用，如数学标记、SVG等

5、结构、表现结构：HTML

表现：CSS

6、图片

Alt：必须，无意义的图片可以设置为空。不支持图片显示、视障人群及屏蔽图片的时候显示的图片信息，另对SEO搜索提供关键字收录。

Title：非必须，鼠标指上有文字提示。无SEO，提升用户体验。

CSS Sprites：又名 CSS雪碧、CSS精灵。把一堆小的图片整合到一张大的图片上，减少 服务器对图片的 请求数量。

7、资源优化Webpack 方向文件合并 bundle.js

代码压缩 PostCSS

引入 CDN 公共资源库，减少服务器请求

对缓存的合理使用

8、清除浮动

额外标签法在最后一个浮动标签后，新加一个标签，给其设置 clear：both；

缺点：添加无意义标签，语义化差

或

使用 :after 伪元素在浮动标签的最后加一个伪元素,伪元素的内容为空，但具有清除浮动的属性，解决了父标签塌陷问题。

.clearfix::after{

content: '';

display: block;

clear: both;

}

.clearfix{

*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/

}

.box_1{

float: left;

border: 1px solid #000;

width: 100px;

height: 100px;

}

浮动模块

后面的模块

9、CSS选择器id 选择器：#id

类选择器：.class

标签选择器：div / h1 / p

相邻选择器：h1+p

子选择器：ul>li

后代选择器：lia

通配符选择器：*

属性选择器：a[rel = 'external']

伪类选择器：a:hover / li:nth-child

CSS 优先级!important > id > class > tag

important 比 内联优先级高，但内联比 id 要高

10、DOM操作增加节点createDocumentFragment() // 创建一个DOM片段

createElement() // 创建一个具体的元素

createTextNode() // 创建一个文本节点添加、移除、替换、插入appendChild()

removeChild()

replaceChild()

11、HTML5

新特性：拖拽释放：Drag、Drop

语义化更好的内容标签：header、nav、footer、aside、article、section

音视频：audio、video

画布：Canvas

地理：Geolocation

12、从输入URL到页面展示的过程应用层DNS解析域名：客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。

浏览器与服务器建立TCP连接(默认端口80)(详细点可以说下三次握手的过程)

应用层客户端发送HTTP请求。

服务器响应请求：查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码(200-300，成功；304使用缓存)。

服务器返回相应文件给浏览器。

Tcp连接释放(可以说下四次挥手的过程)。

浏览器对HTML文件进行解析构建DOM树 ，构建渲染树 ，js根据DomAPI操作执行绑定事件等，页面显示完成。

13、JS 继承的6种方式原型链继承

借用构造函数继承

组合继承(原型+借用构造)

原型式继承

寄生式继承

寄生组合式继承

14、浏览器兼容性IE6 png24位图片显示背景(无法透明)。【解决】做成 PNG8；

默认 padding、margin 不同。【解决】全局添加 *{margin: 0,padding: 0}

IE6 双边距问题；在IE6中设置了float，同时又设置margin，就会出现边距问题。【解决】display：inline

当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度。【解决】overflow：hidden

图片下面有边距【解决】display:block 或者 float:left

边距重叠问题；当相邻两个元素都设置了margin边距时，margin将取最大值，舍弃最小值

cursor：hand 显示手型在safari上不支持，解决：cursor：pointer

新语法问题：const 问题，IE不支持。解决：进行ES6转码，改为 var。

15、JS 中获取元素的方法getElementById

getElementsByClassName

getElementsByTagName

getElementsByName

16、跨域：jsonp

为什么不是真正的ajax

JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

原理

JSONP实现跨域请求的原理简单的说，就是动态创建

getJson的使用方法和普通的$.get方法基本一致，不同的地方在于getJson需要在url后面的参数部分加上callback=?这一固定部分，jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。然后在回调函数中操作从异域返回的json对象，回调函数callback的参数即为该json对象。一个jQuery的jsonp请求例子$(document).ready(function(){

$.getJSON("http://192.168.0.X/jsonp_test.php?callback=?", function(data) {

console.log(data)

});

// 或者

$.ajax({

url: 'http://192.168.0.X/jsonp_test.php',

dataType: "jsonp",

type: "get",

jsonp: "jsonpcallback",

success:function(data){

console.log(data)

}

});

});

17、优化访问如果制作一个访问量很大的网站，对css，js和图片应该怎么处理。资源文件按模块进行放置，有利于团队开发。

图片尽量采取聚合压缩技术。

精简压缩css和js文件，减少文件大小。

类库、媒体使用CDN加速，减轻服务器压力。

18、Ajax

原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

创建过程创建 XMLHttpRequest 对象，即创建一个异步调用对象。

创建一个新的 HTTP 请求，并指定该HTTP的 请求方法、URL及验证信息。

设置响应 HTTP 请求状态变化的函数。

发送 HTTP 请求。

获取异步调用返回的数据。

使用 Js+DOM、进行局部刷新。

19、JS 的同步异步？

JS 是单线程决定，如果一个任务耗时很长，后面的任务就会排队等着。而同步可以理解为这种排队模式。也就是后一个任务等待前一个任务执行完毕才能执行。

异步，每一个任务都有一个 回调函数callback，前一个任务执行完不是执行后一个任务，而是执行回调函数，后一个任务是不等前一个任务执行完毕就开始执行，所以顺序不是排队模式也就是不一致的，也就是异步的。技术实现：Ajax，写成 setTimeout 的回调函数，事件监听。

优点：回调函数的优点是简单、容易理解和部署。

缺点：是不利于代码的阅读和维护。

20、xml 和 json特性xmljson复杂性大小

可读性强弱

体积、带宽占用大小

21、JS 的 数据类型

【5种】boolean

string

number

undefined

null引用类型：Object

ES6：Symbol

ES10：BigInt

22、JS 的 typeof 的数据类型

【6种】boolean

string

number

undefined

object

function

23、HTTP 请求Get

Post

24、闭包函数和闭包闭包函数：声明在一个函数中的函数，叫做闭包函数。

闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回(寿命终结)了之后。

【特点】外部访问：让外部访问函数内部变量成为可能；

内存常驻：局部变量会常驻在内存中；

防止全局变量污染：可以避免使用全局变量，防止全局变量污染；

内存泄漏：会造成内存泄漏(有一块内存空间被长期占用，而不被释放)

闭包内存泄漏为：key = value，key 被删除了 value 常驻内存中; 局部变量闭包升级版(中间引用的变量) => 自由变量；

其实它就是将函数内外部连接起来的桥梁

【例子】function funA(){

var a = 10; // funA的活动对象之中;

return function(){ //匿名函数的活动对象;

return a;

}

}

var b = funA();

console.log(b()); // 10

25、i++、++ivar a = b = 0;

console.log(a++); // i++ 输出：0

console.log(++b); // ++i 输出：1

26、OSI 七层模型

开放式系统互联是把网络通信的工作分为了7层：表示层

会话层

应用层

传输层

网络层

数据链路层

物理层

../../md/大前端/

不要删除