简单开发网站+HTML标签

news2024/11/24 4:31:55

目录

一、学习路线

二、快速开发网站

1、简单demo

 2、浏览器能识别的标签

① 编码② Title  ③ 标题 ④ div和span ⑤ 超链接

⑥ 图片⑦ 列表 ⑧ 表格  ⑨ input系列  ⑩ 下拉框  ⑪ 多行文本

三、网络请求

 四、案例

1、用户注册

2、用户登录

五、小结

         1、学习标签的总结

2、划分

一、学习路线

目的：开发一个平台（网站）

- 前端开发：HTML、CSS、JavaScript

- web框架：接受请求并处理

- MySQL数据库：储存数据的地方

快速上手：基于Flask Web框架让你可以快速搭建一个网站出来。了解上面的三者是怎样配合。

深入学习：基于Django框架（主要）

二、快速开发网站

1、简单demo

首先终端输入命令 pip install flask

from flask import Flask  # 导入库

app = Flask(__name__)  # 固定搭配


# 创建了网址/show/info 和 函数的index的对应关系
# 以后用户在浏览器上访问 /show/info,网站自动执行index
@app.route("/show/info")
def index():
    return "中国联通"


if __name__ == '__main__':
    app.run()

运行程序后可以得到，如果出现404NOT FOUND 在后面记得加/show/info

 如果我们返回的是

return "中<h1>国<span style = 'color :red;'>联通</span>"

浏览器可以识别很多标签+数据，例如：

        <h1>中国</h1>                                              →浏览器看见加大加粗

        <span style = 'color:red;'>联通</span>          →浏览器看见字体变红

如果我们能把浏览器能识别的所有标签都学会，我们在网站就可以控制页面到底是什么样子

网站给用户返回本质：字符串   字符串的格式：中国联通   <h1>中国联通</h1>

浏览器具备解析<h1>格式的能力

Flask框架为了让我们写标签方便，支持讲字符写入到文件中

from flask import Flask,render_template  # 导入库
...
def index():
    # Flask内部会自动打开这个文件，并读取内容，将内容给用户返回
    # 默认：去当前项目目录的templates文件夹中找
    return render_template("index.html")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>中国联通</h1>
<h3>广西联通</h3>>

</body>
</html>

 2、浏览器能识别的标签

① 编码

<meta charset="UTF-8">

② Title 

<head>
    <meta charset="UTF-8">
    <title>我的页面</title>
</head>

 ③ 标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的页面</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

 ④ div和span

<div>内容</div>
<span>内容</span>

div，一个人占一行。【块级标签】

span，自己多大占多大。【行内标签、内联标签】

注意：这两个标签比较素（无特殊实义） +CSS样式。

另外，标题<hx></hx>本身就有分行的效果。

一个小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的页面</title>
</head>
<body>
<h1>我的网页</h1>
<div>
    <span style = "color:red">时间</span>
    <span>2023-1-16</span>
</div>
<div>
    HTML学习
</div>
<h2>
    学习路线
</h2>
<div>
    <span style = "color:#ffdd00">时间</span>
    <span>2023-1-16</span>
</div>
<div>
    目的：开发一个平台（网站）
</div>
<div>
    - 前端开发：HTML、CSS、JavaScript
</div>
<div>
    - web框架：接受请求并处理
</div>
<div>
    - MySQL数据库：储存数据的地方
</div>
</body>
</html>

 ⑤ 超链接

# 跳转到其他的网站

<a href="https://blog.csdn.net/m0_58585940?type=blog">点击跳转</a>
# 跳转到自己的其他网站

<a href="http://127.0.0.1:5000//get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>商品列表</h1>
<a href="https://www.mi.com/shop" target="_blank">
<img style="height: 150px;width: 150px" src="/static/xiaomi.jpg">
</a>
<a href="https://www.mi.com/shop">
<img style="height: 150px;width: 150px" src="/static/xiaomi3.jpg">
</a>
<a href="https://www.mi.com/shop">
<img style="height: 150px;width: 150px" src="/static/xiaomi2.jpg">
</a>
</body>
</html>
#新的Tab页面打开
<a href="https://www.mi.com/shop" target="_blank">点击跳转</a>

 ⑥ 图片

