HTML

前端

前端：和所有用户打交道的界面称之为前端。

后端：跟用户不直接打交道的就是后端。

学前端原因

我们只学习python，只能是后端工程师，学了前端，全栈工程师------>前后端都会
最核心的是：在公司中可以很好的与前端人员进行灵活沟通(重要)
'''我们学习前端，要求不高，学的不深，会看懂一些简单的前端代码和会搭建一些简单的页面即可'''

前端学习内容

1. HTML:搭建网页的骨架，没有样式
2. CSS：样式，让网页更加好看
3. JavaScript(JS)：就是往网页动起来

软件开发架构

cs架构：client -----> sever

bs架构：browser ---->sever

前端就是bs端，页面就是在浏览器中展示

我们学习只需要有浏览器即可，翻译前端代码的是浏览器。

建议使用谷歌浏览器（兼容性最好），前端最难的就是解决兼容性问题

在浏览器中输入一个网址，到返回浏览器，渲染成界面，这个过程发生了什么

1、浏览器朝服务端发起请求

2、服务端接收请求

3、服务端开始处理请求，并返回数据

4、数据返回给浏览器，浏览器进行渲染，展示给用户

浏览器就是万能客户端，所以浏览器有了，就相当于客户端有了，我们就可以通过socket写一个服务端。

浏览器就是万能客户端，可以充当很多服务端的客户端。

浏览器如何识别不同的服务端？

浏览器指定了统一的规则，要是想让服务端和浏览器正常交互，就要遵循HTTP协议

HTTP协议

超文本传输协议，作用：规定了服务端和客户端之间的数据交互格式。

1、四大特点

　　1、基于请求和响应：浏览器发起请求----->服务端做出响应

　　2、基于TCP/IP协议之上的应用层协议

　　HTTP是基于TCP协议写出来的

　　3、无状态（不能保存用户信息）

　　　　网站早期的时候是不需要登陆的（如：新闻网站）

　　　　“不记录用户信息，后来随着技术发展，诞生购物网站，当想要使用时，就必须登录，就要记录用户信息”

　　　　能记录用户信息的技术有：cookie、session、token

4、

短链接：客户端和服务端建立起链接之后，客户端发送一些请求，服务端响应一次，然后断开，也就是二次成功发送一次消息就会断开连接

长链接：一旦建立链接，不会立马断开，中间有间隔客服系统（长链接）

请求数据：请求数据就是客户端发送请求会携带一些数据

HTTP请求数据格式：

　　1、请求首行（HTTP协议的版本，请求方式）

　　2、请求头（k：v键值对）

　　3、\r\n

　　4、请求体

　　　　不是所有的请求方式都有，get请求方式没有请求体，post请求方式有请求体，请求体里面放的都是一些敏感数据。

HTTP响应数据格式：

响应首行（响应状态码）

响应头

\r\n

响应体

响应状态码

就是通过用一串简单的数字的数字代替一段复杂的描述信息

1xx：服务端接收到消息正在处理

2xx：代表请求成功（200 ok）

3xx：重定向（想直接进入到a界面，但是内部直接自动跳转了b界面）

4xx：

　　404：请求资源不存在

　　403：没有权限

5xx：500服务器内部错误

请求方式：

1、get（请求方式没有请求体）

　　朝服务端要数据：在网址上输入baidu.com，因为get没有请求体，数据就直接放在了网址后面　　

　　https://www.baidu.com/s?k=v&k1=v1&k2=v2
　　https://www.baidu.com/s?wd=美女&ie=utf-8&

　　协议：//域名/后缀/？参数

　　协议：//域名/后缀/？k=v&k1=v1&k2=v2

　　URL：统一资源定位符

2、post

　　朝服务端提交数据：在登录网站的时候，输入用户名和密码，然后把用户名和密码提交到服务端进行验证。　　

面试题：聊聊get请求和post请求的区别

　　1、get请求方式数据不够安全，post请求数据更加安全

