做一些面试题目(HTML部分)

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

Doctype:文档类型,一个DOCTYPE是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。

出现在代码的第一行

例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

DTD:Document Type Definition 文档类型定义

 常用的声明(DTD模式)有Strict,Transitional,Frameset

HTML5 不基于 SGML,所以不需要引用 DTD。所以声明为<!DOCTYPE html>

严格模式:浏览器根据规范呈现页面

混杂模式:在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器(比如Microsoft IE 4和Netscape Navigator 4)的行为以防止老站点无法工作。各个浏览器的混杂模式,基本就是各个浏览器的私有模式,不相互兼容。

2. 行内元素有哪些?块级元素有哪些?CSS的盒模型?

行内元素与块级函数的三个区别 

1.行内元素与块级元素直观上的区别是行内元素会在一条直线上排列,都是同一行的,水平方向排列。块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。 

3.行内元素与块级元素属性的不同,主要是盒模型属性上  行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

常用行内元素:a img input code strong br

常用块级元素:div h1-h6 form p ul li table hr

CSS的盒模型:它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框,这个框由元素的内容、内边距、边框和外边距组成。

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

1、在<head></head>加<link>引入外部css文件

2、@import方法 例

<style type="text/css">@import url(http://www.dreamdu.com/style.css);</style>

3、行内元素直接引入

link和@import区别:

1、link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

2、加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)。

3、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。 

4、使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

4. CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

CSS选择符:类选择器(.) 、 标签名选择器(div/p等)、 ID选择器(#) 、 后代选择器(派生选择器)(#ID li)、 群组选择器(*)
可以继承: 类选择器 、 标签名选择器、 后代选择器(派生选择器)、群组选择器。 除了ID的不能其他都能。
优先级算法:(即specificity值)
标签内直接定义(内联):1000
ID选择器:100
类选择器 :10
标签名选择器:1
@important优先级最高

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

1、结构层:HTML/XHTML,主要指DOM节点

2、样式层:CSS,主要是指页面渲染

3、脚本层:JS/AS,主要指页面动画效果

6. css的基本语句构成是?

选择符{

     属性:值

}

7. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?

IE/FireFox/Chrome

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

 常用的方法就是magin:x auto;

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

10. 如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?

尽量把CSS文件都集中到一个文件,减少HTTP的请求,JS也是如此。

图片采用sprites技术,将一些小图标都集中到一起,再用background:url() no-repeat -x -y(background-position)来控制

11. 你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?

原文地址:https://www.cnblogs.com/pilee/p/3561370.html