Article Directory
Foreword
Originally wanted to write blog recently about the flask in the framework school flask, but with the start of school class network, but also began to learn the java web application development. So while today opened two columns, at the same time we intend to update it. Today it, on the first to talk about simple html knowledge related.
text
In fact, whether before engaging reptiles, or learn flask or learn js, are inseparable and html to deal with, so it more or less have a certain understanding, this time officially to sum up.
1.html basic framework
html is the HTML (Hyper Text Markup Language)
open webstorm just create a new html file (html5), you can see the basic framework of a standard html, first stated html file, and then everything in html tab, includes head and body.
Of course, with the new IDEA pycharm or html file is the same effect, if not a professional front-end development, just to write something simple html, then do not need another under webstorm friends.
2.html label
html tags it is the basic unit of html, not case-sensitive, usually in pairs, but there appear alone such as: link label
3. Examples of commonly used html tags and
1. Basic Label
It is not very simple to example
<!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. Label format, image tags and link tags
This picture could not see inside the code, it does not matter I look like the following example
<!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. List and Forms
This part might look a bit more, but in fact is very simple. The way, this afternoon to write flask submit the form to upload files, there is a place I do not know why, a class that inherits only wtforms of Form, designated FileField to normal use FileAllowed for file format, inherited flask_wtf of FlaskForm has been testing the wrong file format. By the time I wrote that column flask emphasized.
Well, back to html, or write about the same as example
<!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. The form, style
This is the last of two parts, the same example to your taste
<!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 and span are a sub-space, in the future, when used in another example of it. Amount, forget (refuse next time), take a simple example to write it today
<!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)
This is an open space with a div tag to the form, which is defined by the above css style
end
In fact, not many html basics, learn quickly, which is why many people now want to learn front instead of the back-end development. There are too many back-end business logic to deal with a variety of abnormalities, the front end will be relatively little easier. Of course, this can only be considered blog entry, then I will slowly update.
