面试题整理（一）HTML和CSS基础

一. 网页分成那三个层次

最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。
网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer) 负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。v-show斜体样式

二. XHTML 与 HTML 有什么区别

1. XHTML元素必须被正确的嵌套
2. XHTML元素必须被关闭,单标签也得关闭. 例如 < br/>
3. 标签名必须使用小写
4. XHTML文档必须具备根元素

三.div+css 的布局较 table 布局有什么优点

改版的时候更方便 只要改 css 文件。 页面加载速度更快、结构化清晰、页面显示简洁。 表现与结构相分离。 易于优化（seo）搜索引擎更友好，排名更容易靠前。

四. img 的 alt 与 title 有何异同

alt(alt text):为不能显示图像、窗体或 applets 的用户代理（UA），alt 属性用来指 定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息

五. 为什么要使用css sprites (精灵图)

• css精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
• css sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用css的"background-image","background-position"的组合进行背景定位，这样可以减少。
• 很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是如果请求太多会给服务器增加很大的压力。

六. 描述一下渐进增强和优雅降级之间的不同

1. 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功 能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

2. 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器 进行兼容。

   区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个 非常基础的，能够起作用的版本开
   始，并不断扩充，以适应未来环境的需要。降级（功能衰 减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

七.请描述一下 cookies，sessionStorage 和 localStorage 的区别

sessionStorage （session）中的数据，这些数据只有在同一个会话中的页面才能访问 并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅 仅是会话级别的存储。
localStorage 用于持久化的本地存储，除非主动删除数据，否则 数据是永远不会过期的。

web storage 和 cookie 的区别 Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的大小 是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费 了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。 除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端开发者自己封装 setCookie，getCookie。
但是 Cookie 也是不可以或缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为 了在本地“存储”数据而生。

八.HTML 文件里开头Doctype的作用

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏 览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

九.如何理解 HTML 结构的语义化

html语义化就是让页面的内容结构化。
1.在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
2.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
3.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
4.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
5.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

十.解释下浮动和它的工作原理

浮动出现的最开始出现的意义是用来让文字环绕图片而已。float可以自动包裹元素。float会导致高度塌陷。float为什么会导致高度塌陷：元素含有浮动属性 –> 破坏inline box –> 破坏line box高度 –> 没有高度 –> 塌陷。什么时候会塌陷：当标签里面的元素只要样子没有实际高度时会塌陷。浮动会脱离文档流。产生自己的块级格式化上下文。