企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

HTML5介绍

HTML+CSS教程 码云 58℃ 0评论
目录
[隐藏]

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;
}

 

转载请注明:码云笔记 » HTML5介绍

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址