HTML-BFC+SEO+标签应用实例

文章目录

BFC

BFC即块级格式化上下文（Block Formatting Context），它是Web页面中盒模型布局的CSS渲染模式，相当于一个独立的容器，容器里面的元素不会影响到外面的元素，反之亦然。以下为你介绍BFC的触发条件和应用场景：

触发BFC的条件
- 根元素 ：HTML 文档中的根元素<html>本身就创建了一个BFC。
- 浮动元素 ：当元素的float属性值不是none（如float: left 或 float: right）时，该元素会创建一个BFC 。
- 绝对定位元素 ：元素的position属性值为absolute或fixed时，会触发BFC。
- 行内块元素 ：具有display: inline-block属性的元素会创建BFC。
- 表格单元格 ：元素的display属性值为table-cell（HTML表格单元格默认的display属性值）时，会触发BFC。
- overflow值不为visible的元素 ：当元素的overflow属性值不为visible，例如overflow: auto、overflow: hidden 或 overflow: scroll时，该元素会创建一个BFC。
BFC的应用场景
- 清除浮动 ：在一个包含浮动元素的容器中，如果不进行处理，容器的高度会塌陷，因为浮动元素脱离了正常文档流。通过触发容器的BFC（例如设置overflow: hidden），BFC会包含浮动元素，计算高度时会把浮动元素的高度也计算在内，从而实现清除浮动，使容器正确显示其包含内容的高度。
- 防止垂直边距重叠 ：在文档流中，两个相邻的块级元素（例如两个<div>元素）的垂直外边距（margin-top和margin-bottom）会发生重叠现象。当其中一个元素触发BFC时（例如设置display: inline-block或overflow: hidden等），这个元素就处于一个独立的BFC容器中，与外部元素的垂直边距重叠问题就会得到解决。BFC内部元素的垂直外边距仍然会与BFC内其他元素的垂直外边距发生重叠，但不会与BFC外部的元素产生边距重叠。
- 实现两栏布局 ：可以利用BFC实现简单的两栏布局。例如，左侧栏设置为float: left，触发自身的BFC，使其宽度根据内容自适应，并且不会影响右侧栏的布局。右侧栏设置overflow: hidden触发BFC，这样右侧栏会自适应剩余空间，并且与左侧栏不会产生边距重叠等问题，从而实现了两栏布局效果。

语义化标签和SEO

语义化标签和SEO（搜索引擎优化）密切相关，合理使用语义化标签对提升网站在搜索引擎中的排名和可见性具有重要意义：

语义化标签的定义 ：语义化标签是HTML5引入的一系列标签，它们具有明确的含义，能清晰地描述其代表的内容。例如，<header>标签用于定义页面或区域的头部，通常包含网站标志、导航栏等内容；<nav>标签专门用于标记导航链接部分；<article>标签用来表示文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容，比如一篇博客文章、一个新闻报道等。
语义化标签对SEO的积极影响
- 提升搜索引擎爬虫对页面的理解 ：搜索引擎爬虫通过解析HTML代码来理解页面内容。语义化标签能够清晰地标识页面各个部分的功能和内容，使得爬虫可以更快速、准确地理解页面的结构和主题。例如，当爬虫遇到<article>标签时，它能立即识别出这是一篇独立的文章内容，并重点抓取其中的文本信息、标题等关键元素，从而更好地为页面内容建立索引。
- 有助于突出页面重点内容 ：在HTML页面中，合理使用语义化标签可以将重要的内容包裹在具有明确语义的标签内，从而使搜索引擎更容易识别和判断页面的重点信息。例如，将文章的标题放在<h1> - <h6>标签中（其中<h1>标签表示最重要的标题，通常每个页面只使用一次），搜索引擎会根据这些标签的语义来判断标题的重要性，并在搜索结果中突出显示相关标题，提高页面在搜索结果中的吸引力和点击率。
- 增强页面的可访问性和用户体验，间接利于SEO：语义化标签不仅对搜索引擎友好，也有助于提升页面的可访问性，改善用户体验。例如，屏幕阅读器等辅助技术可以利用语义化标签来更好地向视力障碍用户传达页面内容和结构。当用户能够更轻松、便捷地浏览和理解页面内容时，他们在页面上的停留时间会更长，跳出率会更低，这些积极的用户行为信号会被搜索引擎视为页面质量高、用户体验好的重要依据，从而在搜索排名算法中给予该页面更高的权重和排名，间接促进了网站的SEO效果。
- 利于构建清晰的网站结构，便于搜索引擎索引 ：使用语义化标签有助于创建一个逻辑清晰、层次分明的网站结构。在大型网站中，清晰的结构可以使搜索引擎爬虫更高效地遍历整个网站，发现和索引更多有价值的页面内容。例如，通过<nav>标签明确标记出网站的导航栏部分，搜索引擎可以根据导航栏中的链接关系快速了解网站的整体架构和页面之间的关联，从而更准确、全面地为网站页面建立索引，提高网站在搜索引擎中的收录量和曝光机会，对SEO产生积极的推动作用。

