HTML+CSS+计算机网络前端面试题总结

1.XML和HTML有什么不同

一、基础语言不同
1、XHTML是基于可扩展标记语言（XML）。

2、HTML是基于标准通用标记语言（SGML）。
（HTML最大的特点是简单性和跨平台性）
二、语法严格程度不同

1、XHTML语法比较严格，存在DTD定义规则。

2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。

三、可混合应用不同

1、XHTML可以混合各种XML应用，比如MathML、SVG。

2、HTML不能混合其它XML应用。

四、大小写敏感度不同

1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。

2、HTML对大小写不敏感。

五、公布时间不同

1、XHTML是2000年W3C公布发行的。

2、HTML4.01是1999年W3C推荐标准。

2.什么是盒子模型？与低版本IE的盒子模型有什么不同

盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型
标准w3c盒子模型：
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
IE 盒子模型：
包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是IE 盒子模型的 content 部分包含了 border 和 pading

3.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素(内联元素)：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div ul ol li dl dt dd h1-h6 p
空元素：br hr img input link meta

块级元素，特点：
（1）每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
　（2）元素的高度、宽度、行高和顶底边距都是可以设置的。　　
　（3）元素的宽度如果不设置的话，默认为父元素的宽度。

行级元素，特点:
特点：1.可以和其他元素处于一行，不用必须另起一行。
　　　2.元素的高度、宽度及顶部和底部边距不可设置。
　　　3.元素的宽度就是它包含的文字、图片的宽度，不可改变。

4.DOCTYPE 的作用是什么？

声明文档类型，告知浏览器的解析器，用什么文档类型规范来解析这个文档

5.你是如何理解语义化的？

定义：语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。
优点：
a. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
b. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；
c. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
d. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
e. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

6.页面导入样式时，使用 link 和 @import 有什么区别？

1、从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4、DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

7.CSS选择器有哪些？分别包括什么？

1.标签选择器
2.类选择器
3.id选择器
4.通用选择器
5.组合选择器（后代选择器，子元素选择器，相邻兄弟选择器）
6.伪类选择器 a:hover
7.伪元素选择器 a::before

8.CSS选择器优先级及计算方法

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
计算方法：
计算选择器中ID选择器的数量（= A）
计算选择器中的类选择器，属性选择器和伪类的数量（= B）
计算类型选择器和选择器中的伪元素的数量（= C）
忽略通用选择器
按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
特殊的 有！import存在则优先级最高

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

网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

10.​​​​​​​Html5离线存储

在头部加入mainfest属性

详细解释参考：https://segmentfault.com/a/1190000000732617 ### 11.301和302的区别 1、301重定向是永久的重定向，搜索引擎在抓取新的内容时，同时也将旧的网站进行替换，替换为重定向后的地址。 2、302重定向只是暂时的重定向，搜索引擎会认为重定向后的地址为临时的，并会保存新的地址 ### 12.请你说说让不同的浏览器兼容ES6的方法 通常的解决思路：把ES6语法转换成ES5语法。 可以通过vue-cli中的babel插件 ### 13.水平垂直居中的方法 ### 14.当一个网址输入后发生的事情 ①第一步就是对网址进行DNS解析。 DNS解析的过程就是寻找在哪台主机上有你需要的资源的过程，我们通常使用机器的域名来访问这台机器，而不是直接使用其IP地址，而将机器的域名转换为IP地址就需要域名查询服务，这个过程称为DNS解析，它主要充当一个翻译的角色，实现网址到IP地址的转换。

②第二步就是进行TCP连接
https://baijiahao.baidu.com/s?id=1654225744653405133&wfr=spider&for=pc

TCP连接也就是我们常说的三次握手，首先客户端向服务器端发送是否可以连接的请求，服务器端接受到请求后确认客户的SYN，并向客户端发送自己的SYN包，客户端接收到服务器发来的包之后向服务器发送确认包从而完成三次握手。(SYN：同步序列编号（Synchronize Sequence Numbers）。是TCP/IP建立连接时使用的握手信号。)

③第三步发送HTTP请求
在完成TCP连接后，接下来做的事情就是客户端向服务器端发送http请求，http请求内容包括：

请求行：方法+地址+http版本
请求头
请求体

④第四步服务器处理请求并返回HTTP报文
服务器端接到http请求后在会作出响应，响应内容包括：