　　2、get请求方式没有请求体，post请求有请求体

　　3、get请求能够携带的数据量没有post请求携带的多，get请求一般携带4kb的大小，post请求基本上没有限制

HTML简介

如果你想让你的浏览器识别你的网站，你就必须遵循HTML语法

<h1>helloworldaaa</h1>
<a href='http://www.baidu.com'>click me</a>
<img src='https://img2.baidu.com/it/u=2942449272,1418584815&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1689699600&t=6840fd4bcbd7f1c87dd657700e7010db'>

HTML的标签名字不能改正，必须记忆

创建HTML文件的方式

1、在pycharm中新建HTML文件

2、html后缀名.html

3、书写位置：文件中、浏览器中、各种工具中

pycharm创建html文件默认代码解释

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

</body>
</html>

HTML文档介绍

head标签一般写的不是用户看的

body标签一般写什么内容，浏览器中就能看到什么内容，给用户看的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   #指定字符编码的
    <title>Title</title>
</head>    #这里写的东西不是让用户看的
<body>
                   #body标签内写的东西都是让用户看的，在body中写什么，浏览器中就能看到什么
</body>
</html>

打开html的方式

1、打开文件所在位置，用浏览器打开

2、在pycharm中打卡

HTML里的head标签使用

常用标签

常用标签
 <title>你看我在哪里显示</title>  # 标签顶部显示的内容
<link rel="stylesheet" href="css/my.css"> # 引入外部CSS

1. 注释
 # 快捷键 ctrl + ?

head标签里常用标签

# <style></style>   只需要写出每个标签的前几个字母或者写标签的起始，tab补全
<style>
        /*style里面一般写CSS样式*/
        h1 {
            color: red;
        }
</style>


<script>
// 写js代码
alert(123)
</script>

<link rel="stylesheet" href="mycss.css">  # 引入外部CSS文件
<script src="myjs.js"></script>  # 引入外部js文件

<link rel="stylesheet" href="../../mycss.css">
<script src="../../myjs.js"></script>

body中常用标签（在浏览器中看到什么就在这里写什么）

常用标签

h1~h5标题标签，其中h1最大 h6最小

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

基本标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>

<br>

<hr>

标签的分类2

1、块儿级标签元素

　　独占一行，不管自身有多大，他自己就占一行

　　h1标题标签都是

　　p标签

　　hr标签

2、行内元素（内联元素）

　　自身文本有多大就占多大，不会独占一行

  <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>

标签分类2

双标签：

 <b>加粗</b>
 <i>斜体</i>
 <u>下划线</u>
 <s>删除</s>
 h1标题标签都是
 p标签
 a标签

单标签：

hr标签
br

<img />

特殊字符（实体符号）

内容对应代码

空格  
> >
< <
& &
¥ ¥
版权 ©
注册 ®

还有很多：

HTML特殊符号（字符实体)大全_html字符_折耳鼠的博客-CSDN博客

div标签和span标签

div和span这两个标签没有实际意义，一般用来布局使用

div它是块儿级元素，给页面占布局（也就是页面中的大板块）

span标签是行内元素，用来给文本内容占布局（也就是页面中的细节板块）

标签的嵌套

我们使用亲戚关系来表示标签之间的关系

<div> div标签是p标签的父标签

　　<p>p标签是div的儿子，是span标签的父标签

　　　　<span></span>span标签是p的儿子，是div的孙子

　　</p>

<p></p> p标签是div标签的儿子，是p标签的兄弟，也是span的兄弟

</div>

注意：块儿级元素能够嵌套所有的行内元素，块儿级元素也能嵌套所有的块儿级元素，但是除了p标签之外

行内元素不能够嵌套块儿级元素，但是可以嵌套所有的行内元素

前端里面一般不会轻易报错，写的代码不规范不正确，只是没有效果而已，不会轻易报错。前端只是和用户打交道的，不能随便报错，不然体验感很差。

