Doctype作用？标准模式与兼容模式各有什么区别?
　　DOCTYPE是document type(文档类型)的简写,用来告诉浏览器的解析器使用哪种HTML或XHTML规范解析页面。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

知道多少种文档类型

HTML 4.01和XHTML 1.0规定了三种文档类型：Strict（严格）、Transitional（过渡）以及Frameset（基于框架）。

为什么HTML5只要写<!DOCTYPE HTML>

HTML 4.01 基于 SGML，需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型 。
HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。但是，HTML5不是的。

标准模式与兼容模式（怪异模式）各有什么区别?

Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（兼容）模式（也就是松散呈现模式或者怪异模式）用于呈现为传统浏览器而设计的网页。

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。简单说就是尽可能的显示能显示的东西给用户看。

具体区别：
1.盒模型
  在严格模式中 ：width是内容宽度 ，元素真正的宽度 = width;
  在兼容模式中 ：width则是=width+padding+border

2.兼容模式下可设置百分比的高度和行内元素的高宽
    在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
    在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

3.用margin:0 auto设置水平居中在IE下会失效
    使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
    body{text-align:center};#content{text-align:left}

4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效

Doctype作用？标准模式与兼容模式各有什么区别?的更多相关文章

  1. 前端面试题系列（1）：doctype作用 标准模式与兼容模式

    1.doctype作用 <!DOCTYPE>声明位于HTML文档的第一行.处于<HTML>标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCYTYPE不存在或格式不 ...

  2. DOCTYPE的作用以及标准模式和兼容模式的区别

    <!doctype>声明必须处于HTML文档的头部,在<html>标签之前,告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以兼容模式呈 ...

  3. 说说html 的<!DOCTYPE>声明&标准模式与兼容模式

    我们都知道<!DOCTYPE>声明位于文档的最前面,处于<html>标签之前. <!DOCTYPE>声明不是html标签,它的作用:告知web浏览界面应该使用哪个h ...

  4. HTML学习笔记——DOCTYPE和DTD，标准模式和兼容模式

    主要涉及知识点: HTML与XHTML HTML与XHTML的区别 DOCTYPE与DTD的概念 DTD的分类以及DOCTYPE的声明方式 标准模式(Standard Mode)和兼容模式(Quirc ...

  5. 用meta name="renderer" content="webkit|ie-comp|ie-stand"来切换360双核安全浏览器的极速模式和兼容模式

    以下信息摘自360官方网站: 浏览模式:极速模式.兼容模式及IE9高速模式是360浏览器显示网页时使用的三种模式:极速模式表示极速模式兼容模式表示兼容模式IE9IE10模式表示IE9/IE10模式(仅 ...

  6. Doctype作用，标准模式与兼容模式的区别

    <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以 ...

  7. DOCTYPE声明作用？标准模式与兼容模式？

    <!DOCTYPE>文档声明是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明,用以告诉其他人这个文档的类型风格:DTD(文档类型定义)是一组机器可读的规则,它们指示(X) ...

  8. 360兼容模式==ie8 兼容模式下 span标签占位问题

    ie8 兼容模式 ie8 标准渲染 应付金额 穿位 错误代码 <span class="span_em">应付金额:<em><span style=& ...

  9. CSS hack 360浏览器 极速模式与兼容模式

    自动切换浏览器模式对于360浏览器7.1版本有效,8.1无效 <%@ Page Language="C#" AutoEventWireup="true" ...

随机推荐

  1. iOS自定义多参数类型方法

    前几天做自定义UIAlertView的时候,想仿造系统自带的初始化方法做一个AlertView,里面涉及到不确定多参数的设置和使用问题.这里做一下记录. 我自定义了一个方法: - (instancet ...

  2. mac os 中如何修改顶栏图标的顺序

    很简单哦! 按住 cmd键同时鼠标选中那个图标,直接拖到你想要的位置即可.

  3. 64位linux下安装ps模拟器ePSxe

    早就想在爱机上玩ps游戏,特别是彩京的1945一代和非常经典的实况足球2002版.在ubuntu64位下可以通过wine模拟的方式运行windows版的ePSxe,但是总觉得差些呢?非原生啊!网上搜了 ...

  4. IOS9关于搜索的认识和实现

    原文链接 : iOS 9 App Search Tutorial: Introduction to App Search 原文作者 : Chris Wagner 译文出自 : 开发技术前线 www.d ...

  5. Spring Aop 梳理

    Aspect Oriented Programming  面向切面编程.解耦是程序员编码开发过程中一直追求的.AOP也是为了解耦所诞生. 具体思想是:定义一个切面,在切面的纵向定义处理方法,处理完成之 ...

  6. OO，OO以后，及其极限

    1.什么是软件开发? 软件开发的过程就是人们使用各种计算机语言将人们关心的现实世界映射到计算机世界的过程: 现在的计算机的数学理论基础是由计算机的开山鼻祖,大名鼎鼎的图灵于1937年提出的图灵机模型. ...

  7. 使用 CSS3 实现 3D 图片滑块效果

    Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...

  8. centos安装nginx（针对一哥们的博客进行的详细补充（用红色字体标出了补充部分））

    centos安装nginx 原文地址:http://www.cnblogs.com/leechenxiang/p/5402960.html 一.什么是nginx 是一个C语言开发的HTTP反向代理服务 ...

  9. git命令行常用几个指令（细节问题）

    GIT PUSH/PULL时总需要输入用户名密码的解决方案: git config --global credential.helper store 查看当前的配置信息: git config --s ...

  10. spring中配置quartz调用两次及项目日志log4j不能每天生成日志解决方法

    在quartz中配置了一个方法运行时会连续调用两次,是因为加载两次,只需在tomcat的server.xml中修改配置 <Host name="www.xx.cn" appB ...