免费的HTML5连载来了《HTML5网页开发实例详解》连载(三)DOCTYPE和字符集
在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">
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML4.01//EN">
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- 遗留兼容模式,对于过往无法考证规则的一种兼容方式,语法格式如下:
- <!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和字符集的更多相关文章
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)
最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载(六)媒体查询
响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载(五)图解通过Fiddler加速开发
Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...
- 当里个当,免费的HTML5连载来了《HTML5网页开发实例详解》连载(一)
读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...
- 《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口
HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...
- 读懂《HTML5网页开发实例详解》这本书
你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信<Flash之我见>中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利. ——国际巨头Google.苹果等都 ...
- 感谢各位亲们的大力支持,免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了!
感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了. 有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...
- 免费的HTML5连载来了《HTML5网页开发实例具体解释》连载(六)媒体查询
响应式设计的还有一个重要技术手段是媒体查询.假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上 ...
- 《python开发技术详解》|百度网盘免费下载|Python开发入门篇
<python开发技术详解>|百度网盘免费下载|Python开发入门篇 提取码:2sby 内容简介 Python是目前最流行的动态脚本语言之一.本书共27章,由浅入深.全面系统地介绍了利 ...
随机推荐
- QT5 串口收发实例代码
以下代码是自己测试门禁系统使用的 主要用到了串口的接收和发送 开发环境:xp QT5.1.1 串口:38400 N 8 1 自动检测可用串口 在xp上测试没问题 有些usb转串口会出现波特 ...
- [MODX] 0. Mangement System Overview
In Modex, there are three tabs: Resoources, Elements & Files First: 'Files' is the place where t ...
- Java I/O输入输出流详解
一.文件的编码 开发时一定要注意项目默认的编码!!!!!!!! 文件操作的时候一定要记得关闭!!!!!!!! ASCII:美国标准 ...
- MVC之 自定义过滤器(Filter)
MVC之 自定义过滤器(Filter) 一.自定义Filter 自定义Filter需要继承ActionFilterAttribute抽象类,重写其中需要的方法,来看下ActionFilterAttri ...
- c#线程问题(1)
delegate : public delegate void ParameterizedThreadStart(Object obj) public delegate void ThreadStar ...
- cocos2d-x调度器原理
程序运行后每达到一帧的时间间隔就会执行一次mainLoop void CCDisplayLinkDirector::mainLoop(void) { //判断是否需要释放CCDirector,通常游戏 ...
- .net 在不同情况下调用带soapheader的webservice的方式
国庆长假到了,本想出去玩玩,无奈自己屌丝一枚,啥都没有,只能自己宅在家里思考思考人生.不过人生还是过于复杂,一时间也想不出个所以然,只能是整理一下在工作中遇到的一些小问题,首先是关于带soaphead ...
- WdatePicker时间控件联动选择
$("#txtStartTime").bind("click focus", function () { var endtimeTf = $dp.$('txtE ...
- FineUploader 学习笔记
FineUploader既是开源的又是收费的,这个没搞懂. 先看效果:
- NSFileManager文件管理
前提,用到的东东: 1.文件数据类:NSData类型(二进制) 1)作用:专门用于将数据封装成二进制的类.数据(文本,图片,音频,视频....) ==> NSData类型的对象 2)编码方式: ...