HTML CSS中的链接标签能否在head标签之外使用?

huangapple go评论61阅读模式
英文:

can a link tag in HTLM CSS be used outside head tag?

问题

<link> 标签在HTML中可以放在 <head> 元素之外吗?如果不能,为什么?我想知道这个标签是否可以放在 <head> 元素之外。

英文:

Can the &lt;link&gt; tag in HTML be outside the &lt;head&gt; element? <br>
If not, why?<br>
I want to know if the tag can be placed outside of the &lt;head&gt; element

答案1

得分: 1

首先,你应该学会自己进行研究。这些问题可以通过阅读文档(API)来轻松回答。

具体来说,有两个机构规定了Web堆栈中的所有内容:

  • W3C(万维网联盟)
  • WHATWG(Web超文本应用技术工作组)

作为用户阅读文档的最简单方式是使用MDN Web文档(Mozilla开发者网络Web文档)。

如果你查看MDN Web文档中的链接标签,你将找到一个规范的部分,其中将引导你到WHATWG链接标签的规范

WHATWG规范明确规定:

如果使用了rel属性,元素只能在页面的正文部分中有时使用。当与itemprop属性一起使用时,元素可以在head元素和页面的正文部分中使用,但受微数据模型的约束。

这意味着根据官方规范,链接标签在某些情况下可以在页面的正文中使用。

英文:

First of all, you should learn to do your own research afford. Such questions can be easily answered with own research effort by reading the documentation (API).

Specifically, there are 2 institutions that specify everything within the web stack:

  • W3C (World Wide Web Consortium)
  • WHATWG (Web Hypertext Application Technology Working Group)

The easiest way to read into the documentation as a user is to use the MDN Web Docs (Mozilla Developer Network Web Documentation).

If you look at the MDN Web Docs for the link tag you will find a section for Specifications which in this case will lead to the WHATWG Specifications for the link tag.

The WHATWG Specification explicit states:<br>

>If the rel attribute is used, the element can only sometimes be used in the body of the page. When used with the itemprop attribute, the element can be used both in the head element and in the body of the page, subject to the constraints of the microdata model.

That means that according to the official specifications the link tag can be used within the body in certain cases.

答案2

得分: 1

可以在某些条件下允许。如果它具有rel属性,该属性是body-ok的一部分,也就是dns-prefetchmodulepreloadpingbackpreconnectprefetchpreloadprerenderstylesheet之一,或者它具有itemprop属性,那么它就允许在正文中。如果不符合这两个条件之一,它就不允许在正文中,但也不会导致解析错误,因此不会在DOM中被移除,但其操作可能无法正常工作。

英文:

It can, under some conditions.

If it has a rel attribute that is body-ok, i.e. one of dns-prefetch, modulepreload, pingback, preconnect, prefetch, preload, prerender, and stylesheet, or if it has an itemprop attribute, then it is allowed in the body. If it doesn't meet either of this conditions, it is not allowed in the body, but it won't be a parse error either, and thus won't be moved away in the DOM, but its action may not work.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

console.log(document.querySelector(&quot;#link&quot;).parentNode === document.body);
// It&#39;s still in the body, but the favicon wouldn&#39;t be set by this tag

<!-- language: lang-html -->

&lt;!-- we&#39;re in the &lt;body&gt; here --&gt;
&lt;link rel=&quot;icon&quot; href=&quot;&quot; id=&quot;link&quot;&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月1日 14:36:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/75600265.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定