html5知识点：HTML5新特性

最近几年web前端开发领域最热的话题当属HTML5，HTML5从根本上改变了开发商开发web应用的方式，从桌面浏览器到移动应用，这种语言和标准都正在影响并将继续影响着各种操作平台。

关于HTML5的介绍：

html5:万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改,网页前端的标准书写。

HTML5发展前景：

现在的HTML5就像当年崭露头角时的Ajax，从发布到完善在到标准化，一步步的走来，慢慢的被大众化所接受。2007年，苹果在HTML5上大做文章，而著名的Web设计师Eric Meyer则提出了Web Stacks的概念。HTML5在快速成长，值得所有人密切关注，最近的一两年，会有很多公司进入这个领域，我们或许会在Chrome应用商店看到一些重量级厂商，我们也有希望在Google TV和Apple TV领域看到一些应用商店的出现。HTML5会像传统的Flash，Flex，Silverlight，Objective-C那样，形成自己的生态系统。HTML5将比Flash,Flex,Silverlight以及Objective-C更容易出现在任何设备。

那么下面我们从以下几方面来说以下HTML5的发展前景：

一、HTML5移动优先

随着高端手机（Andriod、Iphone、Ipod、winphone）的盛行，移动互联应用开发也越来越受到人们的重视，很大一部分人离开手机已经到没法生活的地步了，移动优先已成趋势，不管是开发什么，都以移动为主，移动应用可以极大的方便人们的生活。所以未来HTML5应该会优先在移动设备上更多的应用。如今已经有一些大企业将HTML5应用于移动开发，表现非常出色，所以终将成为趋势。

二、HTML5游戏开发

HTML5是伟大的,因为它多才多艺的 - 它没有具体针对单一的平台.更重要的是,HTML5是无所不在的. 就我所知的,它在你的PC上,你的手机上,你的平板设备上,甚至在你的厨房电器上. 在编写HTML5游戏的时候，你有太多选择. 像ImpactJS框架, 皆在帮助开发游戏的方方面面, 而像EaselJS框架主要关注图形处理. 最后还是由你来挑选你认为最舒服的框架. 这些可能让人摸不着头脑, 但在JavaScript世界, 确定了框架往往意味着确定了编程风格.。

三、HTML5响应式设计

在HTML 5真的改变移动开发平台之前，必须要迈出重要一步，那就是“响应式设计”，也就是屏幕可以根据内容而自动调整大小。响应式设计考量的web站点则提供给用户更好的体验，无论用户通过pc终端还是移动设计打开的站点；HTML5和css3的出现，响应式web设计在更多前段开发者的认知中被广义的认为流畅的设计，弹性的布局设计，易于改变的布局设计，可自动适配的布局设计，垮平台的web设计等等

四、设备访问

消除Web应用与原生应用界限的最大障碍就是浏览器访问移动设备基本特性的能力，比如照相机，通讯录，日历，加速器等，利用HTML5实现此能力方面，Mozilla一直在努力通过移动浏览器Fennec来将强设备访问能力。对许多移动开发商来说，提高设备访问能力是HTML5最令人激动的革新，这意味着Web应用能够登陆移动设备而无需做任何PhoneGap式打包，游戏开发商当然最开心，因为某些特性对他们来说是封锁的，比如能整合到游戏中的加速器。这就开启了另一个可能的世界，比如能与云更好地整合并提高游戏可玩性，有了HTML5这个平台，开发商可以不再依赖于Java语言，CSS3，HTML及其它程序语言。

HTML5的新特性

离线API离线API是一切HTML5应用的基础，不单单是离线数据的事，对开发者来说，拥有本地存储（local Storage）自然很好，但如何让程序完全离线运行？Application Cache是答案。如果不能离线保存源文件和数据，我们就无法实现离线的HTML5应用。我们目前有几种离线存储机制，简单的如localStorage和SQL存储引擎，已经有一些浏览器在支持了，而最新的明星是IndexedDatabase，它得到了所有主流浏览器支持。这些离线保存应用和数据的能力，是HTML5的基础，目前，Webkit，Firefox已经可以实现，而IE9也即将实现。即时IE9的支持还需要等待，想一下，最需要离线应用的场合是哪里，自然是智能手机和上网本，智能手机多数都是用Webkit。

HTML 5语义化标签

在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。

图六那个页面结构没有一个div，都是采用html5语义标签（用哪些标签，关键取决于你的设计目标）。

但是也不要因为html5新标签的出现，而随意用之，错误的使用肯定会事与愿违。所以有些地方还是要用div的，就是因为div没有任何意义的元素，他只是一个标签，仅仅是用来构建外观和结构。因此是最适合做容器的标签。

W3C定义了这些语义标签，不可能完全符合我们有时的设计目标，就像制定出来的法律不可能流传100年都不改变，更何况它才制定没多久，不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”，我们的目标是让爬虫读懂重要的东西就够了。

