python與web前端設(shè)計(jì)實(shí)踐

python與web前端一、實(shí)踐目的1.素養(yǎng)提升（1）心智訓(xùn)練（2）思維鍛煉掌握技能掌握HBuilder軟件了解CSSweb前端Python互聯(lián)網(wǎng)相關(guān)知識二、實(shí)踐內(nèi)容1.素質(zhì)提升（1）心智訓(xùn)練通過兩周的實(shí)踐，我學(xué)到了很多知識，但學(xué)到最多的是心智提升，在別人已經(jīng)放假回家的時(shí)候我們在學(xué)校學(xué)習(xí)對我們有益的知識，在別人在家吹著空調(diào)時(shí)，我、在教室流著汗水，但我們收獲了很多，在這段經(jīng)歷中我們在炎炎夏日沉下心中的焦躁與煩躁，把他們化作學(xué)習(xí)的動力，化為對學(xué)習(xí)的渴望，經(jīng)過兩周的學(xué)習(xí)，我的心智在不斷的提升，相信對我以后的生活會有著很大的幫助的。思維訓(xùn)練兩周的時(shí)間，說長不長說短不短，但學(xué)習(xí)的知識卻是十分充足的，在兩周的時(shí)間里讓我體會到了程序員的辛苦，也初步培養(yǎng)了程序員應(yīng)有的編程思維，在對今后的生活中，這種思維會對我有很大的幫助，做事一步接一步，一層套一層，邏輯分明，細(xì)心仔細(xì)，讓我在今后的生活中做事有規(guī)矩有紀(jì)律。在對一件復(fù)雜的事情中，細(xì)分各個(gè)模塊逐個(gè)擊破，既能把復(fù)雜的問題化為簡單問題，在有規(guī)矩的進(jìn)行做事，也能更好的減少錯(cuò)誤，做事仔細(xì)細(xì)心.2掌握技能掌握HBuilder的使用方法掌握技能(1)HBuilder的使用方法：HBuilder是常用在支持web開發(fā)的IDE與在JAVA、C++、C、和ruby的編輯語言是Dcloud公司所發(fā)明的一個(gè)支持HTML5的編程軟件.運(yùn)行速度快、占用面積小、簡單容易上手操作,并且使用了許多完整的語法提示和代碼輸入法等,大幅各類編程語言的的開發(fā)效率這是HBuilder的優(yōu)勢所在，也因?yàn)槭褂肏Builder使得能讓我們這類新手更加容易上手編程,用較短的時(shí)間進(jìn)入編程的世界,在兩周的實(shí)踐中,學(xué)習(xí)的知識都在此軟件上體現(xiàn),所以說使用HBuilder是一切實(shí)踐的根本的基礎(chǔ)。CSS:CSS稱層疊樣本表這是一款表示在HTML和HTML5、XLML等文件樣本的計(jì)算機(jī)編程語言。CSS的特點(diǎn)是可配合各類語言動態(tài)地對網(wǎng)頁中的各個(gè)元素進(jìn)行總體格式化修改、并且也可以在靜態(tài)的情況下設(shè)計(jì)和修飾網(wǎng)頁,特點(diǎn)：:CSS在Web前端設(shè)計(jì)領(lǐng)域是一個(gè)重大突破?？梢岳盟鼇韺?shí)現(xiàn)修改較小的樣本更新和它相關(guān)的所有頁面元素。是設(shè)計(jì)與修飾網(wǎng)頁常用的軟件之一、幾乎能適應(yīng)全部字體、字號、而且還為HTML提供了一個(gè)樣本性的描述

