我目前正在以这种方式使用上述标签(经典标签顺序):
<html>
<head>...</head>
<body>
<header>...</header>
<section>...</section>
<footer>...</footer>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
标签的使用和规格在以前版本的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>
Run Code Online (Sandbox Code Playgroud)
你怎么看?
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>
Run Code Online (Sandbox Code Playgroud)
这里,<header/>
元素不适合<head/>
(它的流内容),<body>
标签将被放置在它之前.换句话说,浏览器将理解该文档如下:
<html>
<head/>
<body>
<header>...</header>
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这肯定不是你所期待的.而且作为一个注释,它也是无效的; 见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>
Run Code Online (Sandbox Code Playgroud)
我不是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>
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
96416 次 |
最近记录: |