html5 简介

html

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

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

html5 简单易学。


什么是 html5?

html5 是下一代 html 标准。

html , html 4.01的上一个版本诞生于 1999 年。自从那以后,web 世界(shì jiè)已经经历了巨变。

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


html5 是如何(how)起步的?

html5 是 w3c 与 whatwg 合作(cooperation)的结果,whatwg 指 web hypertext application technology working group。

whatwg 致力于 web 表单和应用程序,而 w3c 专注于 xhtml 2.0。在 2006 年,双方决定进行合作(cooperation),来创建一个新版本的 html。

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

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

html5 <!doctype>

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

<!doctype html>

最小(smallest)的html5文档

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

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

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


html5 的改进

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

html5 多媒体

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


html5 应用

使用 html5 你可以( kě yǐ)简单地开发(kāi fā)应用

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

html5 图形

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


html5 使用 css3

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

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


语义元素

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

标签描述
<article>定义页面独立的内容区域(qū yù)。
<aside>定义页面的侧边栏内容。
<bdi>允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command>定义命令按钮,比如单选按钮、复选框或按钮
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框,比如提示(tí shì)框
<summary>标签包含 details 元素的标题
<figure>规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption>定义 <figure> 元素的标题
<footer>定义 section 或 document 的页脚。
<header>定义了文档的头部区域(qū yù)
<mark>定义带有记号的文本。
<meter>定义度(attitudes)量衡。仅用于已知最大(zuì dà)和最小(smallest)值的度(attitudes)量。
<nav>定义导航链接的部分。
<progress>定义任何类型的任务的进度。
<ruby>定义 ruby 注释(中文(Chinese)注音或字符)。
<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.jinchi888.com/)</title></head><body><video width="320" height="240" controls><source src="movie.mp4" type="video/mp4
在大纽约地区,领养中国(China)儿童的家庭(jiā tíng)组织每年都举办活动,庆祝中国(China)的新年和中秋,并在每年5月举办大型的中国文化日活动。
据课程的联络主任伍惠明透露,他们10年前曾开办中文课程,后来停办近两年才重开,而学生(xué sheng)人数则一直上升,今年一班多达30多人;医学院在中文老师的协助下,编纂了一部医学中文教材,让同学学习。
的确,多数技术移民的头两年,职业无着,生活开支却比在国内高出不少。
他在纽约大学研究院获得历史硕士学位,17岁出家。
周正烜表示HR4437 修改移民法的部分是将非法移民变为罪犯,而帮助他们的人成为共犯。
这个事实明白地告诉华人,华人必须多照顾自己(zì jǐ)。
"><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.jinchi888.com//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参考手册