如何创建网页并设计其样式

说明是：

Open the index.html file and set up the following basic HTML document structure:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Set the title of the HTML document to your name:

<!DOCTYPE html>
<html>
<head>
    <title>your name</title>
</head>
<body>
</body>
</html>
Link to styles.css in the head element.

Add five divider elements to the body element.

Add a heading 1 to the first divider element that displays your name.

Add photo.jpg using an image element in the second divider element..

Add an ID attribute with the value photo on the image element.

Add a heading 2 for Favorite Music Artists in the third divider element. In the same divider add an unordered list with your top 5 favorite artists.

Add a heading 2 for Favorite Films in the fourth divider element. In the same divider add an ordered list with your top 5 favorite films.

Add a hyperlink to your Facebook profile page in the last divider element. Alternatively, add a hyperlink to https://www.meta.com/. As a last step, add My Profile to the descriptive text of the <a> tag.


Task 2: Style the webpage using CSS.
Objectives

Style the webpage using CSS.
Follow the Step by Step instructions below:

Open the styles.css file.

Add a CSS rule for your image that sets the border property to 2 pixels wide with a solid blue color.

Add a CSS rule for heading 1 containing your name and set its color to blue.

Add a CSS rule for all <h2> headings and set their color to grey.

Add a CSS rule that applies a margin of 4 pixels to the divider elements.

我尝试过的：

超文本标记语言

<title> Ana Carolina

    <div>
        <h1> Ana Carolina</h1>
        <div>
            
            <div>
                <ul>
                    <li>Justin Bieber</li>                    <li>Jão</li>                    <li>Metallica</li>                    <li>One Direction</li>                    <li>Demi Lovato</li>                </ul>
                <div>
                    <h2> Favorite Films</h2>
                    <ol>
                        <li>Para todos garotos que já amei</li>                        <li>Bingo</li>                        <li>Big Daddy</li>                        <li> Shrek 3</li>                        <li> Moana</li>                    </ol>
                    <div>
                        <a href="https://www.facebook.com/">My Profile</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS部分：

CSS

>image{
    border: 4px solid green
}
h1{
    color:blue
}
h2{
    color: grey
}
body{
    margin: 4px;
}

并显示我确实没有得到的错误：

The following tests failed:

✗ There should be 5 <div> tags in the <body>
✗ The 1st <div> tag should have a margin of 4px
✗ There should be a 2nd <div> tag in the <body> tag (+ 7 related tests)
✗ There should be a 3rd <div> tag in the <body> tag (+ 7 related tests)
✗ There should be a 4th <div> tag in the <body> tag (+ 7 related tests)
✗ There should be a 5th <div> tag in the <body> tag (+ 4 related tests)

解决方案1

阅读说明 – 它们非常具体：

操作说明

Add five divider elements to the body element.

你没有：你有一个包含一个 DIV 标签的 body 元素，总共有五个 嵌套的 DIV 标签：

超文本标记语言

<div>
    <div>
        <div>
            <div>
                <div>
                </div>
            </div>
        </div>
    </div>
</div>

这和这个不一样：

超文本标记语言

<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>

等等。
合理？