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带来的新变化
相关推荐
总结起来，这个"HTML5+CSS3原图对比查看特效源码"展示了如何结合HTML5的新特性、CSS3的丰富样式和动画效果以及JavaScript的动态交互能力，创建出一个实用且美观的图片对比工具。对于学习和理解Web前端开发的开发者来...
HTML和JavaScript是构建Web应用程序的基石，而在线文件对比工具则是一种高效的工作辅助工具，尤其在版本控制或代码审查中非常实用。Mergely是一款基于Web的文件比较工具，它利用HTML和JavaScript技术实现了在浏览器...
本文将详细介绍HTML5中新增或修改的标签，并与HTML4中的标签进行对比。 #### 二、HTML5新增标签 1. **`<article>`**： - **定义**：用于表示文档、页面或应用中的独立内容。 - **差异**：HTML4中没有此标签，它...
如果是有一定经验的开发者，可能更倾向于在HTML5 China找到问题的答案，或者在HTML5梦工厂中寻找新的挑战和机遇。 总结来说，国内三大HTML5平台各有特色，共同推动了HTML5技术在中国的普及和进步。了解这些平台的...
HTML5与Flash之间的对比一直是IT领域热议的话题，尤其是在开放Web技术的发展背景下。随着HTML5的逐渐普及和浏览器对其支持的增强，许多人开始质疑Flash的地位，甚至有人认为HTML5将会全面取代Flash。然而，这种观点...
HTML5是一种先进的网页标准，它在图形和交互性方面提供了许多增强功能，使得开发者能够创建出更加生动和富有表现力的网页应用。本资源包含了一系列使用HTML5和JavaScript技术实现的图表，包括饼图、柱状图和折线图，...
同时，随着技术的发展，HTML5引入了更多新的元素和功能，如多媒体支持（`<audio>`和`<video>`），离线存储（`<applicationcache>`）等，这些都是进阶学习的方向。 总之，HTML是互联网世界的基石，无论你是要建立...
HTML5作为下一代超文本标记语言，引入了许多新的元素和API，旨在简化网页结构和增强交互性。例如： 1. **语义化标签**：`<header>`, `<nav>`, `<section>`, `<article>`, `<aside>` 和 `<footer>` 等元素帮助更好地...
在"html差异比较文件"中，我们可以找到不同HTML版本间的对比，例如HTML4、HTML5以及可能的HTML5.1或HTML5.2等。这些差异可能涉及到元素的添加、删除、属性的变更以及语义化的改进。例如，HTML5引入了新的结构元素如`...
4. **HTML生成**：比对的结果通常以文本形式输出，但为了提高可读性和用户体验，本项目将其转换为HTML格式。HTML是一种标记语言，用于创建网页。通过在Python中构建HTML字符串，可以创建具有颜色高亮和清晰结构的...
在本压缩包“JS+HTML5实现图片修改前后对比效果源码.zip”中，包含了一个使用JavaScript和HTML5技术来创建图片修改前后对比效果的源码。这个功能常见于在线图像编辑器或照片处理应用中，它允许用户直观地看到图片...
《CSS2.0_CSS3.0_HTML4_HTML5手册》是一个综合性的技术文档集合，它涵盖了Web开发中从基础到最新版本的四个重要标准：CSS2.0、CSS3.0、HTML4和HTML5。这些手册对于理解、学习和应用这些技术提供了全面的指导，帮助...
本主题“CSS3和HTML5图片加工前后对比代码”探讨了如何利用这两种技术实现图像的自动响应，适应不同设备和屏幕尺寸。以下是关于这个主题的详细知识点： 1. **CSS3的图片处理**： - **响应式设计**：CSS3中的媒体...
这种变化带来了更灵活、便捷的APP使用和安装方式。 HTML5的一大核心优势在于离线缓存功能，通过Web Storage API，开发者可以存储大量数据在本地，即使在无网络连接的情况下也能恢复应用状态，减少对网络的依赖。这...
HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能，包括在不依赖插件的情况下创建动态、交互的图表。这个“html5 图表（多种类型图表）源码”压缩包显然包含了各种不同类型的HTML5图表实现，这些图表...
- 探讨HTML5时代的商业模式变化。 - 分析HTML5能否取代传统的原生应用。 - 展示成功的HTML5应用案例。 2. **PhoneGap教学**： - 介绍如何安装PhoneGap SDK并建立首个Android+PhoneGap项目。 - 教授如何使用...
标题中的“七色幻彩大气的幻灯片html5网站模板-七彩 黑色 大气 html5 css3 企业.rar”表明这是一个基于HTML5和CSS3技术设计的网站模板，特别适合用于创建具有七种颜色变化、黑色背景以及大气风格的幻灯片展示。...
对比学习常常会涉及HTML5的新特性，例如`<section>`、`<article>`、`<header>`、`<footer>`等语义化标签，它们增强了内容的可读性和可访问性。同时，`<canvas>`和`<video>`元素使得在网页中直接处理图形和视频成为...
4. **HTML5新特性**：可能使用了HTML5的离线存储（AppCache）来缓存项目资源，以便用户在离线状态下也能访问。另外，HTML5的拖放API（Drag and Drop）也可能用于让用户能够方便地上传自己的图片进行对比。 5. **...