`
nirvana1988
  • 浏览: 137694 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

关于浏览器渲染html页面采用的三种文本模式

 
阅读更多

     在开启这个话题前,先看一行代码。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     想必做web开发的朋友都很熟悉这段代码,它一般位于html页面的头部,它是指定了 浏览器在解释Html代码时所采用的渲染规范(如html各元素的显示位置及大小等)。

     这个渲染规范由w3c给出,然后各浏览器根据这个渲染规范 去解释html代码,最终呈现给大家丰富多彩的页面效果。

 

     通常w3c会给出多组Doctype规范,开发人员可自由地选取一个Doctype规范,让浏览器根据这个规范去渲染页面。但在同一个Doctype规范下,不同浏览器也会采用不同的文本模式对html页面进行渲染。

     而浏览器采用的文本模式的不同,最终影响到了html页面的显示效果。

 

     现在来说说文本模式。文本模式共有 诡异模式Quirks mode ,也有翻译为兼容模式、怪异模式的)、标准模式Standards mode )和几乎标准模式Almost standards mode )三种。

    上面我们提到Doctype规范决定了浏览器将会采用哪种文本模式去渲染html页面。如果当我们不指定Doctype时,IE6、IE7会采用诡异模式渲染页面,IE8以标准模式渲染页面(IE9下没测试),ff11也是以标准模式渲染页面。当我们采用了w3c所提供的某一个Doctype规范时,可参照下面的表格以了解浏览器将会以何种文本模式渲染html页面。

       通过查看上面的表格数据,w3c提供了一个不带DTD规范的Doctype,即<!Doctype html>,IE8以上的IE版本及其他主流浏览器,在这个Doctype下 均会采用标准模式对html页面进行渲染。

      由于HTML5不基于 SGML,它不需要在Doctype中引用DTD规范,因此<!Doctype html>被大量使用在了html页面中,让浏览器按照它们应该的方式来运行。

 

      如何获取当前浏览器以何种文本模式渲染的html页面呢? 可通过js获取document.compatMode的值来获取当前浏览器所采用的文本模式,该值一般有两个BackCompat(代表诡异文本模式)、CSS1Compat(代表标准文本模式)。

 

 

 

 

   

 

分享到:
评论

相关推荐

    文本浏览器w3m-0.5.3.tar.gz

    在数字化时代,虽然图形用户界面的浏览器已经占据了主导地位,但文本模式的浏览器依然有着其独特的应用场景和价值。w3m,作为一款优秀的文本浏览器,以其简洁、高效的特点,深受程序员和终端爱好者喜爱。本文将对w3m...

    让所有的浏览器都能识别HTML5网页标签样式

    HTML5是超文本标记语言(HyperText Markup Language)的第五个主要版本,它极大地扩展了HTML的语义性,引入了许多新的元素、属性和API,旨在提升网页开发的效率和用户体验。这一版本的HTML标准旨在解决早期HTML版本...

    VC模拟自制网页浏览器

    **SDI(Single Document Interface)**是Microsoft Windows应用程序设计的一种模式,它允许用户同时打开多个独立的文档窗口。在VC中,使用MFC(Microsoft Foundation Classes)库可以方便地创建SDI应用程序。每个SDI...

    Android代码-[安卓开源]带夜间模式的浏览器项目.zip

    【Android 开源项目:带夜间模式的浏览器】 在 Android 开发中,创建一个功能完善的浏览器不仅需要理解网络请求、渲染引擎,还需要处理用户界面、性能优化等多个方面。这个开源项目是一个实现夜间模式的安卓浏览器,...

    双内核web浏览器

    4. HTML解析和渲染:了解浏览器如何解析HTML文档并呈现页面。 5. Java编程实践:编写和调试Java代码,实现Web浏览器的功能。 6. 软件设计模式:可能涉及到单例模式、工厂模式等,用于管理浏览器实例和引擎切换。 总...

    WebRebuild北京第一届交流会之2:《浏览器兼容性问题简介》——黄昊

    浏览器根据页面顶部的DOCTYPE声明来决定使用哪种模式。DOCTYPE的缺失或不正确会导致页面进入怪异模式。开发者可以通过document.compatMode属性来检测当前页面的渲染模式。 DOCTYPE的正确使用对于确保页面在不同...

    java网页浏览器组件介绍(全的4种).

    第三种方法是使用JavaFX的WebView组件,它提供了更现代的网页渲染引擎,支持CSS、JavaScript以及大部分现代Web标准。WebView通过WebEngine类来加载和控制网页内容,可以很好地展示复杂交互的网页。然而,JavaFX是...

    WEB浏览器

    6. **多进程架构**:现代浏览器往往采用多进程架构,每个标签页运行在独立的进程中,以提高稳定性并限制一个页面崩溃对其他页面的影响。 7. **安全性**:浏览器需要处理各种安全问题,如防止跨站脚本攻击(XSS)、...

    浏览器引擎分类(兼容测试)

    - **Lynx和links**:这些文本模式浏览器使用专用的渲染引擎,它们不支持复杂的HTML或CSS特性,主要用于命令行界面下的文本浏览。 ### 兼容性测试策略 针对不同的渲染引擎进行兼容性测试时,可以采取以下几种策略:...

    java课程设计-网页浏览器

    - **HTML内容呈现**:解析后的HTML内容需要转化为用户可见的形式,这可能涉及到文本渲染、图片加载等。 3. **用户界面设计**: - **Swing或JavaFX**:Java提供了Swing和JavaFX两个图形用户界面库来创建浏览器的...

    一种构建在markdown和webassembly之上无JavaScript的新型轻量级快速网页浏览器

    标题中的“一种构建在markdown和webassembly之上无JavaScript的新型轻量级快速网页浏览器”指出了一种创新的网页浏览解决方案,它不依赖于传统的JavaScript,而是利用Markdown和WebAssembly技术。这种浏览器旨在提供...

    易语言超文本浏览框支持库实现CTRL+F文字查找功能源码

    易语言是一种专为初学者设计的编程语言,它采用了中文编程的方式,降低了编程的门槛。在易语言中,我们可以创建各种应用程序,包括那些涉及到用户界面交互的程序。在这个特定的案例中,我们关注的是“超文本浏览框...

    基于QT浏览器,可在配置文件中配置网址

    QT浏览器是一种基于Qt框架开发的网络浏览应用,它利用了Qt库的强大功能,尤其是Qt WebEngine模块,提供了高效的网页渲染和交互能力。本项目的核心特点在于允许用户通过配置文件来定制浏览器启动时加载的默认网址,这...

    浏览器兼容性设置级解释

    1. **使用doctype声明**:确保浏览器以标准模式解析页面。 2. **添加`&lt;meta&gt;`标签**:如`&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;`,使IE尽可能使用最新版本的渲染引擎。 3. **CSS Hack**:根据需要...

    C# webkit为内核的浏览器打开网页源码__0525).rar

    WebKit是一个开源的渲染引擎,它被Safari、Chrome等流行浏览器所采用,能够高效地解析和显示HTML、CSS、JavaScript等网络内容。 WebKit内核提供了丰富的API,使得开发者可以构建自定义的浏览器应用。C#与WebKit的...

    大富翁离线浏览器

    再次,大富翁离线浏览器在本地展示网页时,需要解析存储的HTML文件,并结合CSS和JavaScript来渲染页面。这涉及到DOM解析、CSS样式应用以及JavaScript执行。由于在离线模式下没有实时的数据更新,所以对于依赖服务器...

    htc 6850 全功能浏览器

    2. **安装说明.txt**:这个文本文件提供了关于如何在HTC 6850上安装和配置uZardWebP_vga.cab的详细步骤。可能包括先卸载旧版浏览器、检查设备兼容性、确认系统需求以及执行安装过程等信息。 综上所述,"htc 6850 全...

    vc 浏览器源码

    这个项目基于多文档界面(MDI)架构,这是一种在单个应用程序窗口中管理多个子窗口的技术,常见于早期的桌面应用,如文本编辑器或IDE。 首先,我们要理解C++在浏览器开发中的作用。C++是一种静态类型的、编译式的、...

    sdEditor富文本编辑器 v1.1.1.zip

    1. **富文本编辑器**:富文本编辑器是一种能够支持格式化文本输入的工具,允许用户在网页上创建和编辑带有字体、颜色、大小、对齐方式、图片、链接等多种样式的文本。与普通文本编辑器(如textarea)相比,它提供了...

    NoteHtml文本阅读器

    NoteHtml可能包含了解析和渲染HTML代码的功能,使得用户能够在离线状态下查看HTML文档,而无需依赖浏览器。它可能支持基本的HTML标签解析,如段落()、标题(&lt;h1&gt;-)、链接()、列表(和)等,还可能支持图片()...

Global site tag (gtag.js) - Google Analytics