前端常见问题总结

一、什么是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 \0 \\IE 8

时间: 2024-10-17 03:09:10

前端常见问题总结的相关文章

手机移动端web前端常见问题整理

移动端常见问题及解决方案 一.meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection&

前端常见问题

1.null和undefined的区别 2.谈谈性能优化问题 3.常见web安全漏洞 4.哪些操作会造成内存泄漏? 5.浏览器兼容性问题以及列举IE 与其他浏览器不一样的特性? 6.谈谈你对重构的理解 7.HTTP状态码 8.说说你对MVC和MVVM的理解以及vue和angular区别 9.说说你对语义化的理解? 10.浏览器渲染页面的过程 11.头部申明的作用 12.介绍一下你对浏览器内核的理解,常见的浏览器内核有哪些? 13.HTML5的离线储存怎么使用,工作原理能不能解释一下? 14.if

整理前端常见问题及解决方法

1. 兼容ie8圆角的解决方法:下载ie-css3.htc文件在css中加入behavior:url(ie-css3.htc);z-index:3; position:relative 即可 2. 去掉文本框的右下角:resize:none; 3. html5新属性:hidden 对于不支持html5的浏览器,加上*[hidden]{display:none;} 4. div><p>这只铅笔5元</p></div>outerHTML:包含整个标签,不仅限于标签内部

前端常见问题及引起原因(一)

JS部分: 1.引用公共模板页(该模板一般引用了其对应的JS文件)到某页面,部分函数功能不可用且控制台不报错. 查错方式:看其他引用该模板页的功能是否可用,如果其他页面可用,对比当前页面与模板页引用的js文件是否冲突:如果其他页面该功能依然不可用,则查看该功能函数是否有误. (引用JS冲突,常见的是多次JQuery库引起的冲突) 2.在同一个页面中,同样方式触发及生成的提示框,有的可以正常触发及显示,而有的只有重刷页面时才触发及显示,控制台不报错. 查错方式:看生成提示框所用的ID是否相同,若相

前端常见问题及解决方案

-webkit-tap-highlight-color 当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色.该属性可以只设置透明度.如果未设置透明度,iOS Safari使用默认的透明度.当透明度设为0,则会禁用此属性:当透明度设为1,元素在点击时不可见. -webkit-appearance -webkit-appearance:none;去除系统默认appearance的样式,常用于IOS下移除原生样式 解决Chrome在应用transit

微信----分享(第三方平台的授权分享待完善)

参考SDK-----详情百度网盘 链接:https://pan.baidu.com/s/1ejSw4A5Vi6knL8T9qVQnCQ 提取码:h8wl 微信文档 :https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 备注:第三方平台跟[非]第三方平台实现的思路有所区别 一.[非]第三方平台 实际流程: ①.在公众号设置js安全域名 ②.参考sdk,根据appId跟appsecret分别获取access_token.

h5前端项目常见问题汇总

原文作者:FrontEndZQ 原文链接:https://github.com/FrontEndZQ/HTML5-FAQ H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scal

前端面试常见问题集锦

1.页面从输入URL到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好) 2.浏览器工作原理 3.浏览器解析过程: 4.介绍一下你对浏览器内核的理解? 5.常见的浏览器内核有哪些? 6.请描述一下 cookies,sessionStorage 和 localStorage 的区别? 7.请大概描述下页面访问cookie的限制条件 8.如何实现浏览器内多个标签页之间的通信? (阿里) 9.页面可见性(Page Visibility API) 可以有哪些用途? 10.网页验证码是做什么

HTML5新特性,老生常谈——前端面试常见问题

找工作面试的时候有公司技术人员会问html5新特性,那这里就再复习一遍 1.新的文档类型 <!DOCTYPE html> 2.脚本和链接无需type <link href="css/bootstrap.css" rel="stylesheet"> <script src="js/Angular.js"></script> 3.语义化的Header 和Footer 这里通俗说下什么叫做语义化,就是:明