Question

我正在尝试使用<small>标记内的<h1>标记来缩小文本。但似乎没有效果。一切似乎都还可以。我在下面附加了示例代码，以供进一步参考。我遇到问题的特定行是这行代码<h1>#a <small>by limit.broom.flip</small></h1>。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>chatter|app</title>
    <<style media="screen">
      * {
        background-color: grey;
      }
      h1 {
        color: white;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <!-- Channel area  -->
    <h1>chatter|app</h1>
    <h2>#a</h2>
    <h2>#ak</h2>
    <h2>#akr</h2>
    <h2>#akra</h2>
    <h2>#akram</h2>

    <button type="button">New</button>
    <button type="button">Trending</button>
    <button type="button">Favorites</button>

      <hr>
      <!-- chat history area -->
      <h1>#a <small>by limit.broom.flip</small></h1>
      <!-- chat history along with location and ttl -->
      <h4>limit.broom.flip Wed,June 20th, 13:37 <em>15 min. left</em></h4>
      <p>Where is London?</p>
      <button type="button">+5 min.</button>

      <h4>scout.gifts.bride Wed,June 20th, 13:39 <em>4 min. left</em></h4>
      <p>Where is Stratford bus stand?</p>
      <button type="button">+5 min.</button>

      <h4>dress.sharp.brave Wed,June 20th, 14:02 <em>12 min. left</em></h4>
      <p>The big apple!</p>
      <button type="button">+5 min.</button>

      <h4>derailed.duties.headboard Wed,June 20th, 14:02 <em>7 min. left</em></h4>
      <p>Who wants to lost in crowd</p>
      <button type="button">+5 min.</button>

      <h4>derailed.duties.headboard Wed,June 20th, 14:07 <em>14 min. left</em></h4>
      <p>Stay ahead of traffic</p>
      <button type="button">+5 min.</button>

  </body>
</html>

Answer 1

您有一个简单的错字：

<<style media="screen">

修复它，一切都会正常运行

Answer 2

尝试：

small{
      font-size: medium;
      text-transform: lowercase;
    }

Answer 3

在<<style>元素的代码中输入简单的错字，删除多余的<您的代码即可正常工作。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>chatter|app</title>
    <style media="screen">
      * {
        background-color: grey;
      }
      h1 {
        color: white;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <!-- Channel area  -->
    <h1>chatter|app</h1>
    <h2>#a</h2>
    <h2>#ak</h2>
    <h2>#akr</h2>
    <h2>#akra</h2>
    <h2>#akram</h2>

    <button type="button">New</button>
    <button type="button">Trending</button>
    <button type="button">Favorites</button>

      <hr>
      <!-- chat history area -->
      <h1>#a <small>by limit.broom.flip</small></h1>
      <!-- chat history along with location and ttl -->
      <h4>limit.broom.flip Wed,June 20th, 13:37 <em>15 min. left</em></h4>
      <p>Where is London?</p>
      <button type="button">+5 min.</button>

      <h4>scout.gifts.bride Wed,June 20th, 13:39 <em>4 min. left</em></h4>
      <p>Where is Stratford bus stand?</p>
      <button type="button">+5 min.</button>

      <h4>dress.sharp.brave Wed,June 20th, 14:02 <em>12 min. left</em></h4>
      <p>The big apple!</p>
      <button type="button">+5 min.</button>

      <h4>derailed.duties.headboard Wed,June 20th, 14:02 <em>7 min. left</em></h4>
      <p>Who wants to lost in crowd</p>
      <button type="button">+5 min.</button>

      <h4>derailed.duties.headboard Wed,June 20th, 14:07 <em>14 min. left</em></h4>
      <p>Stay ahead of traffic</p>
      <button type="button">+5 min.</button>

  </body>
</html>

html小标签在h1标签内不起作用

3 个答案: