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

10.30 知识总结（标签分类、css介绍等）

news 2025/9/13 18:53:00

一、标签的分类

1.1 单标签

img br hr
<img />

1.2 双标签

a h p div <a></a>

1.3 按照标签属性分类

1.3.1 块儿标签

即自己独自占一行
h1-h6 p div

1.3.2 行内(内联)标签

即自身文本有多大就占多大
a span u i b s

二、标签的嵌套

标签之间是可以互相嵌套的，标签套标签
块儿级元素是可以嵌套所有的标签的
p标签不能够嵌套块儿级元素，但是它可以嵌套行内元素
行内元素只能嵌套行内元素，不能够嵌套块儿级元素，非写了嵌套，也不报错，只不过是没有效果
"""针对于前端来说，不会轻易的报错! 如果你写的不对，只会没有对应的效果"""

三、 div标签和span标签

这两个标签它是没有任意意义的，主要用来'布局'页面
div一般用在占位置布局
span一般用在占文本布局

四、 img标签

展示图片的
https://img2.baidu.com/it/u=464791776,3312333293&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1698771600&t=9777764d1fe6560f394478126fb7563b

<img src="123.png" title="你看我好看吗" width="200px" alt="">

src：
1. 内部的图片地址
2. 写外链的地址
title：
鼠标悬浮的时候显示的内容(是所有标签都要的)
width: 图片的宽度
height：图片的高度
一般情况下只写一个，等比例缩放
alt：当图片不存在的时候，显示的内容

五、 a标签

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

href属性指定目标网页地址。该地址可以有几种类型：
● 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
● 相对URL - 指当前站点中确切的路径（href="index.htm"）
● 锚URL - 指向页面中的锚（href="#top"）

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

注：标签的两个自带重要属性

id 值: 相当于是人的身份证，一个文档中，id值不能够重复，必须唯一
class 值：是可以有多个的，一个标签可以有多个class值，一个class值也可以被多个标签拥有
<div id="d1" class='c1 c2 c3'></div>
<div id="d2" class='c2'></div>
<div id="d3" class='c3'></div>
<div id="d3" class='c1'></div>
#d1
.c1
要想使用id值，必须使用#开头
要想使用class值，必须使用 .开头

六、列表

1.无序列表
   <ul type="disc">
<li>第一项</li>
<li>第二项</li>
   </ul>
type属性：
● disc（实心圆点，默认值）
● circle（空心圆圈）
● square（实心方块）
● none（无样式）

2.有序列表
3.标题列表

七、表格

id name age gender salary
1 kevin 20 male 2000
1 kevin 20 male 2000
1 kevin 20 male 2000
1 kevin 20 male 2000
1 kevin 20 male 2000
1 kevin 20 male 2000

table标签
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>

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

八、 form表单标签

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

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

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

<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

九、 CSS

9.1 css介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
"""CSS就是对HTML标签做样式的，让不好看的变得更加的好看"""
CSS语法：
选择器 {
属性名1:属性值;
属性名2:属性值;
属性名3:属性值;
属性名4:属性值;
属性名5:属性值;
}

CSS注释:
/*这是注释*/
HTML注释：
   
注释符号的快捷键是：ctrl + ?

CSS的几种引入方式:
行内样式:
<p style="color: red">Hello world.</p>

内部样式：
   <head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: #2b99ff;
}
</style>
</head>

外部样式：
   <link href="mystyle.css" rel="stylesheet" type="text/css"/>

9.2 CSS选择器

"""如何学习CSS?"""
1. 先学习如何找到标签
2. 找到标签之后在进行属性操作

选择器种类非常之多，但是，大多数都是了解的，用的最多的也就几个，对我们来说，只需要掌握这几个就可以了
基本选择器：
ID选择器
类选择器
元素选择器
通用选择器
组合选择器
后代选择器
"""
我们使用亲戚关系表示标签之间的关系
<div id="div1"> div是p的父亲，p是div 的儿子
<p class="c1"> p是a的父亲，a是p的儿子，a是div的孙子
<a href="">点我把</a>
<a href="">点我把</a>
<a href="">点我把</a>
</p>
div
<a href="">我会不会变颜色呢</a> a是p的兄弟
</div>

<p> p是div的兄弟
<a href="">哈哈哈哈</a>
</p>
"""