语义化标签实例

页面结构类

<header>：用于页面或区块的头部，通常包含网站的logo、导航栏、搜索框等内容。在SEO方面，搜索引擎会将其识别为页面的"开头"部分，有助于提高页面结构的清晰度，让搜索引擎快速了解页面的重要区域。
<nav>：标记页面中的导航链接区域。例如，一个电商网站的顶部导航菜单或侧边栏导航都可以用<nav>包裹。搜索引擎可以识别该区域的链接，并优先索引相关的导航内容，方便搜索引擎爬虫抓取页面的关键链接，提高网站的整体索引效率。
<main>：表示页面的主要内容区域，每个页面应该只有一个标签。如博客文章的正文内容、新闻页面的主要新闻报道等都应放在内。这有助于搜索引擎快速定位到页面的核心内容，集中精力抓取和索引主要内容，提高主要内容在搜索结果中的权重。
<article>：用于表示独立的内容块，例如新闻文章、博客帖子、评论等。比如一篇技术博客文章，从标题到正文内容都可以放在标签内。搜索引擎能够识别并索引 <article>标签中的内容，提高相关性和排名，使文章在搜索结果中更易被用户找到。
<section>：用于将页面内容划分为多个区域，通常是根据主题或功能进行划分，每个<section>可以包含一个标题。例如，一个产品介绍页面可以根据不同的产品特点划分为多个，每个 <section>有相应的标题和具体内容。搜索引擎可根据这些分区更好地理解页面结构和内容层次，提高页面的索引质量。
<aside>：表示与主内容稍微独立，但又能提供附加信息的部分，例如侧边栏、广告或推荐文章等。合理使用标签可以为页面提供额外的相关信息，增加用户在页面上的停留时间和浏览深度，间接对SEO产生积极影响。
<footer>：用于页面的底部，通常包含版权信息、网站地图、联系信息等。搜索引擎能够理解这一部分内容的重要性，并根据其中的关键词进行相关的索引，同时也为用户提供了方便的网站导航和版权说明等。

文本内容类

<h1>-<h6>：用于表示页面的标题层次结构，<h1>通常表示页面的主标题，<h2>-<h6>表示副标题和子标题。例如，在一篇新闻报道中，<h1>可以是新闻的大标题，<h2>是各个段落的小标题。搜索引擎会根据这些标题来确定页面的主题和重要内容，从而提高页面在搜索结果中的排名，同时也有助于用户快速浏览和理解页面的主要内容。
<p>：表示段落文本，是网页中最常见的文本包裹标签。在SEO中，搜索引擎会抓取<p>标签中的文本内容，因此确保段落内容的质量和关键词的合理分布，有助于提高页面的相关性和排名。
<strong>和<em>：分别用于表示强调和着重的文本。在需要突出特定关键词或重要信息时使用，搜索引擎会对这些被强调的内容给予一定的关注，提高相关关键词的权重，但要避免过度使用。

列表类

<ul>和<ol>：分别用于表示无序列表和有序列表。在展示项目列表、步骤流程等内容时非常有用，如一篇美食博客中列举食材清单可以用<ul>，而介绍烹饪步骤时可以用<ol>。清晰的列表结构有助于搜索引擎理解内容的逻辑关系，提高内容的可读性和可理解性，进而对SEO产生积极影响。

多媒体类

