背景

我们在写html的时候可能不太注意doctype的书写通常都会从原网页照抄一遍比如

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

其实从代码的一开始就埋下了祸根！

或者我们使用IDEA等工具新建一个jsp的时候会如下

<%--   Created by IntelliJ IDEA.   User: qixiaobo   Date: 2018/1/2   Time: 18:11   To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head>     <title>Title</title> </head> <body>   </body> </html>

可以看到并没有doctype的声明

问题

由于本次在jsp的模块化改造中使用了sitemesh 因此每一个页面声明的doctype都会被母版页的声明所替换

因此部分页面出现了奇怪的问题。比如

那么doctype究竟是什么呢？声明或者不声明有什么区别？有哪些声明的方式呢？

介绍

html的doctype由来已久，但是各位开发可能并未关注过此问题

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,

如果不声明的话将会有上述的麻烦

那么声明有哪几种形式呢？

Recommended Doctype Declarations to use in your Web document.

When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. This makes sure the document will be parsed the same way by different browsers.

The simplest and most reliable doctype declaration to use is the one defined in HTML5:
<!DOCTYPE html>
If you need a doctype matching a specific version of (X)HTML, the doctype declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult. To ease the work, below is a list of recommended doctype declarations that you can use in your Web documents.

Template

Use the following markup as a template to create a new HTML document using a proper Doctype declaration. See the list below if you wish to use another DTD.
<!DOCTYPE html> <html>  <head> 	<title>An HTML standard template</title> 	<meta charset="utf-8"  /> </head>  <body>       <p>… Your HTML content here …</p>  </body> </html>
(X)HTML Doctype Declarations List

HTML5 and beyondHTML 4.01StrictTransitionalFrameset

https://www.w3.org/QA/2002/04/valid-dtd-list.html

我们常用的有上述几种【通常在html4.1和html5中间进行选择】

常用的 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">

http://www.w3school.com.cn/tags/tag_doctype.asp

在不同的doctype声明下某些元素将可能表现出不同的现象。

比如上述的问题在html5的标签声明下一切回到了正常如下

事实上我们可以在chrome里面看到不同的doctype下面的一些默认的css样式是不一样的【build-in】

一般可以在user agent stylesheet看到比如

我们可以查阅资料来看看有哪些样式

比如 chrome https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

比如firefox https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css

本文发表于2018年01月03日 10:32
(c)注：本文转载自https://my.oschina.net/qixiaobo025/blog/1600859，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.

阅读 2242 讨论 0 喜欢 0

诡异的doctype

背景

问题

介绍

Recommended Doctype Declarations to use in your Web document.

Template

(X)HTML Doctype Declarations List

常用的 DOCTYPE 声明

HTML 5

HTML 4.01 Strict

HTML 4.01 Transitional

HTML 4.01 Frameset

Y2lvbkBjaGluYWNpb24uY24=

快捷链接
网站地图
提交友链