header 部分及 HTML5 新增标签简介

在 HTML 中，Header 元素通常用于定义文档的头部区域，包含文档的标题、导航菜单、搜索框等元素。以下是常用的 Header 元素：

<header>：定义文档或文档节的头部区域。可以包含文档的标题、子标题、标语、标志或其他相关的元素。该元素通常是页面的最上部分，并且只应在每个文档或每个文档节中使用一次。
<h1>-<h6>：定义标题级别，其中 h1 标签通常用于页面的主标题，h2 标签通常用于副标题，以此类推。
<nav>：定义导航菜单，通常用于包含页面主要链接的列表，例如站点导航或页面内部链接。可以包含多个链接或链接组。
<div>：定义文档中的一个区域，并可用于组合其他元素。可以用于创建自定义的头部，例如包含多个元素的标题栏。
<ul> 和 <li>：定义无序列表和列表项，通常用于创建导航菜单或链接列表。
<a>：定义一个超链接，可以用于包含站点或页面内的链接。
<form>：定义表单，可以用于创建搜索框或其他表单控件。
<img>：定义图像元素，可以用于在头部区域中包含公司标志或其他相关图像。

div/section/article 区别

参考

HTML 中的 div，section，article 的区别

div

定义：文档中的分区或节。一般用于布局或样式化时使用。
使用场合：作为布局以及样式化时使用（此时三者并无区别，但 div 更常用）
提示：div 是一个块级元素，浏览器通常会在 div 元素前后放置一个换行符。

section

定义：文档中的节，一般是具有标题性的。
使用场合：文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
提示：section 不仅仅是一个普通的容器标签，这区别与 div 标签。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。

article

定义：独立的自包含内容。一般来说，article 会有标题部分 ( 包含在 header 内 )，有时也会包含 footer。
使用场合：一段内容脱离了所在的语境，仍是完整的、独立的，则应该用 article 标签。
提示：虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。

总结

div section article 语义是从无到有，逐渐增强的。
用于样式，布局的控制或者脚本化时使用 div
用于按主题或部分组织页面内容 (主题性的内容) 时使用 section
用于表示独立的完整内容 (主题性内容脱离上下文后仍是完整且独立存在的一段内容) 时使用 article。

class 和 id 的区别

在 HTML 中，class 和 id 都是用来标识一个 HTML 元素的属性，但它们有以下几个区别：

重复使用：一个 id 只能在一个 HTML 文档中使用一次，而一个 class 可以在多个元素中重复使用。
级别：id 是用来标识唯一的元素，可以被用来在 CSS 中选择一个具体的元素，而 class 是用来标识一组元素，可以被用来在 CSS 中选择多个元素。
优先级：在 CSS 样式中，id 选择器的优先级高于 class 选择器，也就是说如果一个元素既有 id 又有 class 属性，那么使用 id 属性设置的样式会覆盖 class 属性设置的样式。
选择器语法：在 HTML 文档中，id 是以 # 符号开头，而 class 是以 . 符号开头。
命名：id 命名应该尽量简短，而 class 命名应该尽量具有描述性。class 命名使用 - 连接，id 命名使用驼峰命名法。

建议

在开发中一般使用 class 来标识元素定义样式。使用 id 来标识元素定义行为，用于 JavaScript 快速定位和获取元素 class。

img/background-image 区别

<img> 和 background-image 是用于在 HTML 文档中显示图像的两种不同方法。

<img> 元素是用于在 HTML 文档中插入一张图片。它是一个自闭合元素，其显示的内容是由 src 属性指定的图像文件。

<!-- 在文档中插入一张名为 `example.jpg` 的图像，并将其作为文档的一部分显示 -->
<!-- `alt` 属性用于提供图像的替代文本，在图像无法显示时显示 -->
<img src="example.jpg" alt="An example image" />

background-image 是用于在 HTML 文档中设置元素的背景图像的样式属性。这意味着它不是将图像嵌入到文档中，而是将其作为元素的背景进行显示。

<!-- 在一个 `<div>` 元素中设置一个背景图片，而不是在文档中嵌入一个 `<img>` 元素 -->
<!-- 注意，这个 `<div>` 元素不需要内容，因为它的背景图片将填充整个元素 -->
<div style="background-image: url('example.jpg');">This element has a background image.</div>

<img> 元素用于在 HTML 文档中插入图像，而 background-image 是用于设置元素的背景图像的样式属性。

建议

必不可少的图像，使用 <img> 元素插入到文档中。
可有可无的装饰性图像，使用 background-image 样式设置元素的背景图像。

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>理财网站</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>

  <body>
    <!--[if lte IE8]>
    <div class="ie8">
      <p> 您的浏览器版本太低，无法正常访问本网站，请升级您的浏览器</p>
    </div>
    <[endif]-->

    <header>
      <nav class="top">
        <span class="tel"> 理财热线：400-888-8888</span>
        <ul>
          <li><a href="#"> 登录</a></li>
          <li><a href="#"> 快速注册</a></li>
          <li><a href="#"> 关于</a></li>
          <li><a href="#"> 帮助</a></li>
          <li><a href="#"> APP 下载</a></li>
        </ul>
      </nav>
      <nav class="main">
        <a href="#" class="brand">
          logo
          <img src="img/logo@1x.webp" alt="回到首页" />
        </a>
        <ul>
          <li><a href="#"> 首页</a></li>
          <li><a href="#"> 理财频道</a></li>
          <li><a href="#"> 投资频道</a></li>
          <li><a href="#"> 新手专区</a></li>
          <li><a href="#"> 安全保障</a></li>
        </ul>
      </nav>
    </header>
    <div></div>
    <footer></footer>
  </body>
</html>

nav.main a.brand {
  text-decoration: none;
  color: #333;
  text-indent: 999999px;
  overflow: hidden;
  display: block;
}