当前位置： 首页 > news >正文

前端知识与基础应用#2

news 2025/8/2 20:50:09

标签的分类

关于标签我们可以分为 ：

单标签：img, br hr

双标签：a，h,div

按照属性可分为：

块儿标签（自己独自占一行）：h1-h6, p,div

行内（内联）标签（自身多大就占多少）：a, span,u,i,b

当我们输入h标签和a标签时可以看到

我们所输入的结果是这样的，其实这就是块儿标签和行内标签的区别

div标签和span标签

div和span标签单独拿出来是没有任何意义的，主要的作用是页面布局，在布局当中

div的作用是占位置布局

span是文本布局

标签的嵌套

标签之间是可以互相嵌套的，块儿级元素是可以嵌套所有的标签，要注意的是p标签不能嵌套块儿级元素，但是可以 嵌套行内元素

行内元素只能嵌套行内元素，不能嵌套块儿级元素

针对前端来说不会轻易的报错，如果我们写的不对，只会没有对应的效果

例：

我们以小米商城为例：在小米商城中可以发现这些都是使用div用来占位的，而span是文本占位

并且使用了标签的嵌套。

img标签

关键字 src

img标签是展示图片的 ，如果width设置了width=“500px” height=“200”，如果不一致则会出现变形失真，所以一般情况下只写一个就行。

当图片损坏时，在alt中填写内容时会发现

我们也可以不使用外链，使用本地的图片

这样就出来了

当地址文件不在当前文件夹内时，我们可以使用

如果在上一级时，也可以使用

总结：src：

1. 可以使用外链的地址

2。 可以使用本地的地址

title：
    鼠标悬浮的时候显示的内容(是所有标签都要的)
width: 图片的宽度
height：图片的高度

alt：当图片不存在的时候，显示的内容

a标签

关键字 href

target 后面如果是_self 自己直接跳转到页面了，但是如果是_blank 则会新建页面然后跳转

标签自带的两种属性

id  值：一个文本中只能有唯一的id值，id值不能重复

class 值：一个标签可以有多个class值，一个class值可以被多个标签使用

当我们使用标签c1来找，可以找到d1，d3 和d4.想要使用id值，必须使用#查找

想要使用class值时使用点（.查找）

<div id="d1" class="c1"></div>
<div id="d2" class="c2"></div>
<div id="d3" class="c1 c2 c3"></div>
<div id="d4" class="c1"></div>

列表

关键字<ul>

无序列表

<body>
<ul><li>第一个</li><li>第二个</li><li>第三个</li>
</ul></body>

可以更改上面的符号

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

type属性：

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）
有序列表

关键字：<ol><ol>

区别就是加上了序号，使用type可以更改

<ol type="I"><li>第一个</li><li>第二个</li><li>第三个</li>
</ol>

type属性：

  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

标题列表

关键字<dl>

  </ol><dl><dt>标题1</dt><dd>内容1</dd><dt>标题2</dt><dd>内容2</dd></dl>
</body>

表格

添加多行数据：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="2"><thead><tr><th>id</th><th>name</th><th>age</th><th>gender</th><th>salary</th></tr></thead><tbody><tr><td>1</td><td>kiki</td><td>21</td><td>female</td><td>22222</td></tr><tr><td>2</td><td>kiki1</td><td>22</td><td>male</td><td>12222</td></tr> <tr><td>3</td><td>lll</td><td>25</td><td>female</td><td>22242</td></tr></tbody>
</table></body>
</html>

加上边框结果<table 属性>

属性:

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）

form表单标签

input加上属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="">
<!--  使用div或p都可以--><div>
<!--    <lable for=""></lable>点击后直接选中填写，绑定id值--><label for="1">账号:<input type="text" id="1"></label></div><div><label for="2">
<!--      type=password：所填密码使用密文显示-->密码：<input type="password" id="2"></label><p><label for="3">
<!--      type=date：表示日期-->日期：<input type="date" id="3"></label></p><p><lable>这是按钮：<input type="button" value="普通按钮"></lable></p><p>
<!--      添加复选(多选)--><input type="checkbox"> 读书<input type="checkbox"> 游戏<input type="checkbox"> 足球</p><p>
<!--      添加单选，需要id一致--><input type="radio" name="gender" /> 男<input type="radio" name="gender" /> 女<input type="radio" name="gender" /> 未知</p><p><input type="submit" value="登录"><input type="reset">
<!--      选择单个文件-->
<!--      <input type="file">-->
<!--      选择多个文件--><input type="file"multiple></p><p><select name="" id=""><option value="">上海</option><option value="">北京</option><option value="">安徽</option></select></p></div></form>
</body>
</html>