img标签

标签内会有属性：

1、自带属性

2、自定义的属性

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

src：写图片的地址：1、外链地址 2、相对地址

宽高里的px是指像素，不加也可以

a标签

超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

超链接
<a href="http://www.baidu.com" title="你看是什么" target="_blank">点我一下啊</a>
href：填写的是跳转的地址
# id值，锚点，我们用不到，是一种效果，一般是前端来写
● 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
● 相对URL - 指当前站点中确切的路径（href="index.htm"）
target="_blank"
跳转的时候新开一个tab页面
title="你看是什么"
当鼠标悬浮的时候展示的内容

target：

_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

列表标签

1、无序列表

　　ul标签

<body>
<div>
    <ul type="circle">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ul>
</div>
</body>

快捷方式写：li*5 tab 就会出现5个li ，div>p*5 tab ; div>p*5>a tab

type属性：

　　　　1、disc（实心圆，默认值）

　　　　2、circle（空心圆）

　　　　3、square（实心方片）

　　　　4、none（无样式）　　

2、有序列表

ol标签

<div>
    <ol type="1" start="1">
        <li>易</li>
        <li>烊</li>
        <li>千玺</li>

    </ol>
</div>

type属性：
● 1 数字列表，默认值
● A 大写字母
● a 小写字母
● Ⅰ大写罗马
● ⅰ小写罗马

3、标题列表

<div>
    <dl>
        <dt>hihi</dt>
        <dd>hhhhh</dd>
        <dt>hihihihihi</dt>
        <dd>hhhhhhhhhhhhhhh</dd>
    </dl>

</div>

标题一般情况用于下列情况：

表格

使用table标签画表格

tr:代表一行

td：代表一列一般头会用th（也就是thead里，因为会加粗）

<head>
    <meta charset="UTF-8">
    <title>hihihi</title>
    <table>
        <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        </tr>
        
    </table>
</head>
<body>
<div>
    <table>
        <tr>
        <td>lin</td>
        <td>18</td>
        <td>female</td>
        </tr>
        <tr>
            <td>lin</td>
            <td>18</td>
            <td>female</td>
        </tr>
    </table>

属性：

● border: 表格边框. （写在table里）
● cellpadding: 内边距  （写在table里）
● cellspacing: 外边距.   （写在table里）
● rowspan: 单元格竖跨多少行  （写在td tr里）
● colspan: 单元格横跨多少列（即合并单元格）（写在td tr里）

标签的两个重要属性

id：一个html文档中，id只能有一个，并且不能重复，通过这个id可以唯一确定一个标签

class：一个html文档中，class值可以有多个，可以重复

自定义属性

例如：<div id="d1" name="lin" password = '123'></div>

属性名可以自己来定，自定义属性一般用来存储数据的

form表单

form表单可以把用户输入的、选择的、上传的等都通过网络提交到后端

input:
通过改变input的属性type来达到不同的输入类型
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />

属性说明:
● name：表单提交时的“键”，注意和id的区别，name属性用于对提交到服务器后的表单数据进行识别，只有设置了name属性的表单元素才能在提交表单的时候传递他们的值。
● value：表单提交时对应项的值，会在框里显示的值。
○ type="button", "reset", "submit"时，为按钮上显示的文本年内容
○ type="text","password","hidden"时，为输入框的初始值
○ type="checkbox", "radio", "file"，为输入相关联的值
● checked：radio和checkbox默认被选中的项
● readonly：text和password设置只读
● disabled：所有input均适用禁用

multiple：布尔属性，设置后为多选，否则默认单选

通过id值绑定：for的值与id一致，这样在点击文字标题时，可跳转至后面的文本框

<p>
        <label for="username">用户名</label>
        <input type="text" id="username" name="username" value="kevin" readonly placeholder="请输入用户名">  
