zoukankan      html  css  js  c++  java
  • Doctype零碎知识梳理总结

    1.Doctype的作用?

    DOCTYPE是document type(文档类型的)的简写。用来说明你用的是XHTML获HTML是什么版本。DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。 

                (1)、 声明位于文档中的最前面,处于标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。 

                (2)、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。 

                (3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。               

                (4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 

    要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分,除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和css都不会生效

    其中,DTD,例如xhtml-trasitional.dtd叫做文档类型定义,里面包含了文档的规则,浏览器就会根据你定义的DTD来解释你页面的标识,并展现出来。HTML 4.01 和 XHTML 都基于 SMGL,所以需要在文档开头声明引用一个 DTD。

    在HTML 5 中,DOCTYPE 不区分大小写;不过对于XHTML、Polyglot HTML,DOCTYPE 这几个字母需要大写。

    HTML 和 XHTML 的DOCTYPE 声明都有 strict/transitional/frameset 三种模式。 strict 模式禁止所有 presetational or deprecatedelements(例如 font 标签)以及 frameset标签();transitional 模式只禁止了 frameset标签;frameset 模式与 transitional 模式相同,并且允许 frameset 标签。

    2.Doctype有几种类型?

    常用的 DOCTYPE 声明

    HTML 5

    <!DOCTYPE html>

    HTML 4.01 Strict(严格的)

    该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    HTML 4.01 Transitional(过渡的)

    该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

    HTML 4.01 Frameset(框架的)

    该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
    "http://www.w3.org/TR/html4/frameset.dtd">

    XHTML 1.0 Strict

    该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

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

    XHTML 1.0 Transitional

    该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

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

    XHTML 1.0 Frameset

    该 DTD 等同于 XHTML 1.0 Transitional,但允许框架集内容。

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

    XHTML 1.1

    该 DTD 等同于 XHTML 1.0 Strict,但允许添加模型(例如提供对东亚语系的 ruby 支持)。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    3.严格模式与混杂模式如何区分?它们有何意义?


    严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。

    混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。

    如何区分:浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD (文档类型定义)直接相关。

    1、如果文档包含严格的 DOCTYPE ,那么它一般以严格模式呈现。(严格 DTD ——严格模式) 
    2、包含过渡 DTD 和 URI 的 DOCTYPE ,也以严格模式呈现,但有过渡 DTD 而没有 URI (统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现。(有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式) 
    3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。(DTD不存在或者格式不正确——混杂模式)
    4、HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。( HTML5 没有严格和混杂之分)

    意义:严格模式与混杂模式存在的意义与其来源密切相关,如果说只存在严格模式,那么许多旧网站必然受到影响,如果只存在混杂模式,那么会回到当时浏览器大战时的混乱,每个浏览器都有自己的解析模式。

    三、严格模式与混杂模式的语句解析不同点有哪些?

    
    

    1)盒模型的高宽包含内边距padding和边框border

    
    

    
    
    
    
    

        在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在IE5.5及以下的浏览器及其他版本的Quirks模式下,IE的宽度和高度还包含了padding和border。

    
    

    2)可以设置行内元素的高宽

    
    

        在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。

    
    

    3)可设置百分比的高度

    
    

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

    
    

    4)用margin:0 auto设置水平居中在IE下会失效

    
    

        使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效,quirk模式下的解决办法,用text-align属性:

    
    

       body{text-align:center};#content{text-align:left}

    
    

    5)quirk模式下设置图片的padding会失效

    
    

    6)quirk模式下Table中的字体属性不能继承上层的设置

    
    

    7)quirk模式下white-space:pre会失效

    
    
  • 相关阅读:
    python3调用js的库之execjs
    字体替换 re.sub
    asyncio和aiohttp
    微信公众号数据抓取
    celery
    Airtest 的连接安卓模拟器
    Scrapy同时启动多个爬虫
    随机IP代理插件Scrapy-Proxies
    Charles和mitmproxy代理设置
    win下删除EFI分区
  • 原文地址:https://www.cnblogs.com/mengshi-web/p/9372704.html
Copyright © 2011-2022 走看看