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中新增的语义化元素，并告诉你什么时候使用它们。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/512.html
微信扫一扫 
支付宝扫一扫 