HTML5学习之路——(一)

HTML5简介

HTML5 是最新的 HTML 标准,他是万维网的核心语言、标准通用标记语言下的一个应用“超文本标记语言”。

  HTML 的上一个标准 HTML4.01 诞生于 1999年,他的第一代标准诞生于 1995年,自此 Web 世界经历了巨变,在 HTML4.01 中提出了网页结构与表现相分离的原则,并提供了很多新特性,至此 HTML 的发展遇到瓶颈,停滞不前。

  HTML5 的第一份草案在 2004年 首次被 WHATWG 提交到 W3C,WHATWG 指 Web Hypertext Application Technology Working Group,即 Web 超文本应用技术工作组,他是一些互联网公司联合形成的组织,致力于 Web 表单和应用程序,而 W3C 却致力于 XHTML2.0 标准的制定,显然 XHTML2.0 并不是 HTML 所期望的,于是在 2006年,双方决定进行合作,共同创建一个新版本的 HTML。直到 2007年 该草案被 W3C 正式接纳,并成立了新的 HTML 工作团队,2008年 正式发布了第一份草案,最终在 2014年10月29号,万维网联盟经过接近 8年的艰苦努力,宣布该标准规范制定完成,被列为 W3C 推荐标准。可以说 HTML5 是 W3C 与 WHATWG 合作的结果。

  为 HTML5 建立的一些规则:新特性应该基于 HTML、CSS、DOM 以及 JavaScript。减少对外部插件的需求(比如 Flash)。更优秀的错误处理。更多取代脚本的标记。HTML5 应该独立于设备。开发进程应对公众透明。

  W3C 首席执行官 Jeff Jaffe 博士表示:“HTML5 将推动 Web 进入新的时代。不久以前,Web 还只是上网看一些基础文档,而如今,Web 是一个极大丰富的平台。我们已经进入一个稳定阶段,每个人都可以按照标准行事,并且可用于所有浏览器。如果我们不能携起手来,就不会有统一的 Web。” 

  HTML5 是开放 Web 标准的基石,它是一个完整的编程环境,适用于跨平台应用程序、视频和动画、图形、风格、排版和其它数字内容发布工具、广泛的网络功能等等。接下来,W3C 将致力于开发用于实时通信、电子支付、应用开发等方面的标准规范,还会创建一系列的隐私、安全防护措施。

  HTML5 的设计目的是为了在移动设备上支持多媒体。比如 video、audio 和 canvas 标记。HTML5 还引进了新的功能,可以真正改变用户与文档的交互方式,为桌面和移动平台带来无缝衔接的丰富内容。

  HTML5 的新特性:

    ①、用于绘画的 canvas 元素。

    ②、用于媒介回放的 video 和 audio 元素。

    ③、对本地离线存储的更好的支持。

    ④、本地 SQL 数据。

    ④、新的特殊内容元素,比如 article、header、nav、footer、section。

    ⑥、新的表单控件,比如 calendar、date、time、email、url、search。

  (1)、HTML5 图形

  使用 HTML5 可以简单的绘制图形:

    可以使用 <canvas> 元素,内联 SVG。

    CSS3 提供了一些新选择器,新属性。

    HTML5 使用 CSS3 可以实现 2D/3D 转换,动画,圆角、阴影效果,还可以下载字体。

  (2)、HTML5 多媒体

  使用 HTML5 可以简单的在网页中播放音频和视频:

    <audio> 可用于播放音频,<video> 可用于播放视频。

  (3)、HTML5 应用

  使用 HTML5 你可以简单地开发应用:

    本地数据存储,本地 SQL 数据,访问本地文件,缓存引用。

    在移动设备开发 HTML5 应用只有两种方法,要不就是全使用 HTML5 的语法,要不就是仅使用 JavaScript 引擎。

    基于 HTML5 开发 APP 应用。

    JavaScript 引擎的构建方法让制作手机网页游戏成为可能。

    XMLHttpRequest2 可以解决跨域等问题,能帮助 Web 应用和网站在多样化的环境中更快速的工作。

  (4)、HTML5 语义特性

  HTML5 添加了很多语义元素如:

    header,nav,main,section,footer,aside,article,figure,这8个新的语义元素都为块级元素。

    HTML5 赋予网页更好的意义和结构。

  (5)、HTML5 表单

  HTML5 添加了一些新表单元素,新属性和新输入类型,还增加了表单自动验证。

  最新版本的 IE9+,Chrome、Firefox、Safari 以及 Opera 支持某些 HTML5 特性。IE8 以及更早版本的 IE 浏览器都不支持 HTML5 新特性。

时间: 2024-10-01 07:29:50

