每日分享- pycharm 如何進(jìn)行 HTML 網(wǎng)站

每日分享- pycharm 如何進(jìn)行 HTML 網(wǎng)站編程測(cè)試

PyCharm 中進(jìn)行 HTML 網(wǎng)站編程測(cè)試，可以通過(guò)以下的一個(gè)簡(jiǎn)單例子中的步驟來(lái)實(shí)現(xiàn)：

打開(kāi) PyCharm，創(chuàng)建一個(gè)新的項(xiàng)目，并選擇 Flask 作為項(xiàng)目模板。Flask 是一個(gè) Python 的 Web 框架，可以用于編寫(xiě) Web 應(yīng)用程序和 API。
在項(xiàng)目中創(chuàng)建一個(gè)新的 Python 文件，例如 app.py，并添加以下代碼：

from flask import Flask, render_template

app=Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__=='__main__':
    app.run(debug=True)

3. 這個(gè)代碼定義了一個(gè)簡(jiǎn)單的 Flask 應(yīng)用程序，當(dāng)用戶訪問(wèn)網(wǎng)站的根路徑時(shí)，將渲染 index.html 頁(yè)面并返回。

4. 在項(xiàng)目中創(chuàng)建一個(gè)名為 templates 的文件夾，并在其中創(chuàng)建一個(gè)名為 index.html 的文件。這個(gè) HTML 文件可以包含任何你想要測(cè)試的網(wǎng)站內(nèi)容。

5. 運(yùn)行應(yīng)用程序，點(diǎn)擊 PyCharm 右上角的運(yùn)行按鈕，或使用快捷鍵 Shift+F10。在瀏覽器中訪問(wèn) http://localhost:5000，即可查看你的網(wǎng)站內(nèi)容。

6. 在 PyCharm 中進(jìn)行調(diào)試和修改。可以在 app.py 中添加更多的路由和視圖函數(shù)，以及在 index.html 中添加更多的 HTML 和 CSS 代碼，來(lái)測(cè)試你的網(wǎng)站的不同功能和頁(yè)面。

7. 進(jìn)行單元測(cè)試。在 PyCharm 中可以使用 Python 的單元測(cè)試框架，例如 unittest 或 pytest，來(lái)編寫(xiě)和運(yùn)行測(cè)試用例。可以編寫(xiě)測(cè)試用例來(lái)測(cè)試你的網(wǎng)站的不同功能，例如頁(yè)面是否渲染正確，用戶是否可以成功提交表單等等。

通過(guò)以上步驟，在 PyCharm 中可以很方便地進(jìn)行 HTML 網(wǎng)站編程測(cè)試。同時(shí)，也可以使用 PyCharm 提供的其它功能，例如代碼自動(dòng)補(bǔ)全、代碼調(diào)試、版本控制等等，來(lái)提高開(kāi)發(fā)效率。

、摘要

（OF作品展示）

OF之前介紹了用python實(shí)現(xiàn)數(shù)據(jù)可視化、數(shù)據(jù)分析及一些小項(xiàng)目，但基本都是后端的知識(shí)。想要做一個(gè)好看的小系統(tǒng)，我們還要學(xué)一些前端的知識(shí)，今天OF將講解如何用pycharm（全棧開(kāi)發(fā)不錯(cuò)的工具）做一張好看的網(wǎng)頁(yè)，以后我們就可以自己開(kāi)發(fā)網(wǎng)頁(yè)/網(wǎng)站放到互聯(lián)網(wǎng)上。

主要內(nèi)容：網(wǎng)頁(yè)前端布局

適用人群：Python初學(xué)者，前端初學(xué)者

準(zhǔn)備軟件：pycharm

二、pycharm操作說(shuō)明

1. 創(chuàng)建項(xiàng)目

1) 下載完成pycharm, 點(diǎn)擊file-New Project...

2) 按下圖步驟創(chuàng)建一個(gè)項(xiàng)目，目前我們選擇Pure python即可，以后我們可以學(xué)習(xí)用Django/flask等框架來(lái)做完整的系統(tǒng)

2. 創(chuàng)建HTML文件

1）在創(chuàng)建的項(xiàng)目空白處鼠標(biāo)右鍵-New-HTML File

2）輸入英文的網(wǎng)頁(yè)名字，盡量不要輸入中文/特殊字符

3. HTML格式說(shuō)明

當(dāng)雙擊打開(kāi)我們創(chuàng)建后的HTML文件，大家會(huì)看到下面的界面

三、網(wǎng)頁(yè)設(shè)計(jì)

1. 草圖繪制

在開(kāi)始開(kāi)發(fā)網(wǎng)頁(yè)前，我們需要自己設(shè)計(jì)下想要把網(wǎng)頁(yè)做成什么樣，為了節(jié)省成本OF都是自己設(shè)計(jì)的頁(yè)面樣式，可以手繪，也可以在PPT上畫(huà)。

2. css名字定義

我們先學(xué)習(xí)一個(gè)比較簡(jiǎn)單的布局如下圖，大家可以看到下圖已經(jīng)畫(huà)出了我們需要添加的內(nèi)容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字將會(huì)是左右的關(guān)系，而不是上下

四、網(wǎng)頁(yè)開(kāi)發(fā)

