一、指代不同

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header {
            height: 200px;
            width: 100%;
            border:1px solid red;
            background-color: #ccc;
            text-align: center;
            line-height: 200px;
        }

        nav {
            float: left;
            height: 400px;
            width: 200px;
            border:1px solid red;
            background-color: #ccc;
            text-align: center;
            line-height: 400px;
        }

        section {
            float: left;
            margin-left: 20px;
            height: 400px;
            width: 67%;
            border:1px solid red;
            background-color: #ccc;
            text-align: center;
            line-height: 400px;
        }

        aside {
            float: right;
            height: 400px;
            width: 250px;
            border:1px solid red;
            background-color: #ccc;
            text-align: center;
            line-height: 400px;
        }
        div{
            margin-top:10px;
        }


    </style>
</head>
<body>
    <header>
        这是头部标签:header
    </header>
    <div>
        <nav>
            这是导航连接标签：nav
        </nav>
        <section>
            区域标签：section
        </section>
        <aside>
            侧边栏标签：aside
        </aside>
    </div>

</body>
</html>

　　

 

 

二、浏览器支持不同

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

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

三、支持属性不同

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

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