記事のディレクトリ
序文
もともとフレームワーク学校フラスコ内フラスコについて最近ブログを書きたかったが、学校のクラスのネットワークの開始と、だけでなく、JavaのWebアプリケーション開発を学ぶようになりました。今日は同時に、2つの列を開けながら、私たちはそれを更新していきます。今日では、最初に関連する簡単なHTMLの知識について話をします。
テキスト
実際には、係爬虫類の前か、またはフラスコを学ぶか、JSを学ぶ、それは多かれ少なかれ一定の理解を持っているので、今回は正式にまとめるために、切っても切れないとhtmlに対処するためです。
1.html基本的な枠組み
HTMLはHTML（ハイパーテキストマークアップ言語）で
オープンwebstormちょうど新しいhtmlファイル（HTML5）を作成、あなたが含まれ、標準的なHTMLの基本的な枠組み、最初に述べたhtmlファイル、およびHTML]タブで、その後のすべてを見ることができます頭と体。
もちろん、新しいIDEAのpycharmまたはHTMLファイルと同じ効果があり、プロのフロントエンド開発されていない場合は、単に書き込み何か簡単なのHTMLに、そしてwebstormの友人の下に別のものを必要としません。
2.htmlラベル
HTMLタグは通常、ペアでHTMLの基本単位で、大文字と小文字を区別しない、であるが、このようなとして単独が現れる：リンクラベル
一般的に使用されるHTMLタグの3例と
1.基本ラベル
これは一例に非常に単純ではありません
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是html的基础标签演示</title>
</head>
<body>
<h1>h1用来写大标题，一般只出现一次</h1>
<h2>这个是h2，比h1小</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>最小的是h6,没有h7哦</h6>
下面我们用hr标签画一条水平线分隔一下
<hr>
<p>我们开始用p标签写一段文章，啦啦啦啦</p>
<p>这是另一段，会分段哦</p>
写的好累，想说一句话<br>这是用了br标签换一行说的
<!--我还能学，趁没人看见赶快注释掉，我还想多留点头发呢-->
</body>
</html>
2.ラベルフォーマット、画像タグやリンクタグ
この絵は、コードの内部を見ることができなかった、それは私が、次の例のように見える問題ではありません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>格式标签 图像标签 链接标签</title>
</head>
<body>
<em>emmm,用em斜体写点什么呢</em><br>
<b>还是用b着重加粗强调一下吧</b><br>
<small>网课的平台好卡，又不敢大声说只能small悄悄小写了</small><br>
<b>不过一般更多都是用css来改变样式什么的啦，这个简单了解一下就行，反正不难记</b><br>
<hr>
什么，觉得太无聊了？给你看看我女朋友呗<br>
<img src="./5882b2b7d0a20cf4bf0e134d7d094b36adaf9982.jpg",alt="这是我女朋友的照片"><br>
<small>要是还无聊，给你推荐个有趣的人吧，点击下面链接去看他主页哦</small><br>
<a href="https://me.csdn.net/shelgi" target="_blank">这是一个有趣的小哥哥</a>
</body>
</html>
3.リストとフォーム
この部分はもう少しように見えますが、実際には非常に簡単であるかもしれません。道、ファイルをアップロードするためのフォームを提出したフラスコの書き込みには、この日の午後は、ファイル形式のため、通常の使用FileAllowedにFileFieldにを指定継承のみ、フォームのwtformsというクラスは、FlaskFormの継承flask_wtfが間違ったファイルをテストしてきた理由は、私にはわからないところがありますフォーマット。時間によって私は強調し、その列のフラスコを書きました。
まあ、HTMLに戻って、または例と同じ程度の書き込み
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表和表单</title>
</head>
<body>
<b>首先来看看列表</b><br>
我的爱好(用无序列表)
<ul>
<li>篮球</li>
<li>唱歌</li>
<li>编程</li>
<li>好看的小姐姐</li>
</ul>
把大象装进冰箱要几步?(用有序列表)
<ol>
<li>打开冰箱门</li>
<li>把大象塞进去</li>
<li>关上冰箱门</li>
</ol>
大概讲讲ML吧(用定义列表)
<dl>
<dt>分类问题</dt>
<dd>knn</dd>
<dd>svm</dd>
<dt>聚类问题</dt>
<dd>kmeans</dd>
<dd>系统聚类</dd>
<dt>回归问题</dt>
<dd>线性回归</dd>
<dd>非线性回归</dd>
</dl>
<hr>
<b>再来看看表单</b>
<form action="">
<label>用户名</label>
<input type="text" placeholder="请输入用户名"><br><br>
<label>密码</label>
<input type="password" placeholder="请输入密码"><br><br>
<label>个人简介</label><br>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br><br>
<label>性别</label>
<select name="" id="">
<option value="男">男生</option>
<option value="女">女生</option>
</select>
<br> <br>
<input type="submit" value="提交">
</form>
</body>
</html>
4.フォーム、スタイル
これは、あなたの好みには2つの部分、同じ例の最後です
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格 样式</title>
<style>
table{
color:red;
font-size: 30px;
}
</style>
</head>
<body>
<table border="1">
<caption>我的生活</caption>
<tr>
<td>聊天</td>
<td>上分</td>
<td>录视频</td>
<td>评论区与人拼手速</td>
</tr>
<tr>
<td>吃饭</td>
<td>刷B站</td>
<td>听网课</td>
<td>敲代码</td>
<td>看手机</td>
</tr>
<tr>
<td>睡觉</td>
<td>看书</td>
<td>敲代码</td>
<td>写博客</td>
</tr>
</table>
</body>
</html>
それの別の例で使用した場合のdivとスパンは、将来的には、サブスペースです。量は、（次回はお断りします）忘れて、今日それを書くために、簡単な例を取ります
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask_WTF表单验证</title>
<style type="text/css">
.div1{
height: 180px;
width: 380px;
border: 1px solid #8A8989;
margin: 0 auto;
}
.input{
display: block;
width: 350px;
height: 40px;
margin: 10px auto;
}
.button{
background: #2066c5;
color: white;
font-size: 18px;
font-weight: bold;
height: 50px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="div1">
<form action="login" method="post">
{{ form.hidden_tag() }}
{{ form.name(size=16,id="name",class="input") }}
{% for e in form.name.errors %}
<span style="color:red">{{ e }}</span>
{% endfor %}
{{ form.password(size=16,id="password",class="input") }}
{% for e in form.password.errors %}
<span style="color:red">
{{ e }}
</span>
{% endfor %}
<input type="submit" value="登陆" class="input button">
</form>
</div>
</body>
</html>
from flask import Flask,flash
from flask import url_for,render_template
from form import BaseLogin
import config
app=Flask(__name__)
app.config.from_object(config)
@app.route('/login',methods=['GET','POST'])
def baselogin():
form=BaseLogin()
if form.validate_on_submit():
flash(form.name.data+'|'+form.password.data)
return "表单数据提交成功!"
else:
return render_template('WTF表单验证index.html',form=form)
@app.route('/')
def hello():
return "hello"
if __name__ == '__main__':
app.run(debug=True)
これは、上記のCSSスタイルによって定義されるフォームにdivタグ、とのオープンスペースです
エンディング
実際には、多くのないHTMLの基礎知識、多くの人々が今の代わりにバックエンド開発のフロント学びたい理由である、すぐに学びます。異常の様々な対処するためにあまりにも多くのバックエンドのビジネス・ロジックがありますが、フロントエンドは比較的少し楽になります。もちろん、これは唯一、私はゆっくり更新します、ブログエントリ考えることができます。
