前端面试题之html 、网络安全、 css

最新推荐文章于 2024-08-18 21:06:49 发布

不知名的小Q

最新推荐文章于 2024-08-18 21:06:49 发布

阅读量144

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_54189624/article/details/129840238

版权

1.尽可能多的写出浏览器兼容性问题

2.垂直上下居中的方法

3.响应式布局原理

4.清除浮动的方法

5.http协议和tcp协议

6.刷新页面，js请求一般会有哪些地方有缓存处理

7.如何对网站的文件和资源进行优化

8.你对网页标准和W3C重要性的理解

9.Http和https的区别

10.data-属性的作用

11.如何让Chrome浏览器显示小于12px的文字

解决方案
常见的解决方案有：

zoom

zoom 的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸

其支持的值类型有：

zoom:50%，表示缩小到原来的一半
zoom:0.5，表示缩小到原来的一半

<style type="text/css"> .span1{font-size: 12px;display: inline-block;zoom: 0.8;}.span2{display: inline-block;font-size: 12px;} </style>
<body><span class="span1">测试10px</span><span class="span2">测试12px</span>
</body>

需要注意的是，Zoom 并不是标准属性，需要考虑其兼容性

-webkit-transform:scale()

针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩

注意的是，使用scale属性只对可以定义宽高的元素生效，所以，下面代码中将span元素转为行内块元素

<style type="text/css"> .span1{font-size: 12px;display: inline-block;-webkit-transform:scale(0.8);}.span2{display: inline-block;font-size: 12px;} </style>
<body><span class="span1">测试10px</span><span class="span2">测试12px</span>
</body>

-webkit-text-size-adjust:none

该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小

属性值：
percentage：字体显示的大小；
auto：默认，字体大小会根据设备/浏览器来自动调整；
none:字体大小不会自动调整

html { -webkit-text-size-adjust: none; }

这样设置之后会有一个问题，就是当你放大网页时，一般情况下字体也会随着变大，而设置了以上代码后，字体只会显示你当前设置的字体大小，不会随着网页放大而变大了

所以，我们不建议全局应用该属性，而是单独对某一属性使用

需要注意的是，自从chrome 27之后，就取消了对这个属性的支持。同时，该属性只对英文、数字生效，对中文不生效

总结
Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排

-webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化

-webkit-text-size-adjust对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效

12.哪些操作会引起页面回流（Reflow）

改变窗口大小，字体大小，增加或者移除样式表，内容变化，操作class属性，新增或者减少，js操作dom, offset相关属性计算，

13.CSS预处理器的比较less sass

主要区别(实现方式)：Less在JS上运行，Sass在Ruby上使用。

Less基于JavaScript，通过npm安装，在客户端处理；Sass基于Ruby，需要安装Ruby，在服务器处理。

为了使用Less，我们可以将适用的JavaScript文件上传到服务器或通过脱机编译器编译CSS表。

编写变量的方式不同。

Sass使用$，而Less使用@。

在Less中，仅允许循环数值。

在Sass中，我们可以遍历任何类型的数据；但在Less中，我们只能使用递归函数循环数值。

Sass有Compass，Less有Preboot

Sass和Less有可用于集成mixins的扩展（在整个站点中存储和共享CSS声明的能力）。

Sass有适用于mixins的Compass，其中包括所有可用的选项以及未来支持的更新。

14.如何实现页面每次打开时清除本页缓存

1，用html 标签设置HTTP头信息

no-cache: 强制缓存从服务器上获取新的页面

no-store: 在任何环境下缓存不保存任何页面

2，在需要打开的url后面增加一个随机参数：

增加参数前： url = test/test.jsp

增加参数后：url = test/test.jsp?ranparam = random()

说明：因为每次请求的url后面的参数不一样，相当于请求的是不同的页面，用这样的方法来曲线救国，清除缓存

15.什么是Virtual DOM,为何要用Virtual DOM

虚拟DOM:用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。

16.伪元素和伪类的区别

相同点：都是属于选择器中的一种，能实现对于页面元素的修饰

不同点：
1、概念不同：伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的；例如鼠标的悬停效果；伪元素：用于创建一些不在DOM树中的元素，并为其添加样式；例如：先前向后插入元素内容等等

2、使用方法不同：css3规范中要求使用双冒号（::）表示伪元素，以此来区分伪类和伪元素，比如::before和::after等伪元素使用双冒号（::），:hover和:active伪类使用单冒号（:）目前来看有一部分浏览器为了达到一个更好的兼容性的问题，我们的双冒号也可以写成单冒号；但是在一些低版本浏览器里面有些时候还是需要使用双冒号的

陆荣涛前端学习交流Q群858752519

17.http的几种请求方法和区别

HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD 方法。
HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。
序号方法描述用途
1 GET 【获取资源】本质就是发送一个请求来取得服务器上的某一资源。

2 POST 【传输实体文本】向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在POST请求体中。POST 请求可能会导致新的资源的建立或已有资源的修改。

3 HEAD 【获得报文首部】类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头。欲判断某个资源是否存在，我们通常使用GET，但这里用HEAD则意义更加明确。

4 OPTIONS 【询问支持的方法】客户端询问服务器可以提交哪些请求方法。这个方法很有趣，它用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。

5 PUT 【传输文件】从客户端向服务器传送的数据取代指定的文档的内容，即指定上传资源存放路径。

7 DELETE 【删除文件】请求服务器删除指定的资源。

8 TRACE 【追踪路径】回显服务器收到的请求，客户端可以对请求消息的传输路径进行追踪，TRACE方法是让Web服务器端将之前的请求通信还给客户端的方法。主要用于测试或诊断。

9 CONNECT 【要求用隧道协议连接代理】HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。CONNECT方法要求在与代理服务器通信时建立隧道，实现用隧道协议进行TCP通信。主要使用SSL（安全套接层）和TLS（传输层安全）协议把通信内容加密后经网络隧道传输。

18.前端需要注意哪些SEO

（1）合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可。

（ 2 ）语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页。
（ 3 ）重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引
擎对抓取长度有限制，保证重要内容肯定被抓取。
（ 4 ）重要内容不要用 js 输出：爬虫不会执行 js 获取内容
（ 5 ）少用 iframe ：搜索引擎不会抓取 iframe 中的内容
（ 6 ）非装饰性图片必须加 alt
（ 7 ）提高网站速度：网站速度是搜索引擎排序的一个重要指标