如何区别html和html5?从HTML文档声明说起。

猿友 2021-06-28 14:40:00 浏览数 (2124)
反馈

许多小伙伴在学习前端的时候会了解到什么是HTML,但在互联网上冲浪的时候发现当前前端技术最火的并不是HTML,而是H5。于是很多小伙伴就开始纳闷了,到底什么是H5。其实啊,H5就是HTML5的意思,也就是第五代的HTML标准。那么如何区别HTML和HTML5呢?接下来小编告诉你。

先下结论,有<!doctype html>的都是H5

没错,因为这是官方规定的,哪怕你的文档中夹杂着很多HTML5不再支持的代码,那也是HTML5。一切的一切,都要从xml说起。

HTML和xml的关系

HTML被称为超文本标记语言,而xml则被称为可拓展标记语言,其实他们是一家,他们都来自一门叫SGML(标准通用标记语言)。这门语言使用带有尖括号的标签来标记一些内容,于是借鉴他们,提出了专门用于展示的HTML和专门给机器使用的xml。为什么要在一篇介绍html的文章里介绍xml呢?因为html和xml是有相互借鉴的,其中HTML就有借鉴了xml的DTD,这个DTD就是确定HTML版本的关键。

 关于xml和html,他们产生了一点交集,那就是XHTML,他具有XML的严格标准和HTML的表现力(其实本质上还是html,只不过对标签的使用更加严格罢了)

HTML的DTD

DTD,中文解释为文档类型定义,在xml中用来定义标签的类型,而在早期的HTML中也存在这样的DTD,以下是一些HTML的DTD,可以看到,DTD中会携带版本类型,通过这个版本类型可以知道当前用的html是第几代的HTML(但是HTML5是个特例,他直接使用​<!doctype html>​)。可以很简单的区分出HTML和HTML5。

//用于XHTML 4.0 的严格型
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
//用于XHTML 4.0 的过渡型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
//用于XHTML 1.0 的严格型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//用于XHTML 1.0 的过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML和H5的区别

从DTD上区分HTML和H5是一个简单的方法,但有些开发者因为各种原因,可能没有写DTD(浏览器会按照默认的方式去解析,比如如果浏览器默认按h5解析的话,哪怕代码是HTML4.0,也按照HTML5解析),又或者贪图省事直接用H5的写法进行文档声明(HTML5是在之前的HTML基础上添加了一些新的元素,所以兼容大部分的旧元素),这时候从DTD上就看不出了。其实还有一个最根本的方法。就是看标签。

DTD的作用是定义这个HTML文档可以使用哪些标签,而接下来的这种方法也是同理。有些标签是H5独有的(比如video,cavas,article),而有些标签是H5废弃的(比如applet,center)。只要在代码中找到这些标签,就可以确定代码是不是HTML5。

  • 有两种特殊情况,一种是代码里完全没有出现这类特殊标签,即使用的标签是前后版本都有的,这种情况下你可以认为它是h5,也可以认为他是html4(或者其他版本),但是不能说他不是h5(因为人家也遵循h5)。
  • 另一种情况是代码里两种标签都有出现,这种情况只能说明开发人员水平尚待提高,或者项目需要维护了。
  • 关于HTML5新增与废弃标签,可以参考HTML5参考手册

小结

其实对于初学者而言并不用太多纠结html和html5的关系与区别,现在大多数的前端教程教授的都是HTML5,被废弃的标签也很少见到了(虽然他们仍然可以生效,虽然后端开发的时候偶尔用这种标签会比较轻松),所以并不用担心自己学的是过时的技能,也不用担心自己不会H5会不会影响到以后找工作。因为当你学习HTML5时,你会发现——很多标签就是换了个名(标签语义化),实际要学的新标签只有一部分。等到这个时候,你就会发现为啥小编说不用纠结html和h5的区别了。

HTML5基础入门课程,了解更多H5知识。


0 人点赞