web前端面试题

1、 对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性2、xhtml和html有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素3、 行内元素有哪些?块 级元素有哪些?CSS的盒模型?行内元素: a b br i span input select strong块 级元素：div p h1 h2 h3 h4 form ul ol li  dl dd dtcss盒模型:内容，border ,margin，padding行内元素与块 级元素的区别：1）块 级元素会独占一行，其宽度自动填满其父元素宽度;  行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化   2） 块 级元素可以设置 width, height属性，行内元素设置width,  height无效【注意：块级元素即使设置了宽度，仍然是独占一行的】   3) 块 级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）4、在HTML中引入CSS的方法主要有四种，它们分别是行内式、内嵌式、链接式和导入式。行内式          行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。嵌入式          嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：                             缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。导入式          将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，         导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。链接式          也是将一个.css文件引入到HTML文件中，但它与导入式不同的是链接式使用HTML规则引入外部CSS文件，它在网页的标签对中使用标记来引入外部样式表文件，使用语法如下：                    使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。总结：一般来说，做网站时把样式多写在多个样式表文件中，因此我们先用链接式引入一个总的CSS文件，然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。5、CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？css3新增伪类有哪些？选择符：标签选择器（div，h1，p）、id选择器（#myid）、类选择器（.myclassname）、相邻选择器（h1+p）、子选择器（ul > li）、后代选择器（li  a）、通配符选择器（*）、属性选择器（a[ rel = 'external']）、伪类选择器（a:hover,  li:nth-child）可继承的样式：font-size    font-family  color,   text-indent;不可继承的样式：border     padding     margin     width     height     优先级就近原则，同权重情况下样式定义最近者为准；载入样式以最后载入的定位为准；优先级为：！important   >   id    >    class    >tagimportant   比内联优先级高，但内联比  id  要高css3新增伪类举例：p：first-of-type     选择属于其父元素6、前端页面又哪三层构成，分别是什么？作用是什么？结构层HTML    表示层CSS     行为层js7、你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？IE（IE内核）、     火狐（Gecko）、     谷歌（webkit）、     opear（Presto）8、写出几种IE6 BUG的解决办法双边距BUG：float引起的，使用display:inline（在IE7,Firefox等浏览器下能正确解释左边距10px。但是在IE6下会理解为左边距20px。也就是说，在与浮动同方向的空白边会加倍，解决方法是为这个div的css中添加：display:inline; 这样就可避免双倍边距bug。）3像素问题：float引起的，使用display：inline -3px;（当使用float浮动容器后，在IE6下会产生3px的空隙，因为是确切的3px，所以，用“暴力破解”吧，比如.left   _margin-right:-3px;，还有一种方法是也设置float            HTML：         

　                   

在ie6浏览状态下，我们看到。绿色div与蓝色div中间出现了一条空隙。这就是ie6下3像素bug问题。

