博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
htnl5与html4的区别
阅读量:5074 次
发布时间:2019-06-12

本文共 3756 字,大约阅读时间需要 12 分钟。

HTML 5以HTML 4为基础,对HTML 4进行了大量修改。本章从总体上概要介绍HTML 5对HTML 4进行了哪些修改,HTML 5与HTML 4之间比较大的区别是什么地方。

【学习内容】
掌握HTML 5与HTML 4在基本语法上的区别,这个基本语法区别包括DOCTYPE声明、内容类型(ContentType)、字符编码的指定方法、元素标记的省略、具有布尔值的属性、引号的省略等几个方面。

了解在HTML 5中新增的元素,删除了哪些HTML 4中的元素,以及为什么要删除这些元素,用什么元素或方法来取代这些被删除的元素。

了解在HTML 5中新增的属性,删除了哪些HTML 4中的属性,在HTML 5中用什么方法来取代这些被删除的属性。
掌握什么是全局属性,本章主要介绍几个常用全局属性,如contentEditable属性、designMode属性、hidden属性、spellcheck属性以及tabindex属性。
1 语法的改变
1.1 HTML 5的语法变化

与HTML 4相比,HTML 5在语法上发生了很大的变化。可能很多人会因为“之前的HTML已经相当普及”,“如果改变基础语法,会产生什么影响”等想法而感到不安。

但是,HTML 5中的语法变化,与其他开发语言中的语法变化在根本意义上有所不同。它的变化,正是因为在HTML 5之前几乎没有符合标准规范的Web浏览器导致的。
HTML的语法是在SGML(Standard Generalized Markup Language)语言的基础上建立起来的。但是SGML语法非常复杂,要开发能够解析SGML语法的程序也很不容易,因此很多浏览器都不包含SGML的分析器。因此,虽然HTML基本上遵从SGML的语法,但是对于HTML的执行在各浏览器之间并没有一个统一的标准。

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

如上所述,在HTML 5中提高Web浏览器之间的兼容性是它的一个很大的目标,为了确保兼容性,就要有一个统一的标准。因此,在HTML 5中,围绕着这个Web标准,重新定义了一套在现有HTML的基础上修改而来的语法,以便各浏览器在运行HTML的时候能够符合一个通用标准。
因为关于HTML 5语法解析的算法也都提供了详细的记载,所以各Web浏览器的供应商可以把HTML 5分析器集中封装在自己的浏览器中。最新的Firefox(默认为4.0以后的版本)与WebKit浏览器引擎中都迅速地封装了供HTML 5使用的分析器,IE(Internet Explorer)与Opera也在努力加快对HTML 5的支持——提高浏

览器的兼容性指日可待。

接下来,让我们具体看一下在HTML 5中对语法进行了哪些改变。
2.1.2 HTML 5中的标记方法
首先看一下HTML 5中的标记方法。
1.内容类型(ContentType)
首先,HTML 5的文件扩展符与内容类型保持不变。也就是说,扩展符仍然为“.html”或“.htm”,内容类型(ContentType)仍然为“text/html”。
2.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声明方法(不区分大小写)如下:
<!DOCTYPE html>
另外,当使用工具时,也可以在DOCTYPE声明方式中加入SYSTEM识别符,声明方法如下:

<!DOCTYPE HTML SYSTEM "about:legacy-compat">

在HTML 5中像这样的DOCTYPE声明方式是允许的(不区分大小写,引号不区分是单引号还是双引号)。
3.指定字符编码
在HTML 4中,使用meta元素的形式指定文件中的字符编码,如下所示:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
在HTML 5中,可以使用对<meta>元素直接追加charset属性的方式来指定字符编码,如下所示:

<meta charset="UTF-8">

两种方法都有效,可以继续使用前面一种方式(通过content元素的属性来指定),但是不能同时混合使用两种方式。在以前的网站代码中可能会存在下面代码所示的标记方式,但在HTML 5中,这种字符编码方式将被认为是错误的,这一点请注意。
<meta charset="UTF-8" http-equiv="Content-Type"
content="text/html;charset=UTF-8">
从HTML 5开始,对于文件的字符编码推荐使用UTF-8。
2.1.3 HTML 5确保的兼容性

