Web Front-end
HTML Tutorial
What the hell is DOCTYPE? What the hell is document mode? _html/css_WEB-ITnose
What the hell is DOCTYPE? What the hell is document mode? _html/css_WEB-ITnose
Jun 24, 2016 am 11:44 AM
!DOCTYPE
!DOCTYPE What is:
In all HTML documents specifies DOCTYPE It is very important so that the browser can understand the expected document type and tell the browser which specification (Document Type Definition DTD) to parse the document (such as HTML or XHTML specification);
!The DOCTYPE declaration does not belong to the HTML tag; tag; it is an instruction that tells the browser the version of the tag used to write the page.
The doctype in HTML 4.01 requires a reference to the DTD because HTML 4.01 is based on SGML. HTML 5 is not based on SGML, so there is no need to reference the DTD, but doctype is needed to standardize the browser's behavior (html 5 simplifies this declaration and is intended to tell the browser to use a unified standard , where can I find this unified standard? www.w3.org).
Common DOCTYPEs are as follows:
HTML4.01 strict：不允許使用表現(xiàn)性、廢棄元素（如font）以及frameset。聲明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML4.01 Transitional:允許使用表現(xiàn)性、廢棄元素（如font），不允許使用frameset。聲明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML4.01 Frameset:允許表現(xiàn)性元素，廢氣元素以及frameset。聲明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">XHTML1.0 Strict:不使用允許表現(xiàn)性、廢棄元素以及frameset。文檔必須是結(jié)構(gòu)良好的XML文檔。聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML1.0 Transitional:允許使用表現(xiàn)性、廢棄元素，不允許frameset，文檔必須是結(jié)構(gòu)良好的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:允許使用表現(xiàn)性、廢棄元素以及frameset，文檔必須是結(jié)構(gòu)良好的XML文檔。聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">HTML 5: <!doctype html>
!doctype in HTML5 is case-insensitive;
My DW default declaration template is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">The default template in my webstrom is as follows:
<!DOCTYPE html>
Modern browsers require different modes,
should not only present the ancient HTML interface, so as not to make the interface structure confusing, also need to present the W3C standard Interface:
1: The standard display method is---standard mode (strict),
2: Non-standard display method---weird mode (no Definedoctype or doctype errors, etc., will cause the interface to enter quirk mode),
3: Can display both standard and non-standard ( Document type definition for transitional typestransitional);
Specification and timeline
tr>Specification
| 規(guī)范 | 推薦 |
| HTML 3.2 | 1997年1月14日 |
| HTML 4.0 | 1998年5月24日 |
| HTML 4.01 | 1999年12月24日 |
Recommended
| 規(guī)范 | 草案/提議 | 推薦 |
| XHTML 1.0 | 2000 年 1 月 26 日 | |
| XHTML 1.0 修訂版 | 2002 年 8 月 1 日 | |
| XHTML 1.1 | 2001 年 5 月 31 日 | |
| XHTML Modules | 2001 年 4 月 10 日 | |
| XHTML Modules 1.1 | 2006 年 7 月 5 日 | |
| XHTML Basic | 2000 年 12 月 19 日 | |
| XHTML Basic 1.1 | 2006 年 7 月 5 日 | |
| XHTML Events | 2003 年 10 月 14 日 | |
| XHTML Events 2 | 2007 年 2 月 16 日 | |
| XHTML Print | 2006 年 9 月 20 日 | |
| XHTML Media Types | 2002 年 8 月 1 日 | |
| XForms 1.0 | 2003 年 10 月 14 日 | |
| XForms 1.0 (SE) | 2006 年 3 月 14 日 | |
| XForms 1.1 | 2007 年 2 月 22 日 | |
| XHTML 2.0 | 2006 年 7 月 26 日 | |
| XLink | 2001 年 6 月 27 日 | |
| HLink | 2002 年 9 月 13 日 |
| Specification | Draft/Proposal | Recommended |
| XHTML 1.0 | January 26, 2000 | |
| XHTML 1.0 Revision | August 1, 2002 | |
| XHTML 1.1 | 2001 May 31 | |
| XHTML Modules | April 2001 10th | |
| XHTML Modules 1.1 | July 5, 2006 | |
| XHTML Basic | December 19, 2000< ??> | |
| XHTML Basic 1.1 | July 5, 2006 | |
| XHTML Events | October 14, 2003 < /td> | |
| XHTML Events 2 | February 16, 2007 | |
| XHTML Print | September 20, 2006 | |
| XHTML Media Types | August 1, 2002 | < /tr> |
| XForms 1.0 | October 14, 2003 | |
| XForms 1.0 (SE) | March 14, 2006 | |
| XForms 1.1 | February 22, 2007 | |
| XHTML 2.0 | July 26, 2006 | |
| XLink | June 27, 2001 | |
| HLink | September 13, 2002 |
!DOCTYPE切換也許是讓瀏覽器進(jìn)入正確呈現(xiàn)模式并正確顯示網(wǎng)頁(yè)的一種有效手段，前提是你注意到了各種瀏覽器的不一致，并能積極主動(dòng)地避免各種問題。
一般來說 !DOCTYPE后面會(huì)有一個(gè)包含命名空間的html標(biāo)簽：
<html xmlns="http://www.w3.org/1999/xhtml">
xmlns是XHTML namespace的縮寫。
作用：由于xml允許定義自己的標(biāo)記，但你定義的標(biāo)記和其他人定義的標(biāo)記有可能相同，但表示不同的含義。當(dāng)文檔交換或者共享的時(shí)候就容易產(chǎn)生錯(cuò)誤。為避免這種錯(cuò)誤產(chǎn)生，xml采用名字空間聲明，允許你通過一個(gè)網(wǎng)址來識(shí)別你的標(biāo)記。
XHTML是HTML先xml過度的標(biāo)記語言，它需要符合xml文檔規(guī)則，因此，也需要定義名字空間，又因?yàn)閄HTML1.0不能自定義標(biāo)識(shí)，所以，它的名字空間都相同，就是：http://www.w3.org/1999/xhtml
額外資料：文檔模式
參考自：打開
文檔模式也回影響到文檔類型, 與結(jié)伴影響文檔模式 ;
所有IE瀏覽器在默認(rèn)情況下（與均沒有），是采用怪異模式（Quirks）；當(dāng)有時(shí)，均采用瀏覽器版本對(duì)應(yīng)的標(biāo)準(zhǔn)模式（如IE8就采用IE8標(biāo)準(zhǔn)模式，IE11就采用IE11標(biāo)準(zhǔn)模式）。
現(xiàn)在要注意的是，當(dāng)出現(xiàn)時(shí)，文檔模式將會(huì)如何呢？我們首先了解一下IE11下它的content屬性值范圍吧，具體范圍如下：
IE=5、IE=7、IE=EmulateIE7、IE=8、IE=EmulateIE8、IE=9、IE=10、 IE=11、 IE=Edge
1. IE=5：表示采用怪異模式；
2. IE=7等純數(shù)字的值：表示采用對(duì)應(yīng)IE版本的標(biāo)準(zhǔn)模式，即使不是以作為文檔第一行，文檔模式依舊使用標(biāo)準(zhǔn)模式；
3. IE=EmulateIE7等含EmulateIE字符串的值：表示采用模擬對(duì)應(yīng)IE版本的模式，如果是以作為文檔第一行則采用該版本的標(biāo)準(zhǔn)模式，否則采用怪異模式。
4. IE=Edge：表示采用瀏覽器自身版本的文檔模式，如IE11，以<!DOCTYPE html>作為文檔第一行則采用IE11標(biāo)準(zhǔn)模式，否則采用怪異模式。
IE的怪異模式：
IE進(jìn)入backCompat的模式的方式，常見的原因有
1：DOCTYPE寫錯(cuò)了，
2：DOCTYPE沒有寫，
3：DOCTYPE前面有別的字符;
....
實(shí)例：
_____<!DeeeeeeeeeeeOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitionaleeeeeeeeee//EN" "http://www.ssssssssw3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標(biāo)題文檔</title></head><style>body{ margin:0; padding:0; width:1000px; padding:200px;}</style><body> <div id="div0"></div> <script> function getStyle(el, prop) { return el.currentStyle[prop]; }; var node = document.createElement("div"); node.innerHTML = document.compatMode ;// document.body.appendChild( node ); node = document.createElement("div"); node.innerHTML = document.getElementsByTagName("body")[0].offsetWidth; document.body.appendChild( node ); </script></body></html> ?
IE兼容模式開啟的話， 相對(duì)于當(dāng)前的界面會(huì)以IE5.5的方式進(jìn)行渲染，如果IE瀏覽器以IE5.5的方式進(jìn)行解析， 會(huì)導(dǎo)致以下問題;
-
盒模型：
在怪異模式下，盒模型為IE盒模型而非標(biāo)準(zhǔn)模式下的W3C 盒模型：在 IE 盒模型中， box width = content width + padding left + padding right + border left + border right， box height = content height + padding top + padding bottom + border top + border bottom。 而在 W3C 標(biāo)準(zhǔn)的盒模型中，box 的大小就是 content 的大小。
-
圖片元素的垂直對(duì)齊方式:
對(duì)于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 屬性默認(rèn)取值為baseline。而當(dāng)inline元素的內(nèi)容只有圖片時(shí)，如table的單元格table-cell。在 IE Quirks Mode 下，table單元格中的圖片的?vertical-align?屬性默認(rèn)為bottom，因此，在圖片底部會(huì)有幾像素的空間。
-
元素中的字體:
CSS 中，描述font的屬性有font-family，font-size，font-style，font-weigh,上述屬性都是可以繼承的。而在 IE Quirks Mode 下，對(duì)于table?元素，字體的某些屬性將不會(huì)從body或其他封閉元素繼承到table中，特別是?font-size屬性。
內(nèi)聯(lián)元素的尺寸:
在 IE Standards Mode 下，non-replaced inline 元素?zé)o法自定義大小，而在 IE Quirks Mode 下，定義這些元素的width和height?屬性，能夠影響該元素顯示的大小尺寸。
元素的百分比高度:
The percentage height of elements in CSS is specified as follows. The percentage is the height of the element’s containing block and cannot be a negative value. If the height of the containing block is not given explicitly, this value is equivalent to "auto" (i.e. depends on the height of the content). So the percentage height must be used when the parent element has a declared height.
When an element uses a percentage height, in IE Standards Mode the height changes depending on the content, while in Quirks Mode the percentage height is applied correctly.
Handling of element overflow:
In IE Standard Mode, overflow takes the default value visible, that is, the overflow is visible. In this case, Overflow content will not be clipped and will appear outside the element box. In Quirks Mode, the overflow is treated as an extended box, that is, the size of the element is determined by its content, the overflow will not be clipped, and the element box is automatically adjusted to include the overflow content.
References about Document Mode: open
Statement of this WebsiteThe content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
How to fix KB5060533 fails to install in Windows 10?3 weeks ago By DDDDune: Awakening - Where To Get Insulated Fabric3 weeks ago By Jack chenGmail Login: How to Sign Up, Sign In, or Sign Out of Gmail - MiniTool1 months ago By Jack chenHow to fix KB5060999 fails to install in Windows 11?3 weeks ago By DDDGuild Guide In Tainted Grail: The Fall Of Avalon4 weeks ago By Jack chen
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
See all articles
Explain the purpose of the role attribute in ARIA.
Jun 14, 2025 am 12:35 AM
ARIA's role attribute is used to define the role of web elements and improve accessibility. 1. Role attribute helps assistive technology to understand the functions of elements, such as buttons, navigation, etc. 2. Use role attributes to assign specific roles to non-semantic HTML elements. 3. The role attribute should be consistent with the element behavior and be verified by the accessibility tool test.
HTML and Design: Creating the Visual Layout of Websites
Jun 14, 2025 am 12:39 AM
How to create a website layout? 1. Use HTML tags to define the content structure, such as, ,. 2. Control styles and positions through CSS, using box model, float or Flexbox layout. 3. Optimize performance, reduce HTTP requests, use cache and optimize images, and ensure responsive design.
How can you ensure your HTML code is readable and maintainable?
Jun 10, 2025 am 12:06 AM
Improve the readability and maintainability of HTML code can be achieved through the following steps: 1. Use semantic tags, such as, etc. to make the code structure clear and improve SEO effect; 2. Keep the code formatted and use consistent indentation and spaces; 3. Add appropriate comments to explain the code intention; 4. Avoid excessive nesting and simplify the structure; 5. Use external style sheets and scripts to keep the HTML concise.
How do I stay up-to-date with the latest HTML standards and best practices?
Jun 20, 2025 am 08:33 AM
The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.
How do I use the element to represent the main content of a document?
Jun 19, 2025 pm 11:09 PM
The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.
How do I create a basic HTML document?
Jun 19, 2025 pm 11:01 PM
To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.
What is an HTML tag?
Jun 13, 2025 am 12:36 AM
HTMLtagsareessentialforstructuringwebpages.Theydefinecontentandlayoutusinganglebrackets,ofteninpairslikeand,withsomebeingself-closinglike.HTMLtagsarecrucialforcreatingstructured,accessible,andSEO-friendlywebpages.
How do I create checkboxes in HTML using the element?
Jun 19, 2025 pm 11:41 PM
To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.
