html5 简介

html

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

html5的设计目的是为了在移动设备上支持多媒体。

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 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

html5 <!doctype>

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

<!doctype html>

最小的html5文档

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

<!doctype html><html><head><meta charset="gbk"><title>文档标题</title></head><body>文档内容......</body></html>

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


html5 的改进

  • 新元素
  • 新属性
  • 完全支持 css3
  • video 和 audio
  • 2d/3d 制图
  • 本地存储
  • 本地 sql 数据
  • web 应用

html5 多媒体

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


html5 应用

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

  • 本地数据存储
  • 访问本地文件
  • 本地 sql 数据
  • 缓存引用
  • javascript 工作者
  • xhtmlhttprequest 2

html5 图形

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


html5 使用 css3

  • 新选择器
  • 新属性
  • 动画
  • 2d/3d 转换
  • 圆角
  • 阴影效果
  • 可下载的字体

了解更多css3知识请查看本站的 css3 教程。


语义元素

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

标签描述
<article>定义页面独立的内容区域。
<aside>定义页面的侧边栏内容。
<bdi>允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command>定义命令按钮,比如单选按钮、复选框或按钮
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框,比如提示框
<summary>标签包含 details 元素的标题
<figure>规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption>定义 <figure> 元素的标题
<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>

每一章中的实例

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

实例

<!doctype html><html><head><metacharset="gbk"><title>菜鸟教程(http://www.czrr.net/)</title></head><body><video width="320" height="240" controls><source src="movie.mp4" type="video/mp4
瑞典着名球星瓦尔德内尔和阿佩依伦亲临现场,为大家进行了表演,互动和颁奖活动。
连线同胞情重300华人紧相依“虽然在以华人仅仅三百来人,但他们之间却是紧紧相依。
华人碰到问题喜欢私下解决,尤其不愿意涉及诉讼,华人常常抱着破财消灾、息事宁人的想法,这就给欺诈者以可乘之机,如果数额不大,欺诈者常常可以得手。
而“毕业生创业者签证”每年只有1000个名额,申请者需要投资5万英镑作为创业资金,并得到校方推荐。
年尾向来是盗窃案发生频繁的时期,加之多年的经济危机,治安一年比一年差。
"><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://cdn.static.http://www.czrr.net//libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->

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

/*html5*/article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

html5 参考手册

在本站中你可以找到关于html5 的标签及属性描述,详细请点击 html5参考手册