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

前端知识与基础应用#2

news 2025/11/12 1:46:28

标签的分类

关于标签我们可以分为 ：

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

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/10/6 14:17:21

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/11/7 19:59:15

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/11/10 21:08:07

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/11/8 8:46:12

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2025/11/7 21:04:29

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/7/17 22:23:49

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...

编程新知 2025/11/11 2:18:43

鸿蒙（HarmonyOS5）实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

编程新知 2025/8/17 6:30:11

智能职业发展系统：AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

编程新知 2025/9/26 10:15:18

加密通信 + 行为分析：运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...

编程新知 2025/9/9 18:03:51