标签：
(1) <img>元素的alt和title有什么异同？
这两个属性是有些重复了。在不同浏览器里面表现有些不同。在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。
(2) 编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展。
body {
width: 960px;
margin: 0 auto; //相当与居中显示body
}
第一种
#right {
float:right;
width:200px;
}
#left {
marin-right:200px;
}
第二种
#right{
position:absolute;
right:0;
width:200px;
}
#left{
marin-right:200px;
}
(3) 将样式表加载到文档的方式
<link rel="stylesheet" type="text/css" href="style.ss">
<head>
<style>
/* style rules go here */
</style>
</head>
<h1 style=‘color:red;’> Inrroduction! </h1>
(4) 外部引用CSS中 link与@import的区别
<style type="text/css" media="screen">
@import url("http://home/css/v2.0.css?t=20070518.css");
</style>
<link rel="stylesheet" href="test.css" type="text/css" media="all" />
差别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可以控制的。
差别5：@import可以在CSS中再次引入其他样式表
比如可以创建一个主样式表，在主样式表中再引入其他的样式表，
从上面的分析来看，还是使用link标签比较好。
（5）盒子模型
W3C 组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。
盒模型主要定义四个区域：
内容(content)、边框距(padding)、边界(border)和边距(margin)。
对于初学者，经常会搞不清楚 margin，background-color，background- image，padding，content，border之间的层次、关系和相互影响。
这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。
每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。
IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。
关于盒模型，还有以下几点需要注意：
对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩，
例如：有上下2个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2个元素的间距为20px（2个边界值中较大的值）。
块级元素（display： block）
每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始，标题、段落、表格、层、body等都是块级元素。
块级元素只能作为其他块级元素的子元素，而且需要一定的条件。
内联元素
例如<a>、<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。
内联元素（display：inline）内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。
浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。
如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不会被显示，此点在采取层布局的时候需特别注意。
边界值可为负，其显示效果各浏览器可能不相同，填充值不可为负。
边框默认的样式（border-style）为不显示（none）。
(6)<!DOCTYPE>标签的定义与用法
<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML版本。
有这么一段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>
（8）CSS层叠是什么？介绍一下
层叠指的是样式的优先级，当产生冲突时以优先级高的为准。
1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）
2. id选择符>（伪）类选择符>元素选择符
3. 权重相同时取后面定义的样式
以下是一段经典的html，三个类名分别为模块、标题和正文。
<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>
大部分html页面都可以由这种结构嵌套或者累加而成
|
块级元素列表 |
|
|
<address> |
定义地址 |
|
<caption> |
定义表格标题 |
|
<dd> |
定义列表中定义条目 |
|
<div> |
定义文档中的分区或节 |
|
<dl> |
定义列表 |
|
<dt> |
定义列表中的项目 |
|
<fieldset> |
定义一个框架集 |
|
<form> |
创建 HTML 表单 |
|
<h1> |
定义最大的标题 |
|
<h2> |
定义副标题 |
|
<h3> |
定义标题 |
|
<h4> |
定义标题 |
|
<h5> |
定义标题 |
|
<h6> |
定义最小的标题 |
|
<hr> |
创建一条水平线 |
|
<legend> |
元素为 fieldset 元素定义标题 |
|
<li> |
标签定义列表项目 |
|
<noframes> |
为那些不支持框架的浏览器显示文本，于 frameset 元素内部 |
|
<noscript> |
定义在脚本未被执行时的替代内容 |
|
<ol> |
定义有序列表 |
|
<ul> |
定义无序列表 |
|
<p> |
标签定义段落 |
|
<pre> |
定义预格式化的文本 |
|
<table> |
标签定义 HTML 表格 |
|
<tbody> |
标签表格主体（正文） |
|
<td> |
表格中的标准单元格 |
|
<tfoot> |
定义表格的页脚（脚注或表注） |
|
<th> |
定义表头单元格 |
|
<thead> |
标签定义表格的表头 |
|
<tr> |
定义表格中的行 |
|
行内元素列表 |
|
|
<a> |
标签可定义锚 |
|
<abbr> |
表示一个缩写形式 |
|
<acronym> |
定义只取首字母缩写 |
|
<b> |
字体加粗 |
|
<bdo> |
可覆盖默认的文本方向 |
|
<big> |
大号字体加粗 |
|
<br> |
换行 |
|
<cite> |
引用进行定义 |
|
<code> |
定义计算机代码文本 |
|
<dfn> |
定义一个定义项目 |
|
<em> |
定义为强调的内容 |
|
<i> |
斜体文本效果 |
|
<img> |
向网页中嵌入一幅图像 |
|
<input> |
输入框 |
|
<kbd> |
定义键盘文本 |
|
<label> |
标签为 input 元素定义标注（标记） |
|
<q> |
定义短的引用 |
|
<samp> |
定义样本文本 |
|
<select> |
创建单选或多选菜单 |
|
<small> |
呈现小号字体效果 |
|
<span> |
组合文档中的行内元素 |
|
<strong> |
语气更强的强调的内容 |
|
<sub> |
定义下标文本 |
|
<sup> |
定义上标文本 |
|
<textarea> |
多行的文本输入控件 |
|
<tt> |
打字机或者等宽的文本效果 |
|
<var> |
定义变量 |
|
可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素 |
|
|
<button> |
按钮 |
|
<del> |
定义文档中已被删除的文本 |
|
<iframe> |
创建包含另外一个文档的内联框架（即行内框架） |
|
<ins> |
标签定义已经被插入文档中的文本 |
|
<map> |
客户端图像映射（即热区） |
|
<object> |
object对象 |
|
<script> |
客户端脚本 |
行内元素与块级函数的三个区别
1.行内元素与块级元素直观上的区别行内元素会在一条直线上排列，都是同一行的，水平方向排列；块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同，主要是盒模型属性上，行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
行内元素转换为块级元素
display:block (字面意思表现形式设为块级)
（11）xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素
（12）前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
（13）你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)
（14）描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一。
（15）浏览器的标准模式和怪异模式
要想写出跨浏览器的CSS，必须知道浏览器解析CSS的两种模式：标准模式(strict mode)和怪异模式(quirks mode)。
所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。
(16)CSS的时候有考虑过CSS的性能么
关于CSS的优化工作主要从两个方面着手
(a)网络性能：把CSS写到字节数最少，加快下载速度，自然可以让页面渲染的更快一些.
(b)语法性能：同样都能实现某些效果，但并不是所有的方式效果都相同，我们看过不少关于JavaScript方面的语法优化知识，其实CSS里面也有一些.
1.css压缩，把空白和换行删除。在线工具，gzip。
2.合写CSS比如font，background，border等
3.利用继承
4.抽离css，将css分层，多用缓存，少用下载。
5，将css放在head上面，减少repaint和reflow。
6，不用表达式的css
7 避免使用通配符
8 避免层级过度限制的css，比如在id和class前面加入标签做限制。
9尽量使用最具体的类别、避免后代选择器、属于标签类别的规则永远不要包含子选择器
有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处器（CSS Preprocessor）”。
(18)关于浮动的原理和工作方式，你可以描述一下么
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留.
标签：
原文地址：http://www.cnblogs.com/hgonlywj/p/4842601.html
