Python 實戰(zhàn)-第 1 周-練習(xí)項目01-動手做自己的網(wǎng)頁
成果展示
week01-ex12-動手做自己的網(wǎng)頁
代碼
貼代碼如下。同時放在 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>
總結(jié)
- 注釋語句
」】--> - 要用一句
<link rel="stylesheet" type="text/css" href="[replaced by PATH of your CSS file]">來把當前編輯的 HTML 文件與你需要關(guān)聯(lián)的樣式文件（CSS）關(guān)聯(lián)在一起 -
<li></li>的意思是「list item」诅诱，需要在其外部說明（即所屬的最近上級框架）是有序列表「ordered list」<ol></ol>回怜，還是無需列表「unordered list」<ul></ul> - 圖片標簽
<img>較為特殊大年，不需要用</img>來對應(yīng)（區(qū)別于許多標記失都，例如容器標記<div></div>粹庞、段落標記<p></p>等等等等） - 看來 Markdown 里的「---」實現(xiàn)的分割線對應(yīng)的 HTML 代碼是
<hr />
