HTML5对比HTML4带来的新变化
HTML5入门
HTML5是HTML的最新版本，目标是更好地开发网络应用程序。 HTML5比HTML4拥有更简洁的语法并且提供了更多新的特性。 本文将对HTML5做一个大体的介绍。
HTML5能做什么？
1. 离线存储
HTML5可以让你的WEB应用程序离线也能运行,它提供了一个称作“应用程序缓存"的离线存储功能，因此即使当用户离线，浏览器仍然能够访问到它所需的文件。 这些文件可以是HTML，CSS，Javascript 或者其它任何网页运行所需要的文件。
2.拖拽功能
HTML5提供了可以用来设计交互应用程序的本地拖拽功能，通过这个特性你可以拖动任何元素然后把它放到你想放到地方。
3.地理位置定位技术
HTML5的地理位置定位API可以让你与所信任的网站分享你当前的位置信息，当然，隐私问题是这一特性所主要考虑的，W3.org声明：
浏览器在没有用户许可的情况下不允许私自向网站发送用户的地理位置信息。
比 如一位用户使用Firefox浏览器访问了一个实现地理位置定位技术的网页，浏览器会向用户询问是否共享他的地理位置信息，如果用户同意，Firefox 会收集附近无线接入点和访问者IP地址信息，并把这些信息发送到默认设定的Google地理位置服务，处理之后的位置信息将会发送给用户访问的这个网站。
4.音频和视频
当前的HTML缺少在页面中嵌入多媒体文件的特性，因此多媒体文件的嵌入需要使用各种的插件。 比如FLASH被广泛地用来嵌入音频和视频文件。 现在可以非常方便地使用HTML5提供的audio和video标签，而不用任何插件。
5.表单输入
HTML5提供了几个新的表单input类型，像弹出日历，调色板，数字输入框等等。 这些可以创建拥有更好的输入控制和验证的高效表单。
简化的语法
文档类型Doctype:
文档类型的声明是一个HTML文档的第一行内容，它告诉浏览器这个页面是使用哪个版本的标记语言编写的。
比如,HTML 4.01 Transitional 文档类型的声明是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Transitional 文档类型声明的写法是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
而HTML5中，你只需要：
<!doctype html>
字符编码
为了验证或显示一个HTML文档，程序必须选择一种字符编码。
字符编码告诉浏览器和验证程序应该使用哪种编码由比特流转换为字符。
下面是HTML 4.01指定UTF-8字符编码的例子：
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
在XHTML中：
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
而现在使用HTML5,编码类型的语法非常简单：
<meta charset = "UTF-8">
因此，最基本的HTML文档结构应该是：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Hello, World</p> </body> </html>
<script>标签
<script>标签用来定义一段客户端脚本，比如JavaScript. 在HTML4里，type属性是必须的，但在HTML5里不是。
比如在HTML4里，<script>标签是这样定义的：
<script type="text/javascript" src="file.js"></script>
在HTML5里:
<script src="code.js"></script>
HTML5为script标签添加了一个新的可选属性“async", 用来告诉浏览器异步加载代码，所以这段代码在页面继续加载的同时就会被执行。 可以像下面这样使用：
<script src = "code.js" async></script>
或者：
<script src="code.js" async="async" ></script>
<link>标签
<link>标签定义了文档与外部资源的联系，常用来引入CSS文件:
<link rel="stylesheet" type="text/css" href="style.css" />
在HTML5K ,type属性跟<script>标签一样，都不需要。 比如：
<link rel="stylesheet" href="style.css">
HTML5的新标签
HTML5为更好地组织内容和简化开发，添加了一些非常新奇和实用的标签，一些比较重要的如下：
<header>
header 标签包含网页的页面头部，里面常常放置页面包含的LOGO和其它有用的信息，像标语、菜单等等。 使用<header>来代替<div id="header">
<nav>
这个标签是用来建立菜单导航的，可以使用<nav> 来代替<div id="nav">
<artical>
这个标签用来定义独立的内容，像那些博客文章、新闻、或者用户评论内容。
<section>
<section>用来分割页面的不同部分。
一个section是一组内容，一般sections可以嵌套在在header之前，footer之后。 如果需要，它还可以包含任意数量的特殊标记。
<aside>
这个标签指定一个存放与页面内容无关的元素，可以用来定义边栏或者其它任何我们能想到的与页面正文内容无关的内容。
<figure>
<figure>标签用来注解插画、图表、照片和代码列表等等的。 在<figure>标签里的<figcaption>标签定义标题。
<footer>
这个标签用来定义代替在页面底部的部分，常常用来包含像作者、版权信息、使用政策链接、隐私条件等信息。 在<footer>里的联系信息应该使用<address>标签。
修改过的标签
<a>
在HTML5里，<a>标签允许在一行元素内包含多行元素，比如：
<a href="news.html"> <h3>Iceland's Grimsvotn volcano erupting</h3> <p>The eruption had begun at the Grimsvotn volcano.</p> <p>Read more</p> </a>
而在HTML 4.01里，〈a>标签只能包装超链接或者锚点,但是在HTML5里，<a>标签通常是一个超链接，但是如果没有指定href 属性，它只是一个放超级链接的地方
<b>
<b>标签是用来指定一段文本为粗体，而在HTML5里，使用这标签设定文本为粗体不再表达任何重要性。
<hr>
在HTML5里，<hr>标签显示一条水平线，并且在内容上标记了一个改动，而在HTML4.01里，它仅仅只显示一个水平线。
<i>
<i>标签在HTML5里不再唯一指定文字的斜体样式（虽然它可以是斜体的）。 它现在代表文字是变化的语音或心情，或者与普通文本不同。
删除的标签
除了新加入的标签和修改的标签，也有一些标签HTML5不再支持，这些是：
<frame>,<frameset>和<noframes>:这些标签从HTML5中被移除了。
<font>：这个标签曾经用来定义字体样式、字体大小和颜色。
<s>和<strike>：这两个标签曾经用来定义带删除线的文本，现在用<del>标签来代替。
<u>:曾经用来定义带下划线的文本。
<center>：之前用来让文字和内容居中。
<big>:之前用来让字体大一些。
<applet>：以前用来定义一段嵌入的网页小应用程序。 HTML5建议使用<object>标签来代替。
<acronym>：这标签在HTML 4.01里曾经用来定义首字母缩写词。 如果一个缩写词是一个单词，那么它可以被读出来，像NATO,NASA,ASAP,GUI。
总结一下
下面是一个完全的、非常基础的HTML5页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<header>
<h1><a href="#">Welcome to my page</a></h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h3><a href="#">Article 1</a></h3>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
<article>
<header>
<h3><a href="#">Article 2</a></h3>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
</section>
<aside>
<h1><a href="#">Aside content</a></h1>
Lorem ipsum dolor sit amet..
</aside>
<footer>
<address>
Contact us at:<br />
<a href="/www.gazpo.com">Gazpo.com
</address>
</footer>
</body>
</html>原文：http://inspiregate.com/programming/html-css/389-html5-started-teaching.html
本文转自：HTML5对比HTML4带来的新变化
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...