HTML5 是继 HTML4.01 和 XHTML1.0 之后的超文本标记语言的最新版本。它是由一群自由思想者组成的团队设计出来,并最终实现多媒体支持、交互性、更加智能的表单,以及更好的语义化标记。

HTML5 并不仅仅是 HTML 规范的最新版本,而是一系列用来制作现代Web 内容的相关技术的总称,其中最重要的三项技术分别为:HTML5 核心规范(标签元素)、CSS(层叠样式表第三代)、和 JavaScript。

一.HTML5 的历史

1993 年 HTML 首次以因特网草案的形式发布,然后经历了 2.0、3.2 和 4.0,直到 1999年的 HTML4.01 版本稳定下来。由于发展缓慢,逐渐的被更加严格的 XHTML 取代。

XHTML 的兴衰史

自从 HTML4.01 版本之后,掌握着 HTML 规范的万维网联盟(W3C)组织没有再发布新的标准,而是围绕着 XHTML1.0 以及之后的 XHTML2.0 展开工作。XHTML 是基于 XML、致力于实现更加严格并且统一的编码规范的 HTML 版本,解决之前 HTML4.01 版本时,由于编码不规范导致浏览器的各种古怪行为。所以,Web 开发者对 XHTML 非常的拥护。XHTML 极大的好处,就是强迫开发者养成良好的编码习惯,放弃 HTML 的凌乱写法,最终降低了浏览器解析页面的难度,方便移植到更多平台。

可是,越是想往好的方面发展,往往可能是带来的却是毁灭性的灾难,世间万物就是如此。XHTML2.0 规范了更严格的错误处理规则,强制要求浏览器拒绝无效的 XHTML2 页面,强制 Web 开发者写出绝对正确规范的代码,同时不得向下兼容,摒弃 HTML 遗留的怪异行为和编码习惯。按理说,取其精华、舍其糟粕应该是好事。但是,这样的话,数亿的页面将无法兼容,Web 开发者的难度又被加大,并且制定这个标准又太过久远,最终被抛弃。

HTML5 的回归

2008 年 W3C 发布了 HTML5 的工作草案,2009 年停止了 XHTML2 计划。又过去大概一年,HTML5 规范进一步解决了诸多非常实际的问题,各大浏览器厂商开始对旗下的产品进行升级,以便支持 HTML5。这样,得益于浏览器的实验反馈,HTML5 规范得到了持续的进步和完善,从而迅速融入到 Web 平台的实质性改进中。

和 XHTML2.0 不同,制定 HTML5 规范的一群人并不想挑出以往 HTML 的各种毛病为其改正,而是尽可能的补全 Web 开发者急需的各种功能。这些功能包括更强大的 CSS3、表单验证、音频视频、本地存储、地理定位、绘画(Canvas)、Web 通信等等。

二.HTML5 的功能

HTML5 到底涵盖了哪些功能?这些功能到底在主流的浏览器支持情况如何?

1.HTML5 核心:这部分主要由 W3C 官方的规范组成,涉及新的语义元素、新的增强的Web 表单、音频和视频、以及通过 JavaScript 绘图的 Canvas。这部分大多数主流浏览器均得到很好的支持;

2.曾经的 HTML5 标准:这部分主要来自于最初制定的 HTML5 规范,其中大多数功能需要 JavaScript 且支持 Web 应用开发。比如:本地数据存储、离线应用和消息传递;

3.非 HTML5 标准:这部分通常指下一代功能,虽然从未进入 HTML5 标准,但人们还是会把它认做 HTML5 的一部分。这些包括最为常见的 CSS3,以及很热门的地理定位。

对于最为常用且实用的部分,基本上主流的浏览器都支持的比较好。而那些特殊需求的部分,则需要根据不同的浏览器检测才能知道是否支持自己想要的功能。

三.HTML5 的特点

在 HTML5 发展的同时,XHTML2.0 也在不断发展,那么到底是哪些特点导致 HTML5 取得最终的胜利呢?

1.向下兼容

对于 XHTML2.0 要求遵循规则,否则不予显示的方式,HTML5 却实行“不破坏 Web”的原则。也就是说,以往已存在的 Web 页面,还可以保持正确的显示。

