【HTML/CSS/计算机网络】75道高频面试题【看这一篇就够啦！】

1.（常考）常见浏览器的内核分别是?

在这里插入图片描述

2. DOCTYPE作用?严格模式与混杂模式如何区分？它们有何意义?

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。

严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。

混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

3.（常考） HTML5行内元素有哪些？块级元素有哪些？空元素有哪些？语义化标签有哪些？(列举常见的)

行内元素：

a
br(换行)
em(斜体强调) i(斜体) strong(粗体强调)
img
input label(表格标签) textarea(多行文本输入框)
span(常用，定义文本内区块)
sub(下标)、sup(上标)

块级元素：

div(常用)
p(段落)
h1-h6(标题，层次明确)
hr(水平分割线)
ul(无序列表)
ol(有序列表)
table(表格)
form(交互表单)

空元素：没有内容的 HTML 元素

<br />  换行
<hr />  分割线
<input />  文本框
<img />  图片
<link />  HTML元素，链接
<meta />  提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词

语义化标签：

<header></header>
<footer></footer>
<nav></nav>
<section></section>  标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分

<article></article>  用来在页面中表示一套结构完整且独立的内容部分

<aside></aside>  主题的附属信息,如果article里面为一篇文章的话，那么作者信息就是这篇文章的附属内容

<figure></figure> 标签规定独立的流内容（图像、图表、照片、代码等等）

4.（常考）link和@import有什么区别？

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

5. 超链接target属性的取值和作用？

target这个属性指定所链接的页面在浏览器窗口中的打开方式。

主要参数:

self：不新建页面跳转,默认就是self
_blank ：新建页面跳转

a标签必须属性：href

6. 'data-'属性的作用是什么？

'data-'为H5新增的，自定义属性
属性集可以通过以下方法获取：

对象.dataset 属性获取
不支持1中的属性的浏览器可以通过’getAttribute’方法获取

7. 介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎和 JS 引擎。

渲染引擎：

负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：

解析和执行 javascript 来实现网页的动态效果。

8. label的作用是什么，是怎么用的？

label标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

PS：label的for属性值要与后面对应的input标签id属性值相同

9. 如何在页面上实现一个圆形的可点击区域？

使用border-radius：

    <style>
    .div1{
        background-color: red;
        width: 100px;
        height: 100px;
        border-radius:50%;
        line-height: 100px;
        text-align: center;
        cursor:pointer;
    }
    </style>
</head>
<body>
    <div class="div1">
          MILK
    </div>
</body>

效果：
在这里插入图片描述

10. title与h3的区别、b与strong的区别、i与em的区别？

title没有明确意义，只是个标题， H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响；

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时： strong会重读，而 b 是展示强调内容，粗体。

i内容展示为斜体， em 表示强调的文本；

11. 实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果？

 <div style="height: 1px;background-color:red;overflow: hidden;"></div>

效果：
在这里插入图片描述

12. HTML5标签的作用？

使Web页面的内容更加有序和规范
使搜索引擎更加容易按照HTML5规则识别出有效的内容

13. 简述一下src与href的区别？

src：用于替换当前元素

src是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素。<script src ='js.js'></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href：用于在当前文档和引用资源之间确立联系

href是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href='common.css' rel='stylesheet'/>

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ，而不是使用 @import 方式。

14.（常考）img的title和alt有什么区别？

alt 用于图片无法加载时显示
title 为该属性提供信息，通常当鼠标滑动到元素上的时候显示

15. 表单的基本组成部分有哪些，表单的主要用途是什么？

组成：表单域、表单标签、表单按钮
主要用途：表单在网页中主要负责数据采集的功能，和向服务器传送数据。

16. 表单提交中Get和Post方式的区别？

