Juice UI: 整合了jQuery UI的开源ASP.NET Web控件

前言 

这篇文章的原文来自Jon Galloway，想看原文的请猛戳链接。第一次接触这个Juice UI是看到同事分享的邮件，当时只是粗略看看，不过感觉把jQuery UI整合到ASP.NET Web控件里去确实是个不错的主意。今天偶然在网上看到了这篇文章，就动手把它翻译过来，和大家分享。以下是译文：

今天早上的MVP峰会上，Scott Hunter刚刚从appendTo网站新发布了一个开源项目，名字叫Juice UI。Juice UI是一个Web窗体控件的集合，并整合了jQuery UI。你可以通过添加JuiceUI NuGet package到你自己的应用中，立即就可以使用它。同时源码是提供下载的（go nuts with the source）, 他的版权协议是基于MIT和GPL的。

Juice UI，能做什么？

jQuery UI 是一个构建在jQuery之上的UI库。它为平常的场景提供了非常多且强大的部件，例如日期选择期，对话框和选项卡等等；并且一些顶尖的js开发者（some of the sharpest Javascript developers in the field）参与开发提供了坚实的基础。虽然你总是可以利用一些使用了jQuery和jQuery UI的库，但是全新的Juice UI控件可以让这些工作更简单。

例如：

   1:  <asp:TextBox runat="server" ID="_Restrict" />

   2:  <Juice:Datepicker

   3:       runat="server"

   4:       TargetControlID="_Restrict"

   5:       MinDate="-20"

   6:       MaxDate="+1M +10D" /> 

执行这段代码，就可以得到：

组件和行为

Juice UI 发布的时候就已经包括了14个部件或行为。如果你想查看全部控件列表的话，请点击http://juiceui.com/controls, 并且提供互动例子让我们更深入了解控件。

下面也列出了所有控件，点击可直接转到相应文档：

• Accordion
• Autocomplete
• Button
• Datepicker
• Dialog
• Draggable
• Droppable
• Position
• Progress Bar
• Resizable
• Selectable
• Slider
• Sortable
• Tabs

实战

• 添加JuiceUI NuGet package

打开VS2010，创建项目前请确保VS2010已安装了NuGet插件。创建一个ASP.NET 4 Web Forms项目。右击项目中的References文件夹，选择Manage NuGet Packages..., 然后找到 "juiceui"，点击安装。

• JuiceUI 的名字空间

通过NuGet package添加JuiceUI时，NuGet会自动的把Juice UI的名字空间写入到你的web.config文件里, 比如:

   1:  <configuration> 

   2:      <system.web> 

   3:          <compilation debug="true" targetFramework="4.0" /> 

   4:          <pages> 

   5:              <controls> 

   6:                  <add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" /> 

   7:              </controls> 

   8:          </pages> 

   9:      </system.web> 

  10:  </configuration> 

如果确实需要Juice UI名字空间的话，通常我会移除上面这段config，在页面中使用<@Import Namespace="JuiceUI" />指令来添加名字空间。

使用Juice UI控件

首先，你需要一个<asp:ScriptManager> - 把它添加到一个页面上或者你site的Master页面上。

   1:  <asp:ScriptManager id="_Script" runat="server" /> 

添加完成后，你就可以使用控件了。这些都是扩展控件，所以你需要使用TargetControlID属性来指出哪个Web窗体控件将扩展Juice UI的行为。这儿有一个精简了的例子，将DatePicker行为与一个TextBox挂钩：

   1:  <asp:TextBox runat="server" ID="DateSample" /> 

   2:  <Juice:Datepicker runat="server" TargetControlID="DateSample" /> 

另外我把一个可拖拽（Draggable ）的行为指向一个Panel:

   1:  <asp:Panel runat="server" ID="DragBox" Style="border:1px solid; width:100px;"> 

   2:      Hi. You can drag me around. 

   3:  </asp:Panel> 

   4:  <Juice:Draggable runat="server" TargetControlID="DragBox" /> 

