Question

所以我开始为学校作业编写HTML代码。我想使用HTML5语义，例如<section>，<article>等。但是当我放置在这些标签中时，我遇到了一些特殊的标题尺寸（见下文）。然后我继续将语义更改回只有<div>的HTML并且标题工作正常。我会发布一些屏幕截图来帮助澄清情况。

首先使用<div>标记的代码

<!DOCTYPE html>
<html>
<head>
    <title>
        Curriculum Vitae
    </title>
</head>
<body>
<div>
    <h1>Curriculum Vitae</h1>
</div>
<div>
    <h2>Personal Information</h2>
    <ul>
        <ol><strong>Name: </strong>Haroon Rasheed Ramay</ol>
    </ul>
</div>
</body>
</html>

The heading sizes appear to work properly within in the div tags

接下来是使用HTML5语义的代码

<!DOCTYPE html>
<html>
<header>
    <title>
        Curriculum Vitae
    </title>
</header>
<body>
<article>
    <section>
        <h1>Curriculum Vitae</h1>
    </section>
    <section>
        <h2>Personal Information</h2>
        <ul>
            <ol><strong>Name: </strong>Haroon Rasheed Ramay</ol>
        </ul>
    </section>
</article>
</body>
</html>

Note here in this picture I have used the same heading tags for Curriculum Vitae and Personal Information but the heading sizes seemed to have switched?!

其他人可以验证这是否只是我的问题或我是否以完全错误的方式使用HTML5语义标签导致标题的特殊行为？

P.S。任何HTML文档或教程的链接都会很棒（目前我正在学习udacity＆amp; w33schools和学校作为主题的在线课程）

Answer 1

您正在混淆head和header个标签。他们非常不同。

每个HTML网页都必须有head标记（尽管浏览器通常会在缺少的情况下插入一个）。

header标记用作页面内容的标题，标题或类似内容。它是可选的， in body标记;可能在article之前，或其他一些主要内容标记＆＃34;。

HTML5标题不能正常运作

1 个答案: