最近在網(wǎng)易課堂上學(xué)習(xí)python的一個(gè)實(shí)戰(zhàn)課程毅臊，正好簡(jiǎn)書(shū)也是我喜歡的一個(gè)平臺(tái)，不妨在這里提交作業(yè)分享心得黑界。第一個(gè)小練習(xí)是做一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)管嬉，最終呈現(xiàn)的效果如下：
下面開(kāi)始吧皂林！
1.創(chuàng)建html文件
將homework文件夾下載到本地沛贪，里面包含了創(chuàng)建網(wǎng)頁(yè)所需的.css文件倍试，images文件夾和已經(jīng)寫(xiě)好的.html文件。創(chuàng)建文件夾副本重新命名徒蟆，刪除其中的.html文件胎挎，打開(kāi)PyCharm創(chuàng)建一個(gè)新的以homwork命名的html文件著隆，然后開(kāi)始自己的創(chuàng)作編輯。
然后打開(kāi)PyCharm在1_1homework文件夾下新建一個(gè)以homework命名的空白的html文件
新建的html文件已經(jīng)有了<head>和<body>的標(biāo)簽呀癣。
Tips:
<head>和<body>中所包含的內(nèi)容有不同的作用。<head>標(biāo)簽中的信息傳遞給瀏覽器弦赖，對(duì)于瀏覽者不可見(jiàn)项栏；<body>標(biāo)簽中的信息在網(wǎng)頁(yè)中可見(jiàn)。
2. 編輯html文件
網(wǎng)頁(yè)的<head>部分可以直接引入寫(xiě)好的css樣式蹬竖，這里引入css樣式的方法是用
<link>標(biāo)簽鏈接一個(gè)外部樣式表：
其中的rel標(biāo)簽屬性用來(lái)規(guī)定當(dāng)前文檔與被鏈接文檔之前的關(guān)系沼沈，stylesheet表示樣式表；type屬性規(guī)定被鏈接文檔的MIME（Multipurpose Internet Mail Extensions币厕，多用途互聯(lián)網(wǎng)郵件擴(kuò)展）類型列另；href這個(gè)屬性經(jīng)常被使用，值是url旦装，也就被鏈接文檔的位置页衙。
具體可參見(jiàn)網(wǎng)站：http://www.w3school.com.cn/tags/tag_link.asp
Tips:
1.敲出屬性關(guān)鍵字時(shí)IDE中會(huì)有提示回車(chē)即可快速輸入。
2. href輸入的鏈接為相對(duì)路徑阴绢，即文件夾中已經(jīng)存在的css文件（homework.css）
網(wǎng)頁(yè)body部分的框架分為三塊
·Header
·Main-content
·Footer
按照這樣的框架用<div></div>標(biāo)簽分隔三部分內(nèi)容店乐，樣式分別為“header”，“main-content”呻袭，“footer”賦值到class
3. 填充html文件header內(nèi)容
<div></div>可以嵌套內(nèi)容眨八，因此寫(xiě)好基本代碼后，可以繼續(xù)填充header左电，加入圖片<img>標(biāo)簽廉侧，導(dǎo)航<ul></ul>標(biāo)簽，鏈接<a>標(biāo)簽篓足。
<img>標(biāo)簽中使用的素材由相對(duì)路徑導(dǎo)入段誊，方法同上。導(dǎo)航標(biāo)簽<ul>樣式是"nav"栈拖，其中有兩層標(biāo)簽枕扫，<li></li>表示列表，<a></a>表示鏈接跳轉(zhuǎn)到其他頁(yè)面辱魁，因?yàn)檫@里沒(méi)有編寫(xiě)其他鏈接網(wǎng)頁(yè)烟瞧，href的值都為“#”诗鸭。
4. 填充html文件main-content內(nèi)容
填充好header部分，再來(lái)填充main-content的標(biāo)簽参滴，方法如上强岸。需要加入內(nèi)容標(biāo)題”The blah”，字號(hào)樣式用標(biāo)簽<h2>砾赔，還可以用<hr>在html網(wǎng)頁(yè)中創(chuàng)建一條水平線蝌箍，水平分割線（horizontal rule）可以在視覺(jué)上將文檔分割成各個(gè)部分。這個(gè)標(biāo)簽比較特殊暴心，不是成對(duì)的妓盲。
然后在<ul>標(biāo)簽中嵌套<li>和<img>標(biāo)簽，<ul>標(biāo)簽的樣式為“photos”专普，其中<img>標(biāo)簽有兩個(gè)必須屬性：src和alt悯衬，分別賦值為圖片的url和替代文本。另外因?yàn)橐髨D片大小為150*150檀夹，在這里對(duì)width和height屬性分別賦值筋粗。
然后填充文字內(nèi)容，這里找了一段《瓦爾登湖》的原文炸渡。標(biāo)簽的空格和換行都會(huì)保留娜亿，將文字排版好對(duì)齊之后復(fù)制到PyCharm中。
5. 填充html文件footer內(nèi)容
最后是footer部分蚌堵，需要關(guān)注特殊符號(hào)的寫(xiě)法买决，如圖最后形成效果
關(guān)于這點(diǎn)可以查看網(wǎng)站：http://www.w3school.com.cn/tags/html_ref_entities.html
6. PyCharm查看html網(wǎng)頁(yè)效果
保存代碼，然后就可以在當(dāng)前的html文件跟前面一樣通過(guò)瀏覽器查看最終效果吼畏。
創(chuàng)建網(wǎng)頁(yè)小結(jié)
1.首先確定網(wǎng)頁(yè)的結(jié)構(gòu)，通過(guò)編輯html文件可以形成網(wǎng)頁(yè)的框架宫仗，里面成對(duì)的標(biāo)簽可以嵌套使用够挂，使網(wǎng)頁(yè)層次豐富而分明，而標(biāo)簽的屬性可以更細(xì)化網(wǎng)頁(yè)內(nèi)容的的規(guī)范藕夫；導(dǎo)入css文件孽糖，通過(guò)里面各種樣式裝飾網(wǎng)頁(yè)。
2.以上用到的主要標(biāo)簽和屬性總結(jié)
附錄：
最后附上源代碼（這節(jié)課的內(nèi)容較少毅贮，代碼中沒(méi)有注釋办悟，注釋是個(gè)好習(xí)慣！）
