在2.1.2节中通过新老DOCTYPE的对比，读者可以清晰地看到HTML 5在精简旧有结构上做出的努力。DOCTYPE在出现之初主要用于XML中，用作描述XML允许使用的元素、属性和排列方式。起初HTML借鉴了XML中DOCTYPE的使用方法，并赋予了新用法，如大家熟知的触发浏览器的标准模式。假使在制作一张页面时，没有设定DOCTYPE，则浏览器会以怪异模式状态进行处理（即Quirks模式），该模式与标准模式在盒模型、样式、布局等都存在较大差异。因此，DOCTYPE在制作页面时是不可或缺的部分。

在上一版本HTML 4标准中，DOCTYPE被分为3种模式：

  • 严格模式，即严格遵循W3C标准的模式，代码格式如下：
  •  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • 过渡模式，包含了W3C标准的内容，同时还可以使用不被W3C推荐的标签，如font、b等，而且不可以使用框架元素（即frameset元素），代码格式如下：
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  • 框架模式，可以使用框架元素，其他与过渡模式相同，代码格式如下：
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

    提示：旧有的HTML关于DOCTYPE标准，读者可以参看W3C官方文档说明，网页地址：http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.2。虽然之前版本的HTML对DOCTYPE做了重重规定，但真实情况却是浏览器会尽最大的可能渲染对应的页面，即使可能出现了一些不符合模式的做法，唯一会出现的是浏览器会在控制台中显示一些错误警告，这种做法就是常说的浏览器容错性，实则是对市场和用户的妥协。

故事发展到HTML 5，W3C将DOCTYPE剔除原有鸡肋的声明方式，简化为如下格式：

<!DOCTYPE html>

对于绝大多数开发者来说，只需要使用这一种方式就足以满足日常的开发使用，但如果要考虑到日后的兼容和扩展等一系列问题，还需要了解W3C在新制定DOCTYPE的一些新规定，主要分为3类：

  • 普通模式，即<!DOCTYPE html>
  • 弃用模式，听起来不知所云，其实指的就是对过往模式的兼容模式，不过HTML5弃用了之前的过渡模式和框架模式，最终留下了6种书写格式，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML4.0//EN">
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML4.01//EN">
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN"
  5. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • 遗留兼容模式，对于过往无法考证规则的一种兼容方式，语法格式如下：
  1. <!doctype HTML system"about:legacy-compat">

通过对浏览器DOCTYPE的理解，读者可以熟悉浏览器模式的触发方式，不过就通常开发而言，只需要使用<!DOCTYPEhtml>这一种普通模式。

提示：HTML 5最新3种模式可以查看链接http://dev.w3.org/html5/markup/syntax.html#doctype-syntax。

所谓的字符是对各种文字和符号的总称，涵盖了各国文字、标点符号、图形符号和数字等。字符集是对多个字符的集合，常用的字符集有：ASCII、GB2312、Unicode、ISO等。科学家为了让计算机准确地处理各种字符集，需要对字符进行编码，以便计算机能够识别和存储各种文字。

在HTML 5出现之前，浏览器会根据3种方式确认页面的编码格式，按优先级排列如下：

  • 获取HTTP请求头中的Content-Type字符对应的值。
  • 使用meta标签声明，语法格式如下：
<meta http-equiv="Content-Type"content="text/html; charset=utf-8">
  • 外链资源使用charset属性声明编码格式，如script标签中使用语法格式如下：
<script type="text/javascript"src="myscripts.js" charset="UTF-8"></script>

HTML 5出现后，对字符集的使用做了大量的简化，可以使用以下语法进行字符集声明：

<meta charset="utf-8">

对于日常使用网站开发而言，结合HTML 5的字符集使用，笔者给出如下建议：

  • 最优先使用HTTP请求头指定编码。
  • 统一全站字符集编码，HTML 5推荐UTF-8字符集。
  • 使用meta标签确认字符集编码，尽可能放在html标签的第一个子元素位置。
  • 第三方引用的脚本，在不确认字符编码时，加上charset属性设置编码格式。

学习HTML5最好的书就是《HTML5网页开发实例详解》，用代码学习用案例学习，可比看文字有趣多了！！！一本书搞定HTML5，从现在开始。

免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集的更多相关文章

  1. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  2. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询

    响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...

  3. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发

    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...

  4. 当里个当，免费的HTML5连载来了《HTML5网页开发实例详解》连载（一）

    读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...

  5. 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口

    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...

  6. 读懂《HTML5网页开发实例详解》这本书

    你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信<Flash之我见>中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利. ——国际巨头Google.苹果等都 ...

  7. 感谢各位亲们的大力支持，免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了！

    感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...

  8. 免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（六）媒体查询

    响应式设计的还有一个重要技术手段是媒体查询.假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上 ...

  9. 《python开发技术详解》|百度网盘免费下载|Python开发入门篇

    <python开发技术详解>|百度网盘免费下载|Python开发入门篇 提取码:2sby  内容简介 Python是目前最流行的动态脚本语言之一.本书共27章,由浅入深.全面系统地介绍了利 ...

随机推荐

  1. mvc4 web-api 与unity搭建接口

    对于接口重要的应该是 功能实现,合法性验证,性能监控,日志等模块 通过unity aop功能可以实现统一的日志模块和性能监控. 1.新建mvc4 webapi项目 nuget添加 unity 3.0+ ...

  2. JQuery UI Widget Factory官方Demo

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 【zabbix系列】报警系统的设置和排除

    关于邮件报警,有非常多方案,这里选择的是稳定性较好.使用较多的msmtp+mutt方案. 该方案有一个非常好的地方在于不用自己来搭建独立的mailserver,能够使用第三方mail.这样的方法不仅能 ...

  4. OpenStack Magnum 项目简单介绍

    背景 Magnum 项目是 2014 年 11 月增加 OpenStack 的年轻项目,由 Rackspace主导发起,其定位是提供容器即服务(Container as a Service)的 API ...

  5. PHP实现微博的同步发送(转)

    导读:在设计博客类站点时,有时会需要在发布文章时同步发布在微博上.本文阐述了实现该功能的基本方式. 准备工作   作为新浪微博的开发者,需要有身份验证: 个人身份认证的审核,一般一个工作日: 接着是提 ...

  6. 细看InnoDB数据落盘 图解 MYSQL 专家hatemysql

    http://hatemysql.com/?p=503 1.  概述 前面很多大侠都分享过MySQL的InnoDB存储引擎将数据刷新的各种情况.我们这篇文章从InnoDB往下,看看数据从InnoDB的 ...

  7. 模板方法模式(Template Method)

    @@@模式定义: 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中. 模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. @@@练习示例:  登录控制 @@@示例代码: \s ...

  8. 实用JS大全

    ****************************************************************(一)常用元素,对象,事件,技巧 事件源对象 event.srcElem ...

  9. Recovery启动流程(2)---UI界面

    转载请注明来源:cuixiaolei的技术博客 Recovery启动流程系列文章把recvoery目录下文件分成小块讲解,最后再以一条主线贯穿所有的内容.这篇文章主要讲解Recovery-UI的相关内 ...

  10. [课程相关]homework-01

    我的github博客大概是一年前创建的.现在已经想不起来当时是怎么接触到github的了,大概是从某一个网站看到的吧.注册完帐号以后很长一段时间都没有真正的去使用github,主要原因就是网站是英文的 ...