首页 > 其他分享 >HTML

HTML

时间：2022-11-12 16:11:35浏览次数：40  
标签：__ name form Flask 标签 HTML

前端开发

目的：开发一个平台（网站）
	- 前端开发：HTML、CSS、JavaScript
	- Web框架：接收请求并处理
	- MySQL数据库：存储数据的地方

快速上手：
	基于Flask Web框架让你快速搭建一个网站出来。
	
深入学习：
	基于Django框架（主要）

1.快速开发网站

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()

咱们网站与别人的不一样：

  • 别人的好看 vs 咱们的难看

    浏览器可以识别很多标签+数据，例如：
	<h1>中国</h1>   						->  浏览器看见加大加粗
	<span style='color:red;'>联通</span>  ->  浏览器看见字体变红色
	
如果我们能把浏览器能识别的所有的标签都学会，我们在网站就可以控制页面到底长什么样子。

  • Flask框架为了让咱们写标签方便，支持将字符串写入到文件里。

  • from flask import Flask,render_template

app = Flask(__name__)

@app.route("/show/info")
def index():
    # Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
    # 默认：去当前项目目录的templates文件夹中找。
    return render_template("index.html")

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

2.浏览器能识别的标签

2.1 编码（head）

<meta charset="UTF-8"> #这个html中的字符以什么形式进行编码

2.2 title（head）

<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>

2.3 标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>

2.4 div和span

<div>内容</div>

<span>asdfa</span>

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <div>山东蓝翔</div>
    <div>挖掘机哪家强</div>
</body>
</html>

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <span>山东蓝翔</span>
    <span>挖掘机哪家强</span>
</body>
</html>

注意：这两个标签比较素 ，+ CSS样式可以得到很丰富的效果

练习题

2.4.5 超链接

跳转到其他网站
<a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转</a>

跳转到自己网站其他的地址
<a href="http://127.0.0.1:5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>

# 当前页面打开
<a href="/get/news">点击跳转</a>

# 新的Tab页面打开
<a href="/get/news" target="_blank">点击跳转</a>

2.4.6 图片

<img src="图片地址" /> # /可不写

直接显示别人的图片地址（注意防盗链，如果图片使用了防盗链，将不可使用）：
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />

<img src="自己图片的地址" />
显示自己的图片：
	- 自己项目中创建：static目录，图片要放在static
	- 在页面上引入图片
	    <img src="/static/wbq.png" />

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

<img src="图片地址" style="height:100px; width:200px;" /> #只写一个，另一个等比例变化
<img src="图片地址" style="height:10%; width:20%;" /> #只写一个，图片不会变化

小结

  • 学习的标签

    <h1></h1>
<div></div>
<span></span>
<a></a>
<img />

  • 划分

    - 块级标签
	<h1></h1>
	<div></div>
- 行内标签
	<span></span>
    <a></a>
    <img />

  • 嵌套

    <div>
    <span>xxx</span>
    <img />
    <a></a>
</div>
#块级标签和行内标签可以嵌套，行内标签和行内标签可以嵌套
#块级标签和块级标签不要嵌套，这样会很难判断应用的效果

案例：商品列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>商品列表</h1>

<a href="https://www.mi.com/redmiwatch2" target="_blank">
    <img src="/static/a1.jpeg" style="width: 150px">
</a>

<a href="https://www.mi.com/shouhuan6/nfc" target="_blank">
    <img src="/static/a2.jpeg" style="width: 150px">
</a>

<a href="https://www.mi.com/xiaomibuds3pro" target="_blank">
    <img src="/static/a3.jpeg" style="width: 150px">
</a>

</body>
</html>

2.4.7 列表

<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>

<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

2.4.8 表格

<table>
    <thead>
    	<tr>  <th>ID</th>  <th>姓名</th>   <th>年龄</th>  </tr>
    </thead>
    <tbody>
    	<tr>  <td>10</td>  <td>武沛齐</td>  <td>19</td>   </tr>
        <tr>  <td>11</td>  <td>吴阳军</td>  <td>19</td>   </tr>
        <tr>  <td>12</td>  <td>刘东</td>  <td>19</td>    </tr>
        <tr>  <td>13</td>  <td>郭智</td>  <td>19</td>    </tr>
        <tr>  <td>14</td>  <td>电摩</td>  <td>19</td>    </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/a1.jpeg" alt="" style="height: 50px">
                </td>
                <td>name4</td>
                <td>休息@live.com</td>
                <td>
                    <a href="http://www.chinaunicom.com.cn/about/leaders.html" target="_blank">查看详细</a>
                </td>
                <td>
                    编辑
                    删除
                </td>
            </tr>

             <tr>
                <td>1</td>
                <td>
                    <img src="/static/a1.jpeg" alt="" style="height: 50px">
                </td>
                <td>name3</td>
                <td>休息@live.com</td>
                <td>
                    <a href="http://www.chinaunicom.com.cn/about/leaders.html" target="_blank">查看详细</a>
                </td>
                 <td>
                    编辑
                    删除
                </td>
            </tr>

             <tr>
                <td>1</td>
                <td>
                    <img src="/static/a1.jpeg" alt="" style="height: 50px">
                </td>
                <td>name2</td>
                <td>休息@live.com</td>
                <td>
                    <a href="http://www.chinaunicom.com.cn/about/leaders.html" target="_blank">查看详细</a>
                </td>
                 <td>
                    编辑
                    删除
                </td>
            </tr>

             <tr>
                <td>1</td>
                <td>
                    <img src="/static/a1.jpeg" alt="" style="height: 50px">
                </td>
                <td>name1</td>
                <td>休息@live.com</td>
                <td>
                    <a href="http://www.chinaunicom.com.cn/about/leaders.html" target="_blank">查看详细</a>
                </td>
                 <td>
                    编辑
                    删除
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

