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

前端知识与基础应用#2

news 2025/6/1 23:51:01

标签的分类

关于标签我们可以分为 ：

单标签：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

每个路由器接口，都必须分配所属网络内的 IP 地址，用于转发数据包

在IP网络中&#xff0c;主机&#xff08;Host&#xff09;和路由器接口&#xff08;Router Interface&#xff09;都需要分配网络地址&#xff08;IP地址&#xff09;。 1. 主机&#xff08;Host&#xff09;的IP地址分配 (1) 作用 主机的IP地址用于唯一标识该设备&#xff0…...

编程新知 2025/6/1 23:44:13

PostgreSQL ERROR: out of shared memory处理

使用pg_dump命令导出一个库的时候&#xff0c;报 pg_dump: error: query failed: ERROR: out of shared memory HINT: You might need to increase "max_locks_per_transaction". 从错误字面上看是超出内存大小了&#xff0c;建议增加max_locks_per_transaction参…...

编程新知 2025/6/1 21:21:03

设计模式——适配器设计模式（结构型）

摘要 本文详细介绍了适配器设计模式&#xff0c;包括其定义、核心思想、角色、结构、实现方式、适用场景及实战示例。适配器模式是一种结构型设计模式&#xff0c;通过将一个类的接口转换成客户端期望的另一个接口&#xff0c;解决接口不兼容问题&#xff0c;提高系统灵活性和…...

编程新知 2025/6/1 21:17:54

【LUT技术专题】图像自适应3DLUT

3DLUT开山之作: Learning Image-adaptive 3D Lookup Tables for High Performance Photo Enhancement in Real-time&#xff08;2020 TPAMI &#xff09; 专题介绍一、研究背景二、图像自适应3DLUT方法2.1 前置知识2.2 整体流程2.3 损失函数的设计 三、实验结果四、局限五、总结…...

编程新知 2025/6/1 12:16:56

【基础算法】高精度（加、减、乘、除）

文章目录 什么是高精度1. 高精度加法解题思路代码实现 2. 高精度减法解题思路代码实现 3. 高精度乘法解题思路代码实现 4. 高精度除法 (高精度 / 低精度)解题思路代码实现 什么是高精度 我们平时使用加减乘除的时候都是直接使用 - * / 这些符号&#xff0c;前提是进行运算的数…...

编程新知 2025/6/1 11:50:29

顶会新热门：机器学习可解释性

&#x1f9c0;机器学习模型的可解释性一直是研究的热点和挑战之一&#xff0c;同样也是近两年各大顶会的投稿热门。 &#x1f9c0;这是因为模型的决策过程不仅需要高准确性&#xff0c;还需要能被我们理解&#xff0c;不然我们很难将它迁移到其它的问题中&#xff0c;也很难进…...

编程新知 2025/6/1 8:59:00

Wi-Fi 切换 5G 的时机

每天都希望 Wi-Fi 在我离开信号覆盖范围时能尽快切到 5G&#xff0c;但每次它都能坚挺到最后半格信号&#xff0c;我却连看个天气预报都看不了…我不得不手工关闭 Wi-Fi&#xff0c;然后等走远了之后再打开&#xff0c;如此反复&#xff0c;不厌其烦。 早上出门上班&#xff0c…...

编程新知 2025/6/1 8:50:12

【OpenHarmony】【交叉编译】使用gn在Linux编译3568a上运行的可执行程序

linux下编译arm64可执行程序 一.gn ninja安装二.交叉编译工具链安装1.arm交叉编译工具2.安装arm64编译器 三. gn文件添加arm及arm64工具链四.编译验证 本文以gn nijia安装中demo为例&#xff0c;将其编译为在arm64(rk_3568_a开发板)环境下可运行的程序 一.gn ninja安装 安装g…...

编程新知 2025/6/1 4:49:12

截屏精灵：轻松截屏，高效编辑

在移动互联网时代&#xff0c;截图已经成为我们日常使用手机时的一项基本操作。无论是记录重要信息、分享有趣内容&#xff0c;还是进行学习和工作&#xff0c;一款好用的截图工具都能极大地提升我们的效率。截屏精灵就是这样一款功能强大、操作简单的截图工具&#xff0c;它不…...

编程新知 2025/6/1 3:54:15

【.net core】SkiaSharp 如何在Linux上实现

1. 安装依赖库 首先需要安装 SkiaSharp 运行时依赖&#xff1a; # Ubuntu/Debian sudo apt-get update sudo apt-get install -y libfontconfig1 libfreetype6 libx11-6 libx11-xcb1 libxcb1 \libxcomposite1 libxcursor1 libxdamage1 libxi6 libxtst6 \libnss3 libcups2 lib…...

编程新知 2025/6/1 3:37:32