10.30 知识总结（标签分类、css介绍等）

一、标签的分类 1.1 单标签 img br hr <img /> 1.2 双标签 a h p div <a></a> 1.3 按照标签属性分类 1.3.1 块儿标签即自己独自占一行 h1-h6 p div 1.3.2 行内(内联)标签即自身文本有多大就占多大 a span u i b s 二、标签的嵌套标签之间是可以互相…...

编程日记 2023/10/31 2:53:13

DoLa：对比层解码提高大型语言模型的事实性

DoLa：对比层解码提高大型语言模型的事实性摘要1 引言2 方法2.1 事实知识在不同层级上演化2.2 动态早期层选择2.3 预测对比 3 实验3.1 任务3.2 实验设置3.3 多项选择3.3.1 TruthfulQA：多项选择3.3.2 FACTOR：维基、新闻 3.4 开放式文本生成3.4…...

编程日记 2023/10/31 2:52:10

解决由于找不到mfc140u.dll无法继续执行此代码问题的4个方法

mfc140u.dll是Microsoft Foundation Class（微软基础类库）中的一个动态链接库文件，它包含了许多用于实现Windows应用程序的基本功能。当我们在编写或运行基于MFC的程序时，如果系统中缺少这个文件，就会出现“找不到mfc14…...

编程日记 2023/10/31 2:49:07

MySQL高性能优化规范建议

当涉及到MySQL数据库的性能优化时，有许多方面需要考虑。以下是一些通用的MySQL性能优化规范建议： 合适的索引： 确保表中的字段使用了适当的索引。这能大幅提升检索速度。但避免过多索引，因为它会增加写操作的成本。优化查询语句…...

编程日记 2023/10/31 2:48:06

pytorch 入门（五）案例三：乳腺癌识别-VGG16实现

本文为🔗小白入门Pytorch内部限免文章 🍨 本文为🔗小白入门Pytorch中的学习记录博客🍦 参考文章：【小白入门Pytorch】乳腺癌识别🍖 原作者：K同学啊在本案例中，我将带大家探索一下深…...

编程日记 2023/10/31 2:47:05

vue中electron与vue通信（fs.existsSync is not a function解决方案）