1、get 是从服务器上获取数据， post 是向服务器传送数据。
2、get 传送的数据量较小，不能大于 2KB 。 post 传送的数据量较大，一般被默认为不受限制。
3、get 安全性低， post 安全性较高。
4、get 是把参数数据队列加到提交表单的action 属性所指的 URL 中，值和表单内各个字段一一对应，在 URL 中可以看到。 post 是通过 HTTP post 机制，将表单内各个字段与其内容放置在 html header 内一起传送到 action 属性所指的 URL 地址 , 用户看不到这个过程。

17. HTML5 有哪些新增的表单元素？

datalist
keygen
output

18.（常考）HTML5 存储类型有什么区别？

localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

19. HTML5 Canvas 元素有什么用？

Canvas 元素用于在网页上绘制图形，可以直接在 HTML 上进行图形操作。

20. HTML5 文档类型和字符集是？

<!DOCTYPE HTML>

HTML5 使用 UTF-8 编码：
<meta charset=” UTF-8 ″ >

21.（常考）解释一下CSS的盒子模型？

详情请看：
https://blog.csdn.net/weixin_43352901/article/details/107268766

22.（偶尔）请你说说CSS选择器的类型有哪些？

id选择器、类选择器、标签选择器、属性选择器、后代选择器、组合选择器、伪类、伪元素

23.（常考）CSS优先级？

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认样式

1、优先级就近原则，同权重的样式谁离标签内容近谁就优先级高；
2、载入样式以最后载入的定位为准；
3、!important优先级最高；
4、权重计算：

内联，如style=”“——1000
id，如#content——100
类、伪类和属性选择器，如.content——10
标签选择器和伪元素选择器，如div p——1
通配符、子选择器和相邻选择器，如*，>，+——0

详细请看：
https://jingyan.baidu.com/article/f96699bb771e14c94e3c1b8a.html

24.（偶尔）浏览器兼容问题？

常见的兼容性问题：
1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：设置display:inline;

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4、图片默认有间距
解决方案：使用float 为img 布局

5、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

6、cursor:hand 显示手型在safari 上不支持
解决方案：统一使用 cursor:pointer

7、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative

25. （常考）请列举几种清除浮动的方法(至少两种)?

原理：

所谓浮动是指子元素设置样式float：left后，脱离了普通文档流，会在遇到其他相同浮动的元素或者父级边框后停留下来，造成高度塌陷的效果。

在这里插入图片描述
浮动前：

浮动后：

图片引用来自：
https://www.jianshu.com/p/1dd66edb4106

法一：子元素增加空白标签：<div style="clear:both"></div>

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 
优点：简单、代码少、浏览器支持好、不容易出现怪问题 
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好 
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

法二：父级div定义伪类:after 和 zoom
核心代码：10秒手写出来

/* 手写clearfix */ 
.clearfix:after{
     content:''; /*内容*/
     display:table;
     clear:both;
 }
 .clearfix {
       *zoom: 1; /*兼容IE低版本*/
}

法三：父级添加overflow属性（父元素添加overflow:hidden）

通过触发BFC方式，实现清除浮动

.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

26.（常考）前端性能优化？

前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。我认为可以从这些方面来进行优化。

第一个方面是页面的内容方面

 （1）通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况。

 （2）通过 DNS 缓存等机制来减少 DNS 的查询次数。

 （3）通过设置缓存策略，对常用不变的资源进行缓存。

 （4）使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时，再去请求加载。

 （5）通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度。

第二个方面是服务器方面

 （1）使用 CDN 服务，来提高用户对于资源请求时的响应速度。

 （2）服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩，减小文件的体积。

 （3）尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie

第三个方面是 CSS 和 JavaScript 方面

 （1）把样式表放在页面的 head 标签中，减少页面的首次渲染的时间。

 （2）避免使用 @import 标签。

 （3）尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性，避免脚本的加载和执行阻塞页面的渲染。

 （4）通过对 JavaScript 和 CSS 的文件进行压缩，来减小文件的体积。

27. 为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法就是： {padding: 0; margin: 0;} （不建议）

28. CSS样式表根据所在网页的位置，可分为哪几种样式表？

行内样式表，内嵌样式表，外部样式表

