【郑州第一百零八期小课堂】简介html5有哪些新特性?

1.背景介绍

以前没有了解前端的时候,总是看到一些很有噱头的招生信息,打着html5这个的广告在招人。现在学完css任务之后,回头总结一下,发现其实已经在html5的环境下做了许多。今天就和小伙伴们分享、讨论一下html5到底是什么?

2.知识剖析

2.1什么是Html5?

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。

2000年左右,为了推动Web标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web超文本应用技术工作组 -WHATWG) 的组织。WHATWG 致力于 Web 表单和应用程序,而W3C(World Wide Web Consortium,万维网联盟) 专注于XHTML2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队。于2014年10月29日,由万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于得以制定完成。

支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的傲游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

W3C中的Html5官方文档

2.2 html5有哪些新特性?

标准通用标记语言的文档类型声明得到了更新:

编码方式得到了更新


有空值的属性等价于属性与值完全相同的情形,即使这个属性并非boolean属性。脚本和链接无需type。

为了用于更好的文档结构定义了新标签:header、footer、aside、nav、main、article、section等。

新添加了多媒体元素:aduio、video、canvas、SVG。减少了对flash插件的依赖。canvas的演示

新添加了用于下拉菜单的标签:datalist。菜鸟演示

form和input的属性得到了拓展。菜鸟演示

添加了注释img的标签:figure和figcaption。菜鸟演示

重新定义small标签,用于网站底部的版权状态。菜鸟演示

新添加了拖放(Drag 和 Drop)功能。

新添加了一个用于进度条的标签progress

新增了许多API(应用程序编程接口),如:Geolocation(地理定位),Web SQL 数据库 API,Page Visibility API(页面可见性API),File API等,以上的接口都不属于H5规范的部分,有各自独立的规范,但是都属于H5相关API。

HTML5 引入了应用程序缓存(Application Cache)和离线存储web storage,也就是前段时间使用到的localStorage,sessionStorage。

增加了更多事件属性。

3.常见问题

问题: Html5的优势和不足?

4.解决方案

优势:

1.提高可用性和改进用户的友好体验;

2.有几个新的标签,这将有助开发人员定义重要的内容;

3.可以给站点带来更多的多媒体元素(视频和音频);

4.可以很好的替代FLASH和Silverlight;

5.当涉及到网站的抓取和索引的时候,对于SEO很友好;

6.将被大量应用于移动应用程序和游戏。

7.标签更加语义化,使用更分明。

不足

安全性上还有需要弥补的地方。HTML5所构建的网页和其他语言编写的网页一样容易泄露一些敏感数据。

5.编码实战

参看以上demo中的演示,这里不再赘述!

6.扩展思考

问题: canvas和SVG的区别?

SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。更详细的信息可以查看:菜鸟教程

7.参考文献

参考一:菜鸟教程

参考二: 《JavaScript高级程序设计》

参考三:html5新特性详解

参考四:HTML5新特性及详解

8.更多讨论

讨论点:大家对Html5中的新特性还有哪些理解?

视频链接:https://v.qq.com/x/page/q0502e2x2qp.html


简单介绍html5的新特性_腾讯视频

文本链接:http://www.jnshu.com/daily/22923?uid=7446

PPT链接:https://ptteng.github.io/PPT/PPT/css-15-html5.html#/

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧 !邀请码哦———84959420

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,692评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,482评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,995评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,223评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,245评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,208评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,091评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,929评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,346评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,437评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,037评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2 354

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,081评论 25 707
  • 现在在大数据的带领下,数据可视化越来越突出,能够清楚的分析出自己想要的数据,这也是我们现在最求的数据可视化方法,那...
    UIleader阅读 1,273评论 0 2
  • 双鱼座要是不相信爱情了 这是一个多么可悲的事
    swallow_a815阅读 196评论 0 0
  • 首先,非常感谢杜总给予我们这次六项精进的培训机会。通过这三天付出不亚于任何人的努力,我收获满满。六项精进让...
    陈雪央阅读 1,196评论 0 2