【每日十分钟前端】基础篇21，为什么HTTPS更安全(SSL原理)、单行/多行文本溢出的省略样式、DOM常见的操作有哪些

news2025/1/17 5:48:55

1、[HTML]为什么HTTPS更安全(SSL原理)：对称加密、非对称加密、摘要、数字签名、数字证书。
2、[CSS]单行/多行文本溢出的省略样式。
3、[JS]DOM常见的操作有哪些？

1、[HTML]为什么HTTPS更安全(SSL原理)：

对称加密：协商密钥对数据加密
非对称加密：有一对配对的密码和钥匙
摘要：解决信息完整性问题
数字签名：解决发送方身份认证问题
数字证书：确认公钥来源

对称加密

加密和解密使用的密钥相同，是对称的。
只要保证密钥的安全，那么整个通信过程就可以说是具有有机密性。

缺点： 最开始另一方是没有密钥的，第一次通信需要发送密钥，此时会有被截获篡改的风险。

非对称加密

密钥不同：公钥与私钥。
公钥可以给任何人，私钥需要保密。

私钥加密只有对应公钥解密，反过来，公钥加密也只能用私钥解密

缺点： 速度慢

混合加密

对称加密+非对称加密，ssl使用这个。
先用非对称加密确认会话安全，再用对称加密进行会话。
过程：
（1）第一次通信的时候服务端发送公钥；
（2）客户端收到后，对一组随机数（会话密钥）进行加密，并发送给服务端；
（3）服务端用私钥这组随机数（会话密钥）进行解密；
（4）之后就用这个会话密钥进行通信。（对称加密）。

摘要

即哈希值，用于验证数据的完整性和唯一性。
不管原始数据是什么样的，得到的哈希函数都是固定的，但无法通过摘要还原到原始数据。

摘要算法

也叫散列函数、哈希函数。
过程不可逆，把任意长度的数据转化为固定长度生成独一无二的“摘要”字符串。可以原文等价，用于数据校验。

过程：
（1）客户端发送“正文”和正文对应的“摘要”
（2）服务端收到后计算“正文”的摘要得到“摘要2”
（3）对比“摘要”与“摘要2”，如果相等，则“正文”完整可信，没有被篡改。

数字签名

能证明消息确实是由发送方签名并发出来的。
只有真正的发送方才有这把私钥，上面说了私钥是保存在服务端自己这里的，不会对外发送。
原理： 用私钥加密，公钥解密。
过程：
（1）服务端发送“正文”和“数字签名”（私钥加密过的“摘要”）。
（2）客户端收到后公钥解密出“数字签名”，得到“摘要2”。
（3）对比“摘要”与“摘要2”，如果相等，则“正文”完整可信，没有被篡改。

补充：

对称/非对称加密为单方面用公钥或是私钥加密行为，加入了数字签名实现了公钥和私钥结合起来使用，相当于双重加密。

CA数字证书认证机构/数字证书

第三方机构。
谁都可以生成公钥私钥对，CA能证明这个公钥归属于真的服务器。
（对服务器的公钥多了一层加密过程）

补充：中间人攻击：
如果黑客生成了公钥私钥对冒充服务器。

过程：
（1）前置：CA持有自己的私钥，保管服务端公钥，浏览器事先内嵌“CA的公钥”（其实也是一个证书）。
（2）服务器向CA申请“公钥”，通过后CA用自己的私钥对“公钥”和一些相关信息（颁发者、有效时间等）一起打包加密，生成“数字签名”，“数字签名”和“公钥绑一起”就是“数字证书”。
（3）服务器进行通信的时候，发送这份“数字证书”。
（4）客户端接收以后首先用浏览器自带的CA的公钥解密校验“数字证书”（CA的公钥校验证书中的签名），然后证书中得到服务器的公钥，确定公钥所属后就是上述的步骤了。

2、[CSS]单行/多行文本溢出的省略样式。

单行文本溢出省略

