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

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

適當?shù)負Q行

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

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

合理使用各種表達式

鏈式調用寫法

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

什么學習HTML？

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

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

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

HTML學習難度與重要性

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

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

對比起來，HTML的學習難度最低，但作用是最重要的，因為一切頁面的基礎是內容，沒有內容，樣式與交互都不存在。

認識HTML基本結構

第一行 <!DOCTYPE HTML>

第二行 <html>

第三行 <head>

第四行 </head>

第五行 <body>

第六行 </body>

第七行 </html>

以上七行代碼是一個網(wǎng)頁文件的HTML代碼的基本結構。

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

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

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

第三行與第四行組成一對，叫做“head”標簽。顧名思義，這個“頭”標簽里的內容統(tǒng)領全局，比如控制布局與樣式的CSS代碼文件和添加互動功能的JavaScript代碼文件在這里添加或導入；搜索頁面用的關鍵詞信息在這里添加；頁面信息的編碼方式也是由此指定；瀏覽器窗口的標題也在這里顯示。

第五行與第六行組成一對，叫做“body”標簽。用來顯示所有的頁面內容信息。

畫個圖來表示一下這四個標簽的層級關系（就是誰包含誰的意思，或者誰在誰的勢力范圍內出現(xiàn)）：

邊學邊練------寫一個最簡單的頁面

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

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

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

Step1 新建一個.txt文件。

操作如下：

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

（2）在空白處點擊鼠標右鍵新建一個文本文件，命名為“第一個頁面”。這時我們就有了一個“第一個頁面.txt”文件了。

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

圖 2

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

圖 3

點擊“查看”，去掉“隱藏已知文件類型的擴展名”選項前的“對號”，如圖4所示。這時就能顯示或修改文件后綴了。

圖 4

Step2 添加內容

（1）雙擊打開“第一個頁面.txt”文件，把HTML基本結構共七行代碼輸入進去。

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

圖 1

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

我們雙擊這個文件發(fā)現(xiàn)瀏覽器內一片空白，這就好比我們在桌子上擺了個碟子，里面并沒有放美食。瀏覽器中的一片白就是空碟子的顏色，而HTML基本結構就是這個碟子。

下面我們往碟子里加點東西。

Step3 添加內容

（1）在“第一個頁面.html”文件上點擊鼠標右鍵，選擇“打開方式”，選擇“記事本”，如果沒有“記事本”選項，請點擊“選擇其他應用”，點擊選擇最下面的“更多應用”，選擇“記事本”。下一次選擇“打開方式”時，“記事本”就會出現(xiàn)了。

（2）在<head></head>標簽之間添加“<title>學習寫第一個網(wǎng)頁</title>”。在<body></body>之間添加“<h1>第一個網(wǎng)頁</h1>”；“<p>隨著學的內容越來越多，網(wǎng)頁就會越來越漂亮了！</p>”完成如圖5

圖 5

（3）保存，關閉，雙擊打開！效果如圖6

圖6

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

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

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

這個系列基于 pywebio 的一系列實戰(zhàn)應用，讓我們從實戰(zhàn)中學習這個庫的使用！

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

你的點贊、收藏是對我的最大鼓勵！

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

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

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

安裝庫：

pip install -U pywebio

輸出文本

先輸出一段內容試試效果：

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：導入需要的東西，其中 pywebio.output 是用來輸出內容相關操作
行4：定義一個函數(shù)，名字隨意
行5：put_html 這個函數(shù)就是行2導入的 output 模塊的操作，用來輸出 html 內容
行9：啟動服務。這大部分是樣板代碼(就是每次都一樣的)。特別重要的是第一個參數(shù)，就是我們定義的函數(shù)名字(注意并沒有執(zhí)行，只是傳入)

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

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

這還好，pywebio 還支持 markdown：

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

輸入操作

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

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

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

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

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

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

看看效果：

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

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

有了文件內容，我們用 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("""
- 選擇文件
- 自動加載輸出表格一部分內容
    """)

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

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

看看效果：

重點

最終的代碼如下：

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("""
- 選擇文件
- 自動加載輸出表格一部分內容
    """)

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

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

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商