zoukankan      html  css  js  c++  java
  • 前端常见问题总结

    一、什么是web标准?

    WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。

    标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

     

    二、为什么将css引入放头部,js引入放后面

    浏览器从上到下依次解析html文档。将css文件放到头部,css文件可以先加载。避免先加载body内容,导致页面一开始样式错乱,然后闪烁。将javascript文件放到底部是因为:若将javascript文件放到head里面,就意味着必须等到所有的javascript代码都被下载、解析和执行完成之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟,窗口一片空白。

    三、css的引入

    一般来说只有3种:
    1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:
    <link href="css/style.css" rel="stylesheet" type="text/css">
    2.在Html头部用<style></style>包起来,在这里面编写样式:
    <style type="text/css">
    *{
    padding: 0;margin: 0
    }
    </style>
    3.在标签里面直接编写行内样式。

    <div style="color: #333"><div>

    四、link和@import的区别

    差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
    link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

    差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS 的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。

    差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

    差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

    5、 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

    Ie(Ie内核 Trident) 火狐(Gecko) 谷歌(webkit) opear(Presto)

    6、写出几种IE6 BUG的解决方法

      1.双边距BUG float引起的 使用display
      2.3像素问题 使用float引起的 使用dislpay:inline -3px
      3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
      4.Ie z-index问题 给父级添加position:relative
      5.Png 透明 使用js代码 改
      6.Min-height 最小高度 !Important 解决’
      7.select 在ie6下遮盖 使用iframe嵌套
      8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)

    9.ie 6 不支持!important

    7、relative和absolute的区别

         (1)、一般父元素用relative:绝对定位。

    第一种:有父元素,参照父级元素的原始点为原始点,当父级元素有padding等css属性的时候,当前级的原始点参照父级元素的内容区原始点进行定位;

    第二种:无父级元素,就用body的原始点为原始点并配合TRBL进行定位。

    (2)、absolute绝对定位:一般用在子元素上并配合TRBL进行定位。

    第一种:设置了TRBL,无论父元素有没有设置position属性,参照点是浏览器的左上角,配合TRBL进行定位

    第二种:没有设置TRBL,默认一句父级元素的坐标原始点为原始点

    第三种:设定了TRBL,并且父级元素没有position属性,那个还是以浏览器左上角进行定位。

    8、img标签上titlealt属性的区别是什么?

      Alt 当图片不显示是 用文字代表。

    Title 为该属性提供信息

    9、解释css sprites,如何使用。

    Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数

    10、浏览器标准模式和怪异模式之间的区别是什么

    所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声明,将使网页进入怪异模式(quirks mode)

    IE6不认识!important声明,IE7、IE8、Firefox、Chrome等浏览器认识;而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种,还有很多其它区别。

     

    到底都有哪些声明呢?哪种声明更好呢?我们建议你使用XHTML 1.0最严格模式,从一开始我们就应该严格的要求自己

    ,具体声明如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

      如果你接手的是一个遗留网页,最初并没有DTD声明,并且使用了很多在XHTML中已经废除的标签,那么,我们建议你使用XHTML兼容模式,声明如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

      

    11、清除浮动的几种方式,各自的优缺点

      1.使用空标签清除浮动 clear:both(理论上能清楚任何标签,增加无意义的标签)
      2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)

    3.是用afert伪元素清除浮动(用于非IE浏览器)

    12、css hack
      _marging \IE 6
      +margin \IE 7
      Marging:0 auto 9 所有Ie

      Margin \IE 8

  • 相关阅读:
    SQL中关于Left Join转为Inner Join的问题,即左关联转为内关联的问题
    Mybatis Plus 2 升到 Mybatis Plus 3 时,oracle 自增序列的相关问题
    Java项目启动时,oracle 驱动异常
    window 下安装 Arthas
    postman 中给所有接口token授权的配置
    探讨:在循环前与在循环中创建对象的区别
    当你无法发现问题所在时,不要简单地把代码或者数据还原
    http://875880923.iteye.com/blog/1963400
    2013成都网络赛 J A Bit Fun(水题)
    2013成都网络赛 C We Love MOE Girls(水题)
  • 原文地址:https://www.cnblogs.com/this-xiaoming/p/5539187.html
Copyright © 2011-2022 走看看