p{
    width:300px;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

在这里插入图片描述

white-space:nowrap作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础
text-overflow:ellipsis;作用是文本溢出时显示省略标记，只有在设置了overflow:hidden和white-space:nowrap才能够生效的。

补充：
(a)、overflow：元素溢出时所需的行为

  • visible 默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden 内容会被修剪，并且其余内容是不可见的。
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  • inherit 规定应该从父元素继承 overflow 属性的值。

(b)、text-overflow: 确定如何提示用户存在隐藏的溢出内容

  • clip 剪切文本。
  • ellipsis 显示省略符号 … 来代表被修剪的文本。
  • string 使用给定的字符串来代表被修剪的文本。
  • initial 设置为属性默认值。
  • inherit 从父元素继承该属性值。

©、white-space：指定元素内的空白怎样处理

  • normal 默认。空白会被浏览器忽略。
  • pre 空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。
  • nowrap 文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。
  • pre-wrap 保留空白符序列，但是正常地进行换行。
  • pre-line 合并空白符序列，但是保留换行符。
  • inherit 规定应该从父元素继承 white-space 属性的值。

多行文本溢出省略

（1）

 p {
    width: 300px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

在这里插入图片描述

-webkit-line-clamp:2可以用来把块容器中的内容限制为指定的行数，只有与display:-webkit-box/-webkit-inline-box;和-webkit-box-orient:vertical结合使用才能实现效果。
display:-webkit-box;将对象作为弹性伸缩盒子模型显示（流体布局）。
-webkit-box-orient:vertical设置或检索伸缩盒对象的子元素的排列方式：从上到下垂直排列子元素。

在大部分情况下，也需要设置overflow:hidden 否则，里面的内容不会被裁减。

（2）用伪元素
用伪元素定位到行尾位置，遮盖文字显示“…”，多余文字用overflow: hidden;隐藏多余文字。

p {
    width: 300px;
    position: relative;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
}
p::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 0 10px;
    background-color: #fff;
}

在这里插入图片描述

ps：注意行尾的“…”位置，“…”位置是固定的，即使文本不足两行。

[JS]DOM常见的操作有哪些？

DOM节点：元素节点（div、li、p）、文本节点（<p>文本内容</p>中的“文本内容”）、属性节点（<p color="red">``</p>中的color=“red”）
DOM的常见操作：

  • 创建节点
  • 添加节点
  • 删除节点
  • 更改节点
  • 查询节点

创建节点：

createElement
创建一个新元素。

const pElement = document.createElement('p')

createTextNode
创建一个文本节点。

const pElement = document.createElement('p')
const txt=document.createTextNode("Hello World");
pElement.appendChild(txt)
document.body.appendChild(pElement);

createDocumentFragment
创建一个虚拟节点。

//HTML:
<div>
    <p>111</p>
    <p>222</p>
</div>
//JS:
const dFragment=document.createDocumentFragment();
dFragment.appendChild(document.getElementsByTagName("p")[0]);
dFragment.childNodes[0].childNodes[0].nodeValue="Milk";
document.getElementsByTagName("div")[0].appendChild(dFragment);

createAttribute
创建属性节点，可以是自定义属性。

//HTML:
<p>内容</p>
//JS:
var pElement=document.getElementsByTagName("p")[0];
var property=document.createAttribute("style");
property.value="color: skyblue";
pElement.setAttributeNode(property);

获取节点：

querySelector
返回匹配指定CSS选择器元素的第一个子元素（选中首个），没有匹配的时候返回null。
接收所有类型的参数：“.classNmae”、“#idName”、“elementName”等。

querySelectorAll
选中符合要求的所有参数
返回一个包含节点子树内所有与之相匹配的Element节点列表，如果没有相匹配的，则返[]

更新节点：

innerHTML
设置或返回元素的HTML(表格行的开始和结束标签之间)

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

innerText、textContent
设置或返回指定节点及其所有子节点的文本内容。
自动对字符串进行HTML编码，保证无法设置任何HTML标签。

两者的区别在于：读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。

style
DOM节点的style属性对应所有的CSS，可以直接获取或设置。
遇到‘-’需要转化为驼峰命名。

添加节点：

innerHTML
设置或返回元素的HTML内容（内部HTML）。
会替换掉原来所有的子节点。

appendChild
向节点添加最后一个子节点。

// HTML:
<div class="main">
    <p>aaa</p>
    <p>bbb</p>
</div>

// JavaScript
let p = document.createElement('p')
p.innerHTML = "add"
let main = document.querySelector('.main');
main.appendChild(p);

insertBefore
将节点作为子节点插入，就在您指定的现有子节点之前。
与appendChild类似，只是insertBefore在前面添加，appendChild在后面添加

parentElement.insertBefore(newElement, referenceElement)

setAttribute
指定的属性添加到元素中，并为其指定值。
如果指定的属性已经存在，则只设置/更改该值。

const div = document.getElementById('id')
div.setAttribute('class', 'white');//第一个参数属性名，第二个参数属性值

div.setAttribute('style', 'color: red');

删除节点：

removeChild
删除节点，删除后的节点虽然不再文档内，但是还在内存中，可以在以后将删除的子元素插入到元素中。
返回值为返回被删除的节点，如果节点不存在则返回 null

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/144978.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

异常检测实战应用案例精讲-【工具篇】时序异常检测TODS

异常检测实战应用案例精讲-【工具篇】时序异常检测TODS

前言 时间序列异常值检测旨在识别数据中意外或罕见的实例。作为数据分析最重要的任务之一，异常值检测在时间序列数据上有多种应用，例如欺诈检测、故障检测和网络安全攻击检测。例如，雅虎 和微软 已经建立了自己的时间序列异常值检测服务来监控他们的业务数据并触发异常值…
阅读更多...
Hudi、Iceberg底层索引Z-Order

Hudi、Iceberg底层索引Z-Order

目录 第一部分 数据库领域的Z-Order 1.1 最左匹配原则 1.2 Z-Order动机 1.3 OLTP 1.4 OLAP 第二部分 Z-Order效率分析 2.1 按照A进行查询 2.2 按照B进行查询 2.3 总结 第三部分 Z-Order缺陷 第四部分 总结及建议 参考文章 Z-Order最早是1966提出的一项将多维数据映…
阅读更多...
数据分析-深度学习 Day1

数据分析-深度学习 Day1

目录&#xff1a;第一节 机器学习&深度学习介绍第二节 机器学习攻略一、机器学习的框架二、模型训练攻略三、针对Optimization Issue的优化&#xff0c;类神经网络训练不起来怎么办(一) 局部最优点和鞍点(二) 批处理和momentum(三) 自动调节学习率Learning rate(四) 损失函…
阅读更多...
cmake的常用语法

cmake的常用语法

cmake 的注释 # 注释 #[[大段注释 第二行注释 第三行注释]]cmake的log -message cmake messagemessage(arg1 arg2 arg3 arg4) # 会自动连起message 多级别输出 message(FATAL_ERROR,"abc") # 最严重的错误&#xff0c;直接停止执行 message(SEND_ERROR,"aba…
阅读更多...
NOP+终于来了，看看蔚来随NOP+释放的数据和思考

NOP+终于来了，看看蔚来随NOP+释放的数据和思考

1. 行驶数据 ADAS功能累计用户行驶里程4.9亿公里&#xff1b;NT1的NOP功能累计行驶2.3亿公里&#xff1b;NT2的Pilot功能累计行驶了1700万公里。2. 统一辅助驾驶软件架构原来NOP将直路行驶和匝道作为两个场景开发&#xff0c;场景分割思路了城区和低速就变得无穷无尽。新NOP是以…
阅读更多...
K_A11_001 基于STM32等单片机驱动DHT11 串口与OLED0.96双显示

K_A11_001 基于STM32等单片机驱动DHT11 串口与OLED0.96双显示

K_A11_001 基于STM32等单片机驱动DHT11 串口与OLED0.96双显示一、资源说明二、基本参数1.参数2.引脚说明三、驱动说明时序对应程序:四、部分代码说明1、接线说明1.1、STC89C52RCDHT11模块1.2、STM32F103C8T6DHT11模块五、基础知识学习与相关资料下载六、视频效果展示与程序资料…
阅读更多...
锁的分类，以及锁升级原理

锁的分类，以及锁升级原理

1. 前言 锁在并发编程中非常重要&#xff0c;但是锁的种类有点多。这边文章的目的就是为了梳理锁的分类以及 锁升级的原理。 2. 锁的分类 种类\名称synchronizedReentrantLockReentrantReadWriteLock可重入锁√√√不可重入锁乐观锁①①①悲观锁√√√公平锁√√非公平锁√√√…
阅读更多...
javaweb-Servlet基本使用

javaweb-Servlet基本使用

1&#xff0c; Servlet 1.1 简介 Servlet是JavaWeb最为核心的内容&#xff0c;它是Java提供的一门动态web资源开发技术。 使用Servlet就可以实现&#xff0c;根据不同的登录用户在页面上动态显示不同内容。 Servlet是JavaEE规范之一&#xff0c;其实就是一个接口&#xff0c…
阅读更多...
关于分组函数（聚合函数）

关于分组函数（聚合函数）

分组函数&#xff1a;也叫"多行处理函数"或"聚合函数" &#xff08;特点&#xff1a;输入多行&#xff0c;最终输出一行&#xff09; 用于对表中指定字段下的内容进行统计的函数。 - count() 计数&#xff08;返回指定字段下内容不为null的数…
阅读更多...
一文看懂Linux内存管理：虚拟内存、用户空间、内核空间、用户态、内核态、IPC通信原理

一文看懂Linux内存管理：虚拟内存、用户空间、内核空间、用户态、内核态、IPC通信原理

目录 一、虚拟内存地址 1.为什么要有虚拟内存地址&#xff1f; 2.虚拟地址好处 二、用户空间和内核空间 1.概念 2.用户态和内核态 3.IPC通信原理 一、虚拟内存地址 1.为什么要有虚拟内存地址&#xff1f; 因为如果CPU直接访问物理内存&#xff0c;那如果两个进程写入一…
阅读更多...
MSF客户端渗透

MSF客户端渗透

利用Acrobat Reader漏洞执行payload ● 构造PDF文件 exploit/windows/fileformat/adobe_utilprintf仅支持8.1.2软件版本和XP系统&#xff1b; ● 构造恶意网站 exploit/windows/browser/adobe_utilprintf#同理&#xff0c;浏览器上运行pDF● 之后可以通过Meterpreter进行下一…
阅读更多...
克罗格 Kroger EDI需求分析及注意事项

克罗格 Kroger EDI需求分析及注意事项

项目背景 Kroger&#xff08;美国克罗格公司&#xff09;是具有百年历史的名店之一。它虽然历史悠久&#xff0c;但并没有被变化的世界所淘汰&#xff0c;相反&#xff0c;它围绕着市场消费需求的变化&#xff0c;不断地进行创新&#xff0c;创造了世界零售百年史上的若干个第…
阅读更多...
Linux物理内存管理：page、zone、node

Linux物理内存管理：page、zone、node

基本概念页&#xff1a;struct page &#xff0c;如下图所示&#xff0c;x86架构下一般为4K为大小分区&#xff1a;struct zone &#xff0c;如下图所示&#xff0c;x86架构下分为三个区 ZONE_DMA,ZONE_NORMAL,ZONE_HIGHMEM内存节点&#xff1a;struct node。对于一个简单的嵌入…
阅读更多...
杭州社保解读截止2023

杭州社保解读截止2023

杭州社保新政规定的社保内容以及缴费比例是怎样的? 1、养老保险&#xff1a;单位&#xff0c;14%;个人&#xff0c;8%。 2、医疗保险&#xff1a;单位&#xff0c;9.9%;个人&#xff0c;2% 。 3、失业保险&#xff1a;单位&#xff0c;0.5%;个人&#xff0c;0.5%。 4、工伤…
阅读更多...
PC浏览器无法浏览网页的解决教程

PC浏览器无法浏览网页的解决教程

前言 在浏览Potplayer官网和Github官网时&#xff0c;无论是火狐浏览器还是Edge浏览器&#xff0c;都无法正常链接到网站。以下教程不纠结具体原理&#xff0c;只介绍具体步骤&#xff0c;以便以后自查。而且以下教程以Github官网为例。 具体步骤 打开Chinese Firewall Test…
阅读更多...
excel统计函数：应用广泛的动态统计之王OFFSET 上篇

excel统计函数：应用广泛的动态统计之王OFFSET 上篇

【前言】OFFSET函数是判断Excel函数使用者是否进阶的一个重要函数之一。在实际工作中&#xff0c;如果你需要对工作中的数据文件进行系统化、自动化的建模&#xff0c;那么势必会使用这个函数。【功能及语法】OFFSET函数的功能是&#xff0c;以指定的引用为参照系&#xff0c;通…
阅读更多...
你一定要知道这6个，高质量图片素材库

你一定要知道这6个，高质量图片素材库

其实图片素材网站已经分享过很多次了&#xff0c;除了大家非常熟悉的 Pixabay、Pexels之外&#xff0c;其实还有很多优质的图片素材网。今天再给大家推荐几个&#xff0c;对你有帮助记得点赞、收藏哦&#xff01; 1、潮点视频 https://shipin520.com/shipin-tp/0-1329-0-0-0-…
阅读更多...
轻松掌握Jenkins

轻松掌握Jenkins

Jenkins一、docker安装Jenkins1.linux2.web二、流水线1.gitlab连接jenkins1.jenkins服务器创建密钥2.将密钥添加到gitlab上3.创建gitlab访问令牌4.安装jenkins插件5.配置 GitLab 凭据2.创建流水线1.新增凭证配置 Username with password2.创建任务3.构建触发器4.构建5.配置gitl…
阅读更多...
MySQL的卸载下载安装，都一条龙服务了，你还不快来？？？

MySQL的卸载下载安装，都一条龙服务了，你还不快来？？？

目录 MySQL的卸载 第一步、停止 MySQL 服务 第二步、卸载有关 MySQL 的程序 第三步、删除相关 MySQL 相关文件 第四步、删除 MySQL 残留文件 MySQL的下载 MySQL的安装 由于我的 MySQL 之前安装的版本太低&#xff0c;导致在 DataGrip 里面用不了 check 约束&#xff0c;…
阅读更多...
Android设计模式详解之桥接模式

Android设计模式详解之桥接模式

前言 桥接模式也称为桥梁模式&#xff0c;是结构型设计模式之一&#xff1b; 定义&#xff1a;将抽象部分与实现部分分离&#xff0c;使它们都可以独立地进行变化&#xff1b; 使用场景&#xff1a; 如果一个系统需要在构建的抽象化角色和具体化角色之间增加更多的灵活性&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023