HTML＋CSS 总结

(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;

}

还可以用flex自适应。

(3) 将样式表加载到文档的方式

（1）外部样式表

（2）嵌入样式表

<head>

<style>

/* style rules go here */

</style>

</head>

（3）内联样式

<h1 style=‘color:red;’> Inrroduction! </h1>

(4) 外部引用CSS中 link与@import的区别

@import url("http://home/css/v2.0.css?t=20070518.css");

</style>

差别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之间的层次、关系和相互影响。

　　每个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版本。

（7）你真的了解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>	客户端脚本

(10)行内元素与块级函数的三个区别

1.行内元素与块级元素直观上的区别行内元素会在一条直线上排列，都是同一行的，水平方向排列；块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上，行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

行内元素转换为块级元素

display:block (字面意思表现形式设为块级)

（11）

HTML与XHTML——二者有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

区别：
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的XML标记都必须合理嵌套
4.所有的属性必须用引号""括起来
5.把所有<和&特殊符号用编码表示
6.给所有属性赋一个值
7.不要在注释内容中使“--”
8.图片必须有说明文字

（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.利用继承,less,sass.

4.抽离css，将css分层，多用缓存，少用下载。

5，将css放在head上面，减少repaint和reflow。

6，不用表达式的css

7 避免使用通配符

8 避免层级过度限制的css，比如在id和class前面加入标签做限制。

9尽量使用最具体的类别、避免后代选择器、属于标签类别的规则永远不要包含子选择器

（17）　　你知道什么是CSS预处理么？

有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处器（CSS Preprocessor）”。

(18)　　关于浮动的原理和工作方式，你可以描述一下么

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留.

(19)　　display:none和visibility:hidden的区别？

display:none  　　　　　隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 　　 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

(20)　　CSS中 link 和@import 的区别是？

(1) link属于HTML标签，而@import是CSS提供的; 
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题; 
(4) link方式的样式的权重 高于@import的权重.

(21)　　position的absolute与fixed共同点与不同点

共同点：
1.改变行内元素的呈现方式，display被置为block；
2.让元素脱离文档流，不占据空间；
3.默认会覆盖到非定位元素上

不同点：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。fixed
当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

(22)　　CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

     　　1.id选择器（ # myid）
        2.类选择器（.myclassname）
        3.标签选择器（div, h1, p）
        4.相邻选择器（h1 + p）
        5.子选择器（ul < li）
        6.后代选择器（li a）
        7.通配符选择器（ * ）
        8.属性选择器（a[rel = "external"]）
        9.伪类选择器（a: hover, li: nth - child）

可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
    
优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
   !important >  id > class > tag  
   important 比 内联优先级高


CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled  :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

(23)　　列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

  block 　　　　　　　　 像块类型元素一样显示。
  inline 　　　　　　　　缺省值。象行内元素类型一样显示。
  inline-block 　　　　 象行内元素一样显示，但其内容象块类型元素一样显示。
  list-item 　　　　　　象块类型元素一样显示，并添加样式列表标记。
  absolute 　　　　　　 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 
  fixed 　　　　　　　　（老IE不支持）
        　　　　　　　　生成绝对定位的元素，相对于浏览器窗口进行定位。 
  relative 　　　　　　生成相对定位的元素，相对于其正常位置进行定位。 
  static  　　　　　　 默认值。没有定位，元素出现在正常的流中
  　　　　　　　　　　　　(忽略 top, bottom, left, right z-index 声明）。
  inherit 　　　　　　 规定从父元素继承 position 属性的值。

（24）　　CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器  多背景 rgba 
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image

（25）　　对BFC规范的理解？

 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。   
（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）a

（26）　　解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

（27）　　说说你对语义化的理解？

1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

（28）　　Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 
（2）、严格模式的排版和 JS 运作模式，是以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

　　你知道多少种Doctype文档类型？

 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
 HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
 XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
  Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，
 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

（29）　　常见兼容性问题？

A:　　png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

B:　　浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

C:　　IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 
　　　  浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
  　　 #box{ float:left; width:10px; margin:0 0 0 100px;} 
 　　  这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ： _display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

D:　　渐进识别的方式，从总体中逐渐排除局部。 
  　　首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 
  　　接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
  　　//css
      .bb{
        　　　padding: 0px; color: rgb(163, 21, 21);">#f1ee18;　　　　/*    所有识别       */
      　　　　.padding: 0px; color: rgb(163, 21, 21);">#00deff\9; 　　/* \9 IE6、7、8识别  */
      　　　　+padding: 0px; color: rgb(163, 21, 21);">#a200ff;　　　　/*  + IE6、7识别    */
      　　　　_padding: 0px; color: rgb(163, 21, 21);">#1e0bd1;　　　　/*  _ IE6识别       */ 
      } 

F:　　IE下,可以使用获取常规属性的方法来获取自定义属性,
   　　也可以使用getAttribute()获取自定义属性;
   　　Firefox下,只能使用getAttribute()获取自定义属性. 
   　　解决方法:统一通过getAttribute()获取自定义属性.


G:　　(1)IE下,event对象有x,y属性,但是没有pageX,pageY属性; 
  　　Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
　　　　解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
　　　　var mx = event.x?event.x:event.pageX;

　　　　(2)attachEvent()||addEventListener()

　　　　 IE下支持attachEvent()方法，而Firefox下支持addEventListener()方法。
　　　　attachEvent("eventType",fun)
　　　　eventType是指事件类型,fun是指调用事件的函数
　　　　addEventListener("eventType",fun,flag)
　　　　addEventListener方法的前两个参数和attachEvent方法一样，flag参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说，第三个参数应该为false（假）。

　　　　(3)keyCode||which||charCode

　　　　IE下支持keyCode，不支持which，charCode。
　　　　Firefox下支持keyCode，除功能键外，其他键值始终为0，Firefox下支持which和charCode属性
　　 在函数调用时传递event

　　　 function test_event(e){
　　 var e=e||event;
　　 currKey=e.keyCode||e.which||e.charCode;
　　document.getElementById("key").value = currKey;
　　}

　　在函数调用时不传递event

　　　　function test_event(e){
　　　　var e=arguments.callee.caller.arguments[0]||event;
　　　　currKey=e.keyCode||e.which||e.charCode;
　　　　document.getElementById("key").value = currKey;
　　　}

（30）:　　Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 
  　　可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

（31）： 　　超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-O-E :  a:link {} a:visited {} a:hover {} a:active {}


（32）:　　怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。
　　　为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。

(33):   上下margin重合问题
　　ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
　　解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

(34):　　解释下浮动和它的工作原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
   这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
   给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
   该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

　浮动元素引起的问题和解决办法？

浮动元素引起的问题：

（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

清除浮动的几种方法：

1，额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）
2，使用after伪类
#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
    }