需要注意的是，这只是非常简单的例子并且没有CSS。在Juice UI源码里有很多更复杂的Juice UI样例。

运行这个页面，我们将会看见我们所期待的：一个拥有日期选择器的textbox和一个可以拖拽的panel。

下面是这个页面的源代码：

   1:  <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 

   2:      CodeBehind="Default.aspx.cs" Inherits="Juice_Sample._Default" %> 

   3:  <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 

   4:  </asp:Content> 

   5:  <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 

   6:   

   7:      <asp:ScriptManager id="_Script" runat="server" /> 

   8:      

   9:      <asp:TextBox runat="server" ID="DateSample" /> 

  10:      <Juice:Datepicker runat="server" TargetControlID="DateSample" /> 

  11:      

  12:      <asp:Panel runat="server" ID="DragBox" Style="border:1px solid; width:100px;"> 

  13:          Hi. You can drag me around. 

  14:      </asp:Panel> 

  15:      <Juice:Draggable runat="server" TargetControlID="DragBox" /> 

  16:   

  17:  </asp:Content> 

如果你有兴趣的话，在浏览器中查看网页的源代码，你会发现web控件和JuiceUI行为已经整合了，使用的是HTML5的data-属性:

   1:  <input name="ctl00$MainContent$DateSample" type="text" 

   2:          id="MainContent_DateSample" 

   3:          data-ui-widget="datepicker" /> 

   4:  <div id="MainContent_DragBox" 

   5:          data-ui-widget="draggable" 

   6:          style="border:1px solid; width:100px;"> 

   7:      Hi. You can drag me around. 

   8:  </div> 

似乎很熟悉...

确实，Juice UI用起来非常像Ajax Control Toolkit，但它的核心是jQuery UI。从另一方面说，它是为所有jQuery UI里的部件（widgets）和效果（effects）创建了Web窗体扩展和脚本控制。

更多...

想要寻找更多关于Juice UI的资料？最好的地方是Juice UI site，里面有提供互动的例子和文档。

需要源代码的，可以从GitHub repository下载，里面包含了一个样例项目。

最后，特别推荐的是StackOverflow (using the juiceui tag)和ASP.NET jQuery forum，经常逛逛可以获得不少帮助。

后记

个人觉得，Juice UI要被广泛接受还需要走很长的一段路，毕竟Ajax control Toolkit在不断更新，其长期发展方向也是jQuery，所以竞争力很强。不管怎样，Juice UI为我们提出了一个新的思路去整合现有的前端JS框架。Bonne idée, c'est parti!

学习之Bootstrap - Overview

今天是在DotNetNuke平台工作一周年的日子，值得纪念一下。回过头来看，这一年基本上是与DotNetNuke的bug斗争中走过的，同时见证了版本5到6的重大升级。DotNetNuke的框架是挺值得学习和借鉴的，非常全面的系统管理功能和超强的扩展能力让它始终在CMS这一块占据一席之地。
我大部分工作是在后台开发，也即开发或者更新一些模块（module）来迎合客户的需要。但有时候，在客户那里工作时（俗称外包），必须为他们的内部网站设计布局和页面。这是我相当头疼的问题，虽然客户只有一个要求就是漂亮好看，但我始终觉得Dotnetnuke是众多CMS中外观最丑的。

 幸运的是，DNN提供了异常方便和强大的Skin系统，可以让开发者随意便捷的设计主题。不幸的是，它过于有层次感，让我经常迷惑在CSS的覆盖和Javascript的冲突中。另外，不知道是不是因为我不是专业网站设计的缘故，自己搞出来的东东总是让我很郁闷。

在外包的日子，总有些闲暇的时间，我就会寻找或尝试一些CSS框架来为我的DNN主题设计找出路，这样不但可以方便我前端的工作，更重要的是，CSS框架可以帮助我搭建一个漂亮，简洁和清爽的网站。

