前端面试总结-HTML

一、HTML篇

1、XHTML和HTML的区别

• XTHML元素必须被正确的嵌套
• XHTML元素必须被正确的关闭
• XHTML元素的标签名必须使用小写
• XHTML文档必须拥有根元素

XHTML的标准是严格的，他必须遵循以上要求：<br>这样的写法是不允许的，他必须写成<br/> 这个样式才是正确的

2、前端页面由哪几部分构成，分别是什么？作用是什么？

前端页面主要由结构（HTML）、表现（CSS）和行为（JavaScript）三部分组成。
HTML实现页面结构；CSS操作页面表现；JavaScript实现页面行为。

3、什么是语义化的HTML？为什么要做到语义化？

1>、语义化的HTML指的就是方便开发者阅读，便于浏览器解析的HTML
2>、为什么要做到语义化？
* 有利于SEO，便于搜索引擎爬虫更好的理解我们的网页，从而获取更多有效的信息，提升网页的权重
* 在没有CSS的时候，能够清楚的看出网页结构，增强页面的可读性
* 便于团队开发和维护，方便开发者阅读，从而提高团队的效率和协调能力
* 支持多终端设备的浏览器渲染

4、常见的浏览器的内核是什么？

trident内核：IE
gecko内核：Firefox
webkit内核：Safari、Opera

5、HTML5 为什么只需要写 !DOCTYPE HTML？

HTML5不基于SGML，所以不需要对DTD进行引用，只需要声明DOCTYPE来规范浏览器的行为。

6、Doctype作用？标准模式与兼容模式各有什么区别?

• 作用：是一种标准通用标记语言的文档类型声明，主要是为了告诉浏览器（标准通用语言解析器）应该使用什么文档类型来解析文档。
• 区别：标准模式，即严格呈现模式，用于呈现遵循最新标准的网页；兼容模式，即怪异模式，用于呈现为传统浏览器而设计的网页。
• 具体区别：
  1> 盒模型
  在严格模式中 ：width是内容宽度 ，元素真正的宽度 = width;
  在兼容模式中 ：width则是=width+padding+border
  2> 元素宽高的设置
  在标准模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
  在标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
  3> 用margin:0 auto设置水平居中在IE下会失效
  使用margin:0 auto在标准模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
  body{text-align:center};#content{text-align:left}

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

• 新增特性：canvas绘图、video和audio的添加，本地存储localStorage和sessionStorage的新增
• 移除的元素：<basefont>、<big>、<center>、<font>、<frame>、<frameset>、<noframes>
• 兼容性问题：参考
  http://pans860516.blog.163.com/blog/static/13383502015220058812/
• 区分HTML和HTML5：a、二者在文档中的声明不一样；b、在搭建页面结构时，使用的结构化的标签不一样

8、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

• cookie：
  用于存储用户信息，cookie只能保存有限的数据，不安全，保存在客户端
  设置cookie时，有的浏览器必须是访问服务器上的网页才可以设置
  cookie本身具有时效性，在一定的时间间隔内会过期；（过期的两种方式：1> 在没有给cookie设置过期时间时会立即过期；2> 在浏览器关闭的时候过期）

• localStorage：
  保存的数据始终有效，即使窗口或者浏览器关闭之后，也会一直保存，用作持久数据，生命周期较长
  该对象是属于window对象，在当前页面存储，可以在另一个页面中获取相关数据

• sessionStorage：
  只有在浏览器关闭之前，数据有效，关闭之后，数据会自动清除，不在有效，生命期较短

9、如何实现浏览器内多个标签页之间的通信?

参考地址：
http://blog.csdn.net/zhouziyu2011/article/details/58595904