1. body部分

根據(jù)上述的css名字定義，先填充<body>內(nèi)的代碼，那么我們就完成一半的工作了，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

2. 網(wǎng)頁(yè)測(cè)試

1）鼠標(biāo)移到代碼處，在右上角我們會(huì)看到一排瀏覽器，我們點(diǎn)擊其中一個(gè)運(yùn)行

2）目前看到的網(wǎng)頁(yè)內(nèi)容從上到下顯示

3. head部分

首先我們簡(jiǎn)要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分將3個(gè)顏色內(nèi)容框在<div id="main">中，運(yùn)行結(jié)果是3個(gè)顏色的內(nèi)容橫向展示了，而不是上下

1）那么我們先從“人物介紹”的布局開(kāi)始，“人物介紹”居中展現(xiàn)（用flex中justify-content:center），而且下面有一條黑線，OF準(zhǔn)備用border樣式來(lái)實(shí)現(xiàn)，所以在<div id=intro>里另加了個(gè)<div class=peo>，代碼如下：

(注：style中的#main對(duì)應(yīng)body中的id=main, .main對(duì)應(yīng)class=main)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }
        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

運(yùn)行結(jié)果：

2）圖片部分是3個(gè)<div class=bord>橫向展示，所以要在框住它們的<div id=pic1>樣式中設(shè)置flex布局，在<style>里加入以下代碼：

#pic1 {
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
}

運(yùn)行結(jié)果：

3）圖片之間靠太近，圖片大小不一致，文字沒(méi)居中，我們?cè)?lt;style>里加入以下代碼：

.bord{
    padding: 1rem 2rem;
}


.img {
    border: 0.2rem solid #e3e3e3;
    max-width: 15rem;
    height: 22rem;
}


.word {
    text-align: center;
}

運(yùn)行結(jié)果：

五、總結(jié)

今天我們學(xué)會(huì)了flex布局，今后所有的網(wǎng)頁(yè)排版都可以實(shí)現(xiàn)了，祝愿大家都有所收獲，完整的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;


        }

        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }

        #pic1 {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }

        .bord{
            padding: 1rem 2rem;
        }

        .img {
            border: 0.2rem solid #e3e3e3;
            max-width: 15rem;
            height: 22rem;
        }

        .word {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

今天的知識(shí)比較基礎(chǔ)但非常實(shí)用，每天學(xué)會(huì)一個(gè)小技能，積少成多，以后就能成為大神。如果大家對(duì)網(wǎng)頁(yè)上的實(shí)現(xiàn)有什么不懂的，盡請(qǐng)留言，OF一定會(huì)一一解答的。

ycharm 支持HTML和CSS，可以為HTML提供完整標(biāo)簽。

1、emmet設(shè)置：用于HTML和CSS的識(shí)別

emmet包括各種功能，包括縮寫(xiě)預(yù)覽、自動(dòng)URL識(shí)別和編輯點(diǎn)，用于HTML和CSS的識(shí)別，設(shè)置方法如下：

2、輸入時(shí)自動(dòng)聯(lián)想補(bǔ)全設(shè)置：

在編寫(xiě)過(guò)程中，發(fā)現(xiàn)不能自動(dòng)聯(lián)想補(bǔ)全，做了如下設(shè)置后解決了該問(wèn)題：

點(diǎn)擊file->settings->Editor->Inspections，選擇HTML，將右側(cè)的Severity設(shè)置為T(mén)ypo

3、JS Toolbox的安裝

在編寫(xiě)過(guò)程中，發(fā)現(xiàn)不能自動(dòng)聯(lián)想補(bǔ)全，做了如下設(shè)置后解決了該問(wèn)題：

點(diǎn)擊file->settings->Plugins，搜索JS Toolbox，點(diǎn)擊Installed，安裝完成之后點(diǎn)擊Apply，再點(diǎn)擊ok，可能會(huì)讓重啟pychram，按照要求重啟pychram就好了。

其實(shí)是在學(xué)習(xí)JS的時(shí)候發(fā)現(xiàn)pychram好像不能自動(dòng)聯(lián)想補(bǔ)全，然后在網(wǎng)上查了一些資料，我這邊是把這三個(gè)都設(shè)置后，就可以自動(dòng)補(bǔ)齊了，還在摸索階段，僅供參考，若不能使用，可留言一起討論[奸笑]

在線咨詢

上一篇：autpoi 1.4.3版本發(fā)布—Excel傻瓜式A
下一篇：不掉頭發(fā)“逆向”旋轉(zhuǎn)驗(yàn)證碼

您的項(xiàng)目需求

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

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

每日分享- pycharm 如何進(jìn)行 HTML 網(wǎng)站

、摘 要

二、pycharm操作說(shuō)明

1. 創(chuàng)建項(xiàng)目

2. 創(chuàng)建HTML文件

3. HTML格式說(shuō)明

三、網(wǎng)頁(yè)設(shè)計(jì)

1. 草圖繪制

2. css名字定義

四、網(wǎng)頁(yè)開(kāi)發(fā)

1. body部分

2. 網(wǎng)頁(yè)測(cè)試

3. head部分

五、總 結(jié)

您的項(xiàng)目需求

、摘要

五、總結(jié)