目录
文章目录隐藏
  1. 什么是 HTML5?
  2. HTML5 的起步
  3. HTML5 有哪些新特性
  4. HTML5 <!DOCTYPE>
  5. HTML5 有哪些改进
  6. HTML5 多媒体应用
  7. HTML5 的应用
  8. HTML5 图形绘制
  9. HTML5 使用 CSS3
  10. HTML5 表单
  11. html5 已移除元素
  12. HTML5 浏览器支持

html5 介绍

什么是 HTML5?

HTML5 是下一代的 HTML。

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML5 将会取代 1999 年制定的 HTML 4.01、XHTML 1.0 标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求,为桌面和移动平台带来无缝衔接的丰富内容。

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

HTML5 的起步

HTML5 是 W3C(World Wide Web Consortium)万维网联盟与 WHATWG(Web Hypertext Application Technology Working Group)合作的结果。

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

HTML5 有哪些新特性

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

1.用于绘画的 canvas 元素

2.用于媒介回放的 video 和 audio 元素

3.对本地离线存储的更好的支持

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

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

HTML5 <!DOCTYPE>

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

<!DOCTYPE html>

一个简单的 HTML5 文档:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

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

HTML5 有哪些改进

  • 新元素
  • 新属性
  • 完全支持 CSS3
  • Video 和 Audio
  • 2D/3D 制图
  • 本地存储
  • 本地 SQL 数据
  • Web 应用

HTML5 多媒体应用

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

  • HTML5 <video>
  • HTML5 <audio>

HTML5 的应用

使用 HTML5 我们可以简单地开发应用

  • 本地数据存储
  • 访问本地文件
  • 本地 SQL 数据
  • 缓存引用
  • Javascript 工作者
  • XHTMLHttpRequest 2

HTML5 图形绘制

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

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

HTML5 使用 CSS3

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

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

HTML5 表单

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

html5 已移除元素

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

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>

HTML5 浏览器支持

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

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

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

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

HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级 元素。

为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:

实例:

header, section, footer, aside, nav, main, article, figure {
    display: block;
}

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » HTML5介绍

发表回复