Doctype知识点总结
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知识点总结的更多相关文章
- HTML5知识点总结
HTML5知识点总结(一) 一.HTML新增元素 1.IE9版本以下支持HTML5的方法 <!--[if lt IE9]> <script src="http://cdn. ...
- 【干货分享】前端面试知识点锦集02(CSS篇)——附答案
二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding ...
- 【干货分享】前端面试知识点锦集01(HTML篇)——附答案
一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...
- css知识点整理
CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一.css引入的方式 1.行内样式:行内式是在标记的style ...
- CSS3知识点整理&&一些demo
css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出 http://codepen ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 【转】HTML5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...
- 小型移动 webApp Demo 知识点整理
包括内容: css初始化.css全局设置.常用meat标签.rem适配.flex布局.相关技巧(手势库使用.多行截字.1像素边线.点击状态.placeholder居中等) reset 引用 norma ...
- 前端开发面试知识点大纲--摘自jackyWHJ
前端开发面试知识点大纲:HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应 Ja ...
随机推荐
- webpack打包nodejs项目(前端代码)
PS.若本文没有帮到你可以看看我的进阶版点此前往 适用情况 首先说明,此情况不具备普遍性.若你的情况与笔者类似那么希望这篇文章能够帮到你. 我的项目情况是这样的:用node.js做后台,ejs做模板引 ...
- Android 开发者必知必会的权限管理知识
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/OQRHEufCUXBA3d3DMZXMKQ 导语 本 ...
- Yii2 解决2006 MySQL server has gone away问题
Yii2 解决2006 MySQL server has gone away问题 Yii2版本 2.0.15.1 php后台任务经常包含多段sql,如果php脚本执行时间较长,或者sql执行时间较长, ...
- 仓储repository概念
1.为什么要用仓储?(仓储有什么用) 1.1 解耦 为了解耦领域层与数据映射层的关系. 1.2 管理增删查改 仓储模式最大的优点就是所有的数据访问首先是通过仓库的,对仓库的增删改都不会立即提交到数据库 ...
- 理解 Linux 中 `ls` 的输出
ls 的输出会因各 Linux 版本变种而略有差异,这里只讨论一般情况下的输出. 下面是来自 man page 关于 ls 的描述: $ man ls ls - list directory cont ...
- MySQL via EF6 的试用报告
1.如何通过 EF6 来连接 MySQL? 2.如何通过 EF6 来实现 CRUD? 2.1.Create 添加 2.2.Retrieve 查询 2.3.Update 修改 2.4.Delete 删除 ...
- Spring Boot(六):如何优雅的使用 Mybatis
*:first-child{margin-top: 0 !important}.markdown-body>*:last-child{margin-bottom: 0 !important}.m ...
- 浅析Servlet执行原理
在JavaWeb学习研究中,Servlet扮演重要的作用,学好它,是后续JavaWeb学习的良好基础.无论是SSH,还是SSM,微服务JavaWeb技术,都应先学好Servlet,从而达到事半功倍的效 ...
- Revit通过API创建共享参数
Revit共享参数是通过创建一个.txt类型的文件来保存相关信息,一旦与项目保存完毕之后,共享参数也就变成了项目参数(项目参数无法通过API创建),项目参数是保存在Revit项目里面的,所以此时这个. ...
- Vue-zTree
在vue中引入zTree,和引入其他组件类似,首先在main.js里将以下3个js引入: import "./js/jquery-3.3.1.min.js";import &quo ...