我的第一个目标是Blueprint，它是一个CSS框架，其目的是减少你的开发时间。它提供了坚实的CSS基础，易使用的网格，合理的排版，有用的插件，甚至印刷样式让你轻松的建立项目。好景不长，没用几天就放弃了，原因有二：

1. Doc看的比较吃力，思路不清晰。
2. 没有想象中的强大，总觉得只有CSS不够用。

放弃之后，再也没有时间和心情继续我的DNN主题寻找之旅。直到最近，我在网上看到Twitter的前端工程们发布了新的Bootstrap v2.0.2，较以前成熟的1.4版本有很多Break的升级或改进。以less为基础构建css，新的布局能够定制和响应不同的终端设备，更多的组件和Javascript集成插件，这一切的一切，瞬间让我hold不住了。细细的看了它的在线文档后，突然明白，这就是我一直要找的前端框架，不仅仅只有CSS。

从那时起，我就走在了Bootstrap的路上。写这篇文章是想用来，记录我编程路上的所思所想，更希望的是有大牛能不吝赐教。

总体来说，Bootstrap现在包括四个部分：布局（Scaffolding），基础CSS（Base CSS），控件（Compoment）和Js插件（JavaScript Plugins）。里面各自包含什么，请看下图。不过最吸引我的东东在下图里没有表明出来：通过LESS，我们可以编写和生成我们自己的Bootstrap。LESS是一个CSS的预编译器，相当于赋予了CSS动态语言的特性，如变量，继承，运算，函数，它既可以在客户端上运行（支持IE 6+，Webkit，Firefox），也可以借助Node.js或者Rhino在服务端运行。

这里我想特别说说为什么这个图是英文的：

1. 我始终觉得英文在这方面的表述要更清晰明了一些，
2. 翻译不好怕误导大家，

我的Bootstrap还在学习中，尝试中，应用中，希望和大家一起共同学习共同进步。Profitez-le, allez!

P.S. 我学完之后，首先要用它给博客园和wordpress做个主题，写下来，督促自己。

如何在本地安装 DotNetNuke 6

DotNetNuke作为微软平台的第一款开源CMS已经走到了第六个版本，也从VB.NET转换到了C#. 作为一个Dotnetnuke开发者......
当我还想尝试写点开场白时，突然意识到为什么不直接开始呢？既经济又环保.....
我的本地环境：Windows 7 Pro, IIS 7.5, SQL Server 2005, .NET 4.0
总体来说，快速又干净的安装只需要5个步骤：

1. 下载ZIP安装包
2. 创建数据库和SQL Server账号
3. 创建Website文件夹并解压已下载的ZIP安装包
4. 在IIS里创建Site并配置
5. 在浏览器中运行DNN安装向导

下面来详细的讲讲这五个步骤:

1. 下载ZIP安装包

现在要下载官方的DNN安装包，只能从http://dotnetnuke.codeplex.com/上下载。CodePlex是微软的开源项目托管平台，DNN作为.NET下最大的开源CMS，使用codeplex托管再正常不过了。不过CodePlex上确实有不少好的开源项目，建议大家没事可以常去转转。现在最新的稳定（Stable）版本是6.1.4，所以下载Dotnetnuke_Community_06.01.04_Install.zip安装包。

2. 创建数据库和SQL Server账号

在创建数据库之前，请确认你的SQL Server身份验证模式是否混合模式。如果不是，请在SQL Server Management Studio里右击你的SQL Server，选择属性，然后点击安全，将SQL Server身份验证模式修改为混合模式。
现在我们可以创建新数据库了(我把它命名为DNN614)，具体步骤不用多说了，大家都知道。
接下来，需要给这个新数据库创建一个账户，好让DNN可以有权限读写

