好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

HTML5 教程

html5是构建Web 内容 的一种语言描述方式。html5是互联网的下一代标准,是构建以及呈现互联网 内容 的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。

HTML5的设计目的是为了在移动设备上 支持 多媒体。
HTML5是Web中核心语言HTML的规范, 用户 使用任何手段进行网页浏览时看到的 内容 原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的

HTML5 简单易学。

什么是 HTML5?

HTML5 是下一代 HTML 标准。

HTML,HTML 4.01的上 一个 版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持 。

HTML5 是如何起步的?

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建 一个 新版本的 HTML。

HTML5 中的一些有趣的新特性:

用于绘画的 canvas 元素

用于媒介回放的 video 和 au dio 元素

对本地离线存储的更好的 支持 (localStorage 和 sessionStorage)

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

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

HTML5将Web带入 一个 成熟的应用平台, 在这 个平台上,视频、音频、图像、动画以及与设备的交互都进行了规范。

HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

<!DOCTYPE?html>

这样做会让目前还 不支持 的HTML5的浏览器采用标准模式解析,这意味着他们会解析那些HTML5中兼容的旧的HTML的 标签 的部分,而忽略他们 不支持 HTML5的新特性。
这个doctype比以前更短,更简单,使的它更容易被记住并且减少必须下载的字节数。

用< Meta charset>声明字符集

?在 一个 页面 上做的第一件事通常是声明使用的字符集。在以前版本的HTML,它是 一个 非常复杂的< Meta >元素,现在它变得非常简单:

< Meta ?charset="UTF-8">

把这个放到你的<head>,因为在一些浏览器中如果声明的字符集和他们的预期的不同,他们会重新解析一遍HTML文档。另外,如果你目前没有使用UTF-8,建议您把您的网页改为这个编码,因为它简化了不同脚本对 文件 中字符的处理。
值得注意的是HTML5限制了可用的字符集,他们需要兼容8位的ASCII。这样做是为了加强安全,防止某些类型的攻击。

最小的HTML5文档

下面是 一个 简单的HTML5文档:

<!DOCTYPE?html>
<html>
<head>
< Meta ?charset="utf-8">
<title>我是 一个 html5文档 标题 </title>
</head>
?
<body>
html5文档 内容 ......
</body>
?
</html>

注意:对于 中文 网页需要使用 < Meta charset="utf-8"> 声明编码,否则会出现乱码。

HTML5 的改进

新元素

新 属性

Video 和 Au dio

2D/3D 制图

本地存储

本地 sql 数据

Web 应用

HTML5 多媒体

使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (au dio ) 。

HTML5 应用

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

本地数据存储

访问本地 文件

本地 sql 数据

缓存引用

JavaScript 工作者

HTML5 图形

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

使用 <canvas> 元素。
使用内联 SVG。
使用 css3 2D 转换、CSS3 3D 转换。

HTML5 使用 CSS3

新选择器

新 属性

动画

2D/3D 转换

圆角

阴影 效果

可下载的字体

语义元素

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

标签 描述 <article> 定义 页面 独立的 内容 区域。 <aside> 定义 页面 的 侧边栏 内容 。 <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。 <command> 定义命令按钮,比如单选按钮、复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框,比如 提示 框 <summary> 标签 包含 details 元素的 标题 < fig ure> 规定独立的流 内容 (图像、图表、照片、 代码 等等)。 < fig caption> 定义 < fig ure> 元素的 标题 <footer> 定义 section 或 document 的页脚。 <header> 定义了文档的头部区域 <mark> 定义带有记号的文本。 <meter> 定义度量衡。仅用于已知最大和最小值的度量。 <nav> 定义导航 链接 的部分。 <progress> 定义任何类型的任务的进度。 <ruby> 定义 ruby 注释( 中文 注音或字符)。 <rt> 定义字符( 中文 注音或字符)的解释或发音。 <rp> 在 ruby 注释中使用,定义 不支持 ruby 元素的浏览器所 显示 的 内容 。 <section> 定义文档中的节(section、区段)。 <time> 定义日期或时间。 <wbr> 规定在文本中的何处适合 添加 换行符。


HTML5 智能表单

新表单元素,新 属性 ,新输入类型, 自动 验证。

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被 删除 :

<acronym>

<applet>

<basefont>

<big>

<center>

<dir>

<font>

<frame>

<frameset>

<noframes>

<strike>

HTML5视频播放示例

通过我们的 HTML 编辑器,您能够编辑 HTML,然后点击按钮来查看结果。

示例

<!DOCTYPE?HTML>
<html>
<head>
< Meta ?charset="utf-8">?
<title>基础之家(F2er.com)</title>?
</head>
<body>
?
<video?width="320"?height="240"?controls>
??<source?src="movie.mp4"?type="video/mp4">
??<source?src="movie.ogg"?type="video/ogg">
??你的浏览器 不支持 ?video? 标签 。
</video>
?
</body>
</html>

HTML5 浏览器 支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持 某些 HTML5 特性。Internet Explorer 9 将 支持 某些 HTML5 特性。

IE9 以下版本浏览器兼容HTML5的 方法 ,使用本站的静态资源的html5shiv包:

<!--[if?lt?IE?9]>
????<script?src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

载入后,初始化新 标签 的CSS:

/*html5*/
article,aside,dialog,footer,header,section,nav, fig ure,menu{ dis play:block}


HTML5 浏览器支持 ?

查看更多关于HTML5 教程的详细内容...

  阅读:45次

上一篇

下一篇

第1节:HTML5 教程    第2节:HTML5 浏览器支持    第3节:HTML5 新元素    第4节:HTML5 Video 视频    第5节:HTML 5 Video + DOM    第6节:HTML5 内联 SVG    第7节:HTML5 新的 Input 类型    第8节:HTML5 MathML 数学公式    第9节:HTML5 Geolocation 地理定位    第10节:HTML5 Canvas画布    第11节:HTML5 拖放 ( drag 和 drop )    第12节:HTML5 Audio 音频    第13节:HTML5 Web Workers    第14节:HTML5 表单元素    第15节:HTML5 表单属性    第16节:HTML5 语义元素    第17节:HTML5 Web 存储    第18节:HTML5 Web SQL 数据库    第19节:HTML5 应用程序缓存    第20节:HTML 5 服务器发送事件    第21节:HTML5 WebSocket    第22节:HTML5 历史记录API    第23节:HTML 5 代码规范    第24节:HTML5 Canvas 描边和填充    第25节:HTML5 Canvas 绘制矩形    第26节:HTML5 Canvas 清除画布    第27节:HTML5 Canvas 渐变    第28节:HTML5 Canvas 合成    第29节:HTML5 Canvas 绘制图像    第30节:HTML5 Canvas 绘制文本    第31节:HTML5 Canvas 阴影    第32节:HTML5 Canvas 路径    第33节:HTML5 Canvas 转换    第34节:HTML5 Canvas 状态    第35节:HTML5 Canvas toDataURL()    第36节:HTML5 Canvas 像素处理    第37节:HTML5 Canvas 制作动画