新首页开发PPT详解 —— HTML规范January 15, 2010

因PPT写得过于简短，此文对PPT里的第一部分详细说明下，可以对照着看。

一、Doctype

A DOCTYPE is a mostly useless, but required, header. —— 《HTML5 Spec》

Doctype最大的作用是让浏览器用来选择渲染模式，或者说是用来触发标准模式。具体点说，就是设置正确的Doctype进入(准)标准模式，设置了错误的或者没设置Doctype则进入怪癖模式。(附：Doctype和渲染模式对照表)

理论上，标准模式和准标准模式的区别仅在于非IE6/7浏览器对于单元格里(原文说法可能有误，经测试所有图片均受影响)图片布局的不同处理。同事渔隐做了细致地测试并给出了解决方案。
Update 20100203：发现iframe的布局也受到影响，解决方法和图片一致。

还有个次要的作用是校验HTML时自动判断选择哪种规范。

另外，对于Doctype可能还存在的一些误解：

  1. 认为设置了xhtml的Doctype，使用自闭合标签，通过xhtml验证，文档就成xhtml了，浏览器会以xhtml的引擎来解析。
    事实上，浏览器还是会以HTML引擎来解析文档。目前网上通过xhtml验证(页面下方贴xhtml验证通过图标)的其实都不是真正的XHTML，而是“HTML-Compatible XHTML”。因为XHTML刚出来时，浏览器都不支持他，然后W3C为了推广XHTML语法就搞了这么个东西。 (附：给HTML文档设置XHTML Doctype是有害的)
  2. 认为strict的doctype即进入了“严格解析模式”，比如认为严格模式下标签一定要全部小写，该自闭合的元素一定要自闭合，否则页面会出错。
    事实上，doctype没有这个功能。

说到兼容问题，大家可能会奇怪IE6/7居然也支持HTML5 Doctype，难道是因为他的“预见性”。其实不是的，IE是只要doctype符合 <!doctype html xxxxxxxxxxx> 这种格式，都进入标准模式。个人猜测可能是W3C为了推广HTML5，利用了IE的这一点。

二、Charset的Meta标签

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

<meta charset="gbk" />

以上两种写法(均为兼容问题)的区别在于前者声明了mime-type为text/html。

所以主要问题就是这个mime-type声明能不能省去。据说，页面是text/html还是application/xhtml+xml还是其他什么的唯一决定权在于服务端的mime-type设置，所以页面上是否设置了mime-type完全没有意义。玉伯有另一种说法是mime-type有优先级，会先从取服务端，再取页面，因目前服务端基本都有设置，所以省去。(待测试考证)

三、CSS和JavaScript的引入方式

<link rel="stylesheet" href="" type="text/css" media="all" />
<style type="text/css"></style>
<script type="text/javascript" src=""></script>

这几个加删除线的属性都是默认值，故省去，详见HTML5 Spec。

======

今天看了Optimizing Optimizing HTML后想到的两点：

  1. 能不能省去<link rel="shortcut icon" />?
    经测试，没设置的页面，Chrome/FF/Safari/Opera则会请求favicon.ico，而IE6/7/8不会请求。如果不想放弃IE下的这个icon，还是不要学yahoo省去这个标签。
    Update 20100130：可以省去，会写文章详细地说明下。
  2. 是否省去自闭合元素的斜线?
    一直在纠结这个问题。HTML解析器不认识XML的自闭合语法，会认为 / 是一个属性，然后因为 / 不是个合法的属性而过滤掉。省去？一直都有的，去掉可能会不适应。不省去？怎么看怎么不像HTML。
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6