结果：

<input> 元素会根据不同的 type 属性，变化为多种形态

属性说明:

  • name：表单提交时的“键”，注意和id的区别
  • value：表单提交时对应项的值
    • type="button", "reset", "submit"时，为按钮上显示的文本年内容
    • type="text","password","hidden"时，为输入框的初始值
    • type="checkbox", "radio", "file"，为输入相关联的值
  • checked：radio和checkbox默认被选中的项
  • readonly：text和password设置只读
  • disabled：所有input均适用

select标签
<p><select name="" id=""><option value="">上海</option><option value="">北京</option><option value="">安徽</option></select></p>

属性：

  • multiple：布尔属性，设置后为多选，否则默认单选
  • disabled：禁用
  • selected：默认选中该项
  • value：定义提交时的选项值

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

!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:5000/index">
<!--  使用div或p都可以--><div>

后端：

from flask import Flask,request
app = Flask(__name__)#路由：网络的路径
@app.route('/index',methods=['GET','POST'])    # 默认情况下只允许get提交加上methods=['GET', 'POST']
def index():print('sasas')print(request.form)    # 接受post提交过来的数据print(request.files)   # 接受文件的return'index'
app.run(

<form action="">
    action:        填写的是后端提交的地址

这里你写什么地址就朝这个地址提交数据，应该填写后端的地址
        1. 什么都不写：朝当前地址提交
        2. 全写：http://127.0.0.1:5000/index/ 朝这个地址提交
        3. 只写后缀
            /index/-------->IP:PORT/index

后端的结果就是所填的内容

form表单要想把数据提交到后端，每一个标签都要有一个name属性

name的属性值就是提交到后端数据的key值，用户输入的内容就是value值

针对于复选框、单选框标签都应该有一个value属性，用于区别前端用户选择的哪个选项

1. 请求方式必须是post
2. 数据编码方式：
    1. application/x-www-form-urlencoded
    2. multipart/form-data
    3. json
    
3. 编码方式必须是multipart/form-data才能提交问价
4. urlencoded只能够提交不是文件的数据，form-data是可以提交普通数据和文件数据
5. urlencoded形式的数据长什么样子：
     username=&password=&date=&hidden=123&myfile=&city=
    
6. form-data编码格式的数据：
    username=&password=&date=&hidden=123&myfile=&city=
    boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy
    文件数据
    """对于form-data提交的数据，后端还是在form里面去普通数据，而在files里面去文件数据"""
7.  form表单不能够提交json数据
8. 如果想提交json格式的数据：Ajax技术、第三方的api工具postman

相关文章：

前端知识与基础应用#2

标签的分类 关于标签我们可以分为 &#xff1a; 单标签&#xff1a;img, br hr 双标签&#xff1a;a&#xff0c;h,div 按照属性可分为&#xff1a; 块儿标签&#xff08;自己独自占一行&#xff09;&#xff1a;h1-h6, p,div 行内&#xff08;内联&#xff09;标签&#xff08…...

编程日记 2023/11/2 10:47:03

【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割6（数据预处理）

由于之前哔站作者整理的LUNA16数据处理方式过于的繁琐&#xff0c;于是&#xff0c;本文就对LUNA16数据做一个新的整理&#xff0c;最终得到的数据和形式是差不多的。但是&#xff0c;主要不同的是代码逻辑比较的简单&#xff0c;便于理解。 对于数据集的学习&#xff0c;可以…...

编程日记 2023/11/2 10:46:02

硬件加速器及其深度神经网络模型的性能指标理解

前言&#xff1a; 现如今&#xff0c;深度神经网络模型和硬件加速器&#xff0c;如GPU、TPU等的关系可谓是“不分彼此”&#xff0c;随着模型参数的增加&#xff0c;硬件加速器成为了训练、推理深度神经网络不可或缺的一个工具&#xff0c;而近年来硬件加速器的发展也得益于加速…...

编程日记 2023/11/2 10:45:00

嵌入式每日500（4）231104 (Flash类型定义、Flash常量定义、Flash函数)

文章目录 1.Flash类型定义&#xff08;两个结构体&#xff09;2.Flash常量定义&#xff08;3种&#xff09;3.Flash函数&#xff08;31个&#xff0c;FLASH分为两个区&#xff0c;一个是普通的存储空间&#xff0c;一个是选项字节OB&#xff0c;函数名里带OB的就是对选项字节空…...

编程日记 2023/11/2 10:43:59

21款奔驰GLC300L升级23P驾驶辅助 出行更加的安全

驾驶辅助和自动驾驶的区别就是需要人为去接管&#xff0c;虽然车辆会根据道路自己行驶&#xff0c;弯道上也能居中自动修正行驶&#xff0c;长时间不接管方向盘&#xff0c;系统会提示人为接管&#xff0c;这就是奔驰的23P驾驶辅助系统&#xff0c; 很多车友升级23P驾驶辅助系…...

编程日记 2023/11/2 10:42:58

【小黑嵌入式系统第七课】PSoC® 5LP 开发套件（CY8CKIT-050B ）——PSoC® 5LP主芯片、I/O系统、GPIO控制LED流水灯的实现

上一课&#xff1a; 【小黑嵌入式系统第六课】嵌入式系统软件设计基础——C语言简述、程序涉及规范、多任务程序设计、状态机建模(FSM)、模块化设计、事件触发、时间触发 文章目录 一、PSoC 5LP主芯片二、PSoC 5LP I/O系统(1) I/O系统特性(2) I/O系统怎样运作&#xff1f;1、I/…...

编程日记 2023/11/2 10:41:57

深度学习简史

一、说明 为了学习好深度学习&#xff0c;有必要知道深度学习的整个成长历史&#xff0c;可以说&#xff0c;深度学习的发展历程伴随整个人工智能的成长历程&#xff0c;本文将介绍这个历程的关键性历史节点。 二、深度学习的旅程 2.1 深度学习的当前认知 深度学习是机器学习的…...

编程日记 2023/11/2 10:40:56

CSRF 和 XSS 是什么

在Web开发中&#xff0c;安全性是至关重要的。然而&#xff0c;随着网络攻击技术的不断演进&#xff0c;跨站请求伪造&#xff08;CSRF&#xff09;和跨站脚本攻击&#xff08;XSS&#xff09;成为了最常见和具有破坏力的网络安全威胁之一。本文将介绍CSRF和XSS的概念、原理以及…...

编程日记 2023/11/2 10:39:55

亚信科技发布“电信级”核心交易数据库AntDB7.0，助力政企“信”创未来！

昨日&#xff0c;亚信科技AntDB数据库 7.0产品线上发布会成功举办&#xff0c;数千位关注亚信科技、关注国产数据库&#xff0c;致力于推动数据库行业变革的专家、客户热情参与&#xff0c;并对发布会及产品给予高度评价。 新增两大技术特性 作为我国最早一批独立研发的通用型…...

编程日记 2023/11/2 10:38:54

硬件调试-电源纹波测量

硬件调试-电源纹波测量 Fang XS.1452512966qq.com如果有错误&#xff0c;希望被指出&#xff0c;学习技术的路难免会磕磕绊绊量的积累引起质的变化感谢酸奶大佬提供的硬件技术指导&#xff1b; 电源纹波 百度百科定义如下&#xff1a; 纹波是由于直流稳定电源的电压波动而造…...

编程日记 2023/11/2 10:37:54

【洛谷算法题】P5710-数的性质【入门2分支结构】

&#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5710-数的性质【入门2分支结构】&#x1f30f;题目描述&#x1f30f;输入格式&a…...

编程日记 2023/11/2 10:36:53

arcgis图上添加发光效果！

看完本文， 你可以不借助外部图片素材， 让你的图纸符号表达出你想要的光！ 我们以之前的某个项目图纸为例，来介绍下让符号发光的技术！ 第一步—底图整理 准备好栅格影像底图、行政边界的矢量数据，确保“数据合适、位置正确、边界吻合”。 确定好图纸的大小、出图比例、投…...

编程日记 2023/11/2 10:35:52

[MySQL]——SQL预编译、动态sql

键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 一、SQL的预编译 &#x1f4d5;一条SQL语句的执行过程 &#x1f4d5;弊端 &#x1f4d5;预编译SQL的优势 &#x1f4d5;两种参数占位符 &#x1f4d5;小结 二、动态SQL &#x1f4d5;概念介绍&#xff1a; &#x1f4…...

编程日记 2023/11/2 10:34:51

安装ifconfig命令（两步搞定）

如果你输入ifconfig显示没有这条命令&#xff0c;最可能的原因就是你在安装CentOS&#xff0c;先择的是最小安装模式&#xff0c;默认不安装ifconfig等命令&#xff0c; 解决办法&#xff1a;1. yum安装ifconfig这个命令包。命令&#xff1a;yum search ifconfig 2.通过yum …...

编程日记 2023/11/2 10:33:50

【蓝桥杯 第十届省赛Java B组】真题训练（A - H）H待更新

目录 A、组队 - 看图一眼出答案 B、不同子串 - 字符串模拟 set去重 C、数列求值 - 模拟取余 D、数的分解 - 三重暴力 E、迷宫 - bfs 判断路径 F、特别数的和 - 弱智模拟 G、外卖店优先级 - map 暴力&#xff08;90%通过率&#xff09; H、人物相关性分析 - A、组队 -…...

编程日记 2023/11/2 10:32:49

【牛客题】二进制求和 ＜模拟＞

给定两个用字符串表示的二进制数&#xff0c;返回他们的和。 数据范围&#xff1a;字符串长度满足 1 ≤ n ≤ 1 0 5 10^5 105 &#xff0c;字符串中只含有 0 和 1&#xff0c;且保证除 0 以外的二进制数没有前导零的情况。 示例输入&#xff1a; "101","1&qu…...

编程日记 2023/11/2 10:31:46

Error:Only idle or expired IP address can be disabled.

华为数通设备&#xff0c;在配置DHCP排除地址时可能会出现以下情况 Error:Only idle or expired IP address can be disabled. 这是因为地址已经被分配出去&#xff0c;所以现在无法进行排除 解决方法 1.先进入接口关闭DHCP [CE2-GigabitEthernet0/0/1]undo dhcp select g…...

编程日记 2023/11/2 10:30:45

Xubuntu16.04系统中create_ap开启5G网络的踩坑记录

Xubuntu16.04系统中安装create_ap创建无线AP&#xff1a; https://blog.csdn.net/qq_45445740/article/details/133972642?spm1001.2014.3001.5501 目录 1.create_ap.conf 配置文件解析2.关于信号强度和延时2.1 信号强度2.2 信号延时2.3 网络延时测试工具推荐——PingPlotter …...

编程日记 2023/11/2 10:29:43

8. 一文快速学懂常用工具——Linux命令（上）

本章讲解知识点 引言 指令学习 本专栏适合于软件开发刚入职的学生或人士&#xff0c;有一定的编程基础&#xff0c;帮助大家快速掌握工作中必会的工具和指令。本专栏针对面试题答案进行了优化&#xff0c;尽量做到好记、言简意赅。如专栏内容有错漏&#xff0c;欢迎在评论区指…...

编程日记 2023/11/2 10:28:41

@RestController注解说明

在Spring框架中&#xff0c;RestController注解是一个非常重要的注解&#xff0c;它用于将一个类标记为RESTful风格的控制器。本文将详细介绍RestController注解的作用和用法&#xff0c;并提供示例以帮助读者更好地理解和使用它。 RestController的作用 RestController注解是…...

编程日记 2023/11/2 10:27:40

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/7/18 7:48:04

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/7/28 19:57:25

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/8/2 20:38:44

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/8/1 15:11:51

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/8/2 16:24:54

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/7/5 5:39:52

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/8/1 11:35:07

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/7/8 7:13:34

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/7/24 7:13:48

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/7/30 19:21:29