一些前端面试题

1.HTML 标签定义和用法

HTML <!DOCTYPE> 标签定义和用法

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或
XHTML 规范。

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

以下面这个 <!DOCTYPE> 标签为例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 在上面的声明中，声明了文档的根元素是
html，它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD
中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。

提示和注释：注释：<!DOCTYPE> 标签没有结束标签！

HTML HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

2.块级元素和行内元素都有哪些？

块元素(block element)
* address - 地址
*
blockquote - 块引用
* center - 举中对齐块
* dir -
目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl -
定义列表
* fieldset - form控制组
* form -
交互表单
* h1 - 大标题
* h2 - 副标题
* h3
- 3级标题
* h4 - 4级标题
* h5 - 5级标题
*
h6 - 6级标题
* hr - 水平分隔线
* isindex - input
prompt
* menu - 菜单列表
* noframes -
frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript -
）可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p -
段落
* pre - 格式化文本
* table - 表格
*
ul - 非排序列表

行内元素

* a - 锚点
* abbr - 缩写
* acronym -
首字
* b - 粗体(不推荐)
* bdo - bidi
override
* big - 大字体
* br - 换行
*
cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn -
定义字段
* em - 强调
* font -
字体设定(不推荐)
* i - 斜体
* img - 图片
*
input - 输入框
* kbd - 定义键盘文本
* label -
表格标签
* q - 短引用
* s - 中划线(不推荐)
*
samp - 定义范例计算机代码
* select - 项目选择
* small -
小字体文本
* span - 常用内联容器，定义文本内区块
* strike -
中划线
* strong - 粗体强调
* sub - 下标
*
sup - 上标
* textarea - 多行文本输入框
* tt -
电传文本
* u - 下划线
* var - 定义变量

3.挑错误

有这么一段HTML，请挑毛病：

哥写的不是HTML，是寂寞。   我说： 不要迷恋哥，哥只是一个传说

考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0
strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合,
标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。

这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。

考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp

考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

上面全答对，你就能拿到100分。

对原题改进的结果：
html:
哥写的不是HTML，是寂寞。我说： 
不要迷恋哥，哥只是一个传说

xhtml:
哥写的不是HTML，是寂寞。我说： 
不要迷恋哥，哥只是一个传说

加分：合理的用语义化标签
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。

哥写的不是HTML，是寂寞。
我说： 
<q>不要迷恋哥，哥只是一个传说</q>

我觉得这就够了，如果再进一步，“我”用cite标注，“HTML”
用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。

哥写的不是<abbr title=”Hyper Text Markup
Language”>HTML</abbr>，是寂寞。
<cite>
我</cite>说： <q>不要迷恋哥，哥只是一个传说</q>

4.介绍所知道的CSS hack技巧(如：_， *， +， \9， !important
之类)

 1 <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"

 2

 3 "http://www.w3.org/TR/html4/strict.dtd">

 4 <htmllanghtmllang="en">

 5 <head>

 6 <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8">

 7 <title>CSSBrowserHacks</title>

 8 <styletypestyletype="text/css">

 9 bodyp

10 {

11 display:none;

12 }

13 /*Opera*/

14 html:first-child#opera

15 {

16 display:block;

17 }

18 /*IE7*/

19 html>body#ie7

20 {

21 *display:block;

22 }

23 /*IE6*/

24 body#ie6

25 {

26 _display:block;

27 }

28 /*Firefox1-2*/

29 body:empty#firefox12

30 {

31 display:block;

32 }

33 /*Firefox*/

34 @-moz-documenturl-prefix()

35 {

36 #firefox{display:block;}

37 }

38 /*Safari*/

39 @mediascreenand(-webkit-min-device-pixel-ratio:0)

40 {

41 #safari{display:block;}

42 }

43 /*Opera*/

44 @mediaalland(-webkit-min-device-pixel-ratio:10000),

45 notalland(-webkit-min-device-pixel-ratio:0)

46 {

47 head~body#opera{display:block;}

48 }

49 </style>

50 </head>

51

52 <body>

53 <pidpid="opera">我来自Opera7.2-9.5</p>

54 <pidpid="safari">我是神奇的Safari</p>

55 <pidpid="firefox">我来自Firefox</p>

56 <pidpid="firefox12">我是FF前辈Firefox1-2</p>

57 <pidpid="ie7">我是囧IE7</p>

58 <pidpid="ie6">我是残品IE6</p></body>

59 </html>

1.区别IE和非IE浏览器

#tip{
background:blue;/*非IE背景藍色*/
background:red\9;/*IE6、IE7、IE8背景紅色*/
}

2.区别IE6,IE7,IE8,FF

【区别符号】：「\9」、「*」、「_」

【示例】：

#tip{
background:blue;/*Firefox背景变蓝色*/
background:red\9;/*IE8背景变红色*/
*background:black;/*IE7背景变黑色*/
_background:orange;/*IE6背景变橘色*/
}

【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、GoogleChrome、Safari等)。

5.一些CSS兼容性问题（偷懒。。。转别人整理的东西。。）

6.JS相关

HTTP协议的状态消息都有哪些？(如200、302对应的描述)

AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?

同步和异步的区别?

简述JavaScript封装。

JavaScript继承有哪两种形式形式，进行描述。