当然,面对开发者,HTML5 规范要求摒弃过去那些编码坏习惯和废弃的标签元素;而面对浏览器厂商,要求它们兼容 HTML 遗留的一切,以做到向下兼容。

2.用户至上

HTML5 遵循“用户至上”的原则,在出现具体问题时,会把用户放在第一位,其次是开发者,然后是浏览器厂商,最后才是规范制定者。比如,开发者在编码时不严谨导致本该出现警告或错误时,却正常显示了页面。

3.化繁为简

HTML5 对比之前的 XHTML,做了大量的简化工作。具体如下:

(1).以浏览器的原生能力代替复杂的 JavaScript;

(2).DOCTYPE 被简化到极致;

(3).字符集声明被简化;

(4).简单强大的 API。

4.无插件范式

在 HTML5 出现之前,很多功能只能通过插件或 hack(如绘图 API)来实现,但 HTML5原生提供了这些支持。使用插件有很多问题,具体如下:

(1).插件安装容易失败;

(2).插件被浏览器或软件禁用屏蔽(如 Flash 插件);

(3).插件经常会被爆出漏洞被利用攻击;

(4).插件不容易与 HTML 文档其他部分集成(比如整体透明化等)。

5.访问通用性

这个原则分为三个概念:

(1).可访问性:比如更加利于残障人士的阅读方案;

(2).媒体中立:比如 HTML5 的媒体播放在不同设备或平台均能正常运行;

(3).支持所有语种:比如新元素。

6.引入语义

HTML5 引入了一些用来区分不同含义和内容的标记元素。这种方式极大的提供的编码人员的可读性和代码区域查询的便利性。

7.引入原生媒体支持

HTML5 的一次大改进救生衣支持在浏览器中直接播放视频和音频文件,以前都需要借助插件才能实现此类功能。

8.引入可编程内容

HTML5 最大的变化就是引入了需要通过 JavaScript 编程才能完全的各种效果,而这些很多都是 HTML5 原生的。那么现在 HTML5 可以理解为 HTML + CSS + JavaScript + API 的总称。

四.课程学习问题

学习 HTML5 需要一些测试用的浏览器、编码用的开发工具、以及建议推荐的学习方法。

1.浏览器选择

IE9+
Firefox 3.5+
Chrome 3.0+
Safari 3.0+
Opera 10.5+

推荐使用:Chrome

这里重点要说明一下 IE 浏览器。由于历史和系统绑定原因,还有相当一部分电脑残留IE9 以下版本的浏览器。虽然微软已经开始发表声明逐步不再维护 IE8,但这部分群体还占有一定的份额。所以,是否要迎合这部分用户,取决于个人对市场的判断和成本的考量。

2.开发工具

文本编辑器:记事本,Editplus,Sublime Text,Notep++等等。

IDE:Adobe Dreamweaver,WebStorm,Microsoft Visual Studio;

本课程我们使用 Sublime Text3 作为 HTML5 课程的编码工具。

3.学习方式

本课程原则上是零基础、初学者可学,但如果你已经有之前HTML课程基础,那么学习起来将非常轻松。学习编程没有其它什么好办法,只有坚持多练多看多学.....

4.学习目标

1、掌握新标签以及新属性的功能特点,并熟练运用。

2、了解HTMlL5的前景及其学习展望。

3、明确未来的学习目标和深入学习的目标。

4、为移动前端开发学习打好基础。

如果您觉得有用,记得在下方点赞、关注、留言,小编会定期奉 上更多的惊喜哦,您的打赏支持才是小编继续努力的动力,么么哒。

每日分享在学习过程中总结的学习经验,学习笔记,笔试题,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术。陪有梦想的人一起成长!

