前端口试资本（二）

2024年2月20日 110次阅读 来源: 紫日残月

web语义化

web语义化是指经由过程HTML标记示意页面包含的信息，包含了HTML标签的语义化和css定名的语义化。
HTML标签的语义化是指：经由过程运用包含语义的标签（如h1-h6）适当地示意文档构造
css定名的语义化是指：为html标签增添有意义的class，id补充未表达的语义，如Microformat经由过程增添相符划定规矩的class形貌信息
为何须要语义化：

  • 去掉款式后页面显现清楚的构造
  • 瞽者运用读屏器更好地浏览
  • 搜刮引擎更好地明白页面，有利于收录
  • 便团队项目的可延续运作及保护

前端须要注重哪些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. 进步网站速率：网站速率是搜刮引擎排序的一个主要目标

web开辟中会话跟踪的要领有哪些

  1. cookie
  2. session
  3. url重写
  4. 隐蔽input
  5. ip地点

<img>的title和alt有什么区分

  1. title是global attributes之一，用于为元素供应附加的advisory information。一般当鼠标滑动到元素上的时刻显现。
  2. alt是<img>的特有属性，是图片内容的等价形貌，用于图片没法加载时显现、读屏器浏览图片。可提图片高可接见性，除了纯装潢图片外都必需设置有意义的值，搜刮引擎会重点剖析。

doctype是什么,举例罕见doctype及特性

  1. <!doctype>声明必需处于HTML文档的头部，在<html>标签之前，HTML5中不辨别大小写
  2. <!doctype>声明不是一个HTML标签，是一个用于通知浏览器当前HTMl版本的指令
  3. 当代浏览器的html规划引擎经由过程搜检doctype决议运用兼容形式照样规范形式对文档举行衬着，一些浏览器有一个靠近规范模子。
  4. 在HTML4.01中<!doctype>声明指向一个DTD，因为HTML4.01基于SGML，所以DTD指定了标记划定规矩以保证浏览器准确衬着内容
  5. HTML5不基于SGML，所以不必指定DTD

HTTP request报文构造是怎样的

rfc2616中举行了定义：

  1. 首行是Request-Line包含：要求要领，要求URI，协定版本，CRLF
  2. 首行以后是多少行要求头，包含general-header，request-header或许entity-header，每一个一行以CRLF完毕
  3. 要求头和音讯实体之间有一个CRLF分开
  4. 依据现实要求须要能够包含一个音讯实体

一个要求报文例子以下：

GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT

name=qiu&age=25

HTTP response报文构造是怎样的

rfc2616中举行了定义：

  1. 首行是状况行包含：HTTP版本，状况码，状况形貌，背面跟一个CRLF
  2. 首行以后是多少行相应头，包含：通用头部，相应头部，实体头部
  3. 相应头部和相应实体之间用一个CRLF空行分开
  4. 末了是一个能够的音讯实体

相应报文例子以下：

HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1

{"name": "qiu", "age": 25}

CSS挑选器有哪些

  1. *通用挑选器：挑选一切元素，不介入盘算优先级，兼容性IE6+
  2. #X id挑选器：挑选id值为X的元素，兼容性：IE6+
  3. .X 类挑选器： 挑选class包含X的元素，兼容性：IE6+
  4. X Y子女挑选器： 挑选满足X挑选器的子女节点中满足Y挑选器的元素，兼容性：IE6+
  5. X 元素挑选器： 挑选标一切签为X的元素，兼容性：IE6+
  6. :link，：visited，：focus，：hover，：active链接状况： 挑选特定状况的链接元素，递次LoVe HAte，兼容性: IE4+
  7. X + Y直接兄弟挑选器：在X以后第一个兄弟节点中挑选满足Y挑选器的元素，兼容性： IE7+
  8. X > Y子挑选器： 挑选X的子元素中满足Y挑选器的元素，兼容性： IE7+
  9. X ~ Y兄弟： 挑选X以后一切兄弟节点中满足Y挑选器的元素，兼容性： IE7+
  10. [attr]：挑选一切设置了attr属性的元素，兼容性IE7+
  11. [attr=value]：挑选属性值恰好为value的元素
  12. [attr~=value]：挑选属性值为空白符分开，个中一个的值恰好是value的元素
  13. [attr|=value]：挑选属性值恰好为value或许value-开首的元素
  14. [attr^=value]：挑选属性值以value开首的元素
  15. [attr$=value]：挑选属性值以value末端的元素
  16. [attr*=value]：挑选属性值中包含value的元素
  17. [:checked]：挑选单选框，复选框，下拉框中选中状况下的元素，兼容性：IE9+
  18. X:after, X::after：after伪元素，挑选元素假造子元素（元素的末了一个子元素），CSS3中::示意伪元素。兼容性:after为IE8+，::after为IE9+
  19. :hover：鼠标移入状况的元素，兼容性a标签IE4+， 一切元素IE7+
  20. :not(selector)：挑选不相符selector的元素。不介入盘算优先级，兼容性：IE9+
  21. ::first-letter：伪元素，挑选块元素第一行的第一个字母，兼容性IE5.5+
  22. ::first-line：伪元素，挑选块元素的第一行，兼容性IE5.5+
  23. :nth-child(an + b)：伪类，挑选前面有an + b – 1个兄弟节点的元素，个中n

