一、HTML4和HTML5的对比
1.什么是HTML5
HTML5是对HTML标准的第五次修订。其主要目标是将互联网语义化,以便更好地被人类和机器阅读,同时更好地支持各种媒体的嵌入。
HTML5有两大特点:首先,强化了Web网页的表现性能;其次,追加了本地数据库等Web应用的功能。HTML5其实是一种统称,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。
2.HTML5与HTML4的区别
(1)头部信息更简洁
HTML4 DOCTYPE声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5 DOCTYPE声明:
<!DOCTYPE html>
HTML4编码方式:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
HTML5编码方式:
<meta charset="utf-8">
(2)属性简化
HTML4属性写法:
<input type="checkbox" checked="checked"/>
HTML5属性写法:
<input type="checkbox" checked/>
注意:如上面两行显示,如果属性和值相同的情况下,直接可以简化为属性即可。
(3)可省略引号
HTML4写法:
<img src="images/img.jpg"/>
HTML5写法:
<img src=images/img.jpg/>
注意:通常情况下,在标签中属性的值都放置引号中,在HTML5中可以简写为去掉引号。
二、HTML5新特性
HTML5有哪些新特性?
HTML5提供了一些新的具有语义化的标签和属性。这些标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还提供了新的功能性标签,如音频标签和视频标签。下面详细的介绍一下这些特性:
1.取消一些过时的HTML4标记
其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被CSS取代。
HTML5吸取了XHTML2一些建议,包括一些用来改善文档结构的功能,比如,新的HTML标签 header, footer, dialog, aside, figure等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用div。
2.将内容和展示分离
b 和 i 标签依然保留,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了。
3.新增表单控件和功能
HTML5表单中,部分控件提供了验证功能,新增了一些新的空间,如:url、email、tel等。
4.本地数据库
这个功能将内嵌一个本地的SQL数据库,以加速交互式搜索、缓存及索引功能。同时,那些离线Web程序也将因此获益匪浅。
5.新增音频和视频标签
在之前的HTML4,插入视频或音频多数依赖于Flash或其他插件完成,HTML5新增了音频标签和视频标签,能够非常简单的在页面中插入音频或视频。
6.canvas对象
将给浏览器带来直接在页面上绘制矢量图的能力,这意味着用户可以脱离Flash和Silverlight,直接在浏览器中显示图形或动画。
三、HTML5新增的标签
1.新增的结构标签
(1)section标签
<section>标签,定义文档中的节,比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容,会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块,通常由内容及其标题组成。但section标签并非一个普通的容器元素,它表示一段专题性的内容,一般会带有标题。
(2)article标签
<article>是一个特殊的section标签,它比section具有更明确的语义,它代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。例如,一篇完整的论坛帖子,一篇博客文章,一个用户评论等等。article可以嵌套,内层的article标签对外层的article标签有隶属关系。例如,一篇博客的文章,可以用article显示,然后一些评论可以用article的形式嵌入其中。
(3)aside标签
通常用来描述跟主内容相关,但是又可以独立的内容。比如,以TOPYS网为例,红色的主要内容区是一篇独立的文章,可以使用article标签,右侧的蓝色框可以使用aside标签,该模块展示了与文章相关性的内容,可以是评论也可以是推荐文章等。
(4)header、footer、nav常用语义化标签
在HTML5之前,如果开发相关的页面布局的时候,往往都是使用CSS来定义相关的头部、底部及其导航部分。在新的HTML5标准中,定义的这些标签(header、footer、nav)帮助你更语义化的定义页面层次和逻辑,我们做网页布局就不仅限于div标签布局了。
这三种标签,顾名思义,就是对文章或区块,定义相关的头部信息、底部信息及导航内容的。
(5)hgroup、figure辅助主体布局标签
hgroup标签是对网页或区段section的标题元素(h1-h6)进行组合。例如,在一区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。
figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
2.多媒体标签
(1)audio音频标签
audio音频标签用在网页中嵌入音频文件。语法结构及各属性如下:
<audio src="demo.mp3">您的浏览器不支持audio标签</audio>
- src属性
指定音频URL地址,可以是相对的URL也可以是绝对的URL。
<audio src="demo.mp3"></audio>
注意:音频可以支持三种格式,分别是wav、MP3、ogg,都是音频格式,而且在不同的浏览器中还有不同的兼容性。下面是主流的几个浏览器对它的支持性:
- controls属性
添加该属性之后,音频播放控件将会显示,控件包括:播放、暂停、定位、音量等。
<audio src="demo.mp3" controls></audio>
- autoplay属性
添加autoplay属性并准确赋值时,音频将会自动播放。
<audio src="demo.mp3" controls autoplay></audio>
- loop属性
添加loop属性并准确赋值时,音频将会循环播放。
<audio src="demo.mp3" controls loop></audio>
- preload属性
可选值有auto(当页面加载后载入整个音频)、meta(当页面加载后只载入元数据)和none(当页面加载后不载入音频),如果设置了前面的autoplay属性,那么preload将会被忽略。
<audio src="demo.mp3" controls preload="auto"></audio>
(2)video视频标签
video视频标签就是向页面中嵌入视频元素。
<video src="shipin.mp4">您的浏览器不支持video标签</video>
视频标签和音频标签很多属性用法都是一样的,如src、controls、autoplay、loop、preload相同的属性,这里就不做过多的介绍了,下面主要介绍视频独有的一些属性。
- src属性
注意:视频也支持3种格式,分别是WebM、MPEG4、ogg,而且在不同的浏览器中还有不同的兼容性。下面是主流的几个浏览器对它的支持性:
- width、height属性
宽度和高度一般只要指定一个属性即可。如果不知道源视频的大小,两个属性一起修改会把视频比例调整变形,只指定宽度或高度一个属性即可等比例缩放。
<video src="shipin.mp4" controls width="500"></video>
- muted属性
规定视频的输出音量被静音。
<video src="shipin.mp4" controls muted></video>
- poster属性
规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
<video src="shipin.mp4" controls poster="tu.jpg">
(3)source标签
该标签是对audio和video标签的补充,source标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源,以video视频标签为例,火狐浏览器不支持MP4格式,但是支持ogg格式,因此为了在各种浏览器下都能显示视频,做以下兼容方式:
<video controls="controls">
<source src="video.ogg" type="video/ogg">
<source src="video.mp4" type="video/mp4">
</video>
3.其他功能性标签
(1)details标签和summary标签
- details用于描述文档或文档某个部分的细节。
- summary做为details的标题,标题是可见的,用户点击标题时,会显示出details的详细内容。
语法:
<details>
<summary>这里填写标题文字</summary>
<p>这里填写详细内容</p>
</details>
(2)progress标签和meter标签
- progress标签,顾名思义,是一个进度条,有两个常用参数value(表示当前进度)、 max(表示总进度)。
- meter标签的结构类似progress控件,都是设置一个max参数,使用value来指定显示的结果。但它比progress多了几个参数,还可以设置min表示最低量,以及low、high、optimum这些参数来描述数据的状态。
(3)mark标签、cite标签、time标签
- mark标签突出显示部分文本。
- cite标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
- time标签定义日期或时间,或者两者,格式如下:
<time datetime="2016-10-01">国庆节</time>
注意:datetime属性,定义元素的日期和时间,标签内的文字只是展示效果,搜索引擎抓取的事实上是datetime属性内的时间。
(4)canvas标签
canvas标签可以实现在网页中直接绘制复杂的图形,但canvas只是一个图像的容器,使用脚本才能绘制想要的图形,该标签会在HTML5高级中进行讲解。
四、新增的表单控件和属性
1.新增表单特点
表单是HTML中非常重要的一部分,是连接前端与后台的桥梁,它担负大量的用户和网页后台数据更新交互的任务。
因此在HTML5中表单也发生了一些变化,它在保持简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程。
2.新增表单控件
(1)email输入类型
<input type="email" name="youxiang"/>
此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示。此类型在Opera中必须指定name值,否则无效果。
(2)url输入类型
<input type="url" name="dizhi" />
上面代码展示的文本域要求输入格式正确的URL地址,开始处需要添加http://。
(3)日期时间相关输入类型
<input type="date"> <!--格式: 年/月/日 -->
<input type="time"> <!--格式: 时/分 -->
<input type="month"> <!--格式: 年/月 -->
<input type="week"> <!--格式: 年/周 -->
这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题。但目前各种浏览器兼容性不是很好,且展示效果也不一样。
(4)number输入类型
<input type="number"/>
输入框中只能用来输入数字,不支持其他字符,在输入框上有可以点击的上下按钮。但浏览器支持情况不是很好,IE和Firefox不支持。
(5)search输入类型
<input type="search" results=s />
此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标。
(6)tel输入类型
<input type="tel" />
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别。
(7)color输入类型
<input type="color" />
此类型可以让用户通过颜色选择器选择一个颜色值,并反馈到value中。
(8)range滑块
<input type="range" max="100" min="0" step="20" value="10">
具有返回数值结果的滑块控件,可以调节滑块的最大值、最小值以及渐进程度。
3.新增表单属性
(1)placeholder属性
<input type="text" placeholder="文本框提示文字,点击将会清除">
这是一个很实用的属性,免去了用JS实现点击清除表单初始值,标准浏览器都能很好的支持。
(2)required/pattern属性
<input type="text" required pattern="^[1-9]\d{5,12}$">
- 表单验证属性,require类型若输入值为空,则拒绝提交
- pattern类型为正则验证,可以完成各种复杂的验证
- 这两种类型在Opera中必须指定name值,否则无效果
(3)autofocus属性
<input type="text" autofocus="true">
默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus()。
(4)list属性
<input type="text" list="ilist">
<datalist id="ilist">
<option value="值1"></option>
<option value="值2"></option>
<option value="值3"></option>
</datalist>
该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容。
(5)max/min/step属性
<input type="range" max="100" min="0" step="20" value="10">
- max定义最大值
- min定义最小值
- step定义渐进程度
(6)autocomplete属性
<input type="text" autocomplete="on">
autocomplete属性规定表单是否应该启用自动完成功能。默认值是"on",为自动补全,如果为"off"则是关闭自动补全功能。
五、HTML5标签的兼容
1.HTML5兼容说明
现如今越来越多的站点开始使用HTML5标签,但是难免有一些客户的电脑系统老旧,浏览器版本比较低,仍然使用IE6-IE8版本的浏览器,HTML5标签对这些老版本的浏览器不支持。如果想让你的网站使用HTML5标签,但是又想兼容低版本的浏览器,下面推荐几种方法,供大家选择。
2.使用html5.js插件兼容(推荐)
<!--[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]-->
可以直接将以上代码放置在<head>标签内部,即可完成HTML5标签的兼容。该插件放置在Google code project上提供给大家,是可以直接调用的。当然,如果觉得这样会影响你的网页打开速度,也可以把html5.js文件直接下载下来,然后上传到自己的服务器单独调用。
以下是html5.js文件中的代码:
/*
HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
这种方法是推荐大家使用的方法,操作比较简单,只需要引入html5.js即可完成兼容。
3.为低版本浏览器创建专属页面
很显然这种方法稍微逊色一些,原理就是通过JS判断浏览器版本,专门为低版本浏览器创建一个不使用HTML5标签的页面,而高版本就直接运行HTML5标签即可。这种方法只是一种解决方式,需要用到JS脚本,在这里就不为大家讲解,大家只需要知道有该种兼容的思路即可。