html5中<head>标签和<header>标签有啥区别

Posted 2023-04-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5中<head>标签和<header>标签有啥区别相关的知识，希望对你有一定的参考价值。

一、指代不同

1、<head>标签：是网页的HEAD(头)部分中包含有的内置标签，用来申明使用的脚本语言，以及网页传输时使用的方式等。

2、<header>标签：header标签是html5新增标签元素。

二、浏览器支持不同

1、<head>标签：浏览器都支持。

2、<header>标签：旧版本浏览器均不支持，需要IE9+以上浏览器、最新谷歌Chrome等浏览器才支持。

三、支持属性不同

1、<head>标签：<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

2、<header>标签：<header> 标签支持 HTML 中的全局属性。

参考资料来源：百度百科-head标签

参考资料来源：百度百科-Header

参考技术A <header>是标示性标签，是HTML5新添加的标签；
<header>标签与<div id="header">是一样的，只是由于<header>是新标签，老浏览器不识别。
<head>是html框架中的标签
例如：
<html>
<head>
...
</head>
<body>
...
</body>
<html>本回答被提问者和网友采纳

Django 1.5：扩展 base.html 时，我的 <head> 标签显示在我孩子的 <body> 中

【中文标题】Django 1.5：扩展 base.html 时，我的 <head> 标签显示在我孩子的 <body> 中【英文标题】：Django 1.5: When extending base.html, my <head> tag displays in my child's <body> 【发布时间】：2014-08-11 09:56:23 【问题描述】：

编辑：添加我的基本模板和子模板的完整版本。

我正在使用 Django 1.5.8 并且有一个基本模板（在模板根目录中）和用于扩展基础的子模板的子文件夹。

当我扩展 base.html 时，基本模板的所有内容都会显示在子模板的正文中。这发生在除索引之外的所有子页面上。是否有一些我不知道的 Django 模板继承规则？

这是我的完整基础：

<!-- base.html -->

<!DOCTYPE html>

<html lang="en">

<head>
    % load ganalytics %
    % load twitter_tag %
    % load compress %
    % load tags %

    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    % block othermeta %
    <meta name="description" content="Welcome to Multimechanics">
    <title>MultiMechanics</title>
    <link rel="icon" type="image/png" href=" STATIC_URL ico/favicon.ico" />

    <!--Needed for salesforce-->
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    % endblock %

    <!-- Bootstrap core CSS -->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
    % compress css %
    <link href=" STATIC_URL css/style.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href=" STATIC_URL css/animate.css" rel="stylesheet">
    <link href=" STATIC_URL css/lightbox.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
    % endcompress %

    % ganalytics %

    % block otherheader %% endblock %

</head>

