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

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

news 2025/6/29 21:28:45

一、 标签的分类

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

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

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

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

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

MySQL高性能优化规范建议

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

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

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

本文为&#x1f517;小白入门Pytorch内部限免文章 &#x1f368; 本文为&#x1f517;小白入门Pytorch中的学习记录博客&#x1f366; 参考文章&#xff1a;【小白入门Pytorch】乳腺癌识别&#x1f356; 原作者&#xff1a;K同学啊 在本案例中&#xff0c;我将带大家探索一下深…...

编程日记 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 这样直接把变量传入包含函数的。 在很多时候包含的变量文件不是完全可控的&#xff0c;比如下面这段代码指定了前缀和后缀: <?php $file S_GET[filename]; include /opt/…...

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

SpringBoot篇---第四篇

系列文章目录 文章目录 系列文章目录一、springboot常用的starter有哪些二、 SpringBoot 实现热部署有哪几种方式&#xff1f;三、如何理解 Spring Boot 配置加载顺序&#xff1f; 一、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学习笔记 （附代码）

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

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

SpringSecurity 认证实战

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

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

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

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

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

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

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

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

C++二叉树剪枝

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

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

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

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

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

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

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

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

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

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

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

MATLAB——多层小波的重构

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

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

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

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

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

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/6/19 11:42:45

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/6/29 18:40:59

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/6/21 15:38:27

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/6/21 18:39:29

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/6/21 9:02:37

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/6/25 2:55:46

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/6/26 22:36:32

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/6/16 21:06:50

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47