Блог

У меня есть этот HTML-код

 header1 {
  background-color: red;
} 

 <header1>
  <h1> My most favorite album is Dirty Sprite 2 by Future</h1>
  <img src="images/cover.jpg" alt="DS2 Cover" width="300" height="300">
  <audio controls>
            <source src = "audio/14 - Trap Niggas.mp3" type = "audio/mpeg">
        </audio>
</header1> 

Однако он не устанавливает весь заголовок 1 в красный цвет? Там просто красная полоска
Скриншот:

Здесь есть пара проблем.

Наиболее очевидным является то, что header1 не является распознанным HTML-тегом. (ваш код, вероятно, потерпел бы неудачу в большинстве валидаторов).

Браузеры, как правило, очень снисходительны, поэтому они сделают все возможное, чтобы отобразить вашу страницу. Однако они не знают, что такое header1, поэтому у них нет встроенного стиля для этого.

Для тега заголовка (юридического) у них будет встроенный стиль, и вы можете узнать, что это такое, посмотрев на стили инструментов разработки браузера для элемента. Например, Chrome только что показал мне, что по умолчанию он принимает display: block.

Если бы вы задали своему заголовку1 стиль отображения: заблокируйте, он будет отображать фон таким красным, как вы хотите. Но лучше использовать «легальный» HTML и использовать тег заголовка вместо header1 и, возможно, класс для стилизации, если это единственный заголовок с красным фоном.

header1 не является допустимым именем для html-тега. попробуйте использовать div и задайте для него идентификатор или класс, чтобы было проще указать его в css

 #header1 {
  background-color: red;
} 

 <div id="header1"> your other code goes here </div> 

Вы можете использовать float: left; для этого случая.

 header1 {
    background-color: red;
    float: left;
} 

 <header1>
    <h1> My most favorite album is Dirty Sprite 2 by Future</h1>
    <img src = "images/cover.jpg" alt = "DS2 Cover" width="300" height="300">
    <audio controls>
        <source src = "audio/14 - Trap Niggas.mp3" type = "audio/mpeg">
    </audio>
</header1>