<img>：用于嵌入图片，在SEO中，需要为图片设置准确的alt属性，描述图片的内容，以便搜索引擎理解图片的主题和与页面内容的相关性，提高页面在图片搜索结果中的曝光率，同时也能为视力障碍用户提供更好的可访问性。
<video>和<audio>：分别用于嵌入视频和音频文件。当页面包含视频或音频内容时，使用语义化标签可以让搜索引擎更好地识别和理解多媒体内容，通过在标签周围添加相关的文本描述，可以提高多媒体内容在搜索结果中的可见性。

特殊功能类

<figure>和<figcaption>：<figure>用于标记独立的流内容，如图表、图像、代码片段等，<figcaption>可以为<figure>提供标题和描述。在SEO中，这有助于搜索引擎更好地理解图片、图表等内容的含义和与页面主题的相关性，提高页面在搜索结果中的质量得分。
<details>和<summary>：<details>用于标记一个用户可以展开或收起的详细信息，<summary>则为<details>元素定义一个可见的标题。在一些常见问题解答页面或产品详情页面中，可以使用这两个标签来隐藏和显示详细内容，既可以提高页面的整洁度，又可以让搜索引擎更好地抓取和索引重要信息。

以下是`<figure>`和`<figcaption>`标签的一些应用实例：

图片展示

在一篇旅游博客中，展示各地的风景照片：

html 复制代码

<figure>
  <img src="beijing.jpg" alt="北京故宫">
  <figcaption>北京故宫，中国明清两代的皇家宫殿</figcaption>
</figure>
<figure>
  <img src="paris.jpg" alt="巴黎埃菲尔铁塔">
  <figcaption>巴黎埃菲尔铁塔，法国文化象征之一</figcaption>
</figure>

图表展示

在数据报告或财经新闻中，展示统计图表：

html 复制代码

<figure>
  <img src="sales_chart.png" alt="年度销售图表">
  <figcaption>2024年各季度销售数据图表</figcaption>
</figure>

代码示例展示

在技术博客或文档中，展示代码片段并加以解释：

html 复制代码

<figure>
  <pre><code>
    function add(num1, num2) {
      return num1 + num2;
    }
  </code></pre>
  <figcaption>一个简单的加法函数示例</figcaption>
</figure>

引述或诗歌展示

在文学类网站或文章中，展示长篇引述或诗歌：

html 复制代码

<figure>
  <p>"床前明月光，疑是地上霜。举头望明月，低头思故乡。"</p>
  <figcaption>李白《静夜思》</figcaption>
</figure>

数学公式展示

在学术论文或教育类网站中，展示数学公式并加以解释：

html 复制代码

<figure>
  <p>$$E=mc^2$$</p>
  <figcaption>爱因斯坦的质能方程</figcaption>
</figure>

多媒体内容展示

在网页中嵌入视频或音频片段，并添加标题或说明：

html 复制代码

<figure>
  <video src="video.mp4" controls></video>
  <figcaption>精彩的动物世界纪录片片段</figcaption>
</figure>

以下是`<details>`和`<summary>`标签的一些应用实例：

