首页 > 代码库 > 一些前端面试题

一些前端面试题

2024-07-05 16:04:34   230人阅读

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，请挑毛病：

<P>&nbsp;&nbsp;哥写的不是HTML，是寂寞。<br><br>&nbsp;&nbsp;我说：<br>不要迷恋哥，哥只是一个传说

考点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:
<p>哥写的不是HTML，是寂寞。<p>我说：<br> 不要迷恋哥，哥只是一个传说

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

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

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

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

<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>，是寂寞。
<p><cite> 我</cite>说：<br> <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相关

  1. HTTP协议的状态消息都有哪些？(如200、302对应的描述)
  2. AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?
  3. 同步和异步的区别? 
  4. 简述JavaScript封装。
  5. JavaScript继承有哪两种形式形式，进行描述。


联系
我们