Html 是否允许在 <body> 中使用 <link>(不是 rel="stylesheet")?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6236097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is <link> (not rel="stylesheet") allowed to be used in <body>?
提问by Aufziehvogel
The new schema.orgby Google, Yahoo and MS recommends usage of the <link>
attribute to display the status of products in an online shop:
Google、Yahoo 和 MS的新schema.org建议使用该<link>
属性来显示在线商店中的产品状态:
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">.95</span>
<link itemprop="availability" href="http://schema.org/InStock"/>Available today!
</div>
Yet, according to w3schools.org<link>
is only allowed in head sections:
然而,根据 w3schools.org<link>
只允许在头部部分:
Note: This element goes only in the head section, but it can appear any number of times.
注意:此元素仅出现在 head 部分,但它可以出现任意次数。
I am not used to W3C style, so I was not able to understand the exact definition by W3C. Can anybody help me: Is it really allowed to use <link>
within the body (in HTML5, as schema.org uses HTML5 tags) or do Google, Yahoo and MS break the standard?
我不习惯 W3C 风格,所以我无法理解W3C的确切定义。任何人都可以帮助我:是否真的允许<link>
在正文中使用(在 HTML5 中,因为 schema.org 使用 HTML5 标签)或者 Google、Yahoo 和 MS 是否违反了标准?
采纳答案by feeela
The WHATWG HTML specification mentions, that the LINK
-element can either have a rel
-attribute:
WHATWG HTML 规范提到,LINK
-element 可以具有 -rel
属性:
<link rel="…" />
or an itemprop
-attribute
或 -itemprop
属性
<link itemprop="…" />
but not both.
但不是两者兼而有之。
The rel
-version is restricted to the HEAD
-element, whereas the itemprop
-version may appear in both, the HEAD
and BODY
-elements.
所述rel
-version被限制为HEAD
-元素,而itemprop
-version可能出现在两者的HEAD
和BODY
-elements。
http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-link-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-link-element
What is this WHATWG specification:
这是什么 WHATWG 规范:
whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?
whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?
回答by Mladen Janjetovic
Link is allowed in BODY. I had same problem validating link tag in HTML5 and I solved it with this
BODY 中允许链接。我在验证 HTML5 中的链接标签时遇到了同样的问题,我用这个解决了它
<link rel="stylesheet" property="stylesheet" href="css/homepage.css">
Need to have both property
and rel
tag
需要同时拥有property
和rel
标记
UPDATE 2016(thanks to yuyokk below): There was a change to HTML5 spec recently that allows having links in the body
2016 年更新(感谢下面的 yuyokk):最近对 HTML5 规范进行了更改,允许在正文中包含链接
回答by iurii
There was a change to HTML5 specrecently that allows having links in the body
最近对HTML5 规范进行了更改,允许在正文中包含链接
回答by Volker E.
I'd like to add to the answers above, in short
简而言之,我想补充上面的答案
<body>
<link rel="stylesheet" property="stylesheet" href="pathto.css">
</body>
is making the valdation error go away. Even just adding property=""
(RDFa syntax or itemprop=""
(Microformat syntax) attribute is sufficient. As @Jukka K. Korpelaand @sideshowbarkerexplain in their answers, the reason lies in the HTML5+RDFa 1.1 spec.
正在使验证错误消失。即使只是添加property=""
(RDFa 语法或itemprop=""
(微格式语法) 属性就足够了。正如@Jukka K. Korpela和@sideshowbarker在他们的回答中所解释的那样,原因在于HTML5+RDFa 1.1 规范。
The solution above is basically a workaround to let validator ignore inline stylesheets as needed in critical path implementations. In future versions of validators it hopefully gets obsolete.
上面的解决方案基本上是一种解决方法,让验证器根据关键路径实现的需要忽略内联样式表。在验证器的未来版本中,它有望过时。
By the way, in HTML5 you neither need a type
attributenor self-closing tagsyntax.
回答by irnikola
As noted by the others <link>
can be used in the body, but only sometimes. In those cases it's referred to as "body-ok". Here's a list of which link types are body-ok: https://html.spec.whatwg.org/multipage/links.html#body-ok
正如其他人所指出的,<link>
可以在身体中使用,但只是有时。在这些情况下,它被称为“身体正常”。以下是 body-ok 的链接类型列表:https: //html.spec.whatwg.org/multipage/links.html#body-ok
As of 20 June 2018 the following can be used in the body:
截至 2018 年 6 月 20 日,以下内容可用于正文:
<body>
<link rel="dns-prefetch">
<link rel="modulepreload">
<link rel="pingback">
<link rel="preconnect">
<link rel="prefetch">
<link rel="preload">
<link rel="prerender">
<link rel="stylesheet">
</body>
回答by Akim
To make sure the code is cross-browser compatible, rather include your stylesheet like this:
为了确保代码是跨浏览器兼容的,而是像这样包含你的样式表:
<style>
@import url(style.css);
</style>
Putting a stylesheet in the body is usually considered bad practice, however it can be helpful in some cases:
将样式表放在正文中通常被认为是不好的做法,但在某些情况下它可能会有所帮助:
- You want the style to be loaded prior to other elements
- If you include certain frequently occuring website's elements (a contact box, a menu header, etc) by php, you can put the link to the corresponding stylesheet into the php template. Once you include the template, the stylesheet will be automatically loaded without having to add anything to the head section.
- 您希望在其他元素之前加载样式
- 如果您在 php 中包含某些经常出现的网站元素(联系框、菜单标题等),您可以将相应样式表的链接放入 php 模板中。包含模板后,样式表将自动加载,而无需向 head 部分添加任何内容。
回答by Nikos
The specification as of March 2020:
截至 2020 年 3 月的规格:
If the
rel
attribute is used, the element can only sometimes be used in thebody
of the page. When used with theitemprop
attribute, the element can be used both in thehead
element and in thebody
of the page, subject to the constraints of the microdata model.
如果使用该
rel
属性,则该元素有时只能在body
页面的 中使用。与itemprop
属性一起使用时,该元素可以在head
元素和body
页面中使用,但受微数据模型的约束。
which is the opposite to what the accepted answer says as far as the rel
attribute is concerned. I have personally never experienced issues by adding rel
in the head
though.
就rel
属性而言,这与接受的答案所说的相反。我个人从来没有加入遇到的问题,rel
在head
虽然。
Microdata is a WHATWG HTML specification used to nest metadata within existing content on web pages. Browsers, web crawlers and in particular search engines can extract and process Microdata from a web page and use it to provide a richer browsing experience for users.
微数据是一种 WHATWG HTML 规范,用于在网页上的现有内容中嵌套元数据。浏览器、网络爬虫,特别是搜索引擎可以从网页中提取和处理微数据,并使用它为用户提供更丰富的浏览体验。