JOB：基础知识

男娘i 2022-06-09 04:48 103阅读 0赞

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>