来自：http://blog.csdn.net/dawanganban/article/details/17652873

在前面介绍了HTML5的新特性，新标签的使用，智能表单设计，引入多媒体对象，Canvas对象你的画布，扩展图形标记，HTML5中的地理应用，独立数据存储，新的网络连接。

HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。（HTML5也有了自己的logo）.学习HTML5需要掌握下面几方面知识。

1、HTML基础知识

2、CSS样式知识

3、JavaScript知识

很多以前学过HTML 4.0的朋友可能此时会感到很迷惑，到底html 4.0和HTML5的区别是什么，学过html4.0会对学习HTML5有什么帮助 其实HTML5和HTML4最大的区别就是HTML5更加注重内容与结构而不专注表现，举个例子：

  1. <body>
  2. <header>
  3. <hgroup>导航相关数据</hgroup>
  4. </header>
  5. <nav>菜单</nav>
  6. <article>
  7. <h1>标题:HTML5专题</h1>
  8. 发布日期:<time>19:00</time>
  9. <time datetime="2013-2-14">情人节</time>
  10. <p>测试相关内容</p>
  11. </article>
  12. <footer>
  13. <address>CSDN-大碗干拌的博客</address>
  14. </footer>
  15. </body>

像上面这个html5中的很多标签，在以前的html4中我们都可以使用<div>标签代替，那么为什么还有用这么多没有使用过的标签呢，这反而增加了记忆难度？事实上不是这样的，这样做有很多好处，这些特定名称的标签更容易区分各自的功能，比如可以同时在PC浏览器和移动端浏览器上识别并以很好的布局展现。

还有一个区别就是，HTML5在更多的声明和标签上面做了简化，也对兼容做了详细的规定，废除了部分元素，增加了部分元素，如下面的声明：

HTML4的声明：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  2. Transitonal//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t......
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

HTML5的声明：

  1. <!DOCTYPE html>
  2. <meta charset=utf-8/>

在引入JavaScript或CSS文件的时候，HTML4中写法如下：

  1. <script src="js/juery-1.6.2.js" type="text/javascript"></script>

在HTML5中变的更简单：

  1. <script src="js/juery-1.6.2.js"></script>

不仅如此，HTML5接受一些比较松散的的语法，比如<sCript><script>大小写混用。

从上面可以看出HTML5在以前浏览器发展的基础上对标签进行了简化。另外HTML5中对标签从语法上也进行了分类：

（1）不允许写结束符的标签：area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、Track、wbr

（2）可以省略结束符的标签：li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th

（3）可以完全省略的标签：html、head、body、colgroup、tbody

在html4的基础上html5也新增了很多标签，下面列举部分新增标签：

  1. <article>  标记定义一篇文章
  2. <aside>  标记定义页面内容部分的侧边栏
  3. <audio>  标记定义音频内容
  4. <canvas>   标记定义图片
  5. <command>  标记定义一个命令按钮
  6. <datalist>  标记定义一个下拉列表
  7. <details>   标记定义一个元素的详细内容
  8. <dialog>   标记定义一个对话框(会话框)
  9. <embed>   标记定义外部的可交互的内容或插件
  10. <figure>   标记定义一组媒体内容以及它们的标题<footer> 标记定义一个页面或一个区域的底部
  11. <header>   标记定义一个页面或一个区域的头部
  12. <hgroup>   标记定义文件中一个区块的相关信息
  13. <keygen>   标记定义表单里一个生成的键值
  14. <mark>   标记定义有标记的文本
  15. <meter>   标记定义 measurementwithin apredefinedrange
  16. <nav>   标记定义导航链接
  17. <output>   标记定义一些输出类型
  18. <progress>   标记定义任务的过程
  19. <rp>   标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示
  20. <rt>   标记定义对rubyannotations的解释
  21. <ruby>   标记定义 rubyannotations.
  22. <section>   标记定义一个区域
  23. <source>   标记定义媒体资源
  24. <time>   标记定义一个日期/时间
  25. <video>   标记定义一个视频