• 展开SQL Server的安全节点
• 右击Logins
• 选择New Login
• 输入Login的名字（比如login614）
• 选择SQL Server Authentication模式，输入密码
• 去掉Enforce Password expiration/User must change password at next login的选择
• 在右边边框点击User Mapping
• 在上面的Users mapped to this login框中选择你新创建的数据库
• 然后在下面的Database role membership for框中选择db_owner
• 点击OK
• 现在你就可以在DNN614数据库的安全节点里看见新创建的账户了（如图所示）

3. 创建Website文件夹并解压已下载的ZIP安装包

这一步非常简单，就是把ZIP安装包解压到一个文件夹下，比如C:\Dev\WebDnnTest\DNN614。
不过要注意的一点就是，我们必须让用来进入DNN根文件夹的Windows account(例如NETWORK SERVICE)对其有完全的控制权。所以我们必须修改进入这个文件夹的权限：

• 右击你网站的根目录(C:/Dev/WebDnnTest/DNN614)，选择属性
• 点击安全选项卡
• 在这个选项卡中可以看见可以进入这个文件夹的用户列表，点击修改
• 加入NETWORK SERVICE这个账户，保存修改

不过在我记忆中，某些情况，我们可以跳过这项配置。关键在于你在IIS是如何配置的。

4. 在IIS里创建Site并配置

目前为止，我们已经创建了新数据库和配置好了DNN根文件夹，下面我们将在IIS中创建新的Site：

• 打开IIS并展开Sites节点
• 右击并点击"Add a new Site"
• 输入网站名字，选择DNN根目录的路径
• 输入host名称，比如dnn614
• 打开 C:/Windows/System32/drivers/etc/hosts 文件，加入新的一行"127.0.0.1　　dnn614“，保存
• 点击Ok完成创建

如果你想你的网站运行在.net 4.0上，请修改application pool为ASP.Net V4.0。

5.在浏览器中运行DNN安装向导

 在浏览器中打开http://dnn614/，你将会看见：



程序会测试文件夹的权限：



输入连接SQL Server的相关信息：



点击Next，你会看到安装向导正在运行每个版本的Script：



再点击Next，配置host账户，这个帐户拥有dnn网站的最高权限，完成后点击Next。如果一切顺利的话，一个全新的DNN6网站就会在你浏览器中出现了：




看到这里，可以告诉你的是，所有的DNN安装已经完成。 Enjoy it. Allez !!!

演化之编程语言

今天在译言网上看到这篇译文，感觉不错，和大家分享一下，顺便说说我自己对这些编程语言的认识。

先说说译言网，这是个非常不错的网站，把很多外文（英文，法文...）的好文章都翻译称中文以飨读者，它的宗旨是：“发现 翻译 阅读 中文之外互联网精华”。绝对推荐给不习惯读外文的朋友或者翻译爱好者。

再说说这篇文章吧，其实就是一张图，因为译言网不让随便转载，所以只能把地址帖出来，想看全文的可以移步到译言网：新读图时代：编程语言的演化过程。这里只会有大致内容和个人感慨而已。

下图展示了过去数十年来编程语言的演化过程，最先出现的语言是用于科学计算的Fortan和逻辑推演的LISP语言，现在用于网络编程的语言有 C#, Ruby on Rails, Node.JS, Java等等，每一种语言的出现基本上影响了一个时代，比如说C，Java；而在一个时代里，语言之间又有互相的影响，比如Ruby On Rails里MVC的概念；不过个人觉得硬件的发展是影响编程语言发展至关重要的催化剂，iPhone，iPad就是引领移动端编程的先锋。

Via: ServicesANGLE

Fortan： 现在依然广泛运用于科学和工程计算领域，特别是一些大学里的实验室，Fortan是必备的。

LISP ：一种基于λ演算的函数式编程语言，很多牛人和大学里的教授都建议应该学一学的语言，可以帮助我们用另一种方式看待编程语言。

Cobol ：看到有人在译言上回复说“现在还有人用Cobol吗？”，答案是当然有人用，特别是大公司，只不过一般人接触不到。