常见问题解答（FAQ）页面

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FAQ Page</title>
  <style>
    details {
      font-size: 1rem;
      margin: 0 auto;
      width: 100%;
      background: #f6faff;
      border-radius: 0.5rem;
      position: relative;
      max-width: 600px;
      border: 1px solid #c3deff;
      transition: all 0.3s ease-in-out;
    }

    details:hover {
      border: 1px solid #a4a1ff;
    }

    summary {
      user-select: none;
      cursor: pointer;
      font-weight: 600;
      display: flex;
      list-style: none;
      padding: 1rem;
      align-items: center;
    }

    summary:hover.faq-title {
      opacity: 1;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary:focus {
      outline: none;
    }

    summary:hover.expand-icon {
      opacity: 1;
    }

   .faq-title {
      color: #1c2035;
      width: 90%;
      opacity: 0.65;
      transition: all 250ms ease-in-out;
    }

   .faq-content {
      color: #303651;
      padding: 0.2rem 1rem 1rem 1rem;
      font-weight: 300;
      line-height: 1.5;
    }

   .expand-icon {
      opacity: 0.65;
      pointer-events: none;
      position: absolute;
      right: 1rem;
      transition: all 150ms ease-out;
    }
  </style>
</head>

<body>
  <div class="faq-container">
    <details>
      <summary>
        <span class="faq-title">如何注册账号？</span>
        <img src="assets/plus.svg" class="expand-icon" alt="plus">
      </summary>
      <div class="faq-content">
        您可以在我们的网站首页点击"注册"按钮，然后按照提示填写相关信息，
        包括用户名、密码、邮箱等，完成注册。
      </div>
    </details>
    <details>
      <summary>
        <span class="faq-title">忘记密码怎么办？</span>
        <img src="assets/plus.svg" class="expand-icon" alt="plus">
      </summary>
      <div class="faq-content">
        在登录页面点击"忘记密码"链接，我们会向您注册的邮箱发送重置密码的链接，
        您可以通过该链接重置密码。
      </div>
    </details>
  </div>
</body>

</html>

产品详情页面

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Details</title>
  <style>
    details {
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      padding: 10px;
    }

    summary {
      cursor: pointer;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <h2>产品规格</h2>
  <details>
    <summary>尺寸</summary>
    <p>长：20cm，宽：15cm，高：10cm</p>
  </details>
  <details>
    <summary>重量</summary>
    <p>500g</p>
  </details>
  <details>
    <summary>材质</summary>
    <p>优质塑料，环保无毒</p>
  </details>

  <h2>使用说明</h2>
  <details>
    <summary>安装步骤</summary>
    <ol>
      <li>将零件A与零件B对准接口。</li>
      <li>使用螺丝刀拧紧螺丝。</li>
      <li>连接电源线。</li>
    </ol>
  </details>
  <details>
    <summary>注意事项</summary>
    <ul>
      <li>使用前请确保电源已关闭。</li>
      <li>避免在潮湿环境中使用。</li>
      <li>定期清洁产品表面。</li>
    </ul>
  </details>
</body>

</html>

新闻报道或文章中的补充信息

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>News Article</title>
  <style>
    details {
      margin-top: 1rem;
      border: 1px solid #ccc;
      padding: 10px;
    }

    summary {
      cursor: pointer;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <article>
    <h1>重大考古发现</h1>
    <p>近日，考古学家在某地发现了一处古代遗址，出土了大量珍贵文物。</p>
    <p>这些文物的年代可追溯到数千年前，为研究古代文明提供了重要线索。</p>

    <details>
      <summary>详细考古发现</summary>
      <p>此次出土的文物包括精美的陶器、青铜器和玉器等，其中一件青铜器上刻有神秘的符号，
      考古学家正在研究其含义。</p>
      <p>遗址的建筑结构也十分独特，显示出当时高超的建筑技艺。</p>
    </details>

    <p>考古工作仍在继续，预计将有更多的发现。</p>
  </article>
</body>

</html>

代码文档中的代码示例解释

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Documentation</title>
</head>

<body>
  <h2>JavaScript函数示例</h2>
  <details>
    <summary>计算两个数的和</summary>
    <pre><code>
function add(num1, num2) {
  return num1 + num2;
}
    </code></pre>
    <p>以上代码定义了一个名为add的函数，它接受两个参数num1和num2，并返回它们的和。</p>
  </details>

  <details>
    <summary>判断一个数是否为偶数</summary>
    <pre><code>
function isEven(num) {
  return num % 2 === 0;
}
    </code></pre>
    <p>这个函数接受一个参数num，通过判断num除以2的余数是否为0来确定它是否为偶数。</p>
  </details>
</body>

</html>

HTML-BFC+SEO+标签应用实例

文章目录

BFC

语义化标签和SEO

语义化标签实例

页面结构类

文本内容类

列表类

多媒体类

特殊功能类

以下是<figure>和<figcaption>标签的一些应用实例：

图片展示

图表展示

代码示例展示

引述或诗歌展示

数学公式展示

多媒体内容展示

以下是<details>和<summary>标签的一些应用实例：

常见问题解答（FAQ）页面

产品详情页面

新闻报道或文章中的补充信息

代码文档中的代码示例解释

以下是`<figure>`和`<figcaption>`标签的一些应用实例：

以下是`<details>`和`<summary>`标签的一些应用实例：