web前端面试题总结

本文汇总了Web前端面试的各类重点问题,涵盖HTML、CSS、JavaScript、DOM操作、浏览器兼容性、性能优化等多个方面,深入解析了Web标准、CSS盒模型、事件处理、Ajax、闭包等关键概念,旨在帮助开发者全面准备前端面试。
摘要由CSDN通过智能技术生成

HTML+CSS

什么是web标准,起到些什么作用,如何理解W3C组织制定的标准

(1)web标准规范要求,书写标签必须闭合、标签小写不乱嵌套,可提高搜索机器人对网页内容的搜索几率。--- SEO
(2)建议使用外链cssjs脚本,从而达到结构与行为、结构与表现的分离,提高页面的渲染速度,能更快地显示页面的内容。
(3)样式与标签的分离,更合理的语义化标签,使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件, 从而降低维护成本、改版更方便
(4)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性
遵循w3c制定的web标准,能够使用户浏览者更方便的阅读,使网页开发者之间更好的交流。

 

xhtmlhtml有什么区别

HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,更严谨更纯净的 HTML 版本(可扩展超文本标签语言
最主要的不同:
XHTML
元素必须被正确地嵌套,必须被关闭,标签名必须用小写字母,必须拥有根元素(<html>根元素中)。

 

Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 
DOCTYPE
(是Document Type文档类型的简写)是一组机器可读的规则,它们指示(X)HTML文档中允许有什么,不允许有什么,DOCTYPE正是用来告诉浏览器使用哪种DTD(文档类型定义),一般放在(X)HTML文档开头声明)用以告诉其他人这个文档的类型风格。

区别:严格模式是浏览器根据web标准去解析页面,是一种要求严格的DTD,不允许使用任何表现层的语法,如<br/>,混杂模式则是一种向后兼容的解析方法。

触发:根据不同的DTD触发,如果没有声明,那么默认为混杂模式。

 

行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css
盒模型:内容,border,marginpadding

 

什么是FOUC?如何避免?

Flash Of Unstyled Content:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再重新显示文档,造成页面闪烁。解决方法:把样式表放到文档的head

 

CSS引入的方式有哪些? link@import的区别是?

<link href="aa.css" rel="stylesheet"/>
内联样式(在 HTML元素内部)内嵌(位于<head>标签内部)外链导入
区别link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUC

link无兼容性,@import CSS2.1以下浏览器不支持
Link
支持使用javascript改变样式,后者不可

 

CSS 属性选择器

优先级:!important>内联> Id>class>标签>继承

前端页面:结构层 Html表示层 CSS行为层 js

css的基本语句构成:选择器{ 属性1:1;属性2:2;……}

内核:Ie(Ie内核)火狐(Gecko谷歌(webkitOpera (Presto)

 

写出几种IE6 BUG的解决方法
1.
双边距BUG当一个盒子右浮动的同时有一个向右的margin-right的时候,IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了,而且都有同方向的margin,则只有最靠近浮动方向的元素有双边距bug

float的元素添加一个displayinlineie6写一个hack,其值是正常值的一半,

2. 3像素问题使用单float引起的后面的元素也加上float样式

3. ie6如果不设置任何父标签a:hover{}ie6就会停止对a的子标签hover解读

父标签a:hover{}添加一些样式

4.Ie6/ie7如果只是对一个子元素设定z-index,这个值再高,也不能覆盖与父元素同级的其他元素。所以现在通用的解决方法是对子元素的父元素也定义一个z-index的值

5. PNG图片有灰底的 使用js代码(网上有)或者使用gif图片
6.
不支持Min-height最小高度利用IE6不识别!important来实现(height:auto!important; 

height:500px; min-height:500px; 
7.
IE6下,浏览器将select元素视为窗口级元素,这时DIV无论z-index设置的多高都是无法遮住select元素的,使用iframeselect同级别元素)嵌套,div里嵌套iframe可以将select遮住
8.
为什么没有办法定义1px左右的高度容器(IE6默认的行高(默认字体大小)造成的,使用over:hidden

9. 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*/

}

标签上title与alt属性的区别是什么?
Alt
当图片不显示是用文字代表。
Title
为该属性提供信息

 

.解释css sprites,如何使用。
Css
精灵是网页图片应用处理方式把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量

浏览器解析CSS的两种模式

标准模式(strict modeW3C标准解析执行代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值