一手漂亮的javascript就是這么煉成的！

要在代碼中留大段注釋掉的代碼

適當(dāng)?shù)負(fù)Q行

適當(dāng)?shù)奶砑幼⑨專灰偪竦奶砑幼⑨?/h1>
對(duì)一段代碼或者一行特別需要注意的代碼注釋
不要瘋狂的注釋，太啰嗦，漂亮的代碼自己會(huì)說(shuō)話

將類似行為、命名的代碼歸類在一起

合理使用各種表達(dá)式

鏈?zhǔn)秸{(diào)用寫法

歡迎小伙伴們關(guān)注討論技術(shù)問(wèn)題，今天的問(wèn)題是你還覺(jué)得怎么寫怎么更優(yōu)雅，包括框架代碼也可以。

什么學(xué)習(xí)HTML？

理解HTML代碼是制作網(wǎng)頁(yè)的基本技能。在互聯(lián)網(wǎng)高度發(fā)達(dá)的今天，網(wǎng)頁(yè)制作技術(shù)開(kāi)始變的和修圖、處理視頻一樣重要。

第一，學(xué)會(huì)制作網(wǎng)頁(yè)就可以把自己想要展示的信息讓其他人使用瀏覽器觀看，無(wú)論是文字、照片還是視頻都可以通過(guò)瀏覽器觀看，甚至是分享自己制作的小游戲。

第二，理解網(wǎng)頁(yè)運(yùn)行的基本原理后可以更好的瀏覽他人的網(wǎng)頁(yè)，尋找有用信息，更合理的使用第三方工具，簡(jiǎn)單高效的制作自己的網(wǎng)頁(yè)。

HTML學(xué)習(xí)難度與重要性

HTML代碼本身非常容易理解，使用也非常簡(jiǎn)單，但是單純使用HTML代碼寫出的網(wǎng)頁(yè)效果和我們平時(shí)看到的網(wǎng)頁(yè)相差甚遠(yuǎn)。要想做出一個(gè)漂亮的頁(yè)面，我們還需要CSS和JavaScript的幫助。

HTML、CSS、JavaScript這些不同的代碼都有什么作用呢？簡(jiǎn)單來(lái)說(shuō)，HTML代碼可以為網(wǎng)頁(yè)提供基本內(nèi)容，比如文字、圖片、音樂(lè)、視頻等。CSS代碼可以為頁(yè)面安排布局，比如標(biāo)題的位置、字體、顏色、大小等，籠統(tǒng)的說(shuō)就是為HTML代碼添加的內(nèi)容增加樣式信息，例如修改位置、尺寸、顏色等屬性。JavaScript代碼可以為頁(yè)面提供交互（互動(dòng)）功能，例如通過(guò)按鈕控制頁(yè)面內(nèi)容的隱藏、出現(xiàn)，或者為多張圖片添加輪播功能等。

對(duì)比起來(lái)，HTML的學(xué)習(xí)難度最低，但作用是最重要的，因?yàn)橐磺许?yè)面的基礎(chǔ)是內(nèi)容，沒(méi)有內(nèi)容，樣式與交互都不存在。

認(rèn)識(shí)HTML基本結(jié)構(gòu)

第一行 <!DOCTYPE HTML>

第二行 <html>

第三行 <head>

第四行 </head>

第五行 <body>

第六行 </body>

第七行 </html>

以上七行代碼是一個(gè)網(wǎng)頁(yè)文件的HTML代碼的基本結(jié)構(gòu)。

大家觀察一下可以發(fā)現(xiàn)一個(gè)規(guī)律，每一行的內(nèi)容都是寫在“<>”里面的。原因說(shuō)來(lái)話長(zhǎng)，先記住就行。每個(gè)寫在“<>”里面的內(nèi)容叫做“標(biāo)簽”。以后“標(biāo)簽”這個(gè)詞會(huì)經(jīng)常出現(xiàn)。