2.4.9 input系列（7个）

<input type="text"> #输入文本框，内容可见
<input type="password"> #输入文本框，内容不可见 
<input type="file"> #选择文件
#单选按钮：相同的name下只能单选
<input type="radio" name="n1">男
<input type="radio" name="n1">女
#多选按钮
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球

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

2.4.10 下拉框

<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

<select multiple> #可多选
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

2.4.11 多行文本

<textarea></textarea>

案例：用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>用户注册</h1>
<div>
    用户名：<input type="text"/>
</div>
<div>
    密码：<input type="password"/>
</div>

<div>
    性别：
    <input type="radio">男
    <input type="radio">女
</div>

<div>
    爱好：
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">乒乓球
</div>

<div>
    城市：
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</div>

<div>
    擅长领域：
    <select multiple>
        <option>打游戏</option>
        <option>睡觉</option>
        <option>吃饭</option>
        <option>刷抖音</option>
    </select>
</div>

<div>
    备注：<textarea></textarea>
</div>

<div>
    <input type="button" value="button按钮">
    <input type="submit" value="submit按钮">
</div>
</body>
</html>

知识点补充

  1. 网站请求的流程

  2. 网络请求

    • 在浏览器的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上

          https://www.sogou.com/web?query=安卓&age=19&name=xx

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

      • POST请求【表单提交】

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

案例：用户注册

  • 新创建项目

  • 创建Flask代码

    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_list = 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_list, 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</title>
</head>
<body>
<h1>用户注册</h1>

<form method="post" action="/register">
    <div>
        用户名：<input type="text" name="user"/>
    </div>
    <div>
        密码：<input type="password" name="pwd"/>
    </div>
    <div>
        性别：
        <input type="radio" name="gender" value="1">男
        <input type="radio" name="gender" value="2">女
    </div>
    <div>
        爱好：
        <input type="checkbox" name="hobby" value="10">篮球
        <input type="checkbox" name="hobby" value="20">足球
        <input type="checkbox" name="hobby" value="30">乒乓球
        <input type="checkbox" name="hobby" value="40">棒球
    </div>

    <div>
        城市：
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
        </select>
    </div>

    <div>
        擅长领域：
        <select name="skill" multiple>
            <option value="100">吃饭</option>
            <option value="101">睡觉</option>
            <option value="102">打球</option>
        </select>
    </div>

    <div>
        备注：<textarea name="more"></textarea>
    </div>

    <input type="submit" value="submit按钮">
</form>

</body>
</html>

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

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

总结

  1. HTML标签（默认格式样式、以后通过手段可以修改）

  2. HTML标签与编程语言无关

    • java + HTML
    • c# + HTML
    • php + HTML
    • python + HTML

  3. 提醒：HTML标签比较多，标签还有很多很多，不必逐一学会

标签：__,name,form,Flask,标签,HTML
From： https://www.cnblogs.com/vahan/p/16883995.html

相关文章

  • HTML标签-图片标签和列表标签
    HTML标签-图片标签图片标签：img：展示图片属性：src：指定图片的位置代码案例：  HTML标签列表标签案例：旅游网站首页1、确定使用table来完成布局2、如果某一行只有一......
  • 原生 HTML + CSS + JavaScript 写时钟
    时钟效果目录结构HTML代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......
  • 使用python保存网页时print能显示正常，html打开中文乱码问题
             ......
  • HTML标签-文件标签和文本标签1和文本标签2
    HTML标签-文件标签文件标签：构成html最基本的标签html：html文档的根标签head：头标签。用于指定html文档的一些属性。引入外部的资源title：标题标签body：体标签<!DOCTYPEh......
  • HTML概念介绍和快速入门
    HTML概念介绍概念：是最基础的网页开发语言HaperTextMarkupLanguage超文本标记语言超文本：超文本是用超链接的方式，将各种不同空间的文字信息组织在一起的网状文......
  • node07_自定义一个html转义模块
    在日常开发的过程中除了转换时间之外，我们可能还会遇到需要将html代码转义成文本，以及将文本转义成html的需求，下面我们来自定义一个转义的模块。具体的思路就是使用正则表达......
  • HTML5（笔记）
    1.基础1.HTML标题通过至2.段落用标签定义3.链接通过定义例如：<ahref="http://www.runoob,com">这是一个链接</a>4.图像标签<img>eg:<imgsrc="/images/logo.png"w......
  • 【HTML】905- 5个隐藏的 HTML 技巧
    编译：冷星Web开发人员都在广泛的使用HTML。无论你使用什么框架或者选择哪个后端语言，框架在变，但是HTML始终如一。尽管被广泛使用，但还是有一些标签或者属性是大部分开发者不熟......
  • 【转行测试开发-HTML】(十)注释、独立编写页面和完成老师的题目
    上一节我们学会了锚点定位，从上到下的会用了，那么从底部往上会用了吗？比如底部有一个返回顶部的按钮，要求点击后回到页面的顶部。我们写代码来尝试下。先看看效果:点击红框里的......
  • java使用freemarker模板插件生成html页面
    1、功能描述：使用java代码，根据指定的ftl模板文件，生成html静态页面文件 freemarker模板是直接可以与SSM这种javaweb项目、或springboot整合的，不做前后分离。跟jsp差不多......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99