• 前端常用面试题目及答案-HTML&CSS篇


    1. 行内元素和块级元素有哪些?

    • 行内元素:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      <a>     //标签可定义锚   
      <abbr>     //表示一个缩写形式  
      <acronym>     //定义只取首字母缩写  
      <b>     //字体加粗  
      <bdo>     //可覆盖默认的文本方向  
      <big>     //大号字体加粗  
      <br>     //换行  
      <cite>     //引用进行定义  
      <code>    // 定义计算机代码文本  
      <dfn>     //定义一个定义项目  
      <em>     //定义为强调的内容  
      <i>     //斜体文本效果  
      <img>     //向网页中嵌入一幅图像  
      <input>     //输入框  
      <kbd>     //定义键盘文本  
      <label>     //标签为 input 元素定义标注(标记)  
      <q>     //定义短的引用  
      <samp>     //定义样本文本  
      <select> // 创建单选或多选菜单  
      <small>     //呈现小号字体效果  
      <span>     //组合文档中的行内元素  
      <strong> //加粗  
      <sub>     //定义下标文本  
      <sup>     //定义上标文本  
      <textarea>     //多行的文本输入控件  
      <tt>     //打字机或者等宽的文本效果  
      <var>    // 定义变量
    • 块级元素:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      <address>//定义地址   
      <caption>//定义表格标题  
      <dd>    //定义列表中定义条目  
      <div>     //定义文档中的分区或节  
      <dl>    //定义列表  
      <dt>     //定义列表中的项目  
      <fieldset> //定义一个框架集  
      <form> //创建 HTML 表单  
      <h1>    //定义最大的标题  
      <h2>    // 定义副标题  
      <h3>     //定义标题  
      <h4>     //定义标题  
      <h5>     //定义标题  
      <h6>     //定义最小的标题  
      <hr>     //创建一条水平线  
      <legend>    //元素为 fieldset 元素定义标题  
      <li>     //标签定义列表项目  
      <noframes>    //为那些不支持框架的浏览器显示文本,于 frameset 元素内部  
      <noscript>    //定义在脚本未被执行时的替代内容  
      <ol>     //定义有序列表  
      <ul>    //定义无序列表  
      <p>     //标签定义段落  
      <pre>     //定义预格式化的文本  
      <table>     //标签定义 HTML 表格  
      <tbody>     //标签表格主体(正文)  
      <td>    //表格中的标准单元格  
      <tfoot>     //定义表格的页脚(脚注或表注)  
      <th>    //定义表头单元格
    • 可变元素
      根据上下文语境决定转为块级元素还是行内元素

      1
      2
      3
      4
      5
      6
      7
      <button>     //按钮 
      <del>    // 定义文档中已被删除的文本
      <iframe>     //创建包含另外一个文档的内联框架(即行内框架)
      <ins>     //标签定义已经被插入文档中的文本
      <map>     //客户端图像映射(即热区)
      <object>     //object对象
      <script>     //客户端脚本

    2.XHTML和HTML有什么区别

    HTML是一种基本的WEB网页设计语言,XHTML是一个基于XMl的置标语言
    最主要的不同
    XHTML元素必须被正确地嵌套。
    XHTML元素必须被关闭
    标签名必须用小写字母
    XHTMl文档必须拥有根元素

    3.DISPLAY:NONE和VISIBLITY:HIDDEN的区别是什么?

    display:隐藏对应元素但不挤占该元素原来的空间。
    visiblity: 隐藏对应的元素并且挤占该元素原来的空间。
    即是,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置任然存在。

    4.什么是语义化的HTML?

    1、用正确的标签做正确的事情。
    2、html语义化让页面的内容结构化,结构更清晰,便于对浏览器,搜索引擎解析;
    3、即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
    4、搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重,利用SEO;
    5、使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

    5.常见的浏览器内核有哪些?

    Trident内核:IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML]
    Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等;
    Presto内核:Opera7及以上。[Opera内核原为:Presto,现为:Blink]
    Webkit内核:Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

    6.超链接访问过后HOVER样式就不出现的问题时什么?如何解决?

    被点击访问过的超链接样式不再具有hover和active了,解决方式是改变CSS属性的排列顺序:L-V-H-A(linked, visited, hover, active)。

    7.什么是CSS HACK?IE6,7,8的HACK分别是什么?

    针对不同的浏览器写不同的CSS Code的过程,就是CSS Hack。实例如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    #test{
        300px;
       height: 300px;
       background-color: blue;
       background-color: red9; /*  all ie */
       background-color: yellow; /* ie8 */
       + /* ie7 */
       _background-color: orange; /* ie6  */
       :root #test{
           background: purple9; /* ie9 */
       }

       @media all and {min- 0px} #test{background-color: black;} /* opera */
       @media screen and {-webkit-min-device-pixel-ratio: 0 } {#test { padding: 0px; max- 100%; box-sizing: border-box; word-wrap: break-word !important;">}

    @media可以针对不同的媒体类型定义不同的样式。特别是如果你需要设计响应式的页面,@media是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器宽度和高度重新渲染页面。

    8.HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

    HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加。
    绘画canvas
    用于媒介回放的video和audio元素
    本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失;
    sessionStorage的数据在浏览器关闭后自动删除
    语意化更好的内容元素,比如article,footer,header,nav,section
    表单控件:calendar,date,time,email,url,search
    新的技术webworker,websocktGeolocation
    移除的元素
    纯表现的元素:basefont,big,center,font,s,strike,tt,u;
    对可用性产生负面影响的元素:frame,frameset,noframes;
    支持HTML5新标签:
    IE8/IE7/IE6支持通过document,createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。

    9.请描述一下COOKIES、SESSIONSTORAGE和LOCALSTORAGE区别?

    cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
    cookie数据始终在同源的http请求中携带(即使不需要),即会在浏览器和服务器间来回传递。
    sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存
    存储大小:
    cookie数据大小不能超过4K。
    sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
    有期时间:
    localStorage:存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
    sessionStorage:数据在当前浏览器窗口关闭后自动删除
    cookie:设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

    10.如何实现浏览器内多个标签页之间的通信?

     调用localstorage,cookies等本地存储方式
     WebSocket、SharedWorker
     localstroge另一个浏览器上下文被添加、删除或修改时,它都会触发一个事件,我们通过监听事件,控制它的值来进行页面信息通信。
     注意quirks:Safari在无痕迹模式下设置localstorge值抛出QuotExceededError的异常。

    11.清除浮动有哪些方式?比较好的方式是哪一种?

    1、父级div定义height。
    2、结尾处加空div标签clear:both。
    3、父级div定义伪类:after和zoom。
    4、父级div定义overflow:hidden。
    5、父级div定义overflow:auto。
    6、父级div也浮动,需要定义宽度。
    7、父级div定义display:table。
    8、结尾处加br标签clear:both。
    比较好的是第3种,好多网站都这样用

    12.PX、EM、REM的区别?

    1、px像素。绝对单位,像素px是相对于显示器屏幕分辨率而言的,是一个虚拟单位。是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI。
    2、em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。
    rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事,仍然是相对大小但相对的只是HTML根元素。
    4、区别:IE无法调用那些使用px作为单位的字体大小,而em和rem可以缩放,rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器已支持rem。

    13.CSS3新特性有哪些?

    1、颜色:新增RGBA、HSLA模式
    2、文字阴影(text-shadow)
    3、边框:圆角(border-radius)边框阴影:box-shadow
    4、盒子模型:box-sizing
    5、背景:background-size设置背景图片的尺寸,background-origin设置背景图片的原点,background-clip设置背景图片的裁剪区域,以“,”分隔可以设置多背景,用于自适应布局
    6、渐变:linear-gradient、radial-gradient
    7、过渡:transition可实现动画
    8、自定义动画
    9、在CSS3中唯一引入的伪元素是::selection
    10、多媒体查询、多栏布局
    11、border-image
    12、2D转换:transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
    13、3D转换

    14.DISPLAY有哪些值?说明它们的作用。

    1、block 块类型。默认宽度为父元素宽度,可设置宽高,换行显示。
    2、none 缺省值。像行内元素类型一样显示。
    3、inline 行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
    4、inline-block 默认宽度为内容宽度,可以设置宽高,同行显示。
    5、list-item 像块类型元素一样显示,并添加样式列表标记。
    6、table 此元素会作为块级表格来显示。
    7、inherit 规定应该从父元素继承display属性的值。

    15.描述CSS RESET的作用和用途?

    Reset重置浏览器的css默认属性,浏览器的品种不同,样式不同,然后重置,让他们统一。

    16.项目做过哪些性能优化?

    减少 HTTP 请求数
    减少 DNS 查询
    使用 CDN
    避免重定向
    图片懒加载
    减少 DOM 元素数量
    减少 DOM 操作
    使用外部 JavaScript 和 CSS
    压缩 JavaScript 、 CSS 、字体、图片等
    优化 CSS Sprite
    使用 iconfont
    字体裁剪
    多域名分发划分内容到不同域名
    尽量减少 iframe 使用
    避免图片 src 为空
    把样式表放在 中
    把脚本放在页面底部

    17.水平垂直居中。

    第一种

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #container{
       position:relative;
    }
    #center{
       100px;
       height:100px;
       position:absolute;
       top:50%;
       left:50%;
       transform: translate(-50%,-50%);
    }

    第二种

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #container{
       position:relative;
    }
    #center{
       100px;
       height:100px;
       position:absolute;
       top:50%;
       left:50%;
       margin:-50px 0 0 -50px;
    }

    第三种

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #container{
       position:relative;
    }
    #center{
       position:absolute;
       margin:auto;
       top:0;
       bottom:0;
       left:0;
       right:0;
    }

    第四种

    1
    2
    3
    4
    5
    #container{
       display:flex;
       justify-content:center;
       align-items: center;
    }

    18.四种定位的区别。

    static 是默认值
    relative 相对定位 相对于自身原有位置进行偏移,仍处于标准文档流中
    absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指 position不是 static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以 body元素为偏移参照基准, 完全脱离了标准文档流。
    fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

    19.移动端适配怎么做的?

    使用媒体查询做的响应式布局,根据不同屏幕宽度加载不同 css.

    20.右边宽度固定,左边自适应。

    第一种

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
    body{
       display: flex;
    }
    .left{
       background-color: rebeccapurple;
       height: 200px;
       flex: 1;
    }
    .right{
       background-color: red;
       height: 200px;
        100px;
    }
    </style>
    <body>
       <div class="left"></div>
       <div class="right"></div>
    </body>

    第二种

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style>
       div {
           height: 200px;
       }
       .left {
           float: right;
            200px;
           background-color: rebeccapurple;
       }
       .right {
           margin-right: 200px;
           background-color: red;
       }
    </style>
    <body>
       <div class="left"></div>
       <div class="right"></div>
    </body>

    21.使用CSS实现一个持续的动画效果。

    1
    2
    3
    4
    5
    animation:mymove 5s infinite;
    @keyframes mymove {
       from {top:0px;}
       to {top:200px;}
    }

    4.哪些常见操作会造成内存泄漏?
    内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
    垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
    setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
    闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
    5.线程与进程的区别
    一个程序至少有一个进程,一个进程至少有一个线程.
    线程的划分尺度小于进程,使得多线程程序的并发性高。
    另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。
    线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。
    从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

  • 相关阅读:
    Entity Framework 二
    Entity Framework 一
    Leetcode练习(Python):动态规划类:第221题:最大正方形:在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积。
    Leetcode练习(Python):动态规划类:第139题:单词拆分:给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词。
    Leetcode练习(Python):动态规划类:第95题:不同的二叉搜索树 II:给定一个整数 n,生成所有由 1 ... n 为节点所组成的二叉搜索树。
    Leetcode练习(Python):动态规划类:第96题:不同的二叉搜索树:给定一个整数 n,求以 1 ... n 为节点组成的二叉搜索树有多少种?
    机器学习案例二:缺失时间序列数据填补与ESN(回声状态网络)
    Leetcode练习(Python):动态规划类:第213题:打家劫舍 II:你是一个专业的小偷,计划偷窃沿街的房屋,每间房内都藏有一定的现金。这个地方所有的房屋都围成一圈,这意味着第一个房屋和最后一个房屋是紧挨着的。同时,相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。
    Leetcode练习(Python):动态规划类:第198题:打家劫舍:你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个房屋存放金额的非负整数数组,计算你在不触动警报装置的情况下,能够偷窃到的最高金额。
    Leetcode练习(Python):动态规划类:第70题:爬楼梯:假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数。
  • 原文地址:https://www.cnblogs.com/Gbeniot/p/10147739.html
Copyright © 2020-2023  润新知