總地來說,CSS具有以下幾個(gè)特點(diǎn):豐富的樣本定義了CSS提供了豐富的文檔樣本,并且設(shè)置文本和背景的功能;允許為所有元素創(chuàng)建文本邊框,以及元素邊框與其他元素間、內(nèi)容間的距離,;能任意的改變文本的大小寫、修飾以及其他頁面展示效果。方便的使用和修改CSS可以將樣本定義在HTML的style模塊中,也能使之定義在HTML的header模塊,而且也可以將樣本的聲明在一個(gè)專門的CSS文檔中,以方便HTML的引用。總之,CSS樣本使所有的樣本聲明統(tǒng)一存放在文檔中,進(jìn)行管理。此外,CSS將相同的元素進(jìn)行歸納,讓其使用同一樣本進(jìn)行定義操作,也能將其中樣本應(yīng)用到同名的HTML標(biāo)簽中,而且也能將一個(gè)CSS樣本指派到某個(gè)網(wǎng)頁頁面元素中。如果我們需要要修改樣本時(shí)，應(yīng)在所對應(yīng)樣本列表中找到樣本進(jìn)行修改、因?yàn)閾碛卸囗撁娴膽?yīng)用所以能將樣本表存在一個(gè)獨(dú)有的文件中使得樣本表可以應(yīng)用在任何頁面文件中、等待被引用因此達(dá)到了多個(gè)頁面的風(fēng)格一致性。層疊,層疊是對元素的多次設(shè)置同一個(gè)樣本。例如使用同一套CSS樣本表可對一個(gè)站點(diǎn)中的多個(gè)頁面,而某些頁面中的某些元素想使用其他樣本,就可以針對這些樣本單獨(dú)定義某個(gè)樣本表應(yīng)用到頁面中。而之后定義的樣本將會對之前的樣本設(shè)置進(jìn)行重新改寫,所以最后的設(shè)置樣本效果將會在游覽器中所展現(xiàn)。而定義了效果的網(wǎng)頁的網(wǎng)站中會產(chǎn)生大量的標(biāo)簽、會讓頁面的文件大小大大的增加，這是因?yàn)樵谑褂昧薍TML后、需要大多數(shù)FONT形成的大小內(nèi)容不一樣的文字樣本和許多重復(fù)的表格，如果想要大大的減小頁面的體積，那需要將樣本的聲明獨(dú)立的放在一個(gè)CSS的樣本表中,因此在加載頁面時(shí)所浪費(fèi)的時(shí)間也會大大的縮小。此外,CSS樣本表的使用會更大程度的縮小頁面的所占空間,縮短了下載的等待時(shí)間。Web前端的應(yīng)用<1>常用的標(biāo)簽：標(biāo)題標(biāo)簽：h1h2...h6h7換行標(biāo)簽：bradb斜體標(biāo)簽：a/em水平線：hr加粗：abc/strong/空格符：a/ /a;段落標(biāo)簽：<p>123123123123</p>塊元素：<div>獨(dú)占一行行內(nèi)元素<div>所有的標(biāo)簽內(nèi)容在一行列表標(biāo)簽：有序列表ol>li超鏈接:a表示可以跳轉(zhuǎn)到指定的路徑圖片：imgspan標(biāo)簽：可以將文本中的某些字體突出顯示<2>表單標(biāo)簽：/action:表示提交的服務(wù)器地址/method：提交到服務(wù)器的方式http://localhost:63342/實(shí)踐/form表單/res.html?username=abc&pwd=123456?表示后面跟著的是我們輸入的表單里面的參數(shù)=左邊是參數(shù)的類型名稱右邊是參數(shù)的值也是我們輸入到表單里面的內(nèi)容&表示鏈接多個(gè)參數(shù)。get方式提交參數(shù)：（安全性差）地址欄上直接顯示相關(guān)參數(shù)。action:服務(wù)器地址。method：表示數(shù)據(jù)提交到服務(wù)器的方式。查看參數(shù)方式：瀏覽器右鍵》檢查或者鍵盤F12（谷歌瀏覽器）<3>常用的表單元素:type表示輸入框的類型name表示服務(wù)器介紹參數(shù)的依據(jù)password密碼radio單選按鈕select下拉框checkbox復(fù)選框reset重置submit提交表單<4>表格:<table>表格標(biāo)簽<tr>表示行<td>表示列<th>表頭標(biāo)簽<align="center">表示居中顯示加邊框：粗細(xì)是1px虛線綠色例如border:9pxdashed#e16055;Python3.Python環(huán)境配置：（1）環(huán)境變量：Anaconda：點(diǎn)擊計(jì)算機(jī)---右鍵----點(diǎn)擊高級設(shè)置----選擇環(huán)境變量----path選項(xiàng)：編輯----新建選項(xiàng)：E:\anaconda\Anaconda\wwwwin鍵+R打開黑窗口：輸入命令：condalistscrapy（2）pycharm安裝：64bit.py勾選。啟動之后：配置configer----settings--python語法：此次學(xué)習(xí)python語法主要學(xué)習(xí)：了解python、了解python的變量定義、了解運(yùn)算符了解python的變量數(shù)據(jù)類型、了解字符串的表示方法、（1）變量數(shù)據(jù)類型:int、char、浮點(diǎn)型、布爾、日期型等日期類型：獲取當(dāng)前時(shí)間的三種方法：日期類型獲取當(dāng)前時(shí)間引入時(shí)間類庫字符串常用方法：拼接字符型str3=str1+str2+strprint(str3)去除首尾相同字符str4="asdssdsfsdfdsfdsfaza"print(str4.strip('a'))大小寫的轉(zhuǎn)換print(str4.upper())str5="ASDSADASDSA"print(str5.lower())計(jì)算字符串長度print(len(str5))流程控制語句：1.if語句：num=**if(num>**):print("**")elif(num>**):print("**")elif(num>**):print("**")else:print("***")循環(huán)語句：流程控制語句for使用在控制臺上面輸出4-29的整數(shù)foriinrange(4,31):print(i,end="")在控制臺上面輸出20以內(nèi)的整數(shù)foriinrange(20):print(i,end="")互聯(lián)網(wǎng)相關(guān)知識：互聯(lián)網(wǎng)，英文是internet，又稱國際網(wǎng)絡(luò)，屬于傳媒領(lǐng)域。指的是與醫(yī)學(xué)、哲學(xué)、數(shù)學(xué)、工程學(xué)、農(nóng)林學(xué)、海洋學(xué)、地質(zhì)學(xué)、天文學(xué)等相互聯(lián)系在一起的強(qiáng)大世界性網(wǎng)絡(luò)?；ヂ?lián)網(wǎng)是始于1969年美國的阿帕網(wǎng)。這種人們把計(jì)算機(jī)網(wǎng)絡(luò)互相關(guān)聯(lián)在一起的方式可以稱之為“互相網(wǎng)絡(luò)”，在這基礎(chǔ)上延伸出覆蓋全球的世界性的網(wǎng)絡(luò)稱互聯(lián)網(wǎng)，即是相互作用在一起的網(wǎng)絡(luò)巨大集成結(jié)構(gòu)。萬維網(wǎng)簡稱Web是1994年在麻省理工學(xué)院成立的，萬維網(wǎng)是依靠互聯(lián)網(wǎng)運(yùn)行的，而且萬維網(wǎng)是其所能提供的眾多服務(wù)的其中之一。所以萬維網(wǎng)并不強(qiáng)于互聯(lián)網(wǎng)互聯(lián)網(wǎng)的基本優(yōu)勢主要有一下幾點(diǎn)：互聯(lián)網(wǎng)受世界人們所推崇的根本原因在于它的成本不高，其中優(yōu)點(diǎn)如下：互聯(lián)網(wǎng)能夠不受時(shí)間、時(shí)空的限制的來進(jìn)行信息交換?；ヂ?lián)網(wǎng)可以使人與人，人與信息相互交流?；ヂ?lián)網(wǎng)的使用成本較低、可以通過信息交換來替代實(shí)物之間的交換避免了許多現(xiàn)實(shí)的中的麻煩信息交換逐漸趨向于獨(dú)立化、精準(zhǔn)化（也就是可以滿足所有人的精準(zhǔn)需求要求）互聯(lián)網(wǎng)服務(wù)的人數(shù)廣泛、并且涉及每個(gè)領(lǐng)域包括醫(yī)學(xué)、哲學(xué)、數(shù)學(xué)、工程學(xué)、農(nóng)林學(xué)、海洋學(xué)、地質(zhì)學(xué)、天文學(xué)等有利用價(jià)值的信息能被互聯(lián)網(wǎng)說整理、分配，信息儲存維度復(fù)雜、效率高、處理文件速度快實(shí)踐過程登錄界面設(shè)計(jì)：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head> <style> .aaa{ width:350px; text-align:right; } .bbb{ text-align:center; width:350px; } .ccc{ width:350px; margin:0auto; } </style> <body> <divclass="ccc"> <body> <formaction="xuanzhe.html"> <table> <tr> <tdclass="aaa">請輸入用戶名</td> <td><inputtype="text"></td> </tr> <tr> <tdclass="aaa">請輸入密碼</td> <td><inputtype="password"></td> </tr> <tr> <tdcolspan="2"class="bbb"> <inputtype="submit"value="登錄"> </td> </tr> </td> </tr> </table> </form> </body> </div> </body></html>選擇頁面設(shè)計(jì)：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head> <style> p{ text-align:center; } b{ text-align-last:center; } </style> <body> <p><ahref="jisuanqi.html">計(jì)算器</a></p> <p><ahref="denglu.html">退出</a></p> </body></html>計(jì)算機(jī)設(shè)計(jì)：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <linkrel="stylesheet"href="css/kuanjia.css"/> </head> <body> <divclass="zong"> <ahref="denglu.html">退出</a><ahref="xuanzhe.html"><span>返回上一頁</span></a><divclass="tui"> <divclass="xianshi"> <inputclass="xianshi"type="text"value="0"/></div><inputclass="yunsuan"type="button"value="MC"/><inputclass="yunsuan"type="button"value="MR"/><inputclass="yunsuan"type="button"value="MS"/><inputclass="yunsuan"type="button"value="M+"/><inputclass="yunsuan"type="button"value="M-"/><inputclass="yunsuan"type="button"value="←"/><inputclass="yunsuan"type="button"value="CE"/><inputclass="yunsuan"type="button"value="C"/><inputclass="yunsuan"type="button"value="±"/><inputclass="yunsuan"type="button"value="√"/><inputclass="yunsuan"type="button"value="7"/><inputclass="yunsuan"type="button"value="8"/><inputclass="yunsuan"type="button"value="9"/><inputclass="yunsuan"type="button"value="/"/><inputclass="yunsuan"type="button"value="%"/><inputclass="yunsuan"type="button"value="4"/><inputclass="yunsuan"type="button"value="5"/><inputclass="yunsuan"type="button"value="6"/><inputclass="yunsuan"type="button"value="*"/><inputclass="yunsuan"type="button"value="1/x"/><inputclass="yunsuan"type="button"value="1"/><inputclass="yunsuan"type="button"value="2"/><inputclass="yunsuan"type="button"value="3"/><inputclass="yunsuan"type="button"value="-"/><inputclass="ling"type="button"value="0"/><inputclass="duli"type="button"value="."/><inputclass="duli"type="button"value="+"/><inputclass="dengyu"type="button"value="="/> </div> </div> </body></html>淘寶頁面設(shè)計(jì)：} .div2{ width:900px; height:90px; background-color:bisque; margin-left:9px; margin-top:0px; margin:0pxauto; text-align:center; line-height:70px; font-size29px; } .div3{ width:600px; height:490px; background-color:darkturquoise; margin-left:0px; margin-right:25px; margin-top:0px; font-size:49px; text-align:center; line-height:490px;}.div4{ width:350px; height:490px; background-color:lightseagreen; margin-left:600px; margin-right:0px; margin-top:-490px; font-size:29px; text-align:center; line-height:490px;}.div5{ width:90px; height:90px; background-color:darkkhaki; margin-left:90px; margin-right:90px; margin:0pxauto; font-size:29px; text-align:center; line-height:90px;}.div6{ width:350px; height:49px; background-color:brown; margin-left:1px; margin-right:1px; margin-top:9px; font-size:20px; text-align:center; line-height:49px;}.div7{ width:80px; height:90px; background-color:darkseagreen; margin-left:9px; margin-right:9px; margin-top:9px; float:left; font-size:49px; text-align:center; line-height:90px;}.div8{ width:900px; height:90px; background-color:aquamarine; margin-left:0px; margin-right:0px; font-size:49px; text-align:center; line-height:90px; margin-top:0px; font-size:49px; line-height:90px;} </style> <body> <divclass="div1"> <divclass="div2"></div> <divclass="div3"></div> <divclass="div4"> <divclass="div5iconfont">HI</div> <divclass="div6iconfont">淘金幣會員俱樂部!</div> <divclass="div7iconfont"></div> <divclass="div7iconfont"></div> <divclass="div7iconfont"></div> <divclass="div7iconfont"></div> <divclass="div7iconfont"></div> <divclass="div7iconfont"></div> <divclass="div7iconfont"></div> <divclass="div7iconfont"></div> <divclass="div7iconfont"></div> <divclass="div7iconfont"></div> <divclass="div7iconfont"></div> <divclass="div7iconfont"></div> </div> <divclass="div8"></div> </div> </body></html>頁面展示：11111111111111111111111111111111111111111111實(shí)踐體會隨著大數(shù)據(jù)進(jìn)軍著我們的生活，每一天我們都在面臨著大數(shù)據(jù)時(shí)代所帶給我們機(jī)會與挑戰(zhàn)，大數(shù)據(jù)是的存在有利有弊在每天給我們生活帶來便利