---
id: 6143869bb45bd85e3b1926aa
title: 步驟 4
challengeType: 0
dashedName: step-4
---
# --description--
在你的 `.heading` 元素中，創建一個 `header` 元素，將該元素的 `class` 設置爲 `hero`。
在那個元素中，創建一個 `img` 元素，將 `src` 設置爲 `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`，將 `alt` 設置爲 `freecodecamp logo`，並將 `class` 設置爲 `hero-img`。
`img` 元素上的 `loading` 屬性可以設置爲 `lazy`，以告訴瀏覽器在需要（例如，當用戶將圖像滾動到視圖中時）的時候才獲取圖像資源。 另外一個好處是，延遲加載的元素在加載非延遲元素之前不會加載——這意味着互聯網連接速度較慢的用戶可以查看你的頁面的內容，而無需等待圖像加載。
給你的新 `img` 元素一個 `loading` 屬性，設置爲 `lazy`。
# --hints--
你應該創建一個 `header` 元素。
```js
assert.exists(document.querySelector('header'));
```
你的 `header` 元素應該在你的 `.heading` 元素中。
```js
assert(document.querySelector('header')?.parentElement?.className === 'heading');
```
你的 `header` 元素應該將 `class` 設置爲 `hero`。
```js
assert(document.querySelector('header')?.className === 'hero');
```
你應該創建一個 `img` 元素。
```js
assert.exists(document.querySelector('img'));
```
你的 `img` 元素應該在你的 `header` 元素中。
```js
assert(document.querySelector('img')?.parentElement?.localName === 'header');
```
你的 `img` 元素應該有一個 `src`，值爲 `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`。
```js
assert(document.querySelector('img')?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png');
```
你的 `img` 元素應該有一個 `alt`，值爲 `freecodecamp logo`。
```js
assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo');
```
你的 `img` 元素應該有一個 `loading` 屬性，值爲 `lazy`。
```js
assert(document.querySelector('img')?.getAttribute('loading') === 'lazy');
```
你的 `img` 元素應該有一個 `class` 爲 `hero-img`。
```js
assert(document.querySelector('img')?.className === 'hero-img');
```
# --seed--
## --seed-contents--
```html
Magazine
--fcc-editable-region--
--fcc-editable-region--
```
```css
```