在<head>元素之外使用<style>标签是否正确?

时间:2017-03-05 12:45:45

标签: html css cgi

&#xA;

&#xA;&#xA;

使用&lt; style&gt;是否正确? &lt; head&gt;之外的标记element?

&#xA;&#xA;

喜欢这样:

&#xA;&#xA;
 &lt; html&gt;&#xA;&lt; head&gt; &#XA;&LT;风格&GT;一些风格&lt; / style&gt;&#xA;&lt; / head&gt;&#xA;&lt; body&gt;一些文字&lt; / body&gt;&#xA;&lt; style&gt;更多样式&lt; / style&gt;&#xA;&lt; body&gt;更多文字&lt; / body&gt;&#xA;&lt; / html&gt;&#xA;  
&#xA;&#xA;

我想这样做是因为:我的cgi来源其他具有自己风格的文件。

&#xA;&#xA;

cgi文件包含:

&#xA;&#xA;
 #!/ bin / bash&#xA; echo“content-type:text / html”&#xA; echo“”&#xA; echo“&lt; html&gt;&lt; head&gt;&lt; style&gt;”&#xA; echo“h1 {color:red;}”&#xA; echo“&lt; / style&gt;”&#xA; echo“&lt; body&gt;”&#xA; echo“&lt; h1&gt;这里的一些文字&lt; / h1&gt ;“&#xA; echo”&lt; / body&gt;“&#xA; source ./data.sh
echo”&lt; / html&gt;“&#xA;  
&#xA ;&#xA;

源文件包含:

&#xA;&#xA;
  echo“&lt; style&gt;”&#xA; echo“h2 {color:blue ;}“&#xA; echo”&lt; / style&gt;“&#xA; echo”&lt; body&gt;“&#xA; echo”&lt; h2&gt;以及其他一些文字&lt; / h2&gt;“&#xA ; echo“&lt; / body&gt;”&#xA;  
&#xA;&#xA;

这似乎工作正常。但它是否正确?

&#xA;&#xA;

在w3schools它说:&#xA;每个HTML文档可以包含多个&lt; style&gt;标签。
&#xA;但是这样做了吗?

&#xA;&#xA;

&#xA;&#xA;

& #xA;

&#XA;

5 个答案:

答案 0 :(得分:7)

样式应该只包含在文档的头部。

除了验证点之外,在身体上使用样式时可能会感兴趣的一个警告是无格式内容的闪现。浏览器将获得在显示后将被设置样式的元素,使它们在大小/形状/字体和/或闪烁上移位。这通常是工艺糟糕的表现。一般来说,你可以随心所欲地放置风格,但尽可能避免使用它。

HTML 5引入了一个范围属性,允许样式标记包含在正文的任何​​位置,但随后又将其删除。

根据W3规范,<link>标签只能放在<head>部分:

参考

对于HTML 4.01:http://www.w3.org/TR/html401/struct/links.html#edef-LINK

对于HTML5:http://www.w3.org/TR/html5/document-metadata.html#the-link-element

验证问题

如果您在HTML文档的正文中放置标记,则不会使用validate.w3.org进行验证

答案 1 :(得分:3)

<style>标记可以位于HTML文档中的任何位置。但是,最好将其放在<head>

根据我的个人经验,最好只制作一个单独的样式表来放入所有CSS。

答案 2 :(得分:1)

根据W3标准,有必要将样式标记放在文档的head元素中。如果将样式标记放在body元素中,那么在加载整个DOM之后,网页的样式将会生效,因此在CSS生效之前我们可以看到空白页面一段时间,这肯定会对更好的UI体验。大多数情况下,在文档中实现CSS的推荐方法是创建一个单独的样式表,并在需要时提供指向文档的链接。

答案 3 :(得分:1)

根据https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

可以将