1. HTML structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
contains Head and body, head is for the browser to see, not the content of the web page.
2. Examples
<!DOCTYPE html>
<html lang="en">
<head> <!--head part, fill in the content for the browser (the following text parts are comments)-->
<meta charset="UTF-8" ">
<title>The blah</title>
<link rel="stylesheet" type="text/css" href="homework.css"> <!--reference the css style in the folder: homework.css-- >
</head>
<body> <!--The body part, fill in the content visible on the web page, that is, the content for people to see -->
<div class="header"> <!--The first div , Corresponding to the header part, use class="" to refer to the corresponding style in css-->
<img src="images/blah.png"> <!--Refer to the logo image-->
<ul class="nav" > <!--Use the ul tag to build the navigation module and reference the navigation style-->
<li><a href="#">Home</a></li> <!--Use three li tags to nest a tags to create 3 navigation bars with links -->
<li><a href="#">Site</a></li>
<li><a href= "#">Other</a></li>
</ul>
</div>
<div class="main-content"> <!--The second div, corresponding to the content content part-->
<h2>The Beach</h2> <!--Use the h2 tag to implement the title style-->
<hr > <!--Use the hr tag to implement the horizontal dividing line. It should be noted that this tag is special. In html, there is only a start tag <hr>, no end tag</hr>-->
<ul class="photos"> <!--Use the ul tag to build the picture module and reference the picture style-->
<li><img src="images/0001.jpg" width="150" height="150" alt="Pic1"></ li> <!--Use three li tags to nest img tags to create 3 side-by-side pictures, the pictures limit the width and height; alt is the attribute of the img tag, which is the text prompt of the picture-->
<li><img src ="images/0003.jpg" width="150" height="150" alt="Pic2"></li>
<li><img src="images/0004.jpg" width="150" height=" 150"alt="Pic3"></li>
</ul>
<p> <!--p tags achieve the effect of a piece of text -->
stretching from Solta to Mljet, and this unique cycling trip captures the highlights with an ideal
balance of activity, culture and relaxation. Experience the beautiful island of Korcula with its picturesque old town,
the untouched beauty of Vis, and trendy Hvar with its Venetian architecture. In the company of a cycling guide,
this stimulating journey explores towns and landscapes, many of which are on UNESCO's world heritage list.
Aboard the comfortably appointed wooden motor yacht,
there is ample time between cycles to swim in the azure waters and soak up the ambience of seaside towns.
</p>
</div>
<div class="footer"> <!--第三个div,对应footer页脚部分-->
<p>© Mugglecoding</p> <!--©是©的固定写法-->
</div>
</body>
</html>
The operation effect is as follows:
