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

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

news 2025/12/15 17:18:18

一、标签的分类

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

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/12/9 1:55:05

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...

编程新知 2025/12/12 0:31:16

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

反射获取方法和属性

Java反射获取方法在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...

编程新知 2025/12/9 7:25:28

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲：核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用，还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/12/8 22:26:50

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解一、事务的核心概念（ACID） 事务是…...

编程新知 2025/9/19 22:12:36

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中，明确沟通敏捷转型目的尤为关键，团队成员只有清晰理解转型背后的原因和利益，才能降低对变化的…...

编程新知 2025/12/11 21:08:29

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址：LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译自动驾驶技术作为推动交通和城市出行变革的催化剂，正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2025/12/8 23:53:04

一、 标签的分类