<!--        id是唯一的，id是什么for后面就是什么才能找到，value输入就是固定输出值，无法在前端更改，readonly只读 placeholder/；是提示框，鼠标点击就消失-->
    </p>
    <p>
        <label for="password">密码</label>
        <input type="password" id="password" name="password">
    </p>

年月：

 <p>
        <input type="date" >
<!--          年月日选择修改-->
    </p>

选项：

 <p>
         <input type="radio" name="gender" value="1"> 男
         <input type="radio" name="gender" checked="checked" value="2"> 女
         <input type="radio" name="gender" value="3"> 未知
<!--         name="gender"就是进行单选，如果不加这个就会变成多选。value="1"，是在选择后，后端可以看到value是选择了什么值，如果不写，则看不到选的是什么，checked="checked"是初始固定选择的值-->
    </p>

下拉框选择：

    <p>
        <select name="city" id=""  >
            <option value="1" >北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
        </select>        
<!--        下拉框选择-->
    </p>

上传文件：

<p>
        <input type="file" name="myfile">
    </p>

文本框：

<p>
        <textarea name="textarea" id="" cols="20" rows="10"></textarea>
    </p>

按钮：

<p>
        <input type="submit" value="登录">
        <input type="button" value="登录">
        <button>登录</button>
        <input type="reset" value="重置">
    </p>
    <p>
        <input type="hidden" id="" name="">
    </p>

验证form表单提交数据到后端

在html中

action：

1、什么都不写，默认提交到当前地址

2、全写，绝对地址

3、只写后缀，如/index/ 他会自动拼接当前计算机的ip+prot 如：http://127.0.0.1:5000/index/

文件的提交：

必须满足两个条件：

1、请求方式必须是post

2、enctype必须是form—data

form表单提交数据的编码方式：

　　application/x-www-form-urlencoded

1、urlencode：普通文本框提交的都是这个格式，只能提交普通文本数据，不能提交文件数据。

　　multiparty/form—data

　　form—data：提交文件必须使用这个方式，可以提交普通文件数据，也可以提交文件数据

3、json form表单不能提交json格式数据

用的是flask框架做出后端语言

要导入模块flask

from flask import Flask,request

app = Flask(__name__)

# 路由，网址的后缀 baidu.com/index/
@app.route('/index/',  methods=['GET', 'POST']) # 默认使用的是GET请求
def index():
    # 如何拿到前端提交过来的数据
    # 前端以post请求方式提交的
    print(request.form) # 只能拿到post请求的数据
    # print(request.args) # 拿到get请求的数据
    # 如何接收文件数据
    print(request.files)
    file_obj = request.files.get('myfile')
    print(file_obj.filename) # 965_001_dq3_3600_5400.jpg

    with open(file_obj.filename, 'wb') as f:
        for line in file_obj:
            f.write(line)
    return 'OK'

app.run()

posted @ 2023-07-16 20:02 别管鱼油我了阅读(34) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端vue

· 接口文档、jwt

· 前端（HTML）

· 前端学习笔记

· 前端简介、http、html

阅读排行：
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· DeepSeek在M芯片Mac上本地化部署
· 葡萄城 AI 搜索升级：DeepSeek 加持，客户体验更智能

公告

昵称：别管鱼油我了
园龄： 1年9个月
粉丝： 6
关注： 6

+加关注

2025年3月

日

一

二

三

四

五

六

YeeQX

HTML

前端

学前端原因

前端学习内容

软件开发架构

HTTP协议

HTML简介

创建HTML文件的方式

pycharm创建html文件默认代码解释

HTML文档介绍

打开html的方式

HTML里的head标签使用

head标签里常用标签

body中常用标签（在浏览器中看到什么就在这里写什么）

常用标签

特殊字符（实体符号）

div标签和span标签

标签的嵌套

img标签

a标签

列表标签

表格

标签的两个重要属性

form表单

验证form表单提交数据到后端

公告

搜索

常用链接

随笔档案

阅读排行榜

推荐排行榜