为什么我们需要一个 <html>如果我们有 <!DOCTYPE html> 的标签?

2022-01-19 00:00:00 frontend html

如果我们已经使用 <!DOCTYPE html> 标签定义了这个文档是 html，为什么还需要添加 <html> 标签?

Why do we need to add the <html> tag if we have already defined that this document is html using <!DOCTYPE html> tag?

是否可以添加任何其他标签来代替?

Is there any other tag that can be added instead of ?

如果没有，我们为什么需要它?

If not, why do we need it?

推荐答案

语义层面...

<!DOCTYPE html> 和 <html>，尽管两者都包含 <尖括号>，是根本不同的东西:

On the semantic level...

<!DOCTYPE html> and <html>, despite both containing < angle brackets >, are fundamentally different things:

  • <!DOCTYPE html> 声明文档类型并且不解析为任何 DOM 元素.引用 MDN 的 Doctype 文章，其唯一目的是防止浏览器在呈现文档时切换到所谓的怪癖模式".
  • <html>，然而，确实解析为 DOM 元素.您可以为其附加属性或使用 JavaScript 对其进行操作.例如，尝试将其粘贴到浏览器控制台中:document.querySelector('html').style.opacity = '0.5'.你可以用 <html> 做到这一点，但不能用 DOCTYPE.
  • <!DOCTYPE html> declares the document type and is not parsed to any DOM elements. To quote MDN's Doctype article, "Its sole purpose is to prevent a browser from switching into so-called "quirks mode" when rendering a document".
  • <html>, however, does parse to a DOM element. You can attach attributes to it or manipulate it with JavaScript. For example, try pasting this in your browser console: document.querySelector('html').style.opacity = '0.5'. You can do that with <html>, but not with DOCTYPE.

为什么要有任何标准?标准是必要的，以便实现者(例如浏览器供应商)知道他们需要构建什么，并且开发人员知道他们正在开发的对象是什么.如果没有通用标准，就不可能构建可互操作的软件.

Why have any standards at all? Standards are necessary so that implementers (e.g. browser vendors) know what they need to build, and developers know what they're developing against. Without common standards, it'd be impossible to ever build interoperable software.

您当然可以质疑为什么标准的逻辑设置方式，而答案几乎以因为历史"(有时是因为政治")而告终.如果现在改变这些历史决定，就会破坏网络.

You can certainly question the logic of why standards were set the way they were set, and the answer almost ends up at "because history" (and sometimes "because politics"). If those historical decisions were changed now, it'd break the Web.

最好始终设置 lang HTML 元素上的属性，出于可访问性和 SEO 原因，您需要包含它才能做到这一点:

It's best practice to always set a lang attribute on the HTML element, for accessibility and SEO reasons, and you need to include it in order to do that:

始终在 html 标记上使用语言属性来声明页面中文本的默认语言.

Always use a language attribute on the html tag to declare the default language of the text in the page.

在编写代码或标记以明确表达您的意图以帮助其他人阅读您的作品时，这也是一种普遍的最佳做法.仅出于这个原因，添加一个环绕的 HTML 标记会更清晰.

It's also a general best practice when writing code or markup to be explicit with what you intend, to help others reading your work. For that reason alone, it's clearer to add a surrounding HTML tag.

如果你不在 HTML 元素上包含任何属性，那么你写的内容实际上并不重要，因为 HTML 非常宽容)(链接由 @Run_Script 提供).无论如何，它都会被解析到相关的 DOM 节点，因此 document.body.parentElement instanceof HTMLHtmlElement 将始终为 true.

If you don't include any attributes on the HTML element, it doesn't actually matter what you write in terms of how it's parsed, because HTML is quite forgiving) (credit @Run_Script for the link). It'll get parsed out to the relevant DOM nodes anyway, so document.body.parentElement instanceof HTMLHtmlElement will always be true.

不过，出于上述原因，我还是建议您始终包含它.

Still, for the reasons laid out above, I'd recommend always including it.

相关文章