html学习一(html简史及doctype)

时间:2022-11-12 07:25:33

 

  • html3部分
    • doctype(html)
      •   dtd
    • head
    • body

 

一、深入浅出HTML与XHTML的区别

  HTML(HyperText Markup Language,超文本标记语言)最早的HTML官方正式规范,是1995年IETF(Internet Engineering Task Force,因特网工程任务组)发布的HTML 2.0。W3C(World Wide Web Consortium,万维网联盟)继IETF之后,对HTML进行了几次升级,直至1999年发布HTML 4.01。
 
   HTML与XHTML
  可扩展超文本标记语言XHTML(eXtensible HyperText Markup Language),是HTML 4.01的第一个修订版本,是「3种HTML4文件根据XML1.0标准重组」而成的。也就是说是,XHTML是HTML 4.01和XML1.0的杂交。
  由于XHTML1.0是基于HTML4.01的,并没有引入任何新标签或属性(XHTML可以看作是HTML的一个子集),表现方式与超文本标记语言HTML类似,只是语法上更加严格,几乎所有的网页浏览器在正确解析HTML的同时,可兼容XHTML。
  如:XHTML中所有的标签必须小写,所有标签必须闭合,每一个属性都必须使用引号包住。<br>要写成<br />,不能写为<BR />(同hr);使用了<p>之后必须有一个</p>以结束段落。
 
   HTML与XML
  HTML是一种基于标准通用标记语言(SGML)的应用,而XHTML则基于可扩展标记语言(XML),HTML和XHTML其实是平行发展的两个标准。本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。建立XHTML的目的就是实现HTML向XML的过渡。
  XML设计用来传送及携带数据信息,不用来表现或展示数据,HTML语言则用来表现数据。RSS和ATOM目前已经成为成功的XML应用,RSS使用XML作为彼此共享内容的标准方式。它代表了Really Simple Syndication(或RDF Site Summary,RDF站点摘要)。它能让别人很容易的发现你已经更新了你的站点。Atom数据源似乎较少了些;对开发者来说,RSS相对简单,Atom稍显复杂,特别是如果不熟悉XML。
  1997年,W3C在发布XML1.0标准时,HTML的版本已经到了4。直到2000年1月26日XHTML1.0成为W3C的推荐标准。不过,鉴于当时HTML一统天下的现状,W3C只好建议」继续使用HTML4.01和积极地研究HTML5及XHTML的计划」。2002年W3C指出XHTML家族将会是Internet的新阶段,并又着手开发XHTML2,旨在把Web引向建立在XML之上的无比光明的美好未来。
 
   HTML5大行其道
  由于原本XHTML只是在内容结构上改进原有的HTML系统,XHTML2.0也仅仅在XHTML1.1的基础上更加注重页面规范和可用性,缺乏交互性。在这个Web App大行其道的年代,XHTML2有些OUT了,于是就催生了HTML5。
  W3C无视Web设计人员的需求,仅从理论角度闭门造车,却扛着标准的大旗,引发了来自Opera、Apple以及Mozilla等浏览器厂商的反对声音。2004年,他们组建了一个以推动网络HTML5标准为目的的组织——网页超文本技术工作小组(Web Hypertext Application Technology Working Group,缩写为WHATWG)。
 
   HTML5和XHTML2的竞争
  HTML5目标是取代1999年所制定的HTML4.01和XHTML1.0标准,旨在提高网页性能,增加页面交互。HTML5吸取了XHTML2一些建议,包括一些用来改善文档结构的功能,比如,新的HTML标签header、footer、dialog、aside、figure等的使用,将使内容创作者更加语义地创建文档,之前的开发者在这些场合是一律使用div的。
  W3C与WHATWG双方经过多年努力,终于在2006年达成妥协。2006年10月,Web之父、万维网联盟(W3C)主席、美国国家科学院院士蒂姆·伯纳斯-李(Tim Berners-Lee)发表了一篇博客文章表示,从HTML走向XML的路是行不通的(XHTML is dead)。2009年W3C明智的放弃了改进XHTML2.0标准的计划,选择了WHATWG的成果作为基础。事实上,XHTML在2002年更新之后的数年时间里,尽管发现了众多问题,但都没有去修改过。
  2011年,Google工程师兼HTML5标准编辑的Ian Hickson称,HTML5将是最后一个带版本号的HTML语言。他表示,HTML语言将成为一个活的标准。
 

二、<!DOCTYPE>

Document Type 文档类型,缩写成DOCTYPE,在html中它就是个标签:<!DOCTYPE>,它有自己的声明格式,不是在html标签前加上它就完事了的,查看qq.com页面源码可见如下声明:

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

