HTML5+CSS3网页制作基础培训教程
上QQ阅读APP看书,第一时间看更新

1.2 HTML5与HTML4的区别

HTML5是最新的HTML标准,HTML5语言更加简洁,解析规则更加详细。HTML5解决浏览器不兼容的问题,在不同的浏览器中可以显示出同样的效果。下面列出一些HTML5和HTML4之间主要的不同之处。

1.2 .1 HTML5的语法变化

HTML语法是在SGML的基础上建立起来的。但是SGML语法非常复杂,要开发能够解析SGML语法的程序也很不容易,所以很多浏览器不包含SGML的分析器。虽然HTML基本遵从SGML的语法,但是HTML在各浏览器中的执行并没有一个统一的标准。

在这种情况下,各浏览器之间的互兼容性和互操作性在很大程度上取决于网站或网络应用程序的开发者在开发上所做的共同努力,而浏览器本身始终是存在缺陷的。

在HTML5中,提高Web浏览器之间的兼容性是一个很大的目标,为了确保兼容性,就要有一个统一的标准。因此,在HTML5中,围绕着Web标准,在现有的HTML的基础上重新定义了一套语法,使各浏览器在运行HTML5时都能够符合这个通用标准。

因为关于HTML5语法解析的算法也都有详细的记载,所以各Web浏览器的供应商可以把HTML5分析器集中封装在自己的浏览器中。最新的Firefox(默认为4.0以后的版本)与WebKit浏览器引擎中都迅速封装了供HTML5使用的分析器。

1.2 .2 HTML5中的标签方法

下面我们来看看HTML5中的标签方法。

1.内容类型

HTML5的文件扩展名与内容类型保持不变。也就是说,扩展名仍然为.html或.htm,内容类型仍然为“text/html”。

2.doctype声明

doctype声明是HTML文件中必不可少的,它位于文件第一行,该标签告知浏览器文档所使用的HTML规范。在HTML4中,它的声明方法如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" >

doctype声明是HTML5里众多新特征之一,现在只需要写<!doctype html>就可以了。HTML5中的doctype声明方法(不区分大小写)如下:


<!doctype html>

3.指定字符编码

在HTML4中,使用meta元素来指定文件中的字符编码,如下所示:


<meta http-equiv="content-type" content="text/html;charset=utf-8"> 

在HTML5中,可以直接对元素添加charset属性来指定字符编码,如下所示:


<meta charset="utf-8"> 

在HTML5中,这两种方法都可以使用,但是不能混合使用两种方式。

1.2 .3 HTML5语法中的3个要点

HTML5中规定的语法在设计上兼顾了与现有HTML之间最大限度的兼容性。下面就来看看具体的HTML5语法。

1.结束符标签

在HTML5中,有些元素可以省略标签,有些元素不可以省略标签,具体来讲有3种情况。

(1)必须写明结束标签

area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

(2)可以省略结束标签

li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

(3)可以省略整个标签

html、head、body、colgroup、tbody。

需要注意的是,虽然这些元素可以省略,但实际上是隐形存在的。

例如:<body>标签可以省略,但在DOM树上它是存在的,可以永恒访问到document.body。

2.取得Boolean值的属性

取得布尔值(Boolean)的属性,如disabled和readonly等,通过默认属性的值来表达“值为true”。

此外,在属性值为true时,可以将属性值设为属性名称本身,也可以将值设为空字符串。

示例如下:


<!--以下的checked属性值皆为true-->
<input type="checkbox" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">

3.省略属性的引用符

在HTML4中设置属性值时,可以使用双引号或单引号来引用。

在HTML5中,只要属性值不包含“空格”“<”“>”“'”“"”“`”“=”等字符,都可以省略属性的引用符。

示例如下:


<input type="text">
<input type=′text′>
<input type=text>

1.2 .4 HTML5与HTML4在搜索引擎优化方面的对比

随着HTML5的到来,传统无处不在<div id="header">和<div id="footer">的代码方法已变成相应的标签,如<header>和<footer>。图1.4所示为传统的Div+CSS写法和HTML5的写法。

图1.4 传统的Div+CSS写法和HTML5的写法

从图1.4可以看出HTML5的代码可读性更高,也更简洁。虽然两者内容的组织相同,但HTML5代码中每个元素都有明确清晰的定义,搜索引擎也可以更容易地抓取网页上的内容。HTML5标准对于SEO有什么优势呢?

1.使搜索引擎更加容易抓取和索引

对于一些网站,特别是那些严重依赖Flash的网站,HTML5的推出是一个好消息。如果整个网站都是Flash形式的,就一定会看到转换成HTML5的好处:搜索引擎的“蜘蛛”能够抓取站点内容,所有嵌入动画中的内容全部可以被搜索引擎读取。

2.提供更多的功能

HTML5的另一个好处就是它可以增加更多的功能。对于HTML5的功能问题,从全球几个主流站点对它的青睐就可以看出。社交网络大亨Facebook已经推出他们期待已久的基于HTML5的iPad应用平台,每天都有基于HTML5的网站和HTML5特性的网站推出。保持站点处于新技术的前沿,也可以很好地改善用户体验。

3.提高可用性,改善用户体验

最后,我们从可用性的角度上看,HTML5可以更好地促进用户与网站间的互动情况。多媒体网站可以获得更多的改进,特别是移动平台上的应用,使用HTML5可以提供更多高质量的视频流和音频流。