HTML5新增功能有哪些，相比HTML有什么不同

来源：恒创科技编辑：恒创科技编辑部

2024-01-18 07:04:59

这篇文章给大家分享的是HTML5新增功能有哪些，相比HTML有什么不同。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

（1）HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，地理定位等功能的增加。

绘画canvas元素；

用于媒介回放的video和audio元素；

本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除；

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

表单控件，calendar、date、time、email、url、search；

新的技术webworker,websockt和Geolocation。

（2）CSS3新特性：

实现圆角（border-radius），阴影（box-shadow），边框图片（border-image）；对文字加特效（text-shadow），强制文本换行（word-wrap），线性渐变（linear-gradient）；实现旋转transform:rotate(90deg),缩放scale(0.85,0.90),translate(0px,-30px)定位,倾斜skew(-9deg,0deg); 增加了更多的CSS选择器、多背景、rgba()；唯一引入的伪元素是::selection ；实现媒体查询(@media)，多栏布局（flex）。

（3）移除的元素

纯表现的元素：basefont，big，center，font，s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；

（4）HTML5新标签的浏览器兼容问题是浏览器不能识别HTML5新标签而不能使用，解决办法有两种：

方法1：实现标签被识别

通过document.createElement（tagName）方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式。

方法2：JavaScript解决方案

　　　A）使用html5shim：

　　　在<head>中调用以下代码：

<!--[if lt IE 9]>

　　　　 <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

　　　　<![endif]-->

　　　当然也可以直接把这个文件下载到自己的网站上，但这个文件必须在head标签中调用。