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的基本内容。

一、快速开发网站最简模板

  1. 在Terminal中输入pip install flask
  2. 主要内容:
  • 在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>

文件布局:
在这里插入图片描述

  1. 运行后即可得到网址,加上/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'])

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/464961.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HCIP —— 交换 (VLAN)

VLAN --- 虚拟局域网 在 HCIA 中 &#xff0c;已经学过交换机的一些基础配置&#xff0c;下面进行回顾一些简单的内容。 1.创建VLAN VLAN ID --- 区别和标识不同的VLAN 使用范围&#xff1a;0-4095 &#xff0c; 由12位二进制构成。 0 和 4095 作为 保留的VLAN。 …

Python零基础---爬虫技术相关

python 爬虫技术&#xff0c;关于数据相关的拆解&#xff1a; 1.对页面结构的拆解 2.数据包的分析&#xff08;是否加密了参数&#xff09;&#xff08;Md5 aes&#xff09;难易程度&#xff0c;价格 3.对接客户(433,334) # 数据库 CSV 4.结单&#xff08;发一部分数据&a…

13 - grace数据处理 - 泄露误差改正 -正演建模法(Forward-Modeling)

grace数据处理 - 泄露误差改正 -正演建模法(Forward-Modeling) *0* 引言*1* Matlab代码实现0 引言 正演建模法最早是由Chen等提出的,本质是通过迭代的思想反求真实信号的过程,为什么要反求呢?因为在数据处理过程中做了球谐截断和空间滤波,使部分有用信号被湮灭,也就是有…

Blocks —— 《Objective-C高级编程 iOS与OS X多线程和内存管理》

目录 Blocks概要什么是BlocksOC转C方法关于几种变量的特点 Blocks模式Block语法Block类型 变量截获局部变量值__block说明符截获的局部变量 Blocks的实现Block的实质 Blocks概要 什么是Blocks Blocks是C语言的扩充功能&#xff0c;即带有局部变量的匿名函数。 顾名思义&#x…

如何在WSL中的ubuntu编译Linux内核并且安装使用ebpf?

如何在WSL中的ubuntu编译Linux内核并且安装使用ebpf? 步骤1 编译安装内核获取源码修改配置编译编译成功后配置重启WSL测试 步骤2 安装bcc安装依赖下载bcc&#xff0c;编译测试 环境: wsl2windows 11 步骤1 编译安装内核 去https://kernel.org/找你想要的版本&#xff0c; …

CCDP.01.使用NotePad++辅助部署OpenStack的说明

前言 对于象OpenStack&#xff08;OS&#xff09;这样的复杂分布式系统&#xff08;云计算平台&#xff09;&#xff0c;一次部署通过是需要相当的Linux基础、网络基础、分布式系统基础、云计算基础的。这里类比在开发大型复杂系统常常采用的“防御式编程”方法论&#xff0c;探…

Gin 框架中实现路由的几种方式介绍

本文将为您详细讲解 Gin 框架中实现路由的几种方式&#xff0c;并给出相应的简单例子。Gin 是一个高性能的 Web 框架&#xff0c;用于构建后端服务。在 Web 应用程序中&#xff0c;路由是一种将客户端请求映射到特定处理程序的方法。以下是几种常见的路由实现方式&#xff1a; …

llama笔记:官方示例解析 example_chat_completion.py

1 导入库 from typing import List, Optional从typing模块中导入List和Optional。typing模块用于提供类型注解的支持&#xff0c;以帮助明确函数预期接收和返回的数据类型。List用于指定列表类型Optional用于指定一个变量可能是某个类型&#xff0c;也可能是None。 import fir…

Laravel11.0.3安装完后运行项目报错

Laravel11.0.3安装完后运行项目报错&#xff1a;could not find driver (Connection: sqlite, SQL: PRAGMA foreign_keys ON;) 运行项目报错时提示链接sqlite错误 解决方案&#xff1a; 1.确认机器安装了sqlite&#xff0c;https://blog.csdn.net/centaury32/article/detail…

C#,人工智能,机器学习,聚类算法,训练数据集生成算法、软件与源代码

摘要:本文简述了人工智能的重要分支——机器学习的核心算法之一——聚类算法,并用C#实现了一套完全交互式的、可由用户自由发挥的,适用于聚类算法的训练数据集生成软件——Clustering。用户使用鼠标左键(拖动)即可生成任意形状,任意维度,任意簇数及各种数据范围的训练数…

