header元素

header 元素有引导和导航作用的结构元素

用来放置页面内容区块的标题 logo 搜索表单 h1-h6 hgroup nav元素

网页标题和文章标题都可以使用 header元素

实例1

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

<header>
  <h1>网页标题</h1>
</header>

<article>
  <header>
    <h1>文章标题</h1>
    <p>文章正文</p>
  </header>
</article>
</body>
</html>

 
 实例2
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

<header>
  <hgroup>
    <h1>HTML 融水公子</h1>
    <a href="/">手机版</a>
    <a href="/">HTML5论坛</a>
  </hgroup>
  <nav>
    <ul>
      <li>
        <a href="/">首页</a>
      </li>
      <li><a href="/">手机版</a></li>
      <li><a href="/">论坛</a></li>
    </ul>
  </nav>
</header>
</body>
</html>
 
改进加上CSS元素
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
  <style>
    *{
      margin:0;
      padding:0;

    }
    body{
      font-family: 微软雅黑;
      text-align: center;
    }
    a{
      color: #f60;
      text-decoration: none;
    }
    hgroup{
      margin-bottom: 10px;
    }
    nav{
      height:48px;
      background-color: #ff6600;
    }
    nav li{
      float:left;
      border-radius:5px;
      padding:5px 10px;/*shangxia  zuoyou  neibianju 指的是黑框*/
      margin:10px;/*shangxiazuoyou 都是10px 指的是橘色框 外边距*/
      list-style: none;/*去掉小圆点*/
      background-color: #000000;
    }
  </style>
</head>
<body>

<header>
  <hgroup>
    <h1>HTML 融水公子</h1>
    <a href="/">[手机版]</a>
    <a href="/">[HTML5论坛]</a>
  </hgroup>
  <nav>
    <ul>
      <li>
        <a href="/">首页</a>
      </li>
      <li><a href="/">手机版</a></li>
      <li><a href="/">论坛</a></li>
    </ul>
  </nav>
</header>
</body>
</html>
 
 分享知识，分享快乐！希望中国站在编程之巅！
               ----融水公子
公众微信号：rsgz520
360图书馆馆号：rsgz002.360doc.com

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。