　　结果：               ）超链接hover：点击后失效，使用正确的书写顺序  link  visited  hover  activeIE   z-index问题：给父级添加position:relativePng透明：使用js代码改Min-height：最小高度！important解决select在IE6下遮盖：使用iframe嵌套为什么没有办法定义1px左右的高度容器：IE默认的行高造成的，使用overflow:hidden;  zoom:0.08;  line-height:1px;当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？在父窗口加上overflow：auto； _zoom：1 ；这两个样式属性，overflow：auto是让父容器来自适应内部容器的高度，_zoom：1；是为了兼容IE6而使用的CSS HACKIE6中奇数宽高的bug          IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改为偶数          IE6下为什么图片下方有空隙产生          解决这个bug的方法也有很多，可以是改变HTML的排版，或者定义img为display：block；或者定义vertical-align属性值为vertical-align：top | bottom |  middle | text-bottom还可以设置父容器的字体大小为零，font-size:0          IE6下空标签高度问题一个空div如果高度设置为0到19px，IE6下高度默认始终19px。例如：.c{background-color:#f00; height:2px;  /*给定任何小于20px的高度*/}如果不让它默认为19px。而是0px的话解决方法有3种1）、css里面加上overflow：hidden2）、div里面加上注释3）、css里面加上line-height：0；然后div里面加上#nbsp；(#换成&)如何用css分别单独定义IE6、7、8的width属性所有浏览器通用：height：100pxIE6专用：_height:100px;IE6专用：*height：100px;IE7专用：*+height：100pxIE7、FF共用：height：100px ！important；css中哪些属性可以同父元素继承          继承：文本类的均可继承，列表元素可继承9、标签上title与alt属性的区别是什么?title:为该属性提供信息alt：当图片不显示时，用文字代表10、:visited 选择器用于选取已被访问的链接。:link选择器对指向未被访问页面的链接设置样式, :hover选择器用于设置鼠标指针浮动到链接上时的样式，:active选择器用于设置点击链接时的样式。11、描述css reset的作用和用途。Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一如，最简化的CSS Reset（避免浏览器兼容问题，）*{padding：0；margin：0；}12、解释css sprites，如何使用。Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量13、浏览器标准模式和怪异模式之间的区别是什么?14、你如何对网站的文件和资源进行优化？期待的解决方案包括：文件合并、文件最小化/文件压缩、使用CDN托管、缓存的使用（多个域名来提供缓存）15、请说出三种减少页面加载时间的方法（加载时间指感知的时间或者实际加载时间)a、优化图片b、图像格式的选择（gif：提供的颜色较少，可用在一些对颜色要求不高的地方）c、优化CSS（压缩合并CSS，如margin-top，margin-left……）d、网址后加斜杠（如www.campr.com/目录，会判断这个目录是什么文件类型 或者是目录）e、标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片，一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容，从而加载时间快了，浏览体验也更好了。）f、减少HTTP请求（合并文件、合并图片（CSS精灵，CSS sprites技术））16、data-属性的作用是什么？data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持改属性的浏览器可以通过getAttribute方法获取div.dataset.commentNum;   //     10需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持。17、如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？a、display:none     的缺陷搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器（是为了视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。b、visibility：hidden     的缺陷隐藏的内容会占据他所应该占据物理空间c、overflow：hidden     一个比较合理的方法.texthidden{display:block;/*统一转化为块级元素*/    overflow：hidden； width：0；height：0}就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超多部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。18、填空题a、目前常用的WEB标准静态页面语言是：    HTML    b、改变元素的外边距用   margin     ，改变元素的内填充用     padding    c、在Table中，tr是     行     ，td是    列    d、如果给一行两列的表格（table）定义高度样式，在     table     标签中定义最合理，最能减少代码的臃肿e、对ul  li的样式设成无，应该是用什么样式？    list-style-type:none;    f、在新窗口打开链接的方法是   target=“_blank”   g、color:#666666可缩写为：    color：#666    h、合理的页面布局中常听过结构与表现分离，那么结构是    html     ， 表现是      css    19、选择题    （1）、在下面的XHTML中，哪些可以正确地标记折行？    A              A：
    B:       C:  
          （
标签插入简单的换行符。
标签是一个空标签，意味着它没有结束标签。所以这样是错误的：

）20、请写出超链接的顺序或者你在初始样式中的链接方法（要求默认无下划线，鼠标经过有下划线）L-V-H-A        （:link 选择器用于选取未被访问的链接。:visited 选择器对指向已访问页面的链接设置样式，:hover 选择器用于设置鼠标指针浮动到链接上时的样式，:active选择器用于设置点击链接时的样式。）a：link { text-decoration:none; }a：hover  { text-decoration:underline;  } 21、当float和margin同时使用时，IE6的双倍边距BUG如何解决？display:inline     或者     margin-right:-3px;22、Firework中标签的居中问题的解决方法？   *{margin：0px auto;}23、请写出XHTML和CSS如何注释？XHTML：css：/*注释内容*/24、请以缩写方法写出1px直线（实线）灰色（任意灰色代码值），上面无边框的矩形边框样式.class{border:1px solid #ccc; border-top:0px;}     或者     border:1px solid #ccc; border-top:none;