>= 0， 兼容性IE9+

  1. :nth-last-child(an + b)：伪类，挑选背面有an + b – 1个兄弟节点的元素

个中n >= 0，兼容性IE9+

  1. X:nth-of-type(an+b)：伪类，X为挑选器，剖析获得元素标签，挑选前面有an + b – 1个雷同标签兄弟节点的元素。兼容性IE9+
  2. X:nth-last-of-type(an+b)：伪类，X为挑选器，剖析获得元素标签，挑选背面有an+b-1个雷同标签兄弟节点的元素。兼容性IE9+
  3. X:first-child：伪类，挑选满足X挑选器的元素，且这个元素是其父节点的第一个子元素。兼容性IE7+
  4. X:last-child：伪类，挑选满足X挑选器的元素，且这个元素是其父节点的末了一个子元素。兼容性IE9+
  5. X:only-child：伪类，挑选满足X挑选器的元素，且这个元素是其父元素的唯一子元素。兼容性IE9+
  6. X:only-of-type：伪类，挑选X挑选的元素，剖析获得元素标签，假如该元素没有雷同范例的兄弟节点时选中它。兼容性IE9+
  7. X:first-of-type：伪类，挑选X挑选的元素，剖析获得元素标签，假如该元素

是此此范例元素的第一个兄弟。选中它。兼容性IE9+

css sprite是什么,有什么优瑕玷

观点：将多个小图片拼接到一个图片中。经由过程background-position和元素尺寸调治须要显现的背景图案。

长处：

  1. 削减HTTP要求数，极大地进步页面加载速率
  2. 增添图片信息反复度，进步压缩比，削减图片大小
  3. 替代作风轻易，只需在一张或几张图片上修正色彩或款式即可完成

瑕玷：

  1. 图片兼并贫苦
  2. 保护贫苦，修正一个图片能够须要重新规划全部图片，款式

display: none;与visibility: hidden;的区分

联络：它们都能让元素不可见

区分：

  1. display:none;会让元素完整从衬着树中消逝，衬着的时刻不占有任何空间；visibility: hidden;不会让元素从衬着树消逝，衬着师元素继续占有空间，只是内容不可见
  2. display: none;黑白继续属性，子孙节点消逝因为元素从衬着树消逝形成，经由过程修正子孙节点属性没法显现；visibility: hidden;是继续属性，子孙节点消逝因为继续了hidden，经由过程设置visibility: visible;能够让子孙节点显式
  3. 修正通例流中元素的display一般会形成文档重排。修正visibility属性只会形成本元素的重绘。
  4. 读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

link与@import的区分

  1. link是HTML体式格局， @import是CSS体式格局
  2. link最大限制支撑并行下载，@import过量嵌套致使串行下载，涌现FOUC
  3. link能够经由过程rel="alternate stylesheet"指定候选款式
  4. 浏览器对link支撑早于@import，能够运用@import对老浏览器隐蔽款式
  5. @import必需在款式划定规矩之前，能够在css文件中援用其他文件
  6. 整体来讲：link优于@import

display: block;和display: inline;的区分

block元素特性：

1.处于通例流中时，假如width没有设置，会自动填充溢父容器
2.能够运用margin/padding
3.在没有设置高度的状况下会扩大高度以包含通例流中的子元素
4.处于通例流中时规划时在前后元素位置之间（独有一个程度空间）
5.疏忽vertical-align

inline元素特性

