Doctype作用?标准模式与兼容模式各有什么区别?
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):doctype作用 标准模式与兼容模式
1.doctype作用 <!DOCTYPE>声明位于HTML文档的第一行.处于<HTML>标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCYTYPE不存在或格式不 ...
- DOCTYPE的作用以及标准模式和兼容模式的区别
<!doctype>声明必须处于HTML文档的头部,在<html>标签之前,告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以兼容模式呈 ...
- 说说html 的<!DOCTYPE>声明&标准模式与兼容模式
我们都知道<!DOCTYPE>声明位于文档的最前面,处于<html>标签之前. <!DOCTYPE>声明不是html标签,它的作用:告知web浏览界面应该使用哪个h ...
- HTML学习笔记——DOCTYPE和DTD,标准模式和兼容模式
主要涉及知识点: HTML与XHTML HTML与XHTML的区别 DOCTYPE与DTD的概念 DTD的分类以及DOCTYPE的声明方式 标准模式(Standard Mode)和兼容模式(Quirc ...
- 用meta name="renderer" content="webkit|ie-comp|ie-stand"来切换360双核安全浏览器的极速模式和兼容模式
以下信息摘自360官方网站: 浏览模式:极速模式.兼容模式及IE9高速模式是360浏览器显示网页时使用的三种模式:极速模式表示极速模式兼容模式表示兼容模式IE9IE10模式表示IE9/IE10模式(仅 ...
- Doctype作用,标准模式与兼容模式的区别
<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以 ...
- DOCTYPE声明作用?标准模式与兼容模式?
<!DOCTYPE>文档声明是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明,用以告诉其他人这个文档的类型风格:DTD(文档类型定义)是一组机器可读的规则,它们指示(X) ...
- 360兼容模式==ie8 兼容模式下 span标签占位问题
ie8 兼容模式 ie8 标准渲染 应付金额 穿位 错误代码 <span class="span_em">应付金额:<em><span style=& ...
- CSS hack 360浏览器 极速模式与兼容模式
自动切换浏览器模式对于360浏览器7.1版本有效,8.1无效 <%@ Page Language="C#" AutoEventWireup="true" ...
随机推荐
- 采用UltraISO制作U盘启动盘
采用UltraISO制作U盘启动盘 打开UltralSO,选择"文件"--->"打开",如下图: 图1 打开WIN7操作系统的ISO文件,如下图: 图2 ...
- 数据结构-C语言递归实现树的前中后序遍历
#include <stdio.h> #include <stdlib.h> typedef struct tree { int number ; struct tree *l ...
- 关于IOS中使用支付功能(以支付宝为例)
支付宝是第三方支付平台,简单来说就是协调客户,商户,银行三者关系的方便平台 使用支付宝进行一个完整的支付功能,大致有以下步骤: a 与支付宝进行签约,获得商户ID(partner)和账号ID(sell ...
- 基于阻塞队列的生产者消费者C#并发设计
这是从上文的<<图文并茂的生产者消费者应用实例demo>>整理总结出来的,具体就不说了,直接给出代码,注释我已经加了,原来的code请看<<.Net中的并行编程-7 ...
- python--Numpy and Pandas 基本语法
numpy和pandas是python进行数据分析的非常简洁方便的工具,话不多说,下面先简单介绍一些关于他们入门的一些知识.下面我尽量通过一些简单的代码来解释一下他们该怎么使用.以下内容并不是系统的知 ...
- 设置eclipse全局编码格式
window--preference--general--workspace--text file encoding
- 使用HttpClient进行https连接(一)
一.生成密钥库和证书 1.生成服务器证书库 keytool -validity 365 -genkey -v -alias uyun -keyalg RSA -keystore /opt/UEM/ke ...
- Day4_闭包含数
闭包函数: 闭包函数是在作用域的前提下 闭包含数:定义在函数内部的函数,包含对外部作用域名字的引用,而不是对全局作用域名字的引用,那么该内部函数就称为闭包含数. eg: x=1 def f1(): x ...
- Django1.8文档阅读手记
主要集中在新特性上. Django1.8好像开始推荐使用python3 Django的QuerySet是延迟加载的,这个文档里面一般会明言,通过Connection SQL显示测试,外键对象也是延迟加 ...
- maven jsp out.print()request.getParameter() 爆红
如图: 解决方案: 在pom文件中添加依赖: <!-- https://mvnrepository.com/artifact/javax.servlet.jsp/jsp-api -->&l ...