Python实战学习1.1:动手做自已的网页

这是学习爬虫的第一周的第1小节,亲自动手做了一个网页,个人感觉挺好看的,当然主要还是老师的素材和样式好,尤其第二张图,哈哈!

最终成果如下图:

the blah.png

html代码如下:

<!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);可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,812评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,704评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,768评论 32 459
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,230评论 19 139
  • 刚开学的几天,老师给我们讲了《中学生行为守则规范》,教育我们如何练就良好的学习习惯,同时也告诉我们怎样养成...
    许静赟阅读 2,615评论 0 0

友情链接更多精彩内容