最终成果:
我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The blah</title>
<link rel="stylesheet" type="text/css" href="homework.css">
</head>
<body>
<div class="header">
<img src="images/blah.png">
<ul class="nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Site</a>
</li>
<li>
<a href="#">Other</a>
</li>
</ul>
</div>
<div class="main-content">
<h2 style="text-align: center">The Beach</h2>
<hr/>
<ul class="photos">
<li>
<img src="images/0001.jpg" width="150" height="150" alt="pic1">
</li>
<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>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">
<p>@ Mugglecoding</p>
</div>
</body>
</html>
总结:
1.常用HTML标签的用法:
HTML 标题(Heading)是通过 <h1>标题 <h6> 等标签进行定义的。从h1到h6标题的字号依次变小,而且只有这六个等级
标签<p>段落</p>定义段落
标签,<a href="https://www.baidu.com/"></a> 定义链接
标签<ul>导航</ul>定义导航
标签<img src="图片地址" width=“宽度”, height=“高度”>定义图片,width和height可以不写,就按照图片的原样大小插入图片
注意:标签一般都是成对出现的,所以最好都用成对的标签