html - 在 <head> 元素之外使用 &lt;style&gt; 标签是否正确?

标签 html css cgi

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

像这样:

<html>
<head>
<style> some style </style>
</head>
<body> some text </body>
<style> some more style </style>
<body> some more text </body>
</html>

我想这样做是因为:我的 cgi 以他们自己的风格获取其他文件。

cgi文件包含:

#!/bin/bash
echo "content-type: text/html"
echo ""
echo "<html><head><style>"
echo "h1 {color: red;}"
echo "</style>"
echo "<body>"
echo "<h1> some text here </h1>"
echo "</body>"
source ./data.sh
echo "</html>"

源文件包含:

echo "<style>"
echo "h2 {color: blue;}"
echo "</style>"
echo "<body>"
echo "<h2> and some other text here </h2>"
echo "</body>"

这似乎工作正常。但这是正确的吗?

在 w3schools 它说: 每个 HTML 文档可以包含多个 <style> 标签。
但它是这样做的吗?

最佳答案

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

除了验证点之外,在正文上使用样式时您可能会感兴趣的一个注意事项是无样式内容的闪现。浏览器将获取在显示后设置样式的元素,使它们在大小/形状/字体和/或闪烁上发生变化。这通常是工艺不良的标志。通常,您可以随心所欲地放置样式,但只要有可能就尽量避免。

HTML 5 引入了一个 scoped 属性,允许样式标签包含在正文的任何​​地方,但随后又将其删除。

根据 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 进行验证

关于html - 在 <head> 元素之外使用 &lt;style&gt; 标签是否正确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42608504/

相关文章:

javascript - 未显示 Google map 自动完成建议

javascript - 光窗

javascript - 如何通过javascript读取cgi文件

ios - 如何扩展 IOS SimpleURLConnections HTTP POST 以发送可由 CGI Perl 解码的说明

apache - 如何使用 Haskell 编写 CGI 脚本?

javascript - 如何在用户登录标题后隐藏某些内容

javascript - 根据用户正在查看的 ID/类别更改文本

javascript - 无法读取未定义的属性 'innerText'

php - 将 Wordpress 帖子显示为带标题的图库

javascript - 开关没有保持关闭状态,我必须单击按钮才能关闭开关