29. 你知道rem嘛？

rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数

只相对于根元素的大小

作用：

利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化。

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

标准模式：浏览器按W3C标准解析执行代码

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

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

31.（常考）说说你对边距折叠的理解?

外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）

垂直方向外边距合并计算:

参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。
参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin相加。

32.（注意）说说隐藏元素的方式有哪些？

display:none，不会占有原来的位置
visibility:hidden，会占有原来的位置
hidden=“hidden”，不会占有原来的位置（HTML5新增属性）

33. 为什么重置浏览器默认样式，如何重置默浏览器认样式？

每种浏览器都有一套默认的样式表，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的，但这样会有很多兼容问题。

解决方法：

最简单的办法：*{margin: 0;padding: 0;} （不推荐使用）
CSS reset：可以将所有浏览器默认样式设置成一样。
normalize：也许有些cssreset过于简单粗暴，有点伤及无辜，normalize是另一个选择。bootstrap已经引用该css来重置浏览器默认样式，比普通的cssreset要精细一些，保留浏览器有用的默认样式，支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。

34. 如何解决多个元素重叠问题？

使用z-index属性可以设置元素的层叠顺序

35. overflow :hidden是否形成新的块级格式化上下文？

会形成。

形成BFC的常见条件：

float不是none 比如说：我们对元素设置了float,这样的话元素就形成了BFC
position是absolute或fixed 这时候元素也形成了BFC
overflow不是visible 比如说overflow等于hidden/ scroll/inherit/auto……
display是flex inline-block等

36.（常考）http和https的区别？

http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。

主要的区别如下：

Https协议需要ca证书，费用较高。
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

37. tcp三次握手，一句话概括？

客户端和服务端都需要直到各自可收发，因此需要三次握手。

C发起请求连接S，S确认，S也发起连接，C确认

我们再看看每次握手的作用：

第一次握手：S只可以确认自己可以接受C发送的报文段
第二次握手：C可以确认S收到了自己发送的报文段，并且可以确认自己可以接受S发送的报文段
第三次握手：S可以确认 C收到了自己发送的报文段

38. TCP和UDP的区别？

TCP是面向连接的，UDP是无连接的，即发送数据前不需要先建立链接。
通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。并且因为TCP可靠，面向连接，不会丢失数据，因此适合大数据量的交换。
TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。
TCP只能是1对1的，UDP支持1对1,1对多。
TCP的首部较大为20字节，而UDP只有8字节。
TCP是面向连接的可靠性传输，而UDP是不可靠的。

39. HTTP请求的方式，HEAD方式？

head：类似于get请求，只不过返回的响应中没有具体的内容，用户获取报头
options：允许客户端查看服务器的性能，比如说服务器支持的请求方式等等。

40.（偶尔）聊聊你知道的BOM属性对象方法？

什么是Bom? Bom是浏览器对象。

有哪些常用的Bom属性呢？

(1) location对象

