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_template

app = 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_template

app = Flask(__name__)

#创建了/show/info网址和index的对应关系
#以后用户在浏览器上访问该网址，网站自动执行index
@app.route("/show/info")
def index():
    #return "中国联通"
    #默认去当前项目目录下的templates文件夹中找index
    return 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, request

app = 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.args
    return get_info

if __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.form
    return 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.form

    username = 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'])