<body>

    <!-- Navigation -->
    <header>
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/"><img src=" STATIC_URL img/logo.png" ></a>
                </div>
                <div class="collapse navbar-collapse">
                    % if user.is_authenticated %
                    <a href="/logout" class="navbar-btn btn btn-red pull-right hidden-sm hidden-xs">Log Out</a>
                    % else %
                    <a href="/login" class="navbar-btn btn btn-red pull-right hidden-sm hidden-xs">Log In</a>
                    % endif %
                    <ul class="nav navbar-nav navbar-right">


                        <li class='dropdown % active request "^/faqs/$" % % active request "^/multiscale/$" % % active request "^/about-us/$" %'>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">About<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                % if request.get_full_path == "/" %
                                <li><a href="#about">Product Overview</a></li>
                                <li><a href="#features">Product Applications</a></li>
                                % else %
                                <li><a href="/">Multimech Home</a></li>
                                % endif %
                                <li><a href="/about-us">MultiMech Details</a></li>
                                <li><a href="/multiscale">What's Multiscale?</a></li>
                                <!--<li><a href="/porfolio/demos">Demos</a></li>
                                <li><a href="/portfolio/case">Case Studies</a></li>-->
                                <li><a href="/faqs">Frequent Questions</a></li>
                            </ul>
                        </li>
                        <li class='dropdown % active request "^/trueinnovation/$" % % active request "^/portfolio/$" %'>
                            <a href="/portfolio" class="dropdown-toggle" data-toggle="dropdown">Showcases <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                % if request.get_full_path == "/" %
                                <li><a href="#showcases">Featured Demos</a></li>
                                % endif %
                                <li><a href="/portfolio">Demo Gallery</a></li>
                                <li><a href="/trueinnovation">Blog</a></li>
                            </ul>
                        </li>
                        <li class='dropdown % active request "^/careers/$" % % active request "^/contact-us/$" % % active request "^/login/$" % % active request "^/help/$" % % active request "^/register/$" % % active request "^/thanks/$" %'>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Connect<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="/contact-us">Contact Us</a></li>
                                <li><a href="/careers">Careers</a></li>
                                <li><a href="/help">Help</a></li>
                                <li><a href="/login">User Login</a></li>
                            </ul>
                        </li>

                        % if request.get_full_path != "/" %
                        <li class="dropdown">
                            <a href="/contact-us">Contact</a>
                        </li>
                        % else %
                        <li class="dropdown">
                            <a href="#contact">Contact</a>
                        </li>
                        % endif %


                        <!--     Navbar Search -->
                        <li class="hidden-xs" id="navbar-search">
                            <a href="#">
                                <i class="fa fa-search"></i>
                            </a>
                            <div class="hidden" id="navbar-search-box">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button">Go!</button>
                                    </span>
                                </div>
                            </div>
                        </li>


                    </ul>


                    <!-- Mobile Search -->
                    <form class="navbar-form navbar-right visible-xs" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search">
                            <span class="input-group-btn">
                                <button class="btn btn-red" type="button">Search!</button>
                            </span>
                        </div>
                    </form>
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </header>
    <!-- / .navigation -->
    % block content %
    % endblock %

    <!-- footer
    ================================================== -->
    <footer>
        <div class="container">
            <div class="row">
                <!-- Contact Us -->
                <div class="col-sm-4">
                    <h4><i class="fa fa-map-marker text-red"></i> Contact Us</h4>
                    <p>Do not hesitate to contact us if you have any questions or feature requests:</p>
                    <p>
                        Omaha, NE 68154<br />
                        14301 FNB Parkway, Suite 100<br />
                        Phone: +1 402 957 1336<br />
                        Email: <a href="mailto:sales@multimechrd.com">sales@multimechrd.com</a>
                    </p>
                </div>
                <!-- Recent Tweets -->
                % load twitter_tag cache %
                % cache 60 my_tweets %
                % get_tweets for "multimechanics" as tweets limit 2 %

                <div class="col-sm-4">
                    <h4><i class="fa fa-twitter-square text-red"></i> Recent Tweets</h4>
                    % for tweet in tweets %
                    <div class="tweet">
                        <i class="fa fa-twitter fa-2x"></i>
                        <p>
                             tweet.html|safe 

                        </p>
                    </div>
                    % endfor %

                </div>

                % endcache %
                <!-- Newsletter -->

                <div class="col-sm-4">
                    <h4><i class="fa fa-envelope text-red"></i> Newsletter</h4>
                    <p>
                        Enter your e-mail below to subscribe to our free newsletter.
                        <br>
                        We promise not to bother you often!
                    </p>
                    <!--<form class="form" role="form" method="post" action="/newsletter request.get_full_path ">-->
                    <form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

                        <input type=hidden name="oid" value="00Di0000000fkHM">
                        <input type=hidden name="retURL" value="http://multimech2.azurewebsites.net/thanks/newsletter">
                        <input type=hidden name="lead_source" id="lead_source" value="Web">
                        <input type=hidden name="city" id="city" value="ip">


                        % csrf_token %
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <label class="sr-only" for="subscribe-email">Email address</label>
                                    <!--<input type="email" class="form-control" id="subscribe-email" placeholder="Enter your email">-->
                                    <div class="fieldWrapper"> newsletter_form.email </div>
                                    <span class="input-group-btn">
                                        <button type="submit" class="btn btn-default" name="newsletter_form">OK</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </footer>

    <!-- Copyright -->
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="copyright">
                    Copyright 2014 - MultiMechanics, LLC | All Rights Reserved
                </div>
            </div>
        </div>  <!-- / .row -->
    </div> <!-- / .container -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    % compress js %

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src=" STATIC_URL js/bootstrap.min.js"></script>
    <script src=" STATIC_URL js/scrolltopcontrol.js"></script>
    <script src=" STATIC_URL js/lightbox-2.6.min.js"></script>
    <script src=" STATIC_URL js/custom.js"></script>

    % endcompress %

    % block otherfooter %% endblock %


</body>
</html>