C ：不用多说，高级语言和低端语言完美结合者，现在依然牢牢的占据者编程语言使用份额排行榜的第二名。

Python : 一种面向对象，直译式计算机程序设计语言。Pour moi, il est un monstre, fort et à plaine puissance.

Java : 懒得说了，基本上无人不知无人不晓。牢牢占据着使用份额排行榜第一。

JavaScript : 浏览器端解释型语言，能让网页更加互动优美华丽。随着浏览器性能和对其支持不断的提搞，现在JavaScript站在了前所未有的高度上，框架层出不穷。不过这门语言对我来说，确实闹心，非常期待新的标准早日出来。

C# ：微软家的，大部分对其不爽的，基本上都是对微软有偏见的。经过4个版本的发展，它已经相当强大了。不过每次在IE6和7里调试网页时，那种对微软的不爽蹭的一下就冒上来了，按都按不住。

.Net ：微软面向平台的东东。

Ruby On Rails ：Ruby是一种语言，日本人开发的，有在线学习的，强烈推荐 “Another website for learning Ruby | 推荐一个学Ruby的网站 - Ruby和尚”。Rails是一个MVC框架。Rails对于Ruby就相当于Spring对于Java，不过Rails与Ruby的结合更加完美，他们合在一起就是一个可以使你开发、部署、维护web应用程序变得简单的框架。

Node.JS : 好吧，收回JavaScript只是浏览器端解释型语言，因为Node是一个可以让JavaScript运行在服务器端的解释器，它改变了服务器应该如何工作的概念。可以感觉到它正在引导一场服务器端语言编程的革命。So amazing...

最后，再向大家推荐一个网站，就是提供这个图片的网站 Service Angle. 它的小标题是 ："where technology innovation meets business performance, where computer science meets social science"。这个小标题就是我推荐的原因。一个优秀出色的技术革新没有出彩的商业化和用户体验化的引导和蜕变，被束之在实验室的高阁上是大多数的归宿。

(Liberation.fr ) Diplômés non grata

L'article originale : Diplômés non grata

Moi, un autre victime potentielle de la circulaire 31 mai 2011......

Malgré de solides études et des promesses d’embauche, les étudiants étrangers se heurtent à la circulaire du printemps dernier qui durcit l’attribution du statut de salarié. Autour du Collectif du 31 mai, la riposte s’organise.

Son entreprise l’a prévenu : il sera licencié dans quelques jours. Tarik El-Hajjar, jeune Marocain de 25 ans, collait pourtant parfaitement au poste. Bardé de diplômes (double master obtenu en France), sourire hollywoodien, tee-shirt turquoise, regard franc. Il a décroché sans mal un poste de consultant junior chez Capgemini, une boîte de conseil. Promesse d’embauche signée avant la fin de ses études, c’est dire.

Mais depuis cinq mois, son avenir en France est en suspens. Il attend une réponse de la préfecture d’Amiens (Somme) à sa demande de changement de statut pour passer du visa d’étudiant à celui de salarié. Dans quelques jours, son titre de séjour arrive à expiration, il ne pourra plus travailler. «J’étais bien parti. J’ai réussi mes études, j’ai de l’ambition. Si j’en suis là, c’est grâce à la France. J’avais juste envie de rendre un peu de ce qu’on m’a donné en travaillant quelque temps ici, en payant des impôts. Ça n’allait pas plus loin. Nous dire non maintenant, c’est difficile à comprendre.»

Tarik fait partie du Collectif du 31 mai qui représente ces jeunes étrangers non-ressortissants de l’Union européenne, fraîchement diplômés en France, mais empêchés d’y travailler. Ils sont chinois, américains, canadiens, africains… Souvent issus de bonne famille, ils parlent plusieurs langues et leur profil séduit les entreprises. Mais dans le pays de Nicolas Sarkozy, ces talents que les économies du monde entier se disputent sont désormais persona non grata, au même titre que les sans-papiers.