html5 canvas 不兼容safari浏览器_HTML5简介相关推荐

  1. html5 canvas 不兼容safari浏览器_HTML5的介绍

    一.什么是 HTML5? HTML5 是最新的 HTML 标准: HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件: HTML5 拥有新的语义.图形以及多媒体元素: HTML5 ...

  2. php 画虚线,HTML5 Canvas绘制圆点虚线实例_html5教程技巧

    HTML5 Canvas 提供了很多图形绘制的函数,但是很可惜,Canvas API只提供了画实线的函数(lineTo),却并未提供画虚线的方法.这样的设计有时会带来很大的不便,<JavaScr ...

  3. 解决Element-ui中Table表格里的show-overflow-tooltip不兼容safari浏览器问题。

    在使用element-ui过程中,需求:"列表中,文本内容过多,以划入显示全部内容展示",查看UI库,el-table提供了show-overflow-tooltip属性,但是在测 ...

  4. html5 canvas 版 hello world! 暨haXe简介

    没想到我的第一个移动项目会是 html5 项目. 前一阵给一海外客户开发了Flash 版的电子杂志,客户还需要 ipad 版的.我最开始提出这样一种解决方案:在现有Flash程序基础上,使用AIR 2 ...

  5. 前端实现点击复制功能,兼容Safari浏览器 @令狐张豪

    这里我们使用clipboard来实现 介绍:clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件,支持很多主流浏览器,包括Safari //引入方式 <scr ...

  6. html5使用阴影,HTML5 Canvas阴影用法演示

    HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = "red" 表示设置阴影颜色为红色 ...

  7. 手机端html5网页音乐播放,js实现移动端H5页面音乐播放,兼容微信 safari浏览器...

    js代码: //音乐 function music(){ var oMusic=document.getElementById("music"); var Audio=docume ...

  8. html5 safari浏览器 全屏显示 隐藏工具条,HTML5全屏API不IPhone SE Safari浏览器工作,也...

    我想打一个div容器全屏等最新的iPhone,它在所有桌面浏览器和Android浏览器,但在iPhone浏览器(Safari浏览器)工作正常,它不管用.HTML5全屏API不IPhone SE Saf ...

  9. html5+调用safari,Safari浏览器不酷,HTML5无效元素; JavaScript是

    我使用JavaScript来生成一个图像对象,然后使用jQuery来改变它的属性,包括一个.load函数.在找到Safari(ver 5.0.5)的错误控制台(当最后不难发现时最令人沮丧)之后,我们发 ...

最新文章

  1. 转--Android如何在java代码中设置margin
  2. 汇编语言随笔(11)- int 指令(返回到应用程序的中断例程),实验13(编写、应用中断例程)
  3. Quartz-TriggerListener解读
  4. Java学习正嗨Day2!
  5. suse linux下交叉编译,阐述SUSE 10.1交叉编译环境构建方法
  6. Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/web.xml
  7. elasticdump elasticsearch数据备份与迁移 导入导出
  8. laravel route函数 404_laravel生成及获取不同类型的URL地址总结
  9. OpenShift 4 之Istio-Tutorial (7) 利用VirtualService的故障注入实现混沌测试Chaos Testing
  10. Web 前端开发初学者十问集锦(2)
  11. linux安装XtraBackup8
  12. spring定时任务执行两次的原因与解决方法
  13. Atitit webdav 原理详细 概念补充 2.WebDAV的优势: 一套自己定义的安全完善的身份验证机制。 穿墙 HTTPS传送数据 使用一个TCP连接传送所有文件 方便的客户端工
  14. 计算机机设应用基础,计算机机应用基础–word.ppt
  15. 计算机采取二进制的原因,计算机为什么采用二进制
  16. 线性代数之行列式(1) ——行列式的定义以及二阶行列式
  17. LR.JAVA报表设计器,快速点亮报表设计技能
  18. python矩阵运算算法_Python常用库Numpy进行矩阵运算详解
  19. OSX: 使用命令行对FileVault2分区恢复
  20. win10无法登陆微软账户,解决方法

热门文章

  1. php基础学哪些,榆林学习php需要哪些基础(PHP是什么)
  2. 更新fielddata为true_在pytorch中停止梯度流的若干办法,避免不必要模块的参数更新...
  3. 【OpenCV 例程200篇】07. 图像的创建(np.zeros)
  4. python下的mysql模块包装
  5. 以相关组为基础的3D物体识别
  6. 学员感言html效果图,学员感言丨非计算机专业学员 开始学HTML5的点点滴滴
  7. 基本农田卫星地图查询_如何基于西安80坐标查询定位
  8. xpath 取标签下所有文字内容_xpath提取目录下所有标签内的内容,递归 //text()...
  9. 佳能g2800清零软件天空_可能是史上最有趣的3D建模软件
  10. plotloss记录