<img src="图片的地址" />
直接显示别人的图片地址(防盗链)
<img src="https://alifei03.cfp.cn/creative/vcg/800/version23/VCG41175510742.jpg" />
<img src="自己图片的地址" />
显示自己的图片：
    - 自己项目中创建:static目录，把图片放在static里面
    - 在页面上引入图片
    <img src="/static/派大星.jpg" />

关于设置图片的宽度和高度

<img style="height: 100px;width: 100px" src="xxx">

 ⑦ 列表

 不带数字的列表

<ul>
    <li>python</li>
    <li>java</li>
    <li>C++</li>
</ul>

 带数字的列表

<ol>
    <li>python</li>
    <li>java</li>
    <li>C++</li>
</ol>

 

⑧ 表格 

<table border="1">    # border="1"有边框
    <thead>
    <tr> <th> ID </th> <th> 姓名 </th>  <th> 年龄 </th>  </tr>
    </thead>
    <tbody>
    <tr> <th> 01 </th> <th> 二蛋 </th>  <th> 22 </th>  </tr>
    <tr> <th> 02 </th> <th> 三蛋 </th>  <th> 22 </th>  </tr>
    <tr> <th> 03 </th> <th> 四蛋 </th>  <th> 22 </th>  </tr>
    <tr> <th> 04 </th> <th> 五蛋 </th>  <th> 22 </th>  </tr>
    <tr> <th> 05 </th> <th> 六蛋 </th>  <th> 22 </th>  </tr>
    </tbody>
</table>

小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户列表</h1>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>头像</th>
        <th>姓名</th>
        <th>邮箱</th>
        <th>更多信息</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>
            <img src="/static/派大星.jpg" alt=""style="height: 50px" >
        </td>
        <td>二狗</td>
        <td>休息@live.com</td>
        <td>
            <a href="https://blog.csdn.net/m0_58585940?spm=1000.2115.3001.5343" target="_blank">点击查看详细</a>
        </td>
        <td>
            编辑 删除
        </td>
    </tr>
        <tr>
        <td>1</td>
        <td>
            <img src="/static/派大星.jpg" alt=""style="height: 50px" >
        </td>
        <td>二狗</td>
        <td>休息@live.com</td>
        <td>
            <a href="https://blog.csdn.net/m0_58585940?spm=1000.2115.3001.5343" target="_blank">点击查看详细</a>
        </td>
        <td>
            编辑 删除
        </td>
    </tr>
        <tr>
        <td>1</td>
        <td>
            <img src="/static/派大星.jpg" alt=""style="height: 50px" >
        </td>
        <td>二狗</td>
        <td>休息@live.com</td>
        <td>
            <a href="https://blog.csdn.net/m0_58585940?spm=1000.2115.3001.5343" target="_blank">点击查看详细</a>
        </td>
        <td>
            编辑 删除
        </td>
    </tr>
        <tr>
        <td>1</td>
        <td>
            <img src="/static/派大星.jpg" alt=""style="height: 50px" >
        </td>
        <td>二狗</td>
        <td>休息@live.com</td>
        <td>
            <a href="https://blog.csdn.net/m0_58585940?spm=1000.2115.3001.5343" target="_blank">点击查看详细</a>
        </td>
        <td>
            编辑 删除
        </td>
    </tr>
    </tbody>

</table>
</body>
</html>

⑨ 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"> rap
<input type="checkbox"> 篮球

<input type="button" value="提交">     --普通按钮
<input type="submit" value="提交">     --提交表单

 ⑩ 下拉框

<select>                                --单选下拉框
    <option>北京</option>
    <option>西安</option>
    <option>上海</option>
</select>                           
<select multiple>                       --多选下拉框
    <option>北京</option>
    <option>西安</option>
    <option>上海</option>
</select>

 ⑪ 多行文本

<h1>多行文本</h1>
<textarea></textarea>

三、网络请求

  • 在浏览器的URL中写入地址，点击回车，访问。

浏览器会发送数据过去，本质上发送的是字符串：

"GET /explore http1.1\r\nhost…\r\nuser-agent\r\n..\r\n\r\n"

浏览器会发送数据过去，本质上发送的是字符串：

