Web前端面试题

Web前端面试题
Web前端面试题

[HTML&& CSS]

1. Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

Doctype声明位于文档中的最前面的位置,处于标签之前。此标签可告知浏览器文档使用哪种HTML 或XHTML 规范。该标签可声明三种DTD 类型,分别表示严格版本、过渡版本以及基于框架的HTML 文档。

当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式和混杂模式(quirks mode)。在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器(比如Microsoft IE 4和Netscape Navigator 4)的行为以防止老站点无法工作。

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。对于HTML 4.01文档,包含严格DTD的DOCTYPE 常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

2. 行内元素有哪些?块级元素有哪些?

行内元素有:a b span I bem img input select strong

块级元素有:div ul ol lidl dt dd h1 h2 h3 h4…p

3. 画出CSS的盒模型?

盒模型:margin borderpadding width

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

两者区别:加载顺序的差别。当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:

main.css

———————-

@import“sub1.css”;

@import“sub2.css”;

这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。

5. 前端页面由哪三层构成,分别是什么?作用是什么?

网页分成三个层次,即:结构层、表示层、行为层。

网页的结构层(structurallayer)由HTML 或XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P标签表达了这样一种语义:“这是一个文本段。”

网页的表示层(presentationlayer)由CSS 负责创建。CSS 对“如何显示有关内容”的问题做出了回答。网页的行为层(behaviorlayer)负责回答“内容应该如何对事件做出反应”这一问题。这是Javascript 语言和DOM 主宰的领域。

7. 你做的页面通常在哪些流览器测试过?

8. 如何居中一个浮动元素?

设置容器的浮动方式为相对定位,然后确定容器的宽高,比如宽500 高300 的层,然后设置层的外边距。div{Width:500px;height:300px;Margin: -150px 0 0-250px;position:relative;left:50%;top:50%;}

9. 有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况!

HTML5标签的改变:

,
, ,
下载浏览速度快。被更多的用户访问。推广时被更多的机器访问。更少的代码,易于维护,宽带要求降低,降低成本,更容易被搜索引擎搜索到。改版方便,不需要改变内容。提供打印页面不用复制。 10.怎样解决超链接访问过后hover样式就不出现的问题。 改变CSS属性排列的顺序L-V-H-A(link ,visted,hover,active.)

前端面试题含答案

前端开发面试知识点大纲: HTML&CSS : 对Web 标准的理解、浏览器内核差异、兼容性、hack 、CSS 基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript : 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、 异步装载回调、模板引擎、Nodejs 、JSON 、ajax 等。 其他: HTTP 、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO 、UED 、架构、职业生涯 作为一名前端工程师,无论工作年头长短都应该必须掌握的知识点: 1、DOM 结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 2、DOM 操作 ——如何添加、移除、移动、复制、创建和查找节点等。 3、事件 —— 如何使用事件,以及IE 和标准DOM 事件模型之间存在的差别。 4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET 请求、怎样检测错误。 5、严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。 6、盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型 7、块级元素与行内元素 —— 怎么用CSS 控制它们、以及如何合理的使用它们 8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。 9、HTML 与XHTML ——二者有什么区别,你觉得应该使用哪一个并说出理由。 10、JSON —— 作用、用途、设计结构。 产品部-前端面试题-答案 产品部 Beijing

