由‘未添加doctype’引起的思考

来源：互联网发布：金庸小说主角知乎编辑：程序博客网时间：2024/04/20 19:41

先贴代码：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css">.slideshow { height: 232px; width: 232px; }.slideshow img { padding: 15px; border: 1px solid red; background-color: yellow; }</style></head><body><div class="slideshow"><img src="images/horizontal/beach4.jpg" mce_src="images/horizontal/beach4.jpg" width="200px" height="200px" /></div></body></html>

再上图

1.未加doctype,红框证明了css的实现

图1：未添加<!doctype>，样式未能如愿出现:没有padding

2.然后再在上面添加一句<!doctype> (只是添加这个标签，先不管后面的)

网页变成了：

添加!doctype后的效果

图2,使用<!doctype>，padding出现

3.为什么会这样？

3.1派生选择器

使用派生选择器给一个元素里的子元素定义样式，例如这样：

li strong { font-style : italic; font-weight : normal；}

就是给li下面的子元素strong定义一个斜体不加粗的样式。

3.2类别选择器

CSS里用一个点开头表示类别选择器定义，例如：.14px {color : #f60 ;font-size:14px ;}

在页面中，用class="类别名"的方法调用：

<span class="14px">14px大小的字体</span>

这个方法比较简单灵活，可以随时根据页面需要新建和删除。

3.2下面是css可以直观证明img子元素未能使用padding样式

.slideshow { height: 232px; width: 232px; background-color: yellow}.slideshow img { padding: 15px; border: 1px solid red; ; background-color: #eeeeee}

未添加!doctype时，类型选择器可以派生.jpg

图3. 未使用<!doctype>，子元素img未获得了padding样式

4.为什么会这样？

为什么没用<!doctype>就没有padding？

因为没有遵循标准.

4.1一些doctype的介绍

!DOCTYPE

指定了 HTML 文档遵循的文档类型定义(DTD)。

Microsoft^® Internet Explorer 6 的新增内容

你可使用此声明将 Internet Explorer 6 及以后版本切换到标准兼容模式下。

语法

HTML 顶级元素可用性 "注册//组织//类型标签//定义语言""URL"

可能值

顶级元素指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML默认。HTML。可用性指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC默认。可公开访问的对象。SYSTEM系统资源，如本地文件或 URL。注册指定组织是否由国际标准化组织(ISO)注册。 +默认。组织名称已注册。-组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。组织指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称，即 OwnderID。 IETFIETF。W3CW3C。类型指定公开文本类，即所引用的对象类型。 DTD默认。DTD。标签指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。 HTML默认。HTML。定义指定文档类型定义。 Frameset框架集文档。Strict排除所有 W3C 专家希望逐步淘汰的代表性属性和元素，因为样式表已经很完善了。Transitional包含除 frameSet 元素的全部内容。语言指定公开文本语言，即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639 语言代码(大写两个字母)。 EN默认。英语。URL指定所引用对象的位置。

注释

此声明必须出现在文档的起始处，出现在 html 标签之前。
!DOCTYPE 元素不需要关闭标签。
此元素在 Microsoft^® Internet Explorer 3.0 的 HTML 中可用。
你可使用此声明在 Internet Explorer 6 及以后版本中切换为严格的标准兼容模式。若想打开此开关，请在你的文档顶部包含 !DOCTYPE 声明，在声明中指定合法的标签，在某些情况下，还需要指定定义和/或 URL。下面的表格列出了标准兼容模式的开关情况。 DOCTYPE出现 URL未出现 URL未出现 DOCTYPE关关HTML (无版本)关关HTML 2.0关关HTML 3.0关关HTML 4.0开开HTML 4.0 Frameset开关HTML 4.0 Transitional开关HTML 4.0 Strict开开XHTML开开XML开开无法识别的 DOCTYPE开开
注意在标准兼容模式下，不能保证与其它版本的 Internet Explorer 保持兼容。当打开标准兼容模式时，文档的渲染行为也许与将来版本的 Internet Explorer 不同。若内容本来就是固定的(如刻录在 CD 上)，则不应该使用此模式。

示例

下面的例子演示了如何使用 !DOCTYPE 声明指定文档遵从的 DTD，并将 Internet Explorer 6 及更高版本切换到标准兼容模式。
下面例子中的声明都指定了遵从 HTML 4.0 DTD。第二种声明指定了“Strict”。第一种声明没有指定。这两种声明都将会把 Internet Explorer 6 及以后版本切换到标准兼容模式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
下面例子中的声明都指定了遵从“Transitional”HTML 4.0 DTD。第二种声明指定了 DTD 的 URL。第一种声明没有指定。第二种声明将会把 Internet Explorer 6 及以后版本切换到标准兼容模式。第一种声明不会。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">

标准信息

此对象定义在 HTML 3.2 中。

类似的情况还有这个，不过是js方面的：
网页的DOCTYPE HTML public 会导致页面的部分事件不触发
http://www.west263.com/info/html/wangyezhizuo/Javascript/20080225/33812_2.html