一些前端面试题
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> 哥写的不是HTML,是寂寞。<br><br> 我说:<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相关
- HTTP协议的状态消息都有哪些?(如200、302对应的描述)
- AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?
- 同步和异步的区别?
- 简述JavaScript封装。
- JavaScript继承有哪两种形式形式,进行描述。