Tout est parti de cette fameuse circulaire du 31 mai 2011. Les ministres de l’Intérieur et du Travail, Claude Guéant et Xavier Bertrand, exigent des préfectures qu’elles examinent avec «plus de rigueur» les demandes d’autorisation de travail des immigrés, étudiants compris, quel que soit leur niveau d’études, et même s’ils ont été formés en France.

Type of Coffe (咖啡种类)

简单介绍俩种个人最爱的 café - Espresso 和 Irish Coffee，前面这个是工作必备，后面是没事就想尝尝的（但至今没喝过几次）。

Espresso ：俗称 浓缩咖啡或意大利特浓，口感强烈，不过因冲磨时间短而使得咖啡因的成分较少。 它常作为其它咖啡饮料的基础，比如：拿铁，卡布奇诺，焦糖玛奇朵，摩卡等等。

Irish Coffee ：爱尔兰咖啡是一种既像酒又像咖啡的咖啡，爱尔兰威士忌，Espresso，焦糖就可以了，个人不是很喜欢鲜奶油，有点腻。

Pour Débutants en français : 

L'expresso est un café très corsé(serré) avec un fort arôme, et un élément clé de la culture italienne. Il est servi un nombre incalculable de préparations :

• Café américain : expresso auquel on rajoute de l'eau chaude, parfois en proportions égales ou réalisé avec un percolateur classique;
• Café macchiato : avec un peu de mousse de lait;
• Café latte : un grand bol de lait chaud avec un peu de café. Le petit déjeuner familial classique italien; on y trempe généralement des petits biscuits;
• Café frappé(希腊法拉沛咖啡, 一种冰咖啡.) : expresso, sucre, vanille et glace passés au shaker;
• Cappuccino : expresso dans une grande tasse complété d'une mousse de lait montée à la vapeur;
• Irish coffee : un cocktail à base de café, de sucre, de whiskey et de crème.

学习之DOCTYPE

前段时间在园子里看到一篇讲Doctype的文章：正确使用DOCTYPE，就想起了自己在做DotNetNuke开发时也遇到过同样的问题，确实，这个问题说大不大，说小不小。平时在DotNetNuke里，按默认选择的就行了。不过有时同时创建俩个portals，就有俩个不同的skin，它们的DOCTYPE有时候就不一样，这时如果搞不清楚DOCTYPE就调整CSS，要想得到很好的效果和兼容性就很难了。


所以不管怎样，弄清楚DOCTYPE，对前段的开发总是有帮助的。下面就是我找了网上的一些资料总结出来的，保存下来以备不时之需，也同样分享给大家。




要说Doctype，得从浏览器解析不同文档时所使用的模式开始说起，

• 针对text/html content的模式（Modes for text/html Content），这个模式下又有主要以下三个模式，而对text/html内容进行模式选择依赖于DOCTYPE嗅探（doctype sniffing）

• 怪癖模式（quirks mode）：不同的浏览器实现了不同的怪癖行为。Internet Explorer中的怪癖模式会让IE的行为与（包含非标准特性的IE5.5相同；其他浏览器中，怪癖模式是对标准模式的少量偏移。
• 标准模式（standards mode）：这个模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。不同的浏览器遵循不同的阶段，所以效果上会有差别。它和怪癖模式主要影响CSS内容的呈现，但在某些情况下也会影响到JavaScript的解释执行。
• 准标准模式（almost standards mode）：这种模式下的浏览器特性有很多都是符合标准的，但也不尽然，不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片时问题最明显）。

• 针对application/xhtml+xml的模式（XML Mode），这个模式下不要使用DOCTYPE

• 在Firefox，Safari，Chrome和Opera中，将HTTP Content-type设置成application/xhtml+xml会触发XML模式。这些浏览器会在某种程度上尽量正确地对待遵守规范的XML文档。
• IE 6, 7和8及Mac IE 5不支持application/xhtml+xml。

