前言
本來是最近在學flask想寫點關於flask框架的博客，但是隨着學校開始網課，也要開始學java的web應用開發。所以今天就同時開了兩個專欄，打算同時更新吧。今天呢，就先來聊聊html相關的簡單知識。
正文
其實不管是之前搞爬蟲，還是學flask或者是學js，都離不開和html打交道，所以多多少少對它也有一定的瞭解，這一次就正式來總結一下。
1.html基本框架
html是超文本標記語言 (Hyper Text Markup Language)
打開webstorm隨便新建一個html文件（html5），就可以看到一個標準html的基本框架，首先是申明html文件，然後所有內容都在html標籤中，包含head和body。
當然就用pycharm或者IDEA新建html文件是一樣的效果，如果不是專業的前端開發，只是爲了寫點簡單的html的話也不需要另外下webstorm啦。
2.html的標籤
html標籤呢是html的基本單位，也不區分大小寫，一般是成對出現，但是也有單獨出現的比如：鏈接標籤
3.常用的html標籤和例子
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.列表和表單
這部分可能看着有點多，但是其實是很簡單的。提一下，今天下午寫flask提交表單上傳文件，有個地方不知道爲什麼，一個類繼承的只能是wtforms的Form，FileField才能正常使用FileAllowed進行文件格式指定，繼承flask_wtf的FlaskForm就一直檢驗是錯誤文件格式。到時候flask專欄寫道我會着重強調。
好，回到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.表格、樣式
這是最後的兩部分了，同樣來個例子你們體會一下
<!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和span都是分一塊空間，今後用到的時候再舉例吧。額，算了（拒絕下次一定），拿個今天寫的簡單例子吧
<!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)
這就是用div標籤開一塊空間給表單，裏面的樣式由上面的css定義
結尾
其實html基礎知識並不多，學起來很快的，這也是爲什麼現在好多人想去學前端而不是後端開發。後端太多的業務邏輯還有各種異常要處理，前端相對來說會輕鬆一點。當然，這個博客只能算入門，之後我會慢慢更新的。