尚硅谷SQL|数据库的创建,修改与删除

DDL&#xff1a;创建和管理表 DDL所有的操作都要慎重&#xff0c;尤其是删除&#xff0c;清空等。 创建数据库--->确认字段--->创建数据表---->插入数据 创建数据库 1.创建数据库&#xff1a;推荐使用方式3 #创建数据库 #方式1,使用的是默认字符集 create databa…

Matlab|【免费】基于半不变量的概率潮流计算

目录 主要内容 部分代码 结果一览 下载链接 主要内容 该程序主要内容是基于半不变量法的概率潮流&#xff0c;包含蒙特卡洛模拟法、半不变量法&#xff0b;Gram-Charlier级数展开以及半不变量法Cornish-Fisher级数展开三种方法以及效果对比&#xff0c;模型考虑了…

Android学习使用GitLab(保姆级)

实习生入职第一课 学习使用GitLab&#xff0c;熟悉Git版本控制工具 下面是我的学习笔记&#xff0c;希望能帮助到需要的人&#xff01; 目录 一、注册你的GitLab账号 二、安装Git 三、在Android studio中配置Git 四、GitLab账户配置SSH Keys 五、GitLab账号创建项目 六…

Qt/C++监控推流设备推流/延迟极低/实时性极高/rtsp/rtmp推流/hls/flv/webrtc拉流/调整分辨率降低带宽

一、前言 算下来这个推流的项目作品写了有四年多了&#xff0c;最初第一个版本只有文件点播的功能&#xff0c;用的纯QTcpSocket通信实现&#xff0c;属于比较简单的功能。由于文件点播只支持文件形式的推流&#xff0c;不支持网络流或者本地设备采集&#xff0c;所以迫切需要…

【GPT-SOVITS-05】SOVITS 模块-残差量化解析

说明&#xff1a;该系列文章从本人知乎账号迁入&#xff0c;主要原因是知乎图片附件过于模糊。 知乎专栏地址&#xff1a; 语音生成专栏 系列文章地址&#xff1a; 【GPT-SOVITS-01】源码梳理 【GPT-SOVITS-02】GPT模块解析 【GPT-SOVITS-03】SOVITS 模块-生成模型解析 【G…

ChatGPT提示词方法的原理

关于提示词&#xff0c;我之前的一些文章可以参考&#xff1a; 【AIGC】AI作图最全提示词prompt集合&#xff08;收藏级&#xff09;https://giszz.blog.csdn.net/article/details/134815245?ydrefereraHR0cHM6Ly9tcC5jc2RuLm5ldC9tcF9ibG9nL21hbmFnZS9hcnRpY2xlP3NwbT0xMDExL…

如何在Mac中删除照片?这里有详细步骤

前言 本文介绍如何从Mac中删除照片,以释放硬盘空间或更好地组织文件和文件夹。 如何使用废纸篓删除Mac上的图片 在Mac上删除图片的最简单方法之一是使用废纸篓功能。学习只需几秒钟。下面是如何删除单个图片以及如何在Mac上删除多个图片,以及一些关键和有用的提示,以使该…

Matlab|考虑可再生能源消纳的电热综合能源系统日前经济调度模型

目录 1 主要内容 模型示意图 目标函数 程序亮点 2 部分程序 3 程序结果 4 下载链接 1 主要内容 本程序参考文献《考虑可再生能源消纳的建筑综合能源系统日前经济调度模型》模型&#xff0c;建立了电热综合能源系统优化调度模型&#xff0c;包括燃气轮机、燃气锅炉、余热…

195基于matlab的凸轮机构GUI界面

基于matlab的凸轮机构GUI界面 &#xff0c; 凸轮设计与仿真 绘制不同的凸轮轮廓曲线 &#xff0c;凸轮机构运动参数包括推程运动角&#xff0c;回程运动角&#xff0c;远休止角&#xff0c;近休止角。运动方式&#xff0c;运动规律。运动仿真过程可视化。内容齐全详尽。用GUI打…

Docker 哲学 - 容器操作 -cp

1、拷贝 容器绑定的 volume的 数据&#xff0c;到指定目录 2、匿名挂载 volume 只定义一个数据咋在容器内的path&#xff0c;docker自动生成一个 sha256 的key作为 volume 名字。这个 sha256 跟 commitID 一致都是唯一的所以 &#xff0c;docker利用这个机制&#xff0c;可以…