• 非Web模式（Non-Web Modes），这里不讨论，实际应用中也只有少数引擎有针对非web内容的模式。

这样我们可以很清楚的知道，DOCTYPE主要运用于web文档是text/html content的时候，而DOCTYPE可以决定浏览器在解析文档时使用那种模式。所以下面的文章内容只会限定在针对text/html content的三个模式里。

浏览器模式的不同，肯定会造成一些效果的不同。以下从三个方面来看看浏览器模式的影响：

• 布局（Layout）: text/html中的模式主要会影响CSS布局（layout）。例如，不能让样式被继承至表格内部是一种怪异的地方（quirk）。对某些浏览器的怪异模式，盒模型（box model）会变更到IE5.5盒模型。等等。在准标准模式中（对于那些包含此模式的浏览器来说），和标准模式不同的地方是对于只包含图像的单元格高度的计算。
• 解析（Parsing）：也有一些怪异的地方会影响HTML和CSS的解析（parsing），并使得解析规范的页面失败了。这些怪异的地方主要是由怪异的布局（layout）引起。但值得注意的是，对比标准模式，怪异模式主要体现在CSS的布局和解析中，而不是HTML解析中。
• 脚本（Script）：虽然怪异模式主要和CSS相关，但还是有一些和脚本（scripting）有关的。比如，Firefox的怪异模式中，HTML中的属性id可以从脚本的全局作用域中建立对象引用，就和IE一样。比起其他浏览器，怪异模式对脚本的影响在IE8中尤其明显。

现在来看看，浏览器是如何确定模式的(Doctype sniffing):

现在的浏览器用doctype嗅探（doctype sniffing）方式来为text/html文档确定浏览器引擎模式。这意味着模式将会根据HTML文档开头的文档声明（document type declaration）来选定。（不适用于XML文档。）Doctype嗅探的产生是基于以下的实际情况：当doctype嗅探出来的那会，当doctype嗅探出来的那会，绝大多数“怪异的”文档既没有文档类型声明，也没有引用老的DTD。HTML5认识到了这个事实，而将text/html中的doctype定义为专门为了模式转换。
一个典型的前HTML5文档类型声明包含字符串“<!DOCTYPE”，根元素的通用标识符（“html”），字符串“PUBLIC”，一个引号括起来的DTD公共标识符，也可能包含一个此DTD的系统标识符（一个URL），以及字符“>”。这些东西都用空格隔开。此文档类型声明放在文档中的根元素之前。

• 对于标准模式，可以通过使用下面任何一种文档类型来开启：

<!-- HTML 4.01 严格型 --> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"> 

<!-- XHTML 1.0 严格型 --> 

<!DOCTYPE html PUBLIC 

"-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

• 而对于准标准模式，则可以通过使用过渡型（transitional）或框架型（frameset）文档类型来触发，如下所示：

<!-- HTML 4.01 过渡型 --> 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd"> 

<!-- HTML 4.01 框架集型 --> 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Frameset//EN" 

"http://www.w3.org/TR/html4/frameset.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 Frameset//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

当然相同的模式不同的DOCTYPE声明之间，会有一些细微的差别，下文会提到。

好了，终于可以进入正题了，DOCTYPE：

• DOCTYPE是什么？

简单地说，doctype就是位于html标签之前的一行声明，这个声明向浏览器指出了当前页面或文档使用了那种规范，（HTML-4 de transition ou strict, XHTML, etc...）。
更完整的DOCTYPE声明写法是：
<!DOCTYPE HTML PUBLIC "type_de_HTML" "adresse_de_DTD"> 其中：

• type_de_HTML : 表明HTML的使用版本。
• adresse_de_DTD : 指出了DTD（Document type declaration）的URL地址，用来描述文档的法定结构、元素和属性。

• 为什么要声明DOCTYPE？