DOCTYPE 包含 6 部分:

  1. 字符串“<!DOCTYPE”
  2. 根元素通用标识符“HTML”
  3. 字符串“PUBLIC”
  4. 被引号括起来的公共标识符(publicId)
  5. 被引号括起来的系统标识符(systemId)重点在这里 ,继续往下看
  6. 字符串“>”

看上去蛮复杂的,不用去纠结,一般只有三种(Strict Transitional Frameset)声明(以XHTML为例)

XHTML Strict DTD-要求严格的DTD,你不能使用任何表现层的标识和属性(交给css来表现),例如<br>;能够使html非常的干净。
   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML Transitional DTD-要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)
   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML Frameset DTD-当您希望使用框架时,请使用此 DTD!
   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML的语法就非常宽松了,他的DTD也分为一样的三种。
HTML 4.01 Strict DTD (严格的文档类定义)不能包含已过时的元素(或属性)和框架元素。对于使用了这类DTD的文档,使用如下文档声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
HTML 4.01 Transitional DTD(过渡的文档类定义)能包含已过时的元素和属性但不能包含框架元素。对于使用了这类DTD的文档,使用如下文档声明:    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 
HTML 4.01 Frameset DTD(框架集文档类定义)。能包含已过时的元素和框架元素。对于使用了这类DTD的文档,使用如下文档声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">
 

简单举例说说strict和transitional的不同,按照XHTML Strict DTD的规定(看DTD内容),th标签是不能有width属性的,但transitional可以有

html学习一(html简史及doctype)html学习一(html简史及doctype)

在XHTML Strict DTD声明的html中出现th标签属性width时,则会出现警告信息(如下图),改成transitional dta就不会出现警告

html学习一(html简史及doctype)

Doctype起啥作用?                                                                                                                                                                     

上面也提到,Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档,上文说到的DOCTYPE组成中的第5部分所引入的dtd文件则包含了标记、attributes 、properties、约束规则。除此外,Doctype还会对浏览器的渲染模式产生影响,不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析,所以Doctype是非常关键的,尤其是在 IE 系列浏览器中,由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。

两种渲染模式:

  • BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
  • CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

长话短说两种渲染模式的由来,很久以前W3C标准没出现的时候,江湖很混乱,页面上根本就没有doctype这个东西,乱世出英雄啊,w3c标准出现后页面上就有了doctype,为了照顾老前辈的页面(没有doctype或使用HTML4以下[不包括HTML4]的DTD声明),怪异模式就出现了,保证古董页面能正常显示;江湖统一之后,大家都开始使用w3c标准,这就是标准模式。

测试ie 8、 ff10、 chrome16的渲染模式,测试文档如下:(只是给予直观感受,并非全面周到的测试)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
      <!--未声明DOCTYPE-->
      <script>document.write(document.compatMode);</script>
</body>
</html>

结果为:

IE 8.0:BackCompat    Firefox 10.0:BackCompat   Chrome 16.0:BackCompat

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
      <!--声明DOCTYPE-->
      <script>document.write(document.compatMode);</script>
</body>
</html>

结果为:

IE 8.0:CSS1Compat   Firefox 10.0:CSS1Compat    Chrome 16.0:CSS1Compat

说了半天的doctype对渲染模式的影响,有什么用呢?不同的渲染模式对CSS2.1规范的解析有很大差异,尤其是对盒模型的解释,所以我们的目标是如何声明doctype以使我们的页面被以标准模式解析,这是关键。

Doctype的选择!!                                                                                                                                                                     

上面已经提到,页面中的Doctype的声明会影响浏览器的渲染模式,渲染模式又跟页面最终的呈现效果息息相关,所以尽量选择那些能“激活”主流浏览器标准模型的Doctype。

[from KB001: 兼容性问题与浏览器的内核及渲染模式]

html学习一(html简史及doctype)

表中提到了“近似标准模式

近似标准模式(Almost Standards Mode)从字面意思上看与标准模式非常类似,但确实有小的差别。主要体现在对于表格单元格内垂直方向布局渲染差异。IE8 开始、Firefox、Chrome、Safari、Opera 7.5 开始,这些浏览器的标准模式更加严格的遵循了 CSS2.1 规范,故对于在目前看来不太“标准”的以前的标准模式,被赋予了“近似标准模式”的名字。但是在较早的 IE6 IE7 以及 Opera 7.5 之前版本中,浏览器无法严格遵循 CSS2.1 规范,故对于它们来说没有这个近似标准模式,也可以理解为它们的近似标准模式就是标准模式。

至于如何选择,参考表格自然明白,不用废话了!

 

参考资料很重要!!                                                                                                                                                                     

【HTML <!DOCTYPE> 标签】http://www.w3cschool.cn/tag_doctype.html

【CS002: DOCTYPE 与浏览器模式分析】http://w3help.org/zh-cn/casestudies/002

【KB001: 兼容性问题与浏览器的内核及渲染模式】http://w3help.org/zh-cn/kb/001