JOB：基础知识

 1、XHTML和HTML有什么区别

HTML（HyperText Markup Language）是超文本标记语言

XHTML是可扩展超文本标记语言

功能上的差别：主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。 

书写差别：

1. ）所有标签都必须小写

   在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。

2.  ） 标签必须成双成对

   像是<p>...</p>、<a>...</a>、<div>...</div>标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样

3. ）标签顺序必须正确

   标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。只要记住一个原则“先进后出”，先弹出的标签要后结尾。

4. ）所有属性都必须使用双引号

   在XHTML 1.0中规定连单引号也不能使用，所以全程都得用双引号。

5. ）不允许使用target="_blank"

   从XHTML 1.1开始全面禁止target属性，如果想要有开新窗口的功能，就必须改写为rel="external"，并搭配JavaScript实现此效果。

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

H5新特性：增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在

1)  绘画 canvas;

2)  本地离线存储 localStorage。长期存储数据，浏览器关闭后数据不丢失;

3)  sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage

4)  用于媒介回放的 video和 audio 元素;

5)  语意化更好的内容元素，比如article、footer、header、nav、section;

6)  表单控件，calendar、date、time、email、url、search;

7)  新的技术webworker(专用线程)

8)  websocketsocket通信

9)  Geolocation 地理定位

移除的元素

纯表现的元素
  <basefont> 默认字体，不设置字体，以此渲染
  <font> 字体标签
  <center> 水平居中
  <u> 下划线
  <big> 大字体
  <strike> 中横线
  <tt> 文本等宽
框架集
  <frameset>
  <noframes>
  <frame>

处理兼容问题有两种方式：
1）.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2）.使用是html5shim框架

区分HTML和HTML5：
1）DOCTYPE声明的方式。

2）根据新增的结构、功能元素来加以区分。

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

cookie:存储在用户本地终端上的数据。

localStorage - 没有时间限制的数据存储,第二天、第二周或下一年之后，数据依然可用。

//创建localStorage
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后，数据会被删除。

//创建sessionStorage
<script type="text/javascript">
  sessionStorage.lastname="Smith";
  document.write(sessionStorage.lastname);
</script>

共同点：都是保存在浏览器端，且同源的。

区别：
1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2）存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5）Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
6）Web Storage 的 api 接口使用更方便。

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

数据存储有本地和服务器存储两种方式，多用本地方式。

方法一：
localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。

//第一个页面
<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
	$(function(){  
		$("#btn").click(function(){  
			var name=$("#name").val();  
			localStorage.setItem("name", name); 
		});  
	});  
</script>

//第二个页面
<script type="text/javascript">
	$(function(){ 
		window.addEventListener("storage", function(event){  
			console.log(event.key + "=" + event.newValue);  
		});   
	});
</script>

方法二：
使用cookie+setInterval，将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

//第一个页面
<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
	$(function(){  
		$("#btn").click(function(){  
			var name=$("#name").val();  
			document.cookie="name="+name;  
		});  
	});  
</script>

//第二个页面
<script type="text/javascript">
	$(function(){ 
		function getCookie(key) {  
			return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];  
		}   
		setInterval(function(){  
			console.log("name=" + getCookie("name"));  
		}, 10000);  
	});
</script>