location.href-- 返回或设置当前文档的URL
location.search – 返回URL中的查询字符串部分。例如http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash – 返回URL#后面的内容，如果没有#，返回空
location.host – 返回URL中的域名部分，例如www.dreamdu.com
location.hostname – 返回URL中的主域名部分，例如dreamdu.com
location.pathname – 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回 /xhtml/
location.port – 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回 8080
location.protocol – 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回 (//) 前面的内容 http:
location.reload() – 重载当前页面
location.replace() – 设置当前文档的URL，并且在history对象的地址列表中移除这个URL

(2) history对象

history.go() – 前进或后退指定的页面数 history.go(num)
history.back() – 后退一页
history.forward() – 前进一页

41.（常考）400、401、403状态码?

400状态码：请求无效

产生原因：

前端提交数据的字段名称和字段类型与后台的实体没有保持一致，前端提交到后台的数据应该是json字符串类型，但是前端没有将对象JSON.stringify转化成字符串。

解决方法：

对照字段的名称，保持一致性，将obj对象通过JSON.stringify实现序列化

401状态码：当前请求需要用户验证

403状态码：服务器已经得到请求，但是拒绝执行

42.（重点）请描述一下 cookies，sessionStorage 和 localStorage 的区别？

 SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。

存储大小：
      	cookie 数据大小不能超过4 k 。
      	sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

有效时间：
      	localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
      	sessionStorage：数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。
      	cookie：设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。

作用域：
        sessionStorage：只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。
        localStorage：在所有同源窗口中都是共享的。
        cookie：在所有同源窗口中都是共享的。

浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。

cookie 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服
务器端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。

sessionStorage 是 html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保
存的数据。它一般能够存储 5M 或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源
页面所访问共享。

localStorage 也是 html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 
不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。

上面几种方式都是存储少量数据的时候的存储方式，当我们需要在本地存储大量数据的时候，我们可以使用浏览器的 indexDB 这是浏
览器提供的一种本地的数据库存储机制。它不是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近 NoSQL 数据库。

43. Cookie如何防范XSS攻击?

XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，需要在HTTP头部配上，set-cookie：

httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。

secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。

结果应该是这样的：Set-Cookie=…

44. addEventListener参数?

addEventListener(event, function, useCapture)

其中，event指定事件名；

function指定要事件触发时执行的函数；

useCapture指定事件是否在捕获或冒泡阶段执行。

45. （常考）cookie session区别？

cookie数据存放在客户的浏览器上，session数据放在服务器上。
cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用COOKIE。
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

46.（重点）说说你知道的HTTP状态码?

200    OK    请求成功。一般用于GET与POST请求
201    Created    已创建。成功请求并创建了新的资源
206    Partial Content    部分内容。服务器成功处理了部分GET请求
301    Moved Permanently    永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302    Found    临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
304    Not Modified    未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
400    Bad Request    客户端请求的语法错误，服务器无法理解
401    Unauthorized    请求要求用户的身份认证
402    Payment Required    保留，将来使用
403    Forbidden    服务器理解请求客户端的请求，但是拒绝执行此请求
404    Not Found    服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
500    Internal Server Error    服务器内部错误，无法完成请求

47. 讲讲304状态码？

304 Not Modified 未修改。

所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

48.（重点）GET和POST的区别？

get参数通过url传递，post放在request body中。
get请求在url中传递的参数是有长度限制的，而post没有。
get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
get请求只能进行url编码，而post支持多种编码方式
get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。

49.（偶尔）HTTP常见的方法？

GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

50. 如何画一个三角形?

三角形原理：边框的均分原理

div {
	width:0px;
	height:0px;
	border-top:10px solid red;
	border-right:10px solid transparent;
	border-bottom:10px solid transparent;
	border-left:10px solid transparent;
}

52.（常考）说说HTML5 有哪些新特性?

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

新增的有：
    绘画 canvas;
    用于媒介回放的 video 和 audio 元素;
    本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
    sessionStorage 的数据在浏览器关闭后自动删除;
    语意化更好的内容元素，比如 article、footer、header、nav、section;
    表单控件，calendar、date(显示日期{年月日})、time(显示时间，不含时区)、email(电子邮箱文本框--能验证通不通过)、url(网页的URL)、search(搜索引擎,chrome下输入文字后，会多出一个关闭的X);
    新的技术 webworker, websocket;
    新的文档属性 document.visibilityState (只读属性, 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染)

53.（常考）说说CSS3有哪些新特性？

1、圆角效果（border-radius）
2、阴影（box-shadow）
3、背景图片尺寸（background-size）
4、透明度（opacity）
5、嵌入字体（@font-face）
6、弹性布局  flex
7、盒模型定义  box-sizing
8、媒体查询
......

54. 浏览器在生成页面的时候，会生成那两颗树？

构造两棵树，DOM树和CSSOM规则树

当浏览器接收到服务器相应来的HTML文档后，会遍历文档节点，生成DOM树

CSSOM规则树由浏览器解析CSS文件生成

55. csrf和xss的网络攻击及防范?

详细请看：
https://blog.csdn.net/weixin_43352901/article/details/107455283
https://blog.csdn.net/weixin_43352901/article/details/107458126

56.（常考）输入URL到页面加载显示完成发生了什么?

DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束

57. 浏览器的缓存机制？

缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。

58.（常考）你知道BFC吗？（用于清楚浮动，防止margin重叠等）

详细请看：
https://blog.csdn.net/weixin_43352901/article/details/107392460

59.（常考）水平居中、垂直居中有哪些方式？

详细请看：
https://blog.csdn.net/weixin_43352901/article/details/107414834

60. 说一下块元素和行元素？

块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度

行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效

61. 多行元素的文本省略号？

display: -webkit-box
-webkit-box-orient:vertical  //从上向下垂直排列子元素
-webkit-line-clamp:3  //可以把 块容器 中的内容限制为指定的行数
overflow:hidden  //overflow:当内容溢出元素框时发生的事情  hidden:内容会被修剪，并且其余内容是不可见的

62. 说说visibility=hidden，opacity=0，display:none的区别？

opacity=0：该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件
visibility=hidden：该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display=none：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

63. float的元素，display是什么？

display为block

64. calc属性？

Calc用户动态计算长度值，任何长度值都可以使用calc()函数计算，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

65. display：table和本身的table有什么区别？

display:table和本身table是相对应的，区别在于，display：table的css声明能够让一个html元素和它的子节点像table元素一样，使用基于表格的css布局，是我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了table那样的制表标签导致的语义化问题。

之所以现在逐渐淘汰了table系表格元素，是因为用div+css编写出来的文件比用table边写出来的文件小，而且table必须在页面完全加载后才显示，div则是逐行显示，table的嵌套性太多，没有div简洁。

66. 如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作？

可以更改父元素的color

67. 设置一个元素的背景颜色，背景颜色会填充哪些区域？

background-color设置的背景颜色会填充元素的content、padding、border区域

68. 知道属性选择器和伪类选择器的优先级吗？

属性选择器和伪类选择器优先级相同

69. inline-block、inline和block的区别？

block是块级元素，其前后都会有换行符，能设置宽度，高度margin/padding水平垂直方向都有效。

Inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后无换行符

Inline-block：能设置宽度高度，margin/padding水平垂直方向都有效，前后无换行符

70. 什么是重绘和回流？（浏览器绘制过程)

