HTML/CSS基础知识（一）

Q：浏览器页面有哪三层构成，分别是什么，作用是什么？

A：由三部分构成：

• 网页结构层（Structural Layer）——由（X）HTML等标记语言负责创建，实现页面结构。
• 网页表示层（Presentation Layer）——由CSS完成页面的风格。
• 网页行为层（Behavior Layer）——有javascript实现一些客户端的功能与业务。

Q：HTML5的优点与缺点：

A：

• 优点：

1. HTML5由W3C推荐推荐，网络标准统一；
2. 多设备，跨平台；
3. 自适应网页设计；
4. 即使更新；
5. 提高可用性和改进用户友好体验；
6. 新的标签有助于开发人员定义重要内容；
7. 给站点带来例如音频和视频等更多多媒体元素；
8. 可以很好代替flash和Sliverlight；
9. 涉及网站的抓取和索引的时候，对于搜索引擎优化（SEO）很友好；
10. 被大量应用于移动应用程序和游戏。

• 缺点：

1. 安全性：webstorage、web socket这样的功能用以被黑客攻击；
2. 完善性：各大浏览器支持程度不一；
3. 技术门槛：HTML5有很多新的属性和API需要开发者去学习；
4. 性能：某些平台的引擎问题导致HTML5性能低下；
5. 浏览器兼容性：不支持IE9以下浏览器。

Q：doctype的作用，严格模式与混杂模式如何区别？各有什么意义？

A：doctype声明指出阅读程序应该用什么规则集来解释文档中的标记，即告诉浏览器以何种标准解析页面。在web文档的情况下，“阅读程序”的通常是浏览器或者校验器，“规则”是W3C所发布的一个文档类型定义（DTD）中包含的规则。

1. doctype声明位于文档的最前面，处于标签之前。此标签可告知浏览器使用哪种HTML或者XHTML规范。该标签可声明三种DTD类型：严格版本、过渡版本和基于框架的HTML文档。

   严格模式  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
   过渡模式  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
   框架模式  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

2. 严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层语法。严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。混杂模式则是一种向后兼容的解析方法。
3. 标准模式是指浏览器按照W3C标准解析执行代码；

   ① 如果XHTML文档包含完整的DOCTYPE，那么它一般以标准模式呈现； 
   ② 包含严格dtd的doctype和包含过渡dtd和URI的doctype常常导致页面以标准模式呈现

   怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

   ① 不存在doctype或形式不正确会导致怪异模式； 
   ② 有过渡/框架dtd没有URI会导致页面以怪异模式呈现； 
   ③ IE中，如果doctype声明在xml之后，会导致怪异模式。

4. 标准模式和怪异模式的区别

   ） 盒模型： IE下标准模式为标准w3c盒模型【content+padding+border+margin】，怪异模式为IE盒模型【content+margin：padding与border包含在content宽高中】 
   2） 行内元素的垂直对齐：基于 Gecko 的浏览器【Mozilla Firefox、HotBrowser、Mozilla Suite、Camino】标准模式对齐至基线，怪异模式对齐至底部 
   3） 怪异模式中，IE6/7/8都不认识!important声明 
   4） 设置行内元素的高宽： 在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。 
   5） 使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

5. 总之，浏览器解析时到底使用标准模式还是怪异模式，与网页中的DTD声明直接相关，DTD声明定义了标准文档的类型，会使浏览器使用响应的方式加载网页并显示，忽略DTD声明将使网页进入怪异模式。