DOCTYPE是document type (文档类型) 的缩写。<!DOCTYPE >声明位于文档的最前面,处于标签之前,它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

严格模式:又称标准模式,是指浏览器按照W3C标准来解析代码,呈现页面

混杂模式:又称为怪异模式或者兼容模式,是指浏览器按照自己的方式来解析代码,使用一种比较宽松的向后兼容的方式来显示页面。

1. 如何区分

1). DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

2). HTML5 没有 DTD(DTD的是W3C所发布的一个文档类型定义,简单的说,就是告诉浏览器你的这个HTML是根据那个标准写的,解析的时候用哪个标准解析。) ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。

3). 严格 DTD ——严格模式

4). 有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式

2. 具体区别:

1). width不同

严格模式下,width是内容的宽度

混杂模式下,width是元素实际的高度

2). 在标准模式下,给span等行内元素设置width和height都不会生效,而在兼容模式下,会生效。

3). 在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。

4). 用margin: 0 auto,在标准模式下可以使元素水平居中,但在兼容模式下却会失效,(用text-align属性解决)

5). 兼容模式下table中的字体属性不能继承上层的设置, white-space:pre会失效,设置图片的padding会失效。

Doctype知识点总结的更多相关文章

  1. HTML5知识点总结

    HTML5知识点总结(一) 一.HTML新增元素 1.IE9版本以下支持HTML5的方法 <!--[if lt IE9]> <script src="http://cdn. ...

  2. 【干货分享】前端面试知识点锦集02(CSS篇)——附答案

    二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding ...

  3. 【干货分享】前端面试知识点锦集01(HTML篇)——附答案

    一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...

  4. css知识点整理

    CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一.css引入的方式 1.行内样式:行内式是在标记的style ...

  5. CSS3知识点整理&&一些demo

    css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出         http://codepen ...

  6. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  7. 【转】HTML5的小知识点小集合

    html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...

  8. 小型移动 webApp Demo 知识点整理

    包括内容: css初始化.css全局设置.常用meat标签.rem适配.flex布局.相关技巧(手势库使用.多行截字.1像素边线.点击状态.placeholder居中等) reset 引用 norma ...

  9. 前端开发面试知识点大纲--摘自jackyWHJ

    前端开发面试知识点大纲:HTML&CSS:    对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应 Ja ...

随机推荐

  1. Php如何返回json数据,前后端分离的基本解决方案

    php返回json,xml,JSONP等格式的数据 返回json数据: header('Content-Type:application/json; charset=utf-8'); $arr = a ...

  2. Python用Django写restful api接口

    用Python如何写一个接口呢,首先得要有数据,可以用我们在网站上爬的数据,在上一篇文章中写了如何用Python爬虫,有兴趣的可以看看: https://www.cnblogs.com/sixrain ...

  3. 跟我一起学opencv 第一课之图像加载,修改,保存

    使用opencv前记得引入库和头文件: #include<opencv2\opencv.hpp> 1.加载图像(cv::imread)(OPENCV 支持 JPG,PNG,TIFF等常见格 ...

  4. CentOS7 安装mysql 5.7

    一.安装准备 检查系统中是否安装了mysqlrpm -qa|grep mysql如果有安装mysql,则需要先卸载之前安装的mysqlyum -y remove mysql然后再查看mysql是否都卸 ...

  5. Linux配置成网关

    之前按照诸葛建伟的metasploit魔鬼训练营搭了个简单的内网环境,其中就是一台linux作为内网网关.但是虚拟机开启的时候经常出现包不能转发的情况,也就是网关没有配置好. 在网上找了好几个才找到适 ...

  6. The connection to the server localhost:8080 was refused - did you specify the right host or port?

    The connection to the server localhost:8080 was refused - did you specify the right host or port? 解决 ...

  7. 图像检索(5):基于OpenCV实现小型的图像数据库检索

    本文对前面的几篇文章进行个总结,实现一个小型的图像检索应用. 一个小型的图像检索应用可以分为两部分: train,构建图像集的特征数据库. retrieval,检索,给定图像,从图像库中返回最类似的图 ...

  8. 盘点 Python 中的那些冷知识(二)

    上一篇文章分享了 Python中的那些冷知识,地址在这里 盘点 Python 中的那些冷知识(一) 今天将接着分享!! 06. 默认参数最好不为可变对象 函数的参数分三种 可变参数 默认参数 关键字参 ...

  9. 【带着canvas去流浪】(1)绘制柱状图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 思考题 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端& ...

  10. 数据库艰难求生之路(基础:创建数据库表格)part1

     创建表格 1.创建表格之identity create table TableName( id ,), col_1 ), col_2 ) ) 这是一个简单的表格创建,identity这个是指在创建表 ...