算技@Python爬虫-动手做自己的网页
2016-05-10 本文已影响116人
苏尚君
Python 实战-第 1 周-练习项目01-动手做自己的网页
成果展示
week01-ex12-动手做自己的网页
代码
贴代码如下。同时放在 GitHub 库上
<!DOCTYPE html>
<html lang="en">
<head><!--something read by web applications, not by users-->
<meta charset="UTF-8">
<title>easyPythonCrawler.sushangjun</title>
<link rel="stylesheet" type="text/css" href="homework.css">
<!--the sentence above is the key one to link the CSS file you need to this HTML file.
change the path of your CSS file in [href=""]-->
</head>
<body>
<!--this is the title read by users-->
<h1>Hey, let's fight now!</h1>
<!--this is the navigator-->
<div class="header"><!--choose a name in the CSS file, which is EXACTLY the NEXT word
following the dot"." and before the first space. For example, choose "nav" instead of "nav li".-->
<ul class="nav">
<!--use "<ul><li></li></ul>" to create "unordered list",
use "<ol><li></li></ol>" to create "ordered list".
REMEMBER: you MUST use "li" in "ul/ol" pairs,
or the "li" alone will not work.-->
<li><a href="#">I</a></li>
<li><a href="#">am</a></li>
<li><a href="#">Shangjun</a></li>
</ul>
</div>
<!--this is the main content of the whole web-->
<div class="main-content">
<h2>Why am I here?</h2>
<hr /><!--something like the appearance of "---" in Markdown-->
<!--this is a comment, starting with "<!--"(EXCLUDING quotes), ending with"\-\-\>"(EXCLUDING quotes
and backslash)--><!--reference: http://www.w3school.com.cn/tags/tag_comment.asp and my practice experience-->
<img src="images/0001.jpg" width="150" height="150"><!--img tag DO NOT need "</img>"-->
<img src="images/0003.jpg" width="150" height="150">
<img src="images/0004.jpg" width="150" height="150">
<p><!--A story about myself. Copyright: fengdasuk19@gmail.com-->
Let me tell you a story(eh, the style seems like...Zhihu.com?).<br/>
No, not a long story. Instead, a short one.<br/>
<br/>
When I tried to choose my university, I searched in zhidao.baidu.com
using some questions as key words, when Zhihu.com didn't exist,
in order to find whether there would be something I disliked in the school.<br/>
I have seen EVERY best answer of the FIRST FIFTY pages of searching results.<br/>
<br/>
Don't you think it waste too much of my time? Part of the work IS, really.
For example, if I could write all of my questions and searching in the web and download
the answers when I sleep or have meals, then I would save more time for me so that I
might have more time to search for more useful information and made a cleverer decision.
<br/>
I DID know this during my college days. But I didn't practice until today.<br/>
Anyway, I've begun my tour. Will you be my friend? Let's fight for the same destination!<br/>
<br/>
Go!
</p>
</div>
<!--this is the footer-->
<div class="footer">
<p>
So why not try NOW?
</p>
</div>
</body>
</html>
总结
- 注释语句
」】--> - 要用一句
<link rel="stylesheet" type="text/css" href="[replaced by PATH of your CSS file]">来把当前编辑的 HTML 文件与你需要关联的样式文件（CSS）关联在一起 -
<li></li>的意思是「list item」，需要在其外部说明（即所属的最近上级框架）是有序列表「ordered list」<ol></ol>，还是无需列表「unordered list」<ul></ul> - 图片标签
<img>较为特殊，不需要用</img>来对应（区别于许多标记，例如容器标记<div></div>、段落标记<p></p>等等等等） - 看来 Markdown 里的「---」实现的分割线对应的 HTML 代码是
<hr />