electron向vue发送消息 dist/main.js (整个文件配置在另一条博客里) win new BrowserWindow({width:1920,height:1080,webPreferences: {// 是否启用Node integrationnodeIntegration: true, // Electron 5.0.0 版本之后它将被默认false// 是否在独立 JavaScript 环境中运行…...

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

LSTM-Based Anomaly Detection of Process Instances Benchmark and Tweaks翻译

论文《LSTM-Based Anomaly Detection of Process Instances Benchmark and Tweaks》翻译 LSTM-Based Anomaly Detection of Process Instances Benchmark and Tweaks翻译...

编程日记 2023/10/31 2:44:59

文件类漏洞总结, 文件包含, 文件上传, 文件下载

文件类漏洞总结一, 文件包含 1. 文件包含绕过实际环境中不是都是像$_GET[file]; incude $file 这样直接把变量传入包含函数的。在很多时候包含的变量文件不是完全可控的，比如下面这段代码指定了前缀和后缀: <?php $file S_GET[filename]; include /opt/…...

编程日记 2023/10/31 2:43:58

SpringBoot篇---第四篇

系列文章目录文章目录系列文章目录一、springboot常用的starter有哪些二、 SpringBoot 实现热部署有哪几种方式？三、如何理解 Spring Boot 配置加载顺序？ 一、springboot常用的starter有哪些 spring-boot-starter-web 嵌入tomcat和web开发需要servlet…...

编程日记 2023/10/31 2:42:57

Knife4j使用教程（一） -- 在不同版本SpringBoot，选用不同的Knife4j相关的jar包

目录 1. Knife4j的项目背景 2. Knife4j的选择 2.1 选用 Spring Boot 版本在 2.4.0~3.0.0之间 2.2 选用 Spring Boot 版本在 3.0.0之上...

编程日记 2023/10/31 2:41:55

Octave Convolution学习笔记（附代码）

论文地址：https://export.arxiv.org/pdf/1904.05049 代码地址：https://gitcode.com/mirrors/lxtgh/octaveconv_pytorch/overview?utm_sourcecsdn_github_accelerator 1.是什么？ OctaveNet网络属于paper《Drop an Octave: Reducing Spatia…...

编程日记 2023/10/31 2:39:53

SpringSecurity 认证实战

一. 项目数据准备 1.1 添加依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId></dependency><!--web起步依赖-…...

编程日记 2023/10/31 2:38:52

echarts中横向柱状图的数字在条纹上方

实现效果： 数字在条纹的上方实现方法：这些数字是用新添加一个坐标轴来实现的直接添加坐标轴数字显示是在条纹的正右边所以需要配置一下偏移完整代码 var option {grid: {left: "3%",right: "4%",bottom: "3%",cont…...

编程日记 2023/10/31 2:37:51

【仙逆】尸阴宗始祖现身，王林修得黄泉生窍诀，阿呆惊险逃生

【侵权联系删除】【文/郑尔巴金】深度爆料最新集，王林终于成功筑基，这一集的《仙逆》动漫真是让人热血沸腾啊！在这个阶段，王林展现出了他的决心和毅力，成功地击杀了藤厉，并采取了夺基大法，从藤…...

编程日记 2023/10/31 2:36:50

C++二叉树剪枝

文章目录 C二叉树剪枝题目链接题目描述解题思路代码复杂度分析 C二叉树剪枝题目链接 LCR 047. 二叉树剪枝 - 力扣（LeetCode） 题目描述给定一个二叉树根节点 root ，树的每个节点的值要么是 0，要么是 1。请剪除该二叉树中所有节…...

编程日记 2023/10/31 2:32:43

ZooKeeper中节点的操作命令（查看、创建、删除节点）

天行健，君子以自强不息；地势坤，君子以厚德载物。每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。…...

编程日记 2023/10/31 2:31:43

el-table多选表格实现默认选中删除选中列表取消勾选等联动效果

实现效果如下： 代码如下： <template><div><el-tableref"multipleTable":data"tableData"tooltip-effect"dark"style"width: 100%"selection-change"handleSelectionChange"><…...

编程日记 2023/10/31 2:29:41

预安装win11的电脑怎么退回正版win10？

对于新购的笔记本通常来讲预装的系统是全新安装的，是没有之前Windows10系统文件的，无法回退。可以打开设置-----系统----恢复-----看下是否有该选项。 ------------------------------------------------------------------------------- 若是在上述…...

编程日记 2023/10/31 2:28:40

MATLAB——多层小波的重构

%% 学习目标：多层小波的重构 %% 程序1 clear all; close all; load noissin.mat; xnoissin; [C,L]wavedec(x,3,db1); %小波多层分解 ywaverec(C,L,db1); %重构，必须小波类型一致 emax(abs(x-y)) %重构的误差 %% 程序2 clear all;…...

编程日记 2023/10/31 2:27:38

解锁高效创作艺术！AI助力文章生成与精美插图搭配完美融合

在当今这个信息爆炸的时代，高效创作文章已经成为了一种必备的技能。然而，创作一篇高质量的文章并插入精美插图，往往需要耗费大量的时间和精力。现在，随着AI技术的发展，我们迎来了一个全新的文章创作时代——利用AI高效…...

编程日记 2023/10/31 2:26:36

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...

编程新知 2025/9/11 7:28:46

OpenLayers 可视化之热力图

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/7/6 21:38:30

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/9/13 17:44:49

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。核心特性与用法基本属性 v-model：绑定右侧列表的值&…...

编程新知 2025/9/13 17:43:32

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/9/9 14:56:55

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/7/23 16:26:20

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...

编程新知 2025/9/2 5:40:06