H5与传统html的区别

概述

HTML5是HTML语言的第五个版本，它不仅仅是对HTML 4.01进行了升级，还包括了对XHTML 1.0的内容。与传统html相比，H5在性能、兼容性、标签语义化、API等方面都有很大的提升。

标签语义化

HTML5中新增了很多具有语义化的标签，这些标签的作用是让开发者在写网页时更加明确地表达网页的结构和意义，从而让搜索引擎更好的理解页面内容，提高搜索结果的精准度。

	<header>
	    <nav>
	        <ul>
	            <li><a href="#">Home</a></li>
	            <li><a href="#">About Us</a></li>
	            <li><a href="#">Contact</a></li>
	        </ul>
	    </nav>
	</header>
	

多媒体支持

HTML5在多媒体方面有了很大的提升，其中最大的亮点莫过于视频和音频的支持。HTML5中新增了video和audio标签，这两个标签允许开发者将多媒体元素嵌入到网页中，而不需要使用插件或其他第三方工具。

	<video controls>
	    <source src="example.mp4" type="video/mp4">
	    <source src="example.webm" type="video/webm">
	    <source src="example.ogg" type="video/ogg">
	    Your browser does not support the video tag.
	</video>
	

Web存储

HTML5新增了Web本地存储API，也就是LocalStorage和SessionStorage。它们可以让开发者在浏览器端轻松地存储和获取数据，从而省去了数据传输的时间，提高了网页的性能。

	//存储数据到localStorage
	localStorage.setItem('name','Lily');
	
	//从localStorage中获取数据
	var name=localStorage.getItem('name');
	console.log(name);
	

总结

HTML5在标签语义化、多媒体支持和Web存储等方面都有很大的提升，并且它的兼容性也很好，可以兼容大部分主流浏览器。随着Web应用的发展，HTML5也将在未来的发展中扮演越来越重要的角色。