第一行<!DOCTYPE HTML>標(biāo)簽指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫的指令（這句話可以暫時(shí)不必理解）。重要的是這句傲嬌的代碼只能存在在HTML代碼的第一行！

第二行<html>標(biāo)簽與第七行的</html>標(biāo)簽是一對(duì)，“<html>”叫做開(kāi)始標(biāo)簽，“</html>”叫做結(jié)束標(biāo)簽。他們之間的區(qū)別在于結(jié)束標(biāo)簽比開(kāi)始標(biāo)簽多一個(gè)“/”。這是HTML代碼的一個(gè)重要規(guī)律，以后我將要學(xué)到的大部分標(biāo)簽都是這樣的，可能瀏覽器有些強(qiáng)迫癥吧，如果沒(méi)有結(jié)束標(biāo)簽它會(huì)很不舒服，有可能會(huì)消極怠工而產(chǎn)生麻煩（不能正常顯示）。不過(guò)遺憾的是<!DOCTYPE HTML>太傲嬌，至今沒(méi)有另一半。<html> 與 </html> 標(biāo)簽限定了文檔的開(kāi)始點(diǎn)和結(jié)束點(diǎn)。

第三行與第四行組成一對(duì)，叫做“head”標(biāo)簽。顧名思義，這個(gè)“頭”標(biāo)簽里的內(nèi)容統(tǒng)領(lǐng)全局，比如控制布局與樣式的CSS代碼文件和添加互動(dòng)功能的JavaScript代碼文件在這里添加或?qū)耄凰阉黜?yè)面用的關(guān)鍵詞信息在這里添加；頁(yè)面信息的編碼方式也是由此指定；瀏覽器窗口的標(biāo)題也在這里顯示。

第五行與第六行組成一對(duì)，叫做“body”標(biāo)簽。用來(lái)顯示所有的頁(yè)面內(nèi)容信息。

畫個(gè)圖來(lái)表示一下這四個(gè)標(biāo)簽的層級(jí)關(guān)系（就是誰(shuí)包含誰(shuí)的意思，或者誰(shuí)在誰(shuí)的勢(shì)力范圍內(nèi)出現(xiàn)）：

邊學(xué)邊練------寫一個(gè)最簡(jiǎn)單的頁(yè)面

正所謂萬(wàn)丈高樓平地起，下面我們就動(dòng)手做我們的第一個(gè)網(wǎng)頁(yè)文件。

工具：電腦，安裝一個(gè)瀏覽器（IE 火狐谷歌瀏覽器都可以），確定“記事本”工具可用。

有了以上工具我們就可以寫了。

Step1 新建一個(gè).txt文件。

操作如下：

（1）選擇合適的磁盤，比如D盤或F盤新建一個(gè)文件夾，命名為“網(wǎng)頁(yè)”。點(diǎn)擊進(jìn)入。

（2）在空白處點(diǎn)擊鼠標(biāo)右鍵新建一個(gè)文本文件，命名為“第一個(gè)頁(yè)面”。這時(shí)我們就有了一個(gè)“第一個(gè)頁(yè)面.txt”文件了。

如果你的電腦不顯示“.txt”這樣的文件后綴，可以在屏幕左上方尋找“查看”菜單，如圖2

圖 2

點(diǎn)擊后，出現(xiàn)如下菜單如圖3，點(diǎn)擊“選項(xiàng)”。

圖 3

點(diǎn)擊“查看”，去掉“隱藏已知文件類型的擴(kuò)展名”選項(xiàng)前的“對(duì)號(hào)”，如圖4所示。這時(shí)就能顯示或修改文件后綴了。

圖 4

Step2 添加內(nèi)容

（1）雙擊打開(kāi)“第一個(gè)頁(yè)面.txt”文件，把HTML基本結(jié)構(gòu)共七行代碼輸入進(jìn)去。

