【HTML5学习】Html5与Html4的区别 (一)

Micah2015年08月08日 16:38 分类 : Web前端  > HTML
阅读: 1736

分享到微信朋友圈

在HTML 5之前几乎没有符合通用标准规范的Web浏览器,故而,在HTML 5中提高Web浏览器之间的兼容性是它的一个很大目标。为了确保兼容性,就要有一个统一标准,因此在HTML 5中,就围绕这个Web标准,重新定义了一套在现有的HTML的基础上修改而来的语法。使它运行在各浏览器时,各浏览器能符合一个通用的标准。

语法的改变

1、语法的变化

在HTML 5之前几乎没有符合通用标准规范的Web浏览器,故而,在HTML 5中提高Web浏览器之间的兼容性是它的一个很大目标。为了确保兼容性,就要有一个统一标准,因此在HTML 5中,就围绕这个Web标准,重新定义了一套在现有的HTML的基础上修改而来的语法。使它运行在各浏览器时,各浏览器能符合一个通用的标准。


2、HTML 5中的标记方法

让我们来看下HTML 5中的标记方法

|- 内容类型(ContentType)

首先HTML 5中的文件扩展符和内容类型保持不变,扩展符仍然为 “.html”或“.htm”,内容类型(ContentType)仍然为“text/html”。

|- DOCTYPE声明

DOCTYPE 声明是HTML文件中必不可少的,它位于文件第一行。在HTML 4中如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在HTML 5中刻意不使用版本声明,一份文档将适用于所有版本HTML,HTML 5 声明如下:


<!DOCTYPE html>

当使用工具时,可以在 DOCTYPE 声明方式中加入 SYSTEM 识别符,声明如下:


<!DOCTYPE HTML SYSTEM  “about: legacy-compat”> 

在HTML 5中声明不区分大小写,引号不区分是单引号还是双引号。

|- 指定字符编码

在HTML 4中使用 meta元素的形式来指定文件的编码,如下:


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

在HTML 5中可以使用对 <meta>元素直接追加 chartset 属性的方式来指定字符编码,如下:


<meta  charset=”utf-8" >

两种方法都有效,从 HTML 5 开始,对于文件的字符编码推荐使用 UTF-8。


3、HTML 5 确保了与之前 HTML 版本的兼容性

HTML 5 的语法是为了保证与之前的 HTML 语法达到最大程度的兼容性而设计的。

那么它是如何解决这个问题的,我们从 元素标记的省略、具有 boolean 值的属性、引号的省略这几个方面来详细看下:

|- 可以省略标记元素

在 HTML 5 中,元素的标记可以省略,具体来说元素的标记分为 ”不允许写结束标记” 、 ”可以省略结束标记” 和 “开始标记和结束标记全部可以省略” 三种类型。

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。


“不允许写结束标记的元素” 是指:只允许使用 <元素/> 的形式书写。<br>…</br>是错误的。这是沿用了HTML 5之前的用法。

“可以省略全部标记的元素”是指:该元素可以完全被省略。注意,即使被省略了,该元素还是以隐性的方式存在的。


|- 具有 boolean 值的属性

对于具有 boolean 值的属性,例如disabled与readonly等,当只写属性而不指定属性值时,表时属性值为 true。相反不写属性值就为 false。

例:

<!--当只写属性而不指定属性值时,表时属性值为true -->


<input type=”text” readonly />

<!--当不写属性时,表时属性值为false -->


<input type=”text” />

|- 省略引号

大家都知道,指定属性值的时候,属性值的两边既可以用双引号、单引号或者不写。


       <input type=”text” />

       <input type=’text’ />

       <input type=text /> 

4、标记示例

我们通过上面的学习,下面我们来写一个关于 HTML 5 的示例。


<!DOCTYPE html>

<meta  charset=”utf-8" />

<title>HTML 5 标记示例</title>

<p>这是根据HTML 5 的语法

<br />写出来的

运行效果为:


Micah
IT技术整理

精彩评论:0

还可以输入250个字 评论

评论成功

评论失败

 

微信公众号

微博