前端面试题汇总

时间 2020-01-25

标签端面试题汇总繁體版

原文原文链接

一、<!DOCTYPE>标签的定义与用法。html

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

注释：<!DOCTYPE> 标签没有结束标签！ide

二、块级元素和行内元素都有哪些?字体

块级元素:url

div-最多见的块级元素spa

dl-和dt dd搭配使用的块级元素firefox

form-交互表单设计

h1-h5各级标题3d

hr-水平分割线orm

ol-排序表单

p-段落

table-表格

ol-排序列表

内联元素:

a-锚点

b-粗体（不推荐）

br-换行

em-强调

font-字体设定（不推荐）

i-斜体

img-图片

input-输入框

lable-表格标签

select-项目选择

small-小字体文本

span-定义文本内区块

strike-中划线

strong-粗体强调

sub-上标

sup-下标

textarea-多行文本输入

tt-电传文本

u-下划线

q-短引用

三、有这么一段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>

CSS

一、介绍所知道的CSS hack技巧

CSS Hack大体有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对 IE浏览器。

类内部 Hack：好比 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等

选择器Hack：好比 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

二、介绍CSS盒模型

先说说咱们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具有这些属性。

这些属性咱们能够把它转移到咱们平常生活中的盒子（箱子）上来理解，平常生活中所见的盒子也就是能装东西的一种箱子，也具备这些属性，因此叫它盒子模式。

每一个HTML标记均可看做一个盒子；

每一个盒子都有：边界、边框、填充、内容四个属性；

每一个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；

三、CSS层叠是什么?

层叠指的是样式的优先级，当产生冲突时以优先级高的为准。
1. 开发者样式>读者样式>浏览器样式（除非使用!important标记）
2. id选择符>（伪）类选择符>元素选择符
3. 权重相同时取后面定义的样式

如下是一段经典的html，三个类名分别为模块、标题和正文。
<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>
大部分html页面均可以由这种结构嵌套或者累加而成。