HTML5+CSS3从入门到精通之移动开发之路（3）HTML5与HTML4比较-职坐标

HTML5+CSS3从入门到精通之移动开发之路（3）HTML5与HTML4比较

沉沙 2018-11-23 来源：阅读 1541 评论 0

摘要：本篇教程探讨了HTML5+CSS3从入门到精通之移动开发之路（3）HTML5与HTML4比较，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5+CSS3从入门到精通之移动开发之路（3）HTML5与HTML4比较，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

在前面介绍了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更加注重内容与结构而不专注表现，举个例子：

    <body>

    <header>
    <hgroup>导航相关数据</hgroup>
    </header>

    <nav>菜单</nav>

    <article>
    <h1>标题:HTML5专题</h1>
    发布日期:<time>19:00</time>
    <time datetime="2013-2-14">情人节</time>
    <p>测试相关内容</p>
    </article>

    <footer>
    <address>CSDN-大碗干拌的博客</address>
    </footer>

    </body>

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

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

HTML4的声明：

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

HTML5的声明：

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

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

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

在HTML5中变的更简单：

    <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也新增了很多标签，下面列举部分新增标签：

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

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

    <div class="header">
        <div class="navigation">
            <ul class="nav_list">
                <li><a href="#" title="Home">Home</li>
                <li><a href="#" title="About">About</li>
            </ul>
        </div>
    </div>

用HTML5实现如下：

    <header>
        <nav>
            <ul id="nav-list">
                <li><a href="#" title="Home">Home</a></li>
                <li><a href="#" title="About">About</a></li>
            </ul>
        </nav>
    </header>

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