重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background -color，我们将这样的操作称为重绘。

回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。

常见引起回流属性和方法：

任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。
	 （1）添加或者删除可见的 DOM 元素；
	 （2）元素尺寸改变——边距、填充、边框、宽度和高度
	 （3）内容变化，比如用户在 input 框中输入文字
	 （4）浏览器窗口尺寸改变——resize事件发生时
	 （5）计算 offsetWidth(获取的是盒子最终的宽--只能获取不能改) 和 offsetHeight(获取的是盒子最终的高-只能获取不能改) 属性
	 （6）设置 style 属性的值
	 （7）当你修改网页的默认字体时。

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。

71. 如何减少回流？（浏览器绘制过程）

（1）使用 transform 替代 top

（2）不要把节点的属性值放在一个循环里当成循环里的变量

（3）不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局

（4）不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className。

72.overflow的原理?

要讲清楚这个解决方案的原理，首先需要了解块格式化上下文，块格式化上下文是CSS可视化渲染的一部分，它是一块区域，规定了内部块盒的渲染方式，以及浮动相互之间的影响关系

当元素设置了overflow样式且值部位visible时，该元素就构建了一个BFC，BFC在计算高度时，内部浮动元素的高度也要计算在内，也就是说技术BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，所以达到了清除浮动的目的

73. 相对布局和绝对布局，position:relative和obsolute？

相对定位relative：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位absolute：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

74. CSS固定定位fixed？

固定定位fixed：

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。

75. css预处理器有什么?

Less、Sass