它指明了文档使用的(X)HTML版本，这是诸如浏览器之类的工具解析文档（processing the document）时最需要的信息。比如说，当我们使用Markup Validator来检查文档结构（Syntax）时，必须声明DOCTYPE。其实不用多说，上面的那些废话基本上都在说这个问题。

• DOCTYPE不同的声明

• HTML5 :

<!DOCTYPE html>

HTML5的新DOCTYPE标签，更加简单化。它不会让浏览器进入怪癖模式(Quirks mode)

• HTML4.01 transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

• 文档是html的：不能被当作XML对待；
• 没有<marquee>, <embed>, etc这些标签；
• 这些元素area, dt, dd, p, li, thead, tfoot, colgroup, col, tr, th et td的关闭标签是可选的;
• 标签不区分大小写 ;
• 对于HTML的属性，当属性值只包括(a-zA-Z0-9-,_:) 时，引号可以省略。
• <OPTION selected> 代替 <OPTION selected="selected">
• 以下的元素或属性是允许的（在html页面中）：
  • BASEFONT 和 FONT ;
  • CENTER, U, STRIKE 和 S ;
  • BODY 元素的BALINK, BACKGROUND, BGCOLOR, LINK, VLINK, TEXT 属性;
  • 表格元素的BGCOLOR, HEIGHT, NOWRAP, WIDTH 属性;
  • Image和Object的 BORDER, HSPACE, VSPACE 属性 ;
  • HR 元素的 CLEAR, NOSHADE, SIZE, WIDTH 属性 ;
  • li元素的 COMPACT, TYPE 属性, 和ol元素的 START, VALUE 属性 ;
  • PRE 元素的 WIDTH 属性 ;
• IFRAME 是允许的，但 FRAMESET 和 FRAME 不允许 ;

• HTML4.01 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"> 

与HTML4.01 transitionnel不同的地方 :

• 前面特别提出允许的元素和属性不再允许，他们应该在CSS里使用 ;
• 链接的 target 属性不再被允许 ;
• IFRAME, FRAMESET 和 FRAME 都不允许。

• HTML4.01 frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

规则基本上与HTML4.01 transitionnel相同, 但 BODY 元素不再存在. 它被可以包含多个 FRAME 元素的 FRAMESET 元素替代.

• XHTML1.0 transitional :

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

文档可以被当作HTML或者XML处理。

与HTML不同的syntax规则如下 :

• 所有标签都应该关闭;
• 所有的标签元素属性都应该是小写;
• 只允许 <option selected="selected"> 这种写法
• 所有的引号也是必须的 ;

简而言之: 可用的标签基本和HTML4.01 transitional一样, 但它的文法结构syntax要更严格一些.

• XHTML1.0 strict :

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

与XHTML1.0 transitionnel一样, syntax的规则是严格的, 但与XHTML1.0 transitionnel不同的地方和HTML4.01 Strict 完全一样:

• 前面特别提出允许的元素和属性不再允许，他们应该在CSS里使用 ;
• 链接的 target 属性不再被允许 ;
• IFRAME, FRAMESET 和 FRAME 都不允许。

简而言之: 可用的标签基本和HTML4.01 strict一样, 但它的文法结构syntax要更严格一些.

• XHTML1.0 frameset

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

规则基本上与XHTML1.0 transitionnel相同, 但 BODY 元素不再存在. 它被可以包含多个 FRAME 元素的 FRAMESET 元素替代.

简而言之: 可用的标签基本和HTML4.01 frameset一样, 但它的文法结构syntax要更严格一些.

• 如何选择DOCTYPE

推荐XHTML1.0 Strict;
如果你使用 iframe 或者 target属性, 使用 XHTML1.0 transitional.
如果你使用 frameset 和 frame, 使用XHTML1.0 frameset.
如果你使用 HTML5，直接使用<!doctype html>

• 最后推荐一个创建(X)HTML结构的工具 ：Squelettor