HTML详细教程
文章目录
- 前言
- 一、快速开发网站最简模板
- 二、HTML标签
- 1.编码
- 2.title
- 3.标题
- 4.div和span
- 5.超链接
- 6.图片
- 7.列表
- 8.表格
- 9.input系列
- 10.下拉框
- 11.多行文本
- 三、GET方式和POST方式
- 1.GET请求
- 2.POST请求
前言
HTML的全称为超文本标记语言，是一种标记语言，是网站开发前端的一部分。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。且HTML与编程语言无关，是一门独立的语言。本篇博客将介绍HTML的基本内容。
一、快速开发网站最简模板
- 在Terminal中输入
pip install flask - 主要内容：
- 在Pycharm中创建.py文件，不用HMTL文件
from flask import Flask,render_templateapp = Flask(__name__)#创建了/show/info网址和index的对应关系
#以后用户在浏览器上访问该网址，网站自动执行index
@app.route("/show/info")
def index():return "中国联通"if __name__ == '__main__':app.run()
- 在Pycharm中创建.py文件，且用HMTL文件（存放在template文件夹中）
.py文件
from flask import Flask,render_templateapp = Flask(__name__)#创建了/show/info网址和index的对应关系
#以后用户在浏览器上访问该网址，网站自动执行index
@app.route("/show/info")
def index():#return "中国联通"#默认去当前项目目录下的templates文件夹中找indexreturn render_template("index.html")if __name__ == '__main__':app.run()
.html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的国家</title>
</head>
<body><h1>中国</h1>
</body>
</html>
文件布局：
- 运行后即可得到网址，加上/show/info即可访问
二、HTML标签
1.编码
<meta charset="UTF-8">
2.title
- 功能：表示网站的名字
- 只在head里面
<title>我的国家</title>
3.标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
4.div和span
- 功能：实现划分板块
- div：一个占一整行，块级标签
- span：自己多大占多少，行内标签，内联标签
- 可以进行嵌套
<div>内容</div>
<span>内容</span>
5.超链接
- 功能：实现网站跳转
- 跳转到别人网站：网址必须全
- 跳转到自己网站：可以不需要前缀，比如：“/get/news”
<a href="网站">内容</a>
6.图片
- 如果是自己的图片，要把图片放在static文件夹（自己创建）中
- 如果是别人的图片，要注意是否有防盗链
<img src="图片地址">
- 设置图片的高度和宽度
<!-- 直接设置像素 -->
<img src="图片地址" style="height:100px; width:200px;"/><!-- 按照原图比例缩放 -->
<img src="图片地址" style="height:10%; width:20%;"/>
7.列表
<ul><li>内容</li><li>内容</li><li>内容</li>
</ul>
8.表格
- thead是表头
- tbody是表主体
- <table border=“1”>添加边框
<table><thead><tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr></thead><tbody><tr> <th>1</th> <th>小明</th> <th>20</th> </tr><tr> <th>2</th> <th>小红</th> <th>20</th> </tr><tr> <th>3</th> <th>小亮</th> <th>20</th> </tr></tbody>
</table>
9.input系列
- 输入普通文本
<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"> 排球
- 按钮
<!-- 普通按钮 -->
<input type="button" value="提交"><!-- 提交表单 -->
<input type="submit" value="提交">
- 提交
<form method="方式get或者post" action="提交地址">iput系列按钮
</form>
10.下拉框
- 单选
<select><option>北京</option><option>上海</option><option>深圳</option>
</select>
- 多选
<select multiple><option>北京</option><option>上海</option><option>深圳</option>
</select>
11.多行文本
- <textarea row=“3”>可是设置行数
<textarea>内容</textarea>
三、GET方式和POST方式
两种方式都要导入request方法
1.GET请求
- 实现：URL方法、表单提交
- 现象：向后台传入数据会拼接在URL上
.py文件
from flask import Flask, render_template, requestapp = Flask(__name__)@app.route('/register', methods=['GET'])
def register():return render_template('register.html')@app.route("/do/register", methods=['GET'])
def do_register():get_info = request.argsreturn get_infoif __name__ == '__main__':app.run(host='0.0.0.0', port=5200, debug=True)
.html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>用户注册</h1><form action="/do/register" method="get"><div>用户名: <input type="text" name="username"></div><div>密码: <input type="password" name="passwd"></div><input type="submit" value="提交"></form>
</body>
</html>
2.POST请求
- 实现：表单提交
- 现象：提交数据不显示在URL上，而是在请求体中
.py文件部分
@app.route("/post/register", methods=['POST'])
def post_register():get_info = request.formreturn get_info
.html文件部分
<body><h1>用户注册</h1><form action="/post/register" method="post"><div>用户名: <input type="text" name="username"></div><div>密码: <input type="password" name="passwd"></div><input type="submit" value="提交"></form>
</body>- 表单数据提交优化：添加name和value属性
- 在控制台输出数据，依靠导入的request方法
@app.route("/post/register", methods=['POST'])
def post_register():get_info = request.formusername = request.form.get("username")passwd = request.form.get("passwd")sex = request.form.get("sex")hobby_list = request.form.getlist("hobby")city = request.form.get("city")more = request.form.getlist("textarea")print(username, passwd, sex, hobby_list, city, more)return get_info
- 两种方法可以整合：
@app.route("/post/register", methods=['GET','POST'])