web前端面试题总结

最新推荐文章于 2022-04-13 11:15:35 发布

小亚美美

最新推荐文章于 2022-04-13 11:15:35 发布

阅读量1.9k

点赞数 1

分类专栏：总体归纳文章标签： web前端 javascript css html 面试题

本文链接：https://blog.csdn.net/yummy_go/article/details/50388821

版权

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

摘要由CSDN通过智能技术生成

HTML+CSS

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

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

xhtml和html有什么区别

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,margin，padding

什么是FOUC？如何避免？

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

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

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

CSS 属性选择器

优先级：！important>内联> Id>class>标签>继承

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

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

内核：Ie(Ie内核)火狐（Gecko）谷歌（webkit）Opera (Presto)

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

给float的元素添加一个display：inline或ie6写一个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元素的，使用iframe（select同级别元素）嵌套，div里嵌套iframe可以将select遮住
8.为什么没有办法定义1px左右的高度容器（IE6默认的行高（默认字体大小）造成的，使用over:hidden）