响应行：http版本+状态码+状态描述
响应头
响应体
状态码
状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值:

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。

3xx：重定向–要完成请求必须进行更进一步的操作。

4xx：客户端错误–请求有语法错误或请求无法实现。

5xx：服务器端错误–服务器未能实现合法的请求。
平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500

⑤第五步浏览器解析渲染页面
浏览器在收到HTML,CSS,JS文件后，它将这些信息渲染到客户端页面上。

浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。
（Dom构造>布局>绘制页面）
⑥第六步连接结束关闭连接请求
四次挥手。
本条原文链接：https://blog.csdn.net/weixin_38518846/article/details/108087790

15.TCP与UDP的区别

传输层协议TCP与UDP。UDP（user datagram protocol）提供无连接的通信，不能保证数据包被发送到目标地址。TCP（transmission control protocol）是一种面向连接（连接导向）的、可靠地、基于字节流的通信协议，它为传输大量数据或为需要接受数据许可的应用程序提供定向和可靠地通信。
TCP就像打电话，双方进行通话，整个过程是一个相互联系、缺一不可的过程。而UDP连接就像发短信，用户短信发送给对方，对方有没有收到短信，发送方根本不知道，对方是否回答也不知道，对方对信息发送者发送消息也一样。
TCP和UDP都是一种常用的通信方式，在特定的条件下发挥着不同的作用。具体区别主要表现在以下几个方面：
1.TCP是面向连接的传输控制协议，而UDP提供的是无连接的数据报服务
2.TCP具有高可靠性，确保传输数据的正确性，UDP在传输数据前不建立连接，应用程序需要负责传输可靠性方面的所有工作
3.TCP对系统资源要求较多，UDP对系统资源要求较少
4.UDP具有较好的实时性，工作效率较TCP高
5.UDP的段结构比TCP的段结构简单，网络开销也小
本条原文链接：https://blog.csdn.net/nawuyao/article/details/50388631

16.get和post区别（简述）

1.GET请求只能进行url编码，而POST支持多种编码方式。
2.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
3.GET在浏览器回退时是无害的，POST会再次提交请求。
4.get方式提交数据的大小（一般来说1024字节），http协议并没有硬性限制，而是与浏览器、服务器、操作系统有关，而POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。

17.cookie和session

cookie:
首先必须明确一点，存储cookie是浏览器提供的功能。cookie 其实是存储在浏览器中的纯文本，浏览器的安装目录下会专门有一个 cookie 文件夹来存放各个域下设置的cookie。
当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动帮我们做。这个特点很重要，因为这关系到“什么样的数据适合存储在cookie中”。
存储在cookie中的数据，每次都会被浏览器自动放在http请求中，如果这些数据并不是每个请求都需要发给服务端的数据，浏览器这设置自动处理无疑增加了网络开销；但如果这些数据是每个请求都需要发给服务端的数据（比如身份认证信息），浏览器这设置自动处理就大大免去了重复添加操作。所以对于那设置“每次请求都要携带的信息（最典型的就是身份认证信息）”就特别适合放在cookie中，其他类型的数据就不适合了。
但在 localStorage 出现之前，cookie被滥用当做了存储工具。什么数据都放在cookie中，即使这些数据只在页面中使用而不需要随请求传送到服务端。当然cookie标准还是做了一些限制的：每个域名下的cookie 的大小最大为4KB，每个域名下的cookie数量最多为20个（但很多浏览器厂商在具体实现时支持大于20个）。
session:
Session保存在服务器端。为了获得更高的存取速度，服务器一般把Session放在内存里。每个用户都会有一个独立的Session。如果Session内容过于复杂，当大量客户访问服务器时可能会导致内存溢出。因此，Session里的信息应该尽量精简。
Session在用户第一次访问服务器的时候自动创建。需要注意只有访问JSP、Servlet等程序时才会创建Session，只访问HTML、IMAGE等静态资源并不会创建Session。如果尚未生成Session，也可以使用request.getSession(true)强制生成Session。
Session生成后，只要用户继续访问，服务器就会更新Session的最后访问时间，并维护该Session。用户每访问服务器一次，无论是否读写Session，服务器都认为该用户的Session“活跃（active）”了一次。

【最近在找实习ing，持续更新一些前端面试题（超详细解析），部分内容有转载，侵立删！】