结论：不能因为有了HTML 5标签就弃用了div，每个事物都有它的独有作用的。

除此之外HTML5还新增了其他新的特性和属性例如:canvas、智能表单、video、auido、onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload

HTML5还有更多API可以帮助开发者创建应用，这些API可以让你的程序访问诸如本地文件，摄像头，SOCKET通信服务，以及硬件动画加速等。这些API仅仅是开端，这样的API后期会越来越多。

HTML5与SEO

一：使搜索引擎更加容易抓取和索引

对于一些网站，特别是那些严重依赖于FLASH的网站HTML5是一个大福音。如果你有一个都是FLASH的站点，你就一定会看到切换到HTML5的好处。首先，搜索引擎的蜘蛛将能够抓取你的站点和索引你的内容。所有嵌入到动画中的内容将全部可以被搜索引擎读取。在搜索引擎优化的基本理论中，这一方面将会驱动你的网站获得更多的右击流量。

二：提供更多的功能，提高用户的友好体验

使用HTML5的另一个好处就是它可以增加更多的功能。对于HTML5的功能性问题，我们从全球几个主流站点对它的青睐就可以看出。社交网络大亨Facebook已经推出他们期待已久的基于HTML5的iPad应用平台，潘多拉也推出他们基于HTML5的音乐播放器的新版本。游戏平台 Zynga也在推出了三款新的在移动设备浏览器上运行的基于HTML5的游戏等等。每天都有不断的基于HTML5的网站和HTML5特性的网站被推出。保持站点处于新技术的前沿，也可以很好的提高用户的友好体验。

三：可用性的提高，提高用户的友好体验

最后我们可以从可用性的角度上看，HTML5可以更好的促进用户于网站间的互动情况。多媒体网站可以获得更多的改进，特别是在移动平台上的应用，使用 HTML5可以提供更多高质量的视频和音频流。到目前为止，事实就是iPhone和iPad将不会支持FLASH，同时ADOBE公司也公开声明将停止FLASH基于移动平台的开发，可以这么说——移动平台日后视频音频是HTML5的天下！

以上文章是HTML5的发展前景、语义化标签、seo的优化概述。

html5知识点：HTML5新特性相关推荐

前端HTML5十大新特性详细总结
前端HTML5十大新特性总结一必须知道写前端的都知道,在代码最前面都有这一行代码,大家都知道一定要把这东西写上去. <!DOCTYPE html> 但是!这是什么玩意儿?为什么要写上 ...
HTML5有哪些新特性、移除了哪些元素？
前端面试题(4) 打卡 2021-4-28 HTML HTML5 有哪些新特性.移除了哪些元素? HTML5新增27个元素移除16个元素根据现有的标准规范,把 HTML5的元素按优先级定义为 ...
【Day05】Html5 有哪些新特性？如何处理 Html5 新标签的浏览器兼容问题？如何区分 Html 和 Html5？
Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5? 一.Html5 新特性 1. 拖拽释放(Drag and drop)API 2. 语义化更 ...
HTML5有哪些新特性
HTML5有哪些新特性.移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5? HTML5 是定义 HTML 标准的最新的版本. 该术语表示两个不同的概念: 它 ...
开课吧：Html5有哪些新特性？
在编程中,语义指的是一段代码的含义,这个HTML元素有什么作用,扮演了什么样的角色.简单的概括为:在适当的位置使用适当的标签,用正确的标签做正确的事情 Html5有哪些新特性? Html5有哪些新特性 ...
前端教程：HTML5有哪些新特性？
当我们进行Web开发时,使用Html是非常重要的,因为它包含了最基本的网页结构,尽管Html只能帮助我们构建静态网页,但这是我们最不能缺少的部分,如果将网页比作房屋,那么Html就是基础,今天就跟随小 ...
HTML5超酷新特性WebSockets初体验
人人网Web前端开发工程师暴风彬彬(网名),在个人网站彬Go上发表了一篇博文<HTML5 WebSockets 基础使用教程>,和大家一起分享了如何利用HTML5超酷新特性WebSocke ...
html5表单新特性
html5表单新特性学习的笔记,记录备忘. 效果图: 代码: <!DOCTYPE html> <html><head><meta charset=" ...
【面试】HTML5 有哪些新特性？_声明方式
最近看了一些与html基础相关的入门教学视频,心得感悟只有:不同特性的标签记住就好了!但理智告诉我,一切还未正式开始.肿么办?-_-# 是不是可以根据具体html的面试问题对理论知识进行认知拓展与实践 ...
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5?
* HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画 canvas; 用于媒介回放的 video 和 audio 元素; 本地离线存储 localSt ...

html5知识点：HTML5新特性

html5知识点：HTML5新特性相关推荐

最新文章

热门文章