h5、css3面试题

**1、问答知道的网页制作会用到的图片格式有哪些？
Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

2、问答1.SGML（标准通用标记语言）和HTML（超文本标记语)
解析：①HTML是SGML的一个实例，它的DTD作为标准被固定下来，因此，HTML不能作为定义其它置标语言的元语言。XML是SGML的一个子集，严格地讲，XML也还是SGML。与HTML不同的是，XML有DTD，因而也可以象SGML那样，作为元语言，来定义其它文件系统，或称其它置标语言。如果把置标语言分为元置标语言和实例置标语言的话，SGML和XML都是元置标语言，而HTML和由XML派生的XHTML都是实例置标语言。②SGML(standard general markup language)是一种在WEB发明之前就已存在的使用标记来描述文档资料的通用语言，它是一种定义标记语言的元语言，HTML和XML都是由SGML发展过来的.HTML(HyperText Markup Language)是SGML定义下的一个描述性的语言，是SGML的一个应用，它不能用来定义新的应用，HTML，用于一些Internet的短期的数据.HTMI文档格式非常松散，导致解析的复杂性增加，也导致了不同浏览器浏览的不同.XML(extend MarkUp Lanuage)是SGML的一个简化版本，是SGML的一个子集，严格意义上讲，XML就是SGML.如果一些数据要长期使用，并且要更多的一些结构，XML将更好.XML比HTML严格，如果出现语法错误，浏览器将不发解析显示

③ 标准答案：

SGML（标准通用标记语言）是一个标准，告诉我们怎么去指定文标记。他是只描述文档标记应该是怎么样的元语言，HTML是被用SGML描述的标记语言。因此利用SGML创建了HTML参照和必须共同遵守的DTD，你会经常在HTML页面的头部发现“DOCTYPE”属性，用来定义用于解析目标DTD“!DOCTYPE html PUBLIC ‘-//W3C//DTDHTML 4.01//EN’ ‘http://www.w3.org/TR/html4/strict.dtd’"现在解析SGML是一件痛苦的事情，所以创建了XML使事情更好。XML使用了SGML，例如：在SGML中你必须使用起始和结束标签，但是在XML你可以有自动关闭的结束标签。XHTML创建于XML，他被使用在HTML4.0中。你可以参考

下面代码片段中展示的XML DTD“Q!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN’‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd’>"

总之，SGML是所有类型的父类，较旧的HTML利用SGML，HTML4.0使用派生自XML的XHTML。

3、你对CSS中的浮动的理解以及如何清理浮动
浮动的元素 脱离标准文档流（后面简称：脱标）。

浮动的元素可以并排（包含div之类块级元素），并且可以设置宽和高。因为行内元素不能设置宽和高是标准文档流的限制，所以脱标之后就没有这些限制。（绝对定位、固定定位也可以脱离标准文档流）

我们可以理解浮动的元素，先浮（脱标）再动（left），那么脱标之后，该元素就不占有标准文档流的空间，标准文档流的其他元素还是按照从上而下排列。这里可以理解成上下俩层空间的。

一个span元素浮动之后就可以设置宽和高，那么就代表在浮动的世界里，没有块级和行内元素之分。一个元素一旦浮动了，无论它是块级的还是行内的，就能够并排，能够设置宽和高。

清除浮动的原因：

1.因为浮动的元素实际上不占有高，那么没有高的盒子，就没有安全感。例如，想设置下margin都没有办法。

2.因为浮动的元素对其它元素有影响，该影响就是布局混乱。例如，想用2个ul做2行元素都没办法实现。

注意：没有高度的父盒子是管不住浮动的儿子的对其他元素的影响的。

清除浮动的方法：

1.给父盒子加高（height）

这个方法不推荐，因为网站开发过程中需要浮动的元素比较多，通过加高的方法会使得css代码变多，拖慢页面加载速度。

2.外墙法（在盒子外面添加一个带有clear：both属性的盒子）

3.内墙法（给盒子加上clear：both属性，推荐使用）

4.溢出影藏(overflow:hidden)

给一个盒子添加了overflow:hidden,该盒子就会有高度,也可以用来清楚浮动的影响.

4、 CSS引入的方式有哪些？Link和@import的区别是？
引入方式：
行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

示例：

三、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

语法：

1、链接式

2、导入式

Link和@import的区别是
本质上，这两种方式都是为了加载css文件，但还是存在细微的差别。

差别1：老祖宗的差别，link属于XHTML标签，而@import完全是css提供的一种方式。

link标签除了可以加载css外&