"POST /explore http1.1\r\nhost…\r\nuser-agent\r\n..\r\n\r\n数据库"

  • 浏览器向后端发送请求时

GET请求 【URL方法/表单提交】：

       现象：GET请求、跳转、向后台转入数据 数据会拼接在URL上。

       注意：GET请求数据会在URL中体现。

POST请求【表单提交】 :

       现象：提交数据不在URL中而是在请求体中。

页面上的数据想要提交到后台：

  • form标签包裹要提交的数据的标签
  • 提交方式：method = "get"
  • 提交的地址：action="/xx/xxx/xxx"
  • 在form标签里面一定要有一个<submit>标签
  • 在form里面的一些标签：input/select  等
  • 一定要写name属性     用户名:<input type="text" name="uu">

 四、案例

1、用户注册

python代码

from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'GET':
        return render_template('register.html')
    else:
        user = request.form.get("user")
        pwd = request.form.get("pwd")
        gender = request.form.get("gender")
        hobby = request.form.getlist("hobby")
        city = request.form.get("city")
        skill_list = request.form.getlist("skill")
        more = request.form.get("more")
        print(user, pwd, gender, hobby, city, skill_list, more)
        # 将用户信息写入到文件中实现注册，写入到excel中实现注册，写入数据库中实现注册
        # 2、给用户返回结果
        return "注册成功"


if __name__ == '__main__':
    app.run()

HTML代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>
<form action="/post/reg" method="post">
    <div>
        用户名:<input name="user" type="text"/>
    </div>
    <div>
        密码:<input name="pwd" type="password"/>
    </div>
    <div>
        选择性别:
        <input name="gender" type="radio" value="1">男
        <input name="gender" type="radio" value="2">女
    </div>
    <div>
        爱好:
        <input name="hobby" type="checkbox" value="10">唱
        <input name="hobby" type="checkbox" value="20">跳
        <input name="hobby" type="checkbox" value="30">rap
        <input name="hobby" type="checkbox" value="40">篮球
    </div>
    <div>
        城市：
        <select name="city">
            <option value = 'bj'>北京</option>
            <option value = 'xa'>西安</option>
            <option value = 'sh'>上海</option>
        </select>
    </div>
    <div>
        擅长：
        <select name="skill" multiple>
            <option value = 'c++'>c++</option>
            <option value = 'java'>java</option>
            <option value = 'python'>python</option>
        </select>
    </div>
    <div>
        备注：<textarea>more</textarea>
    </div>
    <input type="submit" value="submit提交">
</form>
</body>
</html>

2、用户登录

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户登录</h1>
<form method="post" action="/login">
    用户名:<input type="text" name="username">
    密码:<input name="pwd" type="password"/>
    <input type="submit" value="submit提交">
</form>

</body>
</html>

五、小结

1、学习标签的总结

<h1></h1>
<div></div>
<span></span>
<a></a>
<img / >
/ul/li/table/input/textarae/select

2、划分

- 块级标签

         <h1></h1>

         <div></div>

         <ul></ul>

         <ol></ol>

- 行内标签

         <span></span>
         <a></a>
         <img / >

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

网易互客CRM 微盟系统 管易系统 金蝶系统对接集成整体解决方案

网易互客CRM 微盟系统 管易系统 金蝶系统对接集成整体解决方案

前言&#xff1a;大部分的企业都可能只用一套系统组织架构复杂&#xff0c;业务流程繁琐&#xff0c;内部同时有CRM系统、OMS系统、ERP系统......且各个系统都需要独立登陆&#xff0c;造成IT部门数据监管困难&#xff01;如何在同一套中台系统上关联多管理系统呢&#xff1f;系…
阅读更多...
【GD32F427开发板试用】-03-定时器1 的不算坑的坑和时钟设置

【GD32F427开发板试用】-03-定时器1 的不算坑的坑和时钟设置

本篇文章来自极术社区与兆易创新组织的GD32F427开发板评测活动&#xff0c;更多开发板试用活动请关注极术社区网站。作者&#xff1a;申小林 先说一下我使用定时器1 的时候吧&#xff0c;最开始我以为定时器1是挂在APB1上的&#xff0c;随意按照惯性思维&#xff0c;定时器的时…
阅读更多...
vue3使用svg图标多种方式