这是我完整的孩子：

    % extends "base.html" %

    % block content %
    <!-- Wrapper -->
    <div class="wrapper">

      <!-- Topic Header -->
      <div class="topic">
        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <h3>Sign In</h3>
            </div>
            <div class="col-sm-8">
              <ol class="breadcrumb pull-right hidden-xs">
                <li><a href="/">Home</a></li>
                <li class="active">Log In</li>
              </ol>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <div class="row">
          <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
            <div class="sign-form">
              <div class="sign-inner">
                <h3 class="first-child">Log In To Your Account</h3>
                <hr>
                  <form role="form" action="" method="post">
                      % csrf_token %
                      <div class="input-group">
                          <span class="input-group-addon"><i class="fa fa-user"></i></span>

                          form.username

                      </div>
                      <br>
                      <div class="input-group">
                          <span class="input-group-addon"><i class="fa fa-lock"></i></span>

                          form.password

                      </div>
                      <div class="checkbox">
                          <!--<label>
                              <input type="checkbox"> Remember me
                          </label>-->
                      </div>
                      <button type="submit" class="btn btn-red" name="login_form">Submit</button>
                      <hr>
                  </form>
                <p>Not registered? <a href="/register">Create an Account.</a></p>
                <div class="pwd-lost">
                  <div class="pwd-lost-q show">Lost your password? <a href="#">Click here to recover.</a></div>
                    <!--https://github.com/brutasse/django-password-reset-->

                  <div class="pwd-lost-f hidden">
                    <p class="text-muted">Enter your email address below and we will send you a link to reset your password.</p>
                    <form class="form-inline" role="form">
                      <div class="form-group">
                        <label class="sr-only" for="email-pwd">Email address</label>
                        <input type="email" class="form-control" id="email-pwd" placeholder="Enter email">
                      </div>
                      <button type="submit" class="btn btn-blue">Send</button>
                    </form>
                  </div>
                </div> <!-- / .pwd-lost -->
              </div>
            </div>
          </div>
        </div> <!-- / .row -->      
      </div> <!-- / .container -->

    </div> <!-- / .wrapper -->

  % endblock %

以下是 html 的呈现方式：

<html lang="en">
<head>
    <style type="text/css"></style>
</head>
<body style="">
    <!-- base.html -->
    <!--[if lt IE 8 ]><html class="ie ie7" lang="en"> <![endif]-->
    <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
    <!--[if (gte IE 8)|!(IE)]><!-->
    <!--<![endif]-->

    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Navigation -->
    <header>
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/"><img src="/static/img/logo.png" ></a>
                </div>
                <div c

这是我呈现该页面的方式（但我对其他模板使用“render_to_response”并获得相同的结果：

url(r'^about-us/', TemplateView.as_view(template_name="about-us.html"), name='about-us'),

提前感谢您的帮助。

【问题讨论】：

看起来您可能会包含 base.html 而不是扩展它。想过，但没有。我肯定在使用扩展。 【参考方案1】：

在 2019 年遇到同样的问题后，正如 Majid Mobini 所说，这是由于 Visual Studio 对源文件的编码。由于 VS 2019 不再具有高级保存选项，我的解决方案是从 VS Marketplace 安装修复文件编码扩展并重新保存我的文件 - 然后按预期将元数据放置在 HEAD 中。

【讨论】：

【参考方案2】：

我也有类似的问题。

将我的文件编码更改为“utf-8 without BOM”解决了我的问题。

（http://validator.w3.org/ 可能会帮助你。）

【讨论】：

【参考方案3】：

您确定您正在编辑正确的“base.html”文件吗？看来您可能正在编辑同名但位于不同位置的文件。另外，您是否使用 Javascript 或其他东西来填充您的 <navigation> </navigation> ？呈现的结果与您的 base.html 不匹配。如果您使用 Javascript 生成此导航部分，这可能是您的罪魁祸首。如果为了可读性而对其进行了编辑，那么我将在您的项目文件夹中搜索“base.html”或“about-us.html”的另一个实例。您可能会发现您正在编辑错误的文件。你能发布完整的文件“base.html”和“about-us.html”以及整个响应吗？

编辑：我相信问题可能出在您的“othermeta”块中。可以看到以下几行渲染正确：

<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->

<meta name="viewport" content="width=device-width, initial-scale=1">

这是结果中变得混乱的地方。当您呼叫% block othermeta % 时，这也是您基地的重点。你有那个块里面有内容的原因吗？我不确定它是否正确接受了 % endblock %。如果您希望块 othermeta 是动态的，则必须将它放在自己的 othermeta.html 中，它也扩展了 base.html。然后，您可以将代码更改为：

% block othermeta % % endblock %

我认为错误可能是您试图在扩展模板中定义此块的内容。我和你一样是新手，所以我可能完全错了，但是现在尝试完全删除你的 othermeta 块，看看是否有帮助。

希望这会有所帮助！

【讨论】：

抱歉 - 这些是经过编辑的版本。没有花哨的 JS 用于生成导航。奇怪的是，我的 Index.html 可以正确呈现，但站点中的所有其他页面却没有。感谢您发布更多信息！我已经编辑了我的答案。运气好吗？不幸的是没有运气。在我回来调查之前，我最终只是做了一些 hackey 硬编码。

以上是关于html5中<head>标签和<header>标签有啥区别的主要内容，如果未能解决你的问题，请参考以下文章

介绍几个常用的HTML5标签

HTML5新增的语义标签和IE版本低的兼容性问题

第二篇HTML5新增标签

在html5 中把canvas标签写在<body>中而jsp代码写在<head>中就会出错呢

移动前端头部标签(HTML5 head meta)

html5基本标签