HTML5学习之路——(一)的相关文章

前端:HTML5学习之路(一)

第1章 HTML5基础 关于HTML5基础这一部分的内容没有明显边界.各种HTML5教材关于HTML5基础知识的介绍大同小异,这里不做过多赘述. 1. 我们要把HTML5简单用起来,首先要学会新建HTML5文档.每个网页都包含doctype.html.head和body元素,以下是一个简单的HTML5文档示例(用到了a.article.em.h1.img和p这6种常见的元素): 1 <!doctype html> 2 <html> 3 <head> 4 <meta

html5学习之路_005

PHP环境搭建 1.下载安装xampp 2.打开xampp,开启mysql和apache 3.在开发环境eclips中下载插件 4.安装php 5.切换到php开发环境 6.创建一个php项目 7.打印一句话 8.运行项目,必须将项目复制到在htdoc下才能运行 9.打开浏览器运行 本站文章为宝宝巴士 SD.Team原创,转载务必在明显处注明:(作者官方网站:宝宝巴士) 转载自[宝宝巴士SuperDo团队] 原文链接: http://www.cnblogs.com/superdo/p/47718

html5学习之路_006

表单与php交互 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单与php交互</title> </head> <body> <form action="http://localhost/MyServe/Service.php" method=&quo

html5学习之路_004

HTML表单 表单用于获取不同类型的用户输入 常用表单标签 下面为一个简单的表单: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表单</title> </head> <body> <form> 用户名: <input type="text"

Azure云平台学习之路(三)——Cloud Services

1.什么是云服务? 能够部署高度可用的且可无限缩放的应用程序和API.简而言之,就是你写的CMD程序按照一定的框架进行少量修改就能运行在Azure云平台上. 2.Azure云服务有什么特点? (1)专注应用程序而不是硬件,PaaS的一种. (2)支持多种框架和语言. (3)集成了运行状况监视和负载平衡. (4)自动缩放优化成本和性能 3.建立云服务之前,我们需要建立一个云存储,来记录我们的程序的日志信息(当然,这不是必须的) (1)选择左边导航栏的"存储".主面板上显示的是所有已有的存

linux学习之路之LVM

试想一种情况,当初我们在规划磁盘的时候,只给某一个磁盘或分区之划分了30G的容量,但是后来,随着业务的需求,该磁盘或者分区的使用量会越来越大,等到以后再有数据存放时,发现该磁盘或者分区的容量不够用,此时该怎么办了?可以新增一个磁盘,经过格式化,挂载等过程就可以使用这个磁盘了,再将原来磁盘的数据完全的复制过来.等到后来又发现,规划的磁盘又太大了,然后又使用上述方法来减少磁盘的大小.虽然这种方法可行,但是效率低,比较复杂.不应该是我们首选的方法. 当然,我们可以这样做,将多个磁盘或者分区(PV)组合

我的算法学习之路

关于 严格来说,本文题目应该是我的数据结构和算法学习之路,但这个写法实在太绕口--况且CS中的算法往往暗指数据结构和算法(例如算法导论指的实际上是数据结构和算法导论),所以我认为本文题目是合理的. 这篇文章讲了什么? 我这些年学习数据结构和算法的总结. 一些不错的算法书籍和教程. 算法的重要性. 初学 第一次接触数据结构是在大二下学期的数据结构课程.然而这门课程并没有让我入门--当时自己正忙于倒卖各种MP3和耳机,对于这些课程根本就不屑一顾--反正最后考试划个重点也能过,于是这门整个计算机专业本

一个女大学生的代码学习之路(二)

首先说一下,写这种文章是由于我在四月四日晚上,在手动搭建自己的第一个ssh项目的时候,遇到了一个配置的问题,怎么解决也弄不好,当时是四号晚上九点,我看了一眼表,我就想两个小时之内,我要是能搞定就算行了,但是其实,我搞到三点才OK(凌晨),那时候已经是五号了,转天是一家子去扫墓的时候,结果我居然以这种一个理由没有去,理由是我太累了么?我只是就是搭了一个架子,就是由于我的包太混乱了,导致不兼容,所以tomcat总也不启动,你可能认为好笑,这么简单一个问题怎么就费这多多时间呢,但是作为一个刚接触三框架

HTML5 学习

1.details元素 details元素标识用户要求得到并且可以得到的细节信息,用于描述文档或文档某个部分的细节.它可以与summary元素配合使用.summary元素提供标题或图例.标题是可见的,用户点击标题时,会显示出细节信息,也就是details里面定义的信息. <details> <summary>HTML 5</summary> This document teaches you how to learn about HTML 5 </details&