zoukankan      html  css  js  c++  java
  • 前端面试资源(二)

    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>titlealt有什么区别

    1. titleglobal 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-headerrequest-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下内容高度超过会自动扩展高度
    }
    • olli的序号全为1,不递增。解决方法:为li设置样式display: list-item;
    • 未定位父元素overflow: auto;,包含position: relative;子元素,子元素高于父元素时会溢出。解决办法:1)子元素去掉position: relative;; 2)不能为子元素去掉定位时,父元素position: relative;
    <style type="text/css">
    .outer {
         215px;
        height: 100px;
        border: 1px solid red;
        overflow: auto;
        position: relative;  /* 修复bug */
    }
    .inner {
         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
    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

  • 相关阅读:
    扑克牌顺子
    数组转 二叉树 ,并且输出二叉树的右视图
    数组中逆序对(归并排序思想)
    链表数字加和
    回文数字
    数组中 只出现一次的数
    判断是否有从根节点到叶子节点的节点值之和等于 sum
    双指针求 3个数和 为0的 数
    vue项目将css,js全部打包到html文件配置
    webpack4配置优化
  • 原文地址:https://www.cnblogs.com/10manongit/p/13046647.html
Copyright © 2011-2022 走看看