vue3使用svg图标多种方式

方式1使用在线链接访问 在iconfont找到自己的项目的图标选择Symbol获取在线链接 2&#xff1a;在vue3项目中找到public的index.html进行script进行引入 打开浏览器看&#xff1a;这样就会自动注入到body下 在项目直接使用 //控制图标的大小<svg style"width: 10px; …
阅读更多...
SAP ABAP 函数组组件缺失检查

SAP ABAP 函数组组件缺失检查

有没有遇到如下几个场景 场景1 开发1&#xff0c;新建函数组1&#xff0c;创建函数1 开发2&#xff0c;在函数组1里&#xff0c;创建函数2 两者都传Q测试&#xff0c;开发2的先QAT完后发布生产&#xff0c;请求dump&#xff0c;找不到函数2 场景2 函数组1已传生产 开发1&#x…
阅读更多...
编解码-性能优化-SIMD

编解码-性能优化-SIMD

文章目录前言MMXSSEAVX使用内置函数使用SSE/AVX命名规则SSE/AVX操作类别实战汇编使用优化前代码详解优化后代码详解引用文章#mermaid-svg-cWLDz5Rki1i4TgZ1 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#fff;}#mermaid-svg-cWLDz5Rki…
阅读更多...
【JavaGuide面试总结】MySQL篇·中

【JavaGuide面试总结】MySQL篇·中

【JavaGuide面试总结】MySQL篇中1.MySQL 的隔离级别是基于锁实现的吗&#xff1f;2.表级锁和行级锁了解吗&#xff1f;有什么区别&#xff1f;3.共享锁和排他锁简单说说4.意向锁有什么作用&#xff1f;5.InnoDB 有哪几类行锁&#xff1f;6.当前读和快照读有什么区别&#xff1f…
阅读更多...
Go语言循环语句

Go语言循环语句

Go语言循环语句 资料参考至菜鸟教程。 在不少实际问题中有许多具有规律性的重复操作&#xff0c;因此在程序中就需要重复执行某些语句。 以下为大多编程语言循环程序的流程图&#xff1a; Go语言提供了以下几种类型循环处理语句&#xff1a; 循环类型描述for循环重复执行语句块…
阅读更多...
Base64

Base64

概述 Base64是一种基于64个字符的编码算法，经过Base64编码后的数据会比原始数据略长，为原来的4/3倍。经Base64编码后的字符串的字符数是以4为单位的整数倍。 编码表 即64个字符分别是： 字符个数A-Z26a-z260-910+1/1=用于补位 在电子邮件中,每行为76个字符，每行末需添加一…
阅读更多...
【青训营】Go的依赖管理

【青训营】Go的依赖管理

Go的依赖管理 本节内容来自于&#xff1a;字节跳动青年训练营第五届 后端组 1.什么是依赖 实际开发的工程需要使用许多第三方库&#xff0c;这能够使得我们站在巨人的肩膀上&#xff0c;使用第三方库中封装好的函数&#xff0c;可以大大方便我们的程序开发&#xff0c;第三方…
阅读更多...
Microsoft Teams上的编程教育

Microsoft Teams上的编程教育

内容提示&#xff1a;Microsoft Teams上的 MakeCode Arcade 使用形式&#xff1a;Microsoft Teams中的 “作业” 服务 应用场景&#xff1a;编程教育 社团活动 个人经验&#xff1a;在校期间&#xff0c;每周学校都会有社团活动&#xff0c;学生们根据自己的兴趣爱好来选择社…
阅读更多...
struct 结构体的内存对齐

struct 结构体的内存对齐

&#x1f499;作者&#xff1a;阿润菜菜 &#x1f4d6;专栏&#xff1a;一起学习C言 本文目录 在内存中观察 结构体内存对齐的规则&#xff1a; 为什么存在内存对齐&#xff1f; 编程中我们该如何设计结构体&#xff1f; 修改默认对齐数 相关笔试题 在内存中观察 首先…
阅读更多...
el-date-picker 目前只能通过点击input输入框触发日期选择器，怎么通过其他方式触发日期选择器同时把input输入框去掉，如点击按钮

el-date-picker 目前只能通过点击input输入框触发日期选择器，怎么通过其他方式触发日期选择器同时把input输入框去掉，如点击按钮

