前端面试题之html 、网络安全、 css
- 1.尽可能多的写出浏览器兼容性问题
- 2.垂直上下居中的方法
- 3.响应式布局原理
- 4.清除浮动的方法
- 5.http协议和tcp协议
- 6.刷新页面,js请求一般会有哪些地方有缓存处理
- 7.如何对网站的文件和资源进行优化
- 8.你对网页标准和W3C重要性的理解
- 9.Http和https的区别
- 10.data-属性的作用
- 11.如何让Chrome浏览器显示小于12px的文字
- 12.哪些操作会引起页面回流(Reflow)
- 13.CSS预处理器的比较less sass
- 14.如何实现页面每次打开时清除本页缓存
- 15.什么是Virtual DOM,为何要用Virtual DOM
- 16.伪元素和伪类的区别
- 17.http的几种请求方法和区别
- 18.前端需要注意哪些SEO
- 19.img标签的title和alt有什么区别
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 )提高网站速度:网站速度是搜索引擎排序的一个重要指标
19.img标签的title和alt有什么区别
其中alt属性是指图片的替换文本,主要有两个作用:
①当根据路径找不到该图片时,作为替换文本出现,不同的浏览器显示形式不一样。
②通过alt 可以让搜索引擎知道该图片的内容是什么,因为搜索引擎无法根据图片识别当前图片显示的内容。
其中的title属性的作用为:
title属性的作用是指当鼠标放在图片上的时候会出现对图片的描述信息。