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带来的新变化
相关推荐
Javascript 提供了document.createElement(tagName) 的方法，让你可以用来创建新的 HTML5 标签。代替自己创建这些元素，你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 ...
主要功能有： (1)详细地向你报告注册表及其他与系统有关项目的修改和变化情况。报告 结果既可以纯文本的方式，也可以 HTML 网页的方式显示，非常便于查看。 (2)RegSnap 报告的内容有：注册表的变化情况...
第1章 基础知识 1 1.1 canvas元素 1 1.1.1 canvas元素的大小与绘图表面的大小 4 1.1.2 canvas元素的api 5 1.2 canvas的绘图环境 6 1.2.1 2d绘图环境 6 1.2.2 canvas状态的保存与恢复 8 1.3 本书程序清单的...
对比UIWebView / WKWebView加载本地html文件，加载url，加载拆分本地的html源码，直接加载源码等方式时间消耗 ＃简介 存储如下：！[]（屏幕快照2017-02-27 16.45.35.png） 5中加载方式如下： 方法1。 //读取本地...
其中，时间对比与颜色变幻是一种有趣的应用。通过JavaScript，您可以根据当前时间或特定时间点来改变页面元素的颜色，营造出一种随时间变化而变幻的效果。 首先，了解时间对比是如何运作至关重要。通过JavaScript的...
要实现风格的统一，不一定要把每个栏目做得一模一样，举个例子来说，可以尝试让导航条样式统一，各个栏目采用不同的色彩搭配，在保持风格统一的同时为网站增加一些变化. 第三、色彩和谐、重点突出：在网页设计中，...
设计一个虚拟存储及内存工作区，使用先进先出算法（FIFO），理想型淘汰算法（OPT），最近最久未使用算法（LRU）计算不同内存容量下的缺页率，模拟表示出不同算法内存中页面的变化情况，并对不同内存容量下不同算法的...
比较两个word内容将不一样的地方标记出来
Ruby Blue是一个深色，高对比度的主题，易于阅读。 推荐的扩展 安装 访问以查看最新的安装说明。 变更记录 访问以查看版本之间的变化。 故障排除 事情看起来“怪异” 尝试按F5键（在执行此操作之前，请保存更改！）...
本文实例讲述了JS+HTML5手机开发之滚动和惯性缓动实现方法。...2)js 编程实现 思路：对比手指在屏幕上移动前后位置变化改变内容元素content 1. 滚动 以下是三种实现方式： 1) 利用原生的css属性 overf
(4)增加或删除文件,对比每次监测前后的文件数量 在企业网站发布代码之后,即对网站所以数据建立指纹库和文件库,没有基础的指纹库,无法进行入侵监测 2. 建立测试数据 [root@localhost web_detect]# mkdir /var/...
├最新AngularJS开发宝典—第001讲 什么是Angular及与Jquery实例对比分析.mp4 ├最新AngularJS开发宝典—第002讲 模块、控制器、视图模型、双向数据绑定模型、双向数据绑定.mp4 ├最新AngularJS开发宝典—第003讲 ...
5、支持监察您 Windows 目录和 System 目录中文件的变化，为您手工卸载某些软件创造条件。 二、RegShot使用方法 1、打开Regshot，勾选"扫描"，点击“摄取[1]”，这样就能记录下当前注册表和文件夹的结构； 2、点击...
4.伪类选择器 作用：匹配元素不同状态的选择器 语法：所有的伪类都是以 : 作为开始 选择器：伪类选择器{样式} 伪类分类 1.伪类链接 :link 匹配尚未访问的超级链接状态 :visited 匹配访问过的元素的状态 2....
通过大数据分析展示页面，用户能够直观地理解数据的分布情况、趋势变化以及潜在价值，从而做出更明智的决策。 大数据分析展示页面通过丰富的图表类型（如柱状图、折线图、饼图、散点图、热力图等）将大数据转化为...
AWR 是通过对比两次快照(snapshot)收集到的统计信息，来生成报表数据，生成的报表包括多个部分，通过AWR报告，DBA可以容易地获知最近数据库的活动状态，数据库的各种性能指标的变化趋势，最近数据庳可能存在的异常，...
根据名称，动态请求对比项列表，名称变化时，清空该行当前选择的对比项 思路：将整个搜索分成了两个表单，分别去做验证。一个是可动态添加的循环表单form，另一个为普通表单dateForm html ...
4. **变化识别**：通过对比前后两次抓取的内容差异，识别出页面内容的更新。 5. **通知机制**：在检测到内容变化时，通过邮件、短信或其他即时通讯工具通知用户。 6. **用户界面**：提供友好的用户界面供用户设定...
> - stockSinglePredict.html：股票预测页，展示针对单个股票的预测结果（包含股票走势、区间、变化、明日股价1） > - stockComparison.html：股票对比页面，对比两只股票的信息 > - marketIndex.html：展示大盘指数...