（2）保存，關(guān)閉文件，在“第一個(gè)頁(yè)面.txt”文件上點(diǎn)擊鼠標(biāo)右鍵，選擇“重命名”，將“.txt”修改為“.html”。這時(shí)，系統(tǒng)會(huì)提示，如圖1，大膽點(diǎn)“是”。

圖 1

這時(shí)我們的文件就變成了html網(wǎng)頁(yè)文件了。

我們雙擊這個(gè)文件發(fā)現(xiàn)瀏覽器內(nèi)一片空白，這就好比我們?cè)谧雷由蠑[了個(gè)碟子，里面并沒(méi)有放美食。瀏覽器中的一片白就是空碟子的顏色，而HTML基本結(jié)構(gòu)就是這個(gè)碟子。

下面我們往碟子里加點(diǎn)東西。

Step3 添加內(nèi)容

（1）在“第一個(gè)頁(yè)面.html”文件上點(diǎn)擊鼠標(biāo)右鍵，選擇“打開(kāi)方式”，選擇“記事本”，如果沒(méi)有“記事本”選項(xiàng)，請(qǐng)點(diǎn)擊“選擇其他應(yīng)用”，點(diǎn)擊選擇最下面的“更多應(yīng)用”，選擇“記事本”。下一次選擇“打開(kāi)方式”時(shí)，“記事本”就會(huì)出現(xiàn)了。

（2）在<head></head>標(biāo)簽之間添加“<title>學(xué)習(xí)寫第一個(gè)網(wǎng)頁(yè)</title>”。在<body></body>之間添加“<h1>第一個(gè)網(wǎng)頁(yè)</h1>”；“<p>隨著學(xué)的內(nèi)容越來(lái)越多，網(wǎng)頁(yè)就會(huì)越來(lái)越漂亮了！</p>”完成如圖5

圖 5

（3）保存，關(guān)閉，雙擊打開(kāi)！效果如圖6

圖6

今天的邊學(xué)邊做就到這里，下一次會(huì)詳細(xì)解釋<head>標(biāo)簽、<body>標(biāo)簽中常出現(xiàn)的子標(biāo)簽以及它們各自的作用。

第二篇《邊學(xué)邊做網(wǎng)頁(yè)篇——<head>標(biāo)簽里裝點(diǎn)啥？》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479

面的制作一直是 Python 的痛！使用 Python 制作桌面端界面是非常痛苦的過(guò)程(又難學(xué)又難看)。不過(guò)，Python 已經(jīng)出現(xiàn)了幾個(gè)基于web前端的庫(kù)，他們的基本機(jī)制大同小異，如果對(duì) 界面操作性沒(méi)有太大要求，那么這些庫(kù)就比較適合你 。

這個(gè)系列基于 pywebio 的一系列實(shí)戰(zhàn)應(yīng)用，讓我們從實(shí)戰(zhàn)中學(xué)習(xí)這個(gè)庫(kù)的使用！

如果對(duì)你有幫助，記得轉(zhuǎn)發(fā)推薦給你的好友！

你的點(diǎn)贊、收藏是對(duì)我的最大鼓勵(lì)！

本節(jié)源碼回復(fù)"pywebio"即可獲取

本節(jié)最終效果動(dòng)圖：

選擇 excel 文件
輸出文件第一個(gè)工作表的數(shù)據(jù)(DataFrame)

安裝庫(kù)：

pip install -U pywebio

輸出文本

先輸出一段內(nèi)容試試效果：

import pywebio
import pywebio.output as output

def main():
    output.put_html('表格顯示程序')


if __name__=='__main__':
    pywebio.start_server(main, port=8080, debug=True, cdn=False,auto_open_webbrowser=True)

行1，2：導(dǎo)入需要的東西，其中 pywebio.output 是用來(lái)輸出內(nèi)容相關(guān)操作
行4：定義一個(gè)函數(shù)，名字隨意
行5：put_html 這個(gè)函數(shù)就是行2導(dǎo)入的 output 模塊的操作，用來(lái)輸出 html 內(nèi)容
行9：?jiǎn)?dòng)服務(wù)。這大部分是樣板代碼(就是每次都一樣的)。特別重要的是第一個(gè)參數(shù)，就是我們定義的函數(shù)名字(注意并沒(méi)有執(zhí)行，只是傳入)