HTML 5的语法是为了保证与之前的HTML语法也能够达到最大程度的兼容而设计的。例如,符合“没有<p>的结束标记”的HTML代码随处可见,HTML 5中并没有把这种情况作为错误来处理,而是允许存在这种情况,但明确规定了这种情况应该怎么处理。

那么,针对这个问题,我们从元素标记的省略、具有boolean值的属性、引号的省略这几方面来详细看一下在HTML 5中是如何确保与之前版本的HTML实现兼容的。
1.可以省略标记的元素
在HTML 5中,元素的标记可以省略。具体来说,分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。

接着,我们针对这三类情况列举一个元素清单,其中包括本书到现在为止还没有介绍的HTML 5中的新元素(关于这些新元素,2.2节将进行介绍)。

不允许写结束标记的元素有:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
可以省略结束标记的元素有:li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
可以省略全部标记的元素有:html、head、body、colgroup、tbody。
[图片]说明 “不允许写结束标记的元素”是指不允许使用开始标记与结束标记将元素括起来的形式,只允许使用“<元素/>”的形式进行书写。例如“<br>...</br>”的书写方式是错误的,只允许“<br/>”的书写形式。当然,HTML 5之前的<br>这种写法可以被沿用。

可以省略全部标记的元素”是指该元素可以完全被省略。注意,即使标记被省略了,该元素还是以隐式的方式存在的。例如省略不写body元素时,在文档结构中它还是存在的,可以使用document.body访问。

2.具有boolean值的属性
对于具有boolean值的属性,例如disabled与readonly等,当只写属性而不指定属性值时,表示属性值为true,如果想要将属性值设为false,则可以不使用该属性。另外,要想将属性值设定为true时,也可以将属性名设定为属性值,或将空字符串设定为属性值。
属性值的设定方法可以参考下面的代码示例:

 

3.省略引号

大家已经知道,在指定属性值的时候,属性值两边加引号时既可以用双引号,也可以用单引号。
HTML 5在此基础上做了一些改进,当属性值不包括空字符

串、“<”、“>”、“=”、单引号、双引号等字符时,属性值两边的引号可以省略。如下面的代码所示:

<!--请注意type的属性值两边的引号-->

<input type="text">

<input type='text'>

<input type=text>

2.1.4 标记示例

现在,我们通过前面学到的HTML 5的语法知识来看一个关于HTML 5标记的示例。
代码清单2-1完全是用HTML 5写成的。其中省略了<html>、<head>、<body>等元素。可以通过这个示例复习一下HTML 5的DOCTYPE声明、用<meta>元素的charset属性指定字符编码、<p>元素的结束标记的省略、使用<元素/>的方式来结束<meta>元素,以及<br>元素等本节中所介绍的知识要点。

html 5标志示例

<! DOCTYPE html>

<meta charset="UTF-8">
<title>HTML 5标识示例</title>
<p>这段代码是根据HTML 5语法
<br/>编写的。

 

 

转载于:https://www.cnblogs.com/qilinge/p/5275453.html

你可能感兴趣的文章
每天一个Linux命令(06)--rmdir命令
查看>>
别踩白块儿游戏源码Android版
查看>>
有关字体的专业名词解释
查看>>
iptables防火墙相关命令详解
查看>>
图片点击后无虚线框
查看>>
最长公共前缀
查看>>
夺命雷公狗—angularjs—10—angularjs里面的内置函数
查看>>
一大波编程视频资料赠送(亲自整理)
查看>>
移动端开发兼容性处理整理
查看>>
Jzoj5451【NOIP2017提高A组冲刺11.4】Genocide(待补充)
查看>>
input的disable和readonly
查看>>
Mysql命令行导入sql数据
查看>>
微信小程序--bind 和catch区别
查看>>
【jzoj】2018.1.31 NOIP普及组——D组模拟赛
查看>>
[Cypress] Use the Most Robust Selector for Cypress Tests
查看>>
[Unit Testing] AngularJS Unit Testing - Karma
查看>>
[Typescript] Typescript Enums vs Booleans when Handling State
查看>>
[TypeScript] Installing TypeScript and Running the TypeScript Compiler (tsc)
查看>>
2017.9.17校内noip模拟赛解题报告
查看>>
【BZOJ3343】教主的魔法 分块
查看>>