HTML 一、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1)、 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型规范来解析这个文档。 (2)、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。 (3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 (4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 二、行内元素有哪些?块级元素有哪些?空(void)元素有那些? (1)CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。 (2)行内元素有:a b span img input select strong(强调的语气)块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p (3)知名的空元素:


鲜为人知的是: 三、link 和@import 的区别是? (1)link属于XHTML标签,而@import是CSS提供的; (2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载; (3)import只在IE5以上才能识别,而link是XHTML标签,无兼容问题; (4)link方式的样式的权重高于@import的权重. 四、浏览器的内核分别是什么? * IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto,现为Blink;

Web前端笔试115道题(带答案及解析)

Web前端笔试115道题(带答案及解析) 1、html5为什么只需要写<!doctype html>? 答:html5不是基于sgml(标准通用标记语言),不需要对dtd 文件进行引用,但是需要doctype来规范浏览器的行为, 否则浏览器将开启怪异模式,而html4.01基于sgml,需要引入dtd,才能告知浏览器文档使用的文档类型 2、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素有:a b span img input select strong(强调的语气) 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p 知名的空元素: <br> <hr> <img> <input> <link>

<meta> 鲜为人知的是: <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr> 3、页面导入样式时,使用link和@import有什么区别? 两者都是外部引用CSS的方式,但是存在一定的区别: 区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载; @import需要页面网页完全载入以后加载。 区别3:link是XHTML标签,无兼容问题;@import 是在CSS2.1提出的,低版本的浏览器不支持。 区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。 补充:@import最优写法 @import的写法一般有下列几种:

web前端开发面试题汇总

1天前653浏览 前端面试题汇总 HTML&CSS 1.常用那几种浏览器测试有哪些内核(LayoutEngine) (Q1)浏览器:IE,Chrome,FireFox,Safari,Opera。 (Q2)内核:Trident,Gecko,Presto,Webkit。 2.说下行内元素和块级元素的区别行内块元素的兼容性使用 (IE8以下) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置 line-height),margin上下无效,padding上下无效。 块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。 兼容性:display:inline-block;display:inline;zoom:1; 3.清除浮动有哪些方式比较好的方式是哪一种 (1)父级div定义height。 (2)结尾处加空div标签clear:both。 (3)父级div定义伪类:after和zoom。 (4)父级div定义overflow:hidden。 (5)父级div定义overflow:auto。 (6)父级div也浮动,需要定义宽度。 (7)父级div定义display:table。 (8)结尾处加br标签clear:both。 总结:比较好的是第3种方式,简洁方便。 常用的属性有哪些分别有什么作用 常用的属性:box-sizing:content-boxborder-boxinherit; 作用:content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和

边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 作用标准模式与兼容模式各有什么区别 (Q1)告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 (Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 为什么只需要写 HTML5不基于SGML,因此不需要对DTD进行引用;但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。而基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。 7.页面导入样式时,使用link和@import有什么区别 (1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS,定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS; (2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载; (3)import是提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题。 总之,link要优于@import。 8.介绍一下你对浏览器内核的理解 IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto ,现为Blink; 内核主要分成两部分: 渲染引擎(layoutengineer或RenderingEngine)和JS引擎 渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。 所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

初级Web前端工程师面试必看面试题(HTML+CSS+JavaScript)

初级Web前端工程师面试必看面试题 (HTML+CSS+JavaScript) 作者:来源于网络发布时间:07月20日 很多初级前端工程师去面试的时候可能不知道考官会问些什么,提前做好准备会为你的面试加分,极客学院整理出了一些必看的初级工程师面试考题,希望会大家有所帮助。 1.对WEB标准以及W3C的理解与认识? 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css 和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性; 2.XHTML和HTML有什么区别? HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 3.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

用于声明文档使用那种规范(HTML/XHTML)一般为严格过度基于框架的html文档 加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug 4.行内元素有哪些?块级元素有哪些?CSS的盒模型? 块级元素:div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css盒模型:内容,border ,margin,padding 5.CSS引入的方式有哪些? link和@import的区别是? 内联内嵌外链导入 区别:同时加载 前者无兼容性,后者CSS2.1以下浏览器不支持 Link 支持使用javascript改变样式,后者不可 6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高? 标签选择符类选择符id选择符 继承不如指定Id>class>标签选择 后者优先级高

web前端面试题大全

1Doctype作用?严格模式与混杂模式如何区分?它们有何意义? HTML5 为什么只需要写 ? 行内元素有哪些?块级元素有哪些?空(void)元素有那些? 页面导入样式时,使用link和@import有什么区别? 介绍一下你对浏览器内核的理解? 常见的浏览器内核有哪些? html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5? 简述一下你对HTML语义化的理解? HTML5的离线储存怎么使用,工作原理能不能解释一下? 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢? 请描述一下 cookies,sessionStorage 和 localStorage 的区别? iframe有那些缺点? Label的作用是什么?是怎么用的?(加 for 或包裹) HTML5的form如何关闭自动完成功能? 如何实现浏览器内多个标签页之间的通信? (阿里) webSocket如何兼容低浏览器?(阿里) 页面可见性(Page Visibility)API 可以有哪些用途? 如何在页面上实现一个圆形的可点击区域? 实现不使用 border 画出1px高的线,在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。 网页验证码是干嘛的,是为了解决什么安全问题? tite与h1的区别、b与strong的区别、i与em的区别? 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? CSS选择符有哪些?哪些属性可以继承? CSS优先级算法如何计算? CSS3新增伪类有那些? 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中? display有哪些值?说明他们的作用。 position的值relative和absolute定位原点是? CSS3有哪些新特性? 请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景? 用纯CSS创建一个三角形的原理是什么? 一个满屏品字布局如何设计? 常见兼容性问题? li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法? 经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧? 为什么要初始化CSS样式。 absolute的containing block计算方式跟正常流有什么不同? CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?

相关文档
最新文档