執(zhí)行這段腳本，如無(wú)意外你的瀏覽器就啟動(dòng)了一頁(yè)，地址是 http://localhost:8080 ：

如果你不熟悉 html 的各種標(biāo)簽，你可能連基本的排版都做不到。

這還好，pywebio 還支持 markdown：

def main():
    output.put_markdown('# 表格顯示程序')
    output.put_markdown('功能如下：')
    output.put_markdown("""
- 選擇文件
- 自動(dòng)加載輸出表格一部分內(nèi)容
    """)

輸入操作

只有輸出操作是滿足不了需求，界面上很多輸入操作。

選擇文件就是一種輸入操作(用戶輸入內(nèi)容到界面上)：

import pywebio
import pywebio.output as output
import pywebio.input as input

def main():
    output.put_markdown('# 表格顯示程序')
    output.put_markdown('功能如下：')
    output.put_markdown("""
- 選擇文件
- 自動(dòng)加載輸出表格一部分內(nèi)容
    """)

    file = input.file_upload('選擇一個(gè)excel文件','.xlsx')

行3：導(dǎo)入輸入操作模塊
行13：使用 file_upload 用來(lái)讓用戶選擇文件上傳。第一個(gè)參數(shù)是提示內(nèi)容，第二個(gè)參數(shù)是限定文件后綴名
用戶選擇的文件將會(huì)賦值到變量 file

看看效果：

點(diǎn)擊右邊的"Browse"按鈕，即可從彈窗中選擇excel文件。

點(diǎn)擊提交按鈕后，之前的代碼就會(huì)繼續(xù)往下執(zhí)行。

有了文件內(nèi)容，我們用 pandas 讀取：

import pywebio
import pywebio.output as output
import pywebio.input as input
import pandas as pd

def main():
    output.put_markdown('# 表格顯示程序')
    output.put_markdown('功能如下：')
    output.put_markdown("""
- 選擇文件
- 自動(dòng)加載輸出表格一部分內(nèi)容
    """)

    file = input.file_upload('選擇一個(gè)excel文件','.xlsx')
    df = pd.read_excel(file['content'])
    output.put_html(df.head(10).to_html())

行15：通過(guò) file['content'] 獲取文件內(nèi)容。
行16：df.to html() 就能生成完整的表格 html ，然后用 put html 輸出即可

看看效果：

重點(diǎn)

最終的代碼如下：

import pywebio
import pywebio.output as output
import pywebio.input as input
import pandas as pd

def main():
    output.put_markdown('# 表格顯示程序')
    output.put_markdown('功能如下：')
    output.put_markdown("""
- 選擇文件
- 自動(dòng)加載輸出表格一部分內(nèi)容
    """)

    file = input.file_upload('選擇一個(gè)excel文件','.xlsx')
    df = pd.read_excel(file['content'])
    output.put_html(df.head(10).to_html())

所有的input操作代碼，都會(huì)等待界面操作完畢才會(huì)往下執(zhí)行。例如行14 file_upload 會(huì)一直卡住，直到界面上點(diǎn)擊 "提交" 按鈕
按照上面的流程，這個(gè)函數(shù)將會(huì)執(zhí)行完畢。如果希望重新執(zhí)行一次，只需要刷新一下瀏覽器的頁(yè)面

只是加載數(shù)據(jù)太沒(méi)趣了？下一節(jié)將進(jìn)一步改進(jìn)，加載數(shù)據(jù)后可以對(duì)數(shù)據(jù)查詢

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商