跟永哥学HTML5（2）：html5与html4的区别

江山如画 • 2018年1月21日上午11:21 • 网页制作 • 阅读 2664

HTML5和HTML4的区别二：新增语义化标记

HTML5的最大的意义在于改变了 Web 文档的结构方式，借助 header, footer, section, article 这些标签，我们可以实现更具结构化，语义化的 Web 文档。这样，搜索引擎可以更容易索引 Web 站点，我们也可以搜索到更快，更准确的信息。
在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>表示导航，这样代码变的非常有语义且容易理解（不用像上面一样添加额外的注释），同意对于搜索引擎来说，更容易找到。

HTML5和HTML4的其他区别

动画 Canvas

HTML 5 引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。

地理信息

HTML5 的另一个功能是地理信息定位功能，一些浏览器提供了 geolocation API ，可以结合 HTML5 实现你当前地理位置定位。

本地存储

相对于HTML4只能使用cookie在客户端存储数据，大小受限制，占用带宽，操作复杂的情况，HTML5支持使用Web Storage在客户端进行存储数据，容量更大，减轻带宽压力，操作简便。
……更多HTML5和HTML4的区别，以及HTML5新增的功能我们会在后面教程中给大家介绍，今天就先到这里了，别忘记加群：网页设计交流群：208047327。下节课我们将介绍HTML5中新增的语义化元素，并告诉你什么时候使用它们。