初识HTML
【摘要】 HTML介绍HTML是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。1，建立（通过flask框架）from flask import Flask,render_template#flask环境配置：pip install flaskapp = Flask(__name__)@app.route("/1")#进入网站后...
HTML介绍
HTML是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
1，建立（通过flask框架）
from flask import Flask,render_template
#flask环境配置：pip install flask
app = Flask(__name__)
@app.route("/1")
#进入网站后需要url后拼接“/1”，
def index():
return render_template("1.html")
#自动返回到templates文件夹内的1.html文件
#html文件需要放在temlates文件夹内
if __name__ == '__main__':
app.run(host="",port=5418)
#host为地址，port为端口利用python建立一个前端网站
2，HTML
HTML网站基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">编码方式
<title>Title</title>网站名
</head>
<body>
网站内容
</body>
</html>标签(body)
块级标签
<h1></h1>~~~<h2></h2>#随着h1的增加，字体变小，该标签单独占一行
<div>自己单独站一整行</div>
行内标签
<span style标签内的格式='color:red'>自己多大</span><span>就占多大</span>
<a></a>
<img />
标签可以结合使用超链接
<a href="URL"></a>跳转到其他网站
<a href="URL" target="_blank"></a>通过新标签跳转到其他网站
<a href="/xxx/xxx"></a>跳转到templates下的网站，
eg：1.html图片
<img src="图片URL"/>添加其他网站的图（小心防盗链）
<img src="/static/图片"/>添加自己的图片，需要先建立static文件夹
<img src="URL" style="height:111px; width:222px"/>
px为像素
<img src="URL" style="height:11%; width:22%"/>
缩减到原来的%xx
<a></a>与<img />结合可建立超链接图片
eg：<a href="URL" target="_blank"> <img src="URL" style=""/> </a>列表及表格
列表：
无序排列
<u1>
<1i>1</1i>
<1i>2</1i>
<1i>3</1i>
</u1>
有序排列（前面带数字）
<ol>
<1i>1</1i>
<1i>2</1i>
<1i>3</1i>
</ol>
表格：
<table border="1">边框
<thead>表头
<tr> <th>1</th> <th>2</th> <th>3</th> </tr>tr：一行，th：一列
</thead>
<tbody>内容
<tr> <td>1</td> <td>2</td> <td>3</td> </tr>
</tbody>
</table>
表格实例：
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>头像</th>
<th>性别</th>
<th>生日</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>派蒙</td>
<td>
<a href="https://baike.baidu.com/item/%E6%B4%BE%E8%92%99/22793938">
<img src="/static/派蒙.png" style="width: 50px">
</a>
</td>
<td>女</td>
<td>6月1日</td>
<td>蜜酱胡萝卜煎肉</td>
</tr>
</tbody>
</table>input
</table>
<input type="text" /> 输入框
<input type="password" /> 密码输入框
<input type="file" /> 文件选择
<input type="radio" name="n1"/>豆腐脑是甜的
<input type="radio" name="n1"/> 豆腐脑是咸的
<input type="checkbox" /> 唱
<input type="checkbox" /> 跳
<input type="checkbox" /> rap
<input type="checkbox" /> 篮球
<input type="button" value="yes" /> 普通按钮
<input type="submit" value="yes" /> 可以提交数据的按钮，与<form>结合使用下拉框及多行文本
下拉框：
单选下拉框
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
多选下拉框
<select multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
多行文本：
<textarea rows="3"></textarea>rows为输入框高度表单与提交
python
from flask import Flask,render_template, request
app = Flask(__name__)
@app.route('/first',methods=['POST','GET'])
def first():
if request.method=="GET":
return render_template("2.heml")
else:
user = request.form.get("user")
password = request.form.get("password")
a = request.form.get("性别")
b = request.form.get("爱好")
c = request.form.get("梦想")
d = request.form.get("自我介绍")
print(user,password,a,b,c,d,end='\n')
print(request.args)
return render_template("1.html")
#@app.route('/first',methods=['GET'])#限制仅为get请求进入
@app.route("/nixt",methods=['POST'])#限制仅为post请求进入
def nixt():
print(request.form)
return render_template("2.html")
@app.route("/user")
def user():
return render_template("user.html")html（post与get提交）
<body>
<div>
<form method="get" action="/first">
<div>
user <input type="text" name="user"/>
<div/>
<div>
password<input type="text" name="password"/>
</div>
<div>
<input type="radio" name="xingbie" value="男"/>男
<input type="radio" name="xingbie" value="女"/>女
</div>
<input type="submit" value="登录">
</form>
</div>
<div>
<form method="post" action="/nixt">
user <input type="text" name="user"/>
password<input type="text" name="passwprd"/>
<input type="submit" value="登录"/>
</form>
</div>
</body>
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）