我目前正在以这种方式使用上述标签(经典标签顺序):
<html>
<head>...</head>
<body>
<header>...</header>
<section>...</section>
<footer>...</footer>
</body>
</html>
标签的使用和规格在以前版本的HTML(4.x)中非常严格,而HTML5并不真正需要<head>甚至是<body>标签.
所以我会使用以下结构,其中恕我直言比前一个更加语义.
<html>
<header>...</header> <!-- put header and footer outside the body tag -->
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</html>
你怎么看？
Iul*_*urt 46
好吧,<head>标签与标签无关<header>.在head所有的元数据和东西,而这header只是一个布局组件.
并且布局进入body.所以我不同意你的意见.
Mic*_*rny 28
我们在这里得到一个规范的答案.我将参考HTML5规范.
首先,12.1.2.4可选标签:
一个
head元素的开始标记,如果该元素为空,或者如果里面的第一件事,可以省略head元素的元素.一个
head元素的结束标记,如果可以省略head元素不紧跟一个空格字符或评论.一个
body元素的开始标记,如果该元素是空的,或者可以被省略,如果里面的第一件事body元素不是空格字符或评论,除非里面的第一件事body元素是一个script或style元素.一个
body元素的结束标记,如果可以省略body元素不紧跟一个注释.
然后,4.1.1 html元素:
内容模型:阿
head元件后跟一个body元件.
通过引用的限制和严格定义的元素顺序,我们可以轻松找出放置隐式<body>标记的规则.
因为<head/>必须首先,它只能包含元素(而不是直接文本),所有适合的元素<head/>将成为隐式的一部分<head/>,直到第一个流浪文本或<body/>特定元素.此时,将放置所有剩余的元素和文本节点<body/>.
现在让我们考虑你的第二个片段:
<html>
<header>...</header>
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</html>
这里,<header/>元素不适合<head/>(它的流内容),<body>标签将被放置在它之前.换句话说,浏览器将理解该文档如下:
<html>
<head/>
<body>
<header>...</header>
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</body>
</html>
这肯定不是你所期待的.而且作为一个注释,它也是无效的; 见4.4.1身体元素:
可以使用此元素的上下文:作为元素中的第二个
html元素.[...]
在符合文件的情况下,只有一个
body要素.
因此,在这种情况下正确使用<header/>或<footer/> 将被正确使用.好吧,它们实际上相当于第一个片段.但是这会导致<body/>a中间的其他元素<body/>无效.
作为一个侧面说明,你可能混淆<body/>这里与内容的主要部分不具有特定元素.您可以在该页面上查找其他解决方案,了解您想要的内容.
引用4.4.1身体元素再次:
的
body元件表示文档的主要内容.
这意味着所有的内容.页眉和页脚都是此内容的一部分.
luc*_*22c 17
我看到你要做的是什么,你试图使用<body>标签作为页面主要内容的容器.相反,请使用HTML5规范中指定的<main>标记.我用这个布局:
<!DOCTYPE html>
<html>
<head> *Metadata* </head>
<body>
<header>
*<h1> and other important stuff </h1>*
<nav> *Usually a formatted <Ul>* </nav>
</header>
<main> *All my content* </main>
<footer> *Copyright, links, social media etc* </footer>
</body>
</html>
我不是100%肯定,但我认为<body>标签之外的任何内容都被视为元数据,并且不会被浏览器呈现.我不认为DOM也可以访问它.
最后,请使用<main>内容标记,并按照第一个代码段中的正确方式格式化HTML格式.您使用了<section>标记但我认为当您尝试应用CSS时会出现一些奇怪的格式问题.
如果你真的希望它看起来更像语义,就像<body>在中间你可以使用<main>元素.随着最近的所有进步,<body>元素不像以前那样具有语义,但您只需将其视为视口所看到的包装器.
<html>
<head>
</head>
<body>
<header>
</header>
<main>
<section></section>
<article></article>
</main>
<footer>
</footer>
<body>
</html>