1. DOCTYPE 文档声明作用DOCTYPE是HTML文档的文档类型声明位于文档第一行不属于HTML标签作用是告诉浏览器当前页面使用的HTML版本指导浏览器以对应标准解析渲染页面。HTML5 标准声明极简通用!DOCTYPE html核心价值开启浏览器标准渲染模式、避免页面样式错乱、统一各浏览器解析规则、是页面标准化渲染的基础。2. 标准模式 vs 兼容模式怪异模式1标准模式Strict Mode页面书写完整DOCTYPE声明时触发浏览器按照W3C标准规范解析页面。特性盒模型标准、样式统一、行高、定位、边距全部遵循W3C规范各浏览器渲染效果一致是项目开发标准模式。2怪异模式/兼容模式Quirks Mode页面缺失/错误DOCTYPE声明时触发浏览器为兼容老旧网页按照旧版浏览器IE5规则渲染。核心差异高频面试点盒模型差异标准模式 width 内容宽度怪异模式 width 内容paddingborder行内元素、图片、表格样式渲染不一致垂直居中、边距合并规则不统一最终导致跨浏览器样式错乱、布局偏移开发强制规范所有HTML页面必须首行添加 !DOCTYPE html杜绝怪异模式。
1. DOCTYPE 文档声明作用DOCTYPE是HTML文档的文档类型声明位于文档第一行不属于HTML标签作用是告诉浏览器当前页面使用的HTML版本指导浏览器以对应标准解析渲染页面。HTML5 标准声明极简通用!DOCTYPE html核心价值开启浏览器标准渲染模式、避免页面样式错乱、统一各浏览器解析规则、是页面标准化渲染的基础。2. 标准模式 vs 兼容模式怪异模式1标准模式Strict Mode页面书写完整DOCTYPE声明时触发浏览器按照W3C标准规范解析页面。特性盒模型标准、样式统一、行高、定位、边距全部遵循W3C规范各浏览器渲染效果一致是项目开发标准模式。2怪异模式/兼容模式Quirks Mode页面缺失/错误DOCTYPE声明时触发浏览器为兼容老旧网页按照旧版浏览器IE5规则渲染。核心差异高频面试点盒模型差异标准模式 width 内容宽度怪异模式 width 内容paddingborder行内元素、图片、表格样式渲染不一致垂直居中、边距合并规则不统一最终导致跨浏览器样式错乱、布局偏移开发强制规范所有HTML页面必须首行添加 !DOCTYPE html杜绝怪异模式。