3,浮动外部元素
4,设置`overflow`为`hidden`或者auto

(35): 　　DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

（1）创建新节点
     createDocumentFragment()    //创建一个DOM片段
     createElement()   　　　　　　//创建一个具体的元素
     createTextNode()   　　　　　 //创建一个文本节点
（2）添加、移除、替换、插入
      appendChild()
      removeChild()
      replaceChild()
      insertBefore(A, B) 　　　　　　　　//在已有的子节点A前插入一个新的子节点B
（3）查找
      getElementsByTagName()    //通过标签名称
      getElementsByName()    　　//通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
      getElementById()    　　　　//通过元素Id，唯一性

(36):　　html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

* HTML5 现在已经不是 SGML(标准通用标记语言) 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
* 拖拽释放(Drag and drop) API 
  语义化更好的内容标签（header,nav,footer,aside,article,section）
  音频、视频API(audio,video)
  画布(Canvas) API
  地理(Geolocation) API
  本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  sessionStorage 的数据在浏览器关闭后自动删除
  表单控件，calendar、date、time、email、url、search  
  新的技术 webworker, websocket, Geolocation
* 移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：
* IE8/IE7/IE6支持通过document.createElement方法产生的标签，
  可以利用这一特性让这些浏览器支持HTML5新标签，
  浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]--> 
如何区分： DOCTYPE声明\新增的结构元素\功能元素

(37):　　iframe的优缺点？

1.<iframe>优点：
    解决加载缓慢的第三方内容如图标和广告等的加载问题
    Security sandbox
    并行加载脚本

2.<iframe>的缺点：
    iframe会阻塞主页面的Onload事件；
    即时内容为空，加载也需要时间
    没有语意

(38)：如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

(39)：你如何对网站的文件和资源进行优化？请说出三种减少页面加载时间的方法。

 文件合并
 文件最小化/文件压缩
 使用 CDN 托管
 缓存的使用（多个域名来提供缓存）

 1.优化图片 
 2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方） 
 3.优化CSS（压缩合并css，如margin-top,margin-left...) 
 4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。） 
 5.标明图片的高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。） 
 6.减少http请求（合并文件，合并图片）。

(40)：　 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

 FOUC - Flash Of Unstyled Content 文档样式闪烁
 <style type="text/css" media="all">@import "../fouc.css";</style> 
而引用CSS文件的@import就是造成这个问题的罪魁祸首。
IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，
因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。

posted on 2015-09-27 19:28 HGonlyWJ 阅读(311) 评论(0) 编辑收藏举报

HTML＋CSS 总结

HTML与XHTML——二者有什么区别

(20) CSS中 link 和@import 的区别是？

(22) CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

(23) 列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

（24） CSS3有哪些新特性？

（25） 对BFC规范的理解？

你知道多少种Doctype文档类型？

（29） 常见兼容性问题？

(35): DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

(39)：你如何对网站的文件和资源进行优化？请说出三种减少页面加载时间的方法。

(20)　　CSS中 link 和@import 的区别是？

(22)　　CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

(23)　　列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

（24）　　CSS3有哪些新特性？

（25）　　对BFC规范的理解？

　　你知道多少种Doctype文档类型？

（29）　　常见兼容性问题？

(35): 　　DOM操作——怎样添加、移除、移动、复制、创建和查找节点。