这是学习爬虫的第一周的第1小节,亲自动手做了一个网页,个人感觉挺好看的,当然主要还是老师的素材和样式好,尤其第二张图,哈哈!
最终成果如下图:
the blah.pnghtml代码如下:
<!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>The Beach</h2>
<hr>
<ul class="photos">
<li><img src="images/0001.jpg" width="150" height="150"></li>
<li><img src="images/0002.jpg" width="150" height="150"></li>
<li><img src="images/0003.jpg" width="150" height="150"></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>
总结:
- 引用css文件的<link>内容较长,对于我来说需要多写几遍。
- 列表里面的class要在它的上一级无序列表里面引用。
- 动手之前认真分析网页的结构。
- 学习到了html 常用标签如下:
<ul> 标签定义无序列表。
<link> 标签最常见的用途是链接样式表。
<a> 标签定义超链接,用于从一张页面链接到另一张页面;元素最重要的属性是 href 属性,它指示链接的目标。
<br> 可插入一个简单的换行符。
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
<div> 可定义文档中的分区或节(division/section);可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
网友评论