以前制作网页头部导航的代码如下：

  1. <div class="header">
  2. <div class="navigation">
  3. <ul class="nav_list">
  4. <li><a href="#" title="Home">Home</li>
  5. <li><a href="#" title="About">About</li>
  6. </ul>
  7. </div><!--导航标签结束-->
  8. </div><!--头部结束-->

用HTML5实现如下：

  1. <header>
  2. <nav>
  3. <ul id="nav-list">
  4. <li><a href="#" title="Home">Home</a></li>
  5. <li><a href="#" title="About">About</a></li>
  6. </ul>
  7. </nav>
  8. </header>

有朋友可能会问了，这样写有什么优势吗？在HTML5中用独立的标签代表特定的功能，比如<header>表示头部，<nav>表示导航，这样代码变的非常有语义且容易理解（不用像上面一样添加额外的注释），同意对于搜索引擎来说，更容易找到。

小强的HTML5移动开发之路（3）——HTML5与HTML4比较的更多相关文章

  1. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  2. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  3. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  4. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  5. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  8. 小强的HTML5移动开发之路（1）——HTML介绍

    来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

  9. 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

随机推荐

  1. 0428css样式

    CSS样式表|-引入的三种方式|--内联样式|----标签内部(空格style)|--内嵌样式|----<head></head>标签内部(<style></ ...

  2. 浅谈JS变量声明和函数声明提升

    先来两个问题 很多时候,在直觉上,我们都会认为JS代码在执行时都是自上而下一行一行执行的,但是实际上,有一种情况会导致这个假设是错误的. a = 2; var a; console.log(a); 按 ...

  3. PHP HTTP 函数

    PHP HTTP 简介 HTTP 函数允许您在其他输出被发送之前,对由 Web 服务器发送到浏览器的信息进行操作. 安装 HTTP 函数是 PHP 核心的组成部分.无需安装即可使用这些函数. PHP ...

  4. Android 学习笔记二 自定义按钮形状 颜色 点击渐变

    问题:自定义按钮的颜色 形状弧度  渐变效果 1.新建自定义属性button_login.xml (借鉴某大神) <?xml version="1.0" encoding=& ...

  5. [OpenCV]在显示窗口中截图

    [OpenCV]在显示窗口中截图 简介 介绍使用OpenCV实现简单的截图功能.首先阐述实现此功能的基本步骤,然后给出实现代码,最后贴出实验结果以及遇到的问题. 基本步骤 我们需要知道OpenCV使用 ...

  6. 1.cocos2dx 3.2环境搭建

    1        所需软件 jdk-7u25-windows-i586.exe python-2.7.8.amd64.msi cocos2d-x-3.2.zip apache-ant-1.9.4.zi ...

  7. 学习Android路上的一些感慨和总结，慢慢来，比较快！

    学习Android路上的一些感慨和总结,慢慢来,比较快! 一直想对自己的学习路程做一个总结,来告别某一个阶段的过去,迎接某一个阶段的来临,一直抽不出时间来,于是零零散散的写了点-,到现在,也已经积攒了 ...

  8. JavaWeb 文件 上传 下载

    文件上传下载对于一个网站来说,重要性不言而喻.今天来分享一个JavaWeb方式实现的文件上传下载的小例子. 项目依赖 项目目录 工作流程 文件上传 表单处的设置 服务器端 上传功能的实现 upload ...

  9. iOS9中如何在日历App中创建一个任意时间之前开始的提醒(三)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 四.创建任意时间之前开始的提醒 现在我们找到了指定源中的指定日 ...

  10. Android核心安全机制(一)

    Android六种核心安全机制-加密.密钥.签名与证书 对于移动开发,程序猿很容易会忘记一些安全问题,如一个MD5的加密,大部分人都知道怎么去使用,但是其中的一些加密原理,加密方式却只有少部分会去了解 ...