1.程度方向上依据direction顺次规划
2.不会在元素前后举行换行
3.受white-space掌握
4.margin/padding在竖直方向上无效，程度方向上有用
5.width/height属性对非替代行内元素无效，宽度由元素内容决议
6.非替代行内元素的行框高由line-height肯定，替代行内元素的行框高由height,margin,padding,border决议
6.浮动或相对定位时会转换为block
7.vertical-align属性见效

IE6浏览器有哪些罕见的bug,缺点或许与规范不一致的处所,怎样处理

  • IE6不支撑min-height，处理办法运用css hack：
.target {
    min-height: 100px;
    height: auto !important;
    height: 100px;   // IE6下内容高度凌驾会自动扩大高度
}
  • ol内li的序号全为1，不递增。处理要领：为li设置款式display: list-item;
  • 未定位父元素overflow: auto;，包含position: relative;子元素，子元素高于父元素时会溢出。处理办法：1）子元素去掉position: relative;; 2）不能为子元素去掉定位时，父元素position: relative;
<style type="text/css">
.outer {
    width: 215px;
    height: 100px;
    border: 1px solid red;
    overflow: auto;
    position: relative;  /* 修复bug */
}
.inner {
    width: 100px;
    height: 200px;
    background-color: purple;
    position: relative;
}
</style>

<div class="outer">
    <div class="inner"></div>
</div>
  • IE6只支撑a标签的:hover伪类，处理要领：运用js为元素监听mouseenter，mouseleave事宜，增添类完成结果：
<style type="text/css">
.p:hover,
.hover {
    background: purple;
}
</style>

<p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>

<script type="text/javascript">
function addClass(elem, cls) {
    if (elem.className) {
        elem.className += ' ' + cls;
    } else {
        elem.className = cls;
    }
}
function removeClass(elem, cls) {
    var className = ' ' + elem.className + ' ';
    var reg = new RegExp(' +' + cls + ' +', 'g');
    elem.className = className.replace(reg, ' ').replace(/^ +| +$/, '');
}

var target = document.getElementById('target');
if (target.attachEvent) {
    target.attachEvent('onmouseenter', function () {
        addClass(target, 'hover');
    });
    target.attachEvent('onmouseleave', function () {
        removeClass(target, 'hover');
    })
}
</script>
  • IE5-8不支撑opacity，处理办法：
.opacity {
    opacity: 0.4
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
  • IE6在设置height小于font-size时高度值为font-size，处理办法：font-size: 0;
  • IE6不支撑PNG通明背景，处理办法: IE6下运用gif图片
  • IE6-7不支撑display: inline-block处理办法：设置inline并触发hasLayout
    display: inline-block;
    *display: inline;
    *zoom: 1;
  • IE6下浮动元素在浮动方向上与父元素边境打仗元素的外边距会更加。处理办法：

1）运用padding掌握间距。
2）浮动元素display: inline;如许处理问题且无任何副作用：css规范划定浮动元素display:inline会自动调解为block

  • 经由过程为块级元素设置宽度和摆布margin为auto时，IE6不能完成程度居中，处理要领：为父元素设置text-align: center;

容器包含多少浮动元素时怎样清算(包含)浮动

  1. 容器元素闭合标签前增添分外元素并设置clear: both
  2. 父元素触发块级格式化上下文(见块级可视化上下文部份)
  3. 设置容器元素伪元素举行清算引荐的清算浮动要领

display,float,position的关联

  1. 假如display为none，那末position和float都不起作用，这类状况下元素不发作框
  2. 不然，假如position值为absolute或许fixed，框就是相对定位的，float的盘算值为none，display依据下面的表格举行调解。
  3. 不然，假如float不是none，框是浮动的，display依据下表举行调解
  4. 不然，假如元素是根元素，display依据下表举行调解
  5. 其他状况下display的值为指定值

总结起来：相对定位、浮动、根元素都须要调解display
《前端口试资本（二）》

外边距摺叠(collapsing margins)

毗连的两个或多个margin会兼并成一个margin，叫做外边距摺叠。划定规矩以下：

  1. 两个或多个毗连的普通流中的块元素垂直方向上的margin会摺叠
  2. 浮动元素/inline-block元素/相对定位元素的margin不会和垂直方向上的其他元素的margin摺叠
  3. 创建了块级格式化上下文的元素，不会和它的子元素发作margin摺叠
  4. 元素本身的margin-bottom和margin-top相邻时也会摺叠

转载自 : https://github.com/qiu-deqing/FE-interview

    原文作者：紫日残月
    原文地址: https://segmentfault.com/a/1190000013849917
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