依然是该模块由于后端接口数据传输限制 在前面文章里做了些许改动。 需求左右切换 可以快速找到年份&#xff0c;于是添加了element选择年份的日期组件。 图中隐藏了el-data-picker日期组件&#xff0c;手动添加样式展示时间栏选择的数据进行 0 回显。 点击时间时&#xff0c;…
阅读更多...
想看看一个影片评论怎么样？python带你采集数据做词云

想看看一个影片评论怎么样？python带你采集数据做词云

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 目录前言环境使用:模块使用安装python第三方模块:思路分析代码展示数据采集词云图尾语 &#x1f49d;环境使用: Python 3.8 解释器 Pycharm 编辑器 模块使用 import parsel >>> pip install parsel import req…
阅读更多...
《玩转 Spring 全家桶》学习笔记Day1

《玩转 Spring 全家桶》学习笔记Day1

Spring 诞生于2002年&#xff0c;成型于2003年。Spring Boot 负责构建、Spring Cloud 协调、Spring Cloud Data Flow 负责连接一切。Spring Framework理念&#xff0c;向后兼容&#xff0c;专注API设计&#xff0c;让选择无处不在&#xff0c;海纳百川&#xff0c;严苛的代码质…
阅读更多...
N+1终于等到了 但却放弃了

N+1终于等到了 但却放弃了

在公司呆了8年了&#xff0c;做梦都想被开除&#xff0c;年底等到了。但......2021年年底绩效B&#xff0c;可是公司年终奖泡沫了&#xff1b;估摸着2022年公司可能会发奖金&#xff0c;那我也悄悄的给自己定了目标&#xff0c;大干一场&#xff0c;争取过年拿个好结果。跟着公…
阅读更多...
Go语言的数据类型

Go语言的数据类型

博客主页&#xff1a;&#x1f3c6;看看是李XX还是李歘歘 &#x1f3c6; &#x1f33a;每天不定期分享一些包括但不限于计算机基础、算法、后端开发相关的知识点&#xff0c;以及职场小菜鸡的生活。&#x1f33a; &#x1f497;点关注不迷路&#xff0c;总有一些&#x1f4d6;知…
阅读更多...
功率放大器模块在超微晶合金磁特性测量研究中的应用

功率放大器模块在超微晶合金磁特性测量研究中的应用

客户需求&#xff1a;对超微晶合金磁特性测量中的波形发生与控制问题进行研究&#xff0c;实验系统有严格的体积要求&#xff0c;上位机可外置&#xff0c;测试系统需集成于机箱&#xff0c;机箱尺寸&#xff1a;1900mm500mm600mm。 解决方案&#xff1a;功率放大器模块采用安泰…
阅读更多...
Golang的error和panic

Golang的error和panic

博客主页&#xff1a;&#x1f3c6;看看是李XX还是李歘歘 &#x1f3c6; &#x1f33a;每天不定期分享一些包括但不限于计算机基础、算法、后端开发相关的知识点&#xff0c;以及职场小菜鸡的生活。&#x1f33a; &#x1f497;点关注不迷路&#xff0c;总有一些&#x1f4d6;知…
阅读更多...
Python入门自学进阶-Web框架——30、DjangoAdmin项目应用-自定义用户认证续

Python入门自学进阶-Web框架——30、DjangoAdmin项目应用-自定义用户认证续

一、前面实现的是DjangoAdmin实现的自定义用户认证管理&#xff0c;现在自己来实现管理功能&#xff0c;即在mytestapp中增加用户认证管理功能。 在UserProfile的model中&#xff0c;对password字段增加help_text属性&#xff1a; password models.CharField(_(password), m…
阅读更多...
Linux 环境安装 jdk 或 openjdk

Linux 环境安装 jdk 或 openjdk

一、linux 环境安装JDK的tar.gz包&#xff0c;通用命令&#xff1a; 1、查看已安装的JDK版本rpm -qa | grep jdk2、删除不需要的JDK版本&#xff1a;rpm -e --nodeps java-1.8.0-openjdk3、解压新JDK至/usr/lib/jvm目录下tar -zxvf openjdk-1044_linux-x64_bin_ri.tar.gz -C /…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023