我不知道的html，css和js

置顶一麻袋小猫

已于 2023-12-06 19:11:38 修改

阅读量280

点赞数

分类专栏：笔记文章标签： css html css3

于 2022-01-13 13:22:38 首次发布

本文链接：https://blog.csdn.net/Zmongo/article/details/122471674

版权

笔记专栏收录该内容

42 篇文章 1 订阅

订阅专栏

我不知道的html

html5 data-* 自定义属性

html5中添加了data-*的方式来自定义属性，
所谓data-*实际上就是data-前缀加上自定义的属性名，
使用这样的结果可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

1.pre标签
文档中提到：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
实际上就是说，当我们的字符串中存在\n,\r等等这些转义字符，并想让它生效时，可以用<pre></pre>包裹
2. section 标签
我们用

标签来布局整个最外层的章，而用

用来定义内部的章节。当然如果把整个文档都看作是一个章节，那么也可以用

来代替

，但是建议不要使用

来代替该用

布局的地方，那些地方不能体现出

的语义性。
section的作用是对页面上的内容进行分块，如各个有标题的版块、功能区或对文章进行分段，不要与有自己完整、独立内容的article混淆。
使用div,p,section,article,span等等这些html标签时，虽然都能实现效果，但是代码的语义性会有差距。
3. article 标签
html5

表示页面中的一块与上下文不相关的独立内容，比如网页中的一篇文章或报纸中的一篇文章。
article不同于其他DIV CSS布局结构，article主要布局文章类内容。
4. 新增的布局标签

1.article标签，定义一个独立内容区块，一片文章，一个视频文件等强调的是内容的独立性
2.section标签，定义一个区域，如文章的章节等作用就是给内容分段，给页面分区，页面内容分块强调的是内容的关联性
3.nav标签定义目录导航
4.aside标签：定义侧边栏
5.figure/figcaption标签，定义一组媒体内容以及它们的标题
6.header/footer，定义一个头部、底部
7.hgruop 标题的分组
8.address标签地址，联系信息等

document 节点的一些实用方法

// 以下属性和方法可以适用于所有HTML DOM 元素
1. element.accessKey 可设置或返回单选按钮的快捷键
document.getElementById('runoob').accessKey="r"
2. element.addEventListener() 向指定元素添加事件句柄
	element.removeEventListener() 移除由 addEventListener() 方法添加的事件句柄
3. element.querySelector() 返回匹配指定CSS选择器元素的第一个子元素
	document.querySelectorAll() 返回匹配指定 CSS 选择器元素的所有子元素节点列表

4. element.attributes 返回一个元素的属性数组.可以使用 length 属性确定属性的数量，然后你可以遍历所有的属性节点提取你想要的信息
5. element.className 设置或返回元素的class属性
6. element.setAttribute() 设置或者改变指定属性并指定值。
7. element.style 设置或返回元素的样式属性
8. element.tagName tagName 属性返回元素的标签名。HTML 返回 tagName 属性的值是大写的
----------------------------------------
6. element.clientTop 表示一个元素的顶部边框的宽度
7. elemeent.clientLeft 表示一个元素的左边框的宽度
8. element.clientHeight 在页面上返回内容的可视高度 （高度包含内边距，不包含边框，外边距，滚动条）
9. element.clientWidth 在页面上返回内容的课室宽度
offsetParent 获得被定位的最近祖先元素，用于offsetLeft和pffsetTop 属性
10. element.offsetTop 返回当前元素相对于offsetParent节点顶部边界的偏移像素值
11. element.offsetLeft 返回当前元素的相对水平偏移位置的偏移容器
12. element.offsetHeight 返回任何一个元素的高度包括边框，内边距不包括外边距
13. element.scrollHeight 返回整个元素的高度（包括带滚动条的隐蔽的地方）
14. element.scrollLeft 返回当前视图中的实际元素的左边缘和左边缘之间的距离
--------------------------------
13. element.focus() 设置文档或元素获取焦点
14. element.nextSibiling 返回该元素紧跟的一个节点
	element.previousSibling 返回某个元素紧接之前元素
15. element.nextElementSibiling 返回指定元素之后的下一个兄弟元素（相同元素树层中的下一个元素节点）
	element.previousElementSibling
返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）
------------------------
16. element.appendChild() 为元素添加一个新的子元素
17. element.insertBefore() 现有的子元素之前插入一个新的子元素
18. element.lashChild 返回最后一个子节点
19. element.lastElementChild 返回指定元素的最后一个子元素
20. element.removeAttribute() 从元素中删除指定的属性
	element.removeAttributeNode() 删除指定属性节点并返回移除后的节点。
21. element.removeChild()删除一个子元素
22. element.replaceChild() 替换一个子元素
23. element.setAttributeNode() 设置或者改变指定属性节点。

我不知道的css

讨厌的absolute
本来以为absolue是万能的能漂浮在想要的位置，但是突然发现这个跟width和设置releative的div是有很大关系的。如果你设置了一个

<div style={position: 'relative'}>
<div style={position: 'absolute, width: '200px', height: '100px'}>阿巴阿巴</div>
</div>

发现无效果或者，盒子被盖住了，这是因为他的最近父亲盒子不够大装不下他，也不会撑开，所以会被Body或者其他叔叔元素，盖住。这时的z-index是无效的，z-index要与同一父族(同一个父亲)的元素一起使用，否则即使你给设置z-index:99999也不会盖住body。
关于absolute又有了另外的问题：absolute我们知道是脱离了文档流的，所以子元素设置的根据内容撑开宽度的样式就会消失，但是又要absolute设置样式，这时候我们可能会想到BFC方案，然而BFC方案只针对于float清除浮动，没有作用。那针对于子元素absolute，自适应宽度的方案是什么呢？A：使用white-space方案，white-space属性是用于处理元素内的空白，当设置为nowrap,文本不会换行，文本会在同一行上继续，直到遇到标签为止。
2. ::before伪类
之前一直没觉得伪类有什么说到，直到有人突然问我怎么更改li前面得圆点颜色。第一反应是直接改li的color 然后给li里面的文字用span框起来。但是被否定了，说是结构和样式耦合这里要注释一下，原来还有结构和样式耦合的问题，学到了学到了
决定选用伪类，结果无论怎么设置width都不生效，原来::before和::after默认是行内元素，inline，嘿，行内元素width和height不生效呀，所以要用inline-block，转成行内块元素。又遇到了位置问题，第一反应 line-height，结果是不行，更改line-height整个li都会跟着改，那么只能用万能的position，这里要注意要给li一个relative，要不相对的是页面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>test</title>
    <style>
		* {
			list-style: none;
		}
		li {
			position: relative;
		}
		li::before {
		content: '';
			display: inline-block;
			position: absolute;
			top: 50%;
			left: -10px;
			margin-top: -3px;
			
			width: 6px;
			height: 6px;
			border-radius: 30px;
			background-color: red;
		}
	</style>
</head>

<body class="lightRed">
    <ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</body>

</html>

white-space（是用来设置如何处理元素中的空白 (en-US)）
总之在处理想要保留的空格和换行符时使用此属性，其实与pre标签作用有些许类似。 3. cursor 属性列表（包括禁用）

禁用：
cursor:no-drop;
cursor:not-allowed;
文字自动换行
white-space:normal;
word-break:break-all;
word-wrap:break-word;
all 修改所有元素或其父元素的属性为初始值
==要注意的是 !important class > 行内样式优先级 > class ==

css 控制鼠标悬浮，某个子内容显示或隐藏

.parent {
&:hover .children {
        display: block;
    }
    .children {
        display: none;
        }
 }

animation 动画属性

使用
animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; 

@keyframes mymove
{
	from {left:0px;}
	to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
	from {left:0px;}
	to {left:200px;}
}

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓线不会占据空间，也不一定是矩形
img img标签不止可以用行内设置图标地址，还可以用样式content。

img{
                margin: 0 10px;
                content: url(../../../../assets/images/home/serach-topic.png);
               }

background-size: contain; 调整图像大小以适合容器
设置滚动条样式

div::-webkit-scrollbar {
  width: 0;
}

offset-path让元素沿着不规则路径运动

.horse-run { 
		  offset-path: path("M10,80 q100,120 120,20 q140,-50 160,0");
		  animation: move 3s linear infinite;
		}
		@keyframes move {
		  100% { offset-distance: 100%;}
		}

Writing-mode：tb-rl 文字竖着排列

1、 animation-delay:2s; 等待2秒然后开始动画
2、animation-direction:alternate; 先执行一遍，再反向执行一遍
reverse 反向播放
alternate 奇数次正向播放偶数次反向播放
alternate-reverse 奇数次反向播放偶数次正向播放
3、animation-duration:2s 设置动画在两秒内完成
4、animation-fill-mode:forwards;把物体动画地从一个地方移动到另一个地方，并让它停留在那里：（当所有得动画都执行完之后，停留。eg: animation-iteration-count执行三次之后停留）
5、animation-iteration-count:3; 播放三次动画
infinite指定动画应该播放无限次（永远）
6、animation-name:mymove; animation-name:mymove;
7、animation-name:mymove; 暂停动画
8、animation-timing-function:linear; 从开始到结束以相同的速度播放动画:
linear 速度相同
ease 先低俗后加快在结束前变慢
ease-in 以低俗开始
ease-out 以低俗结束
ease-out 以低俗开始和结束
steps(int,start|end) 指定了时间函数中得间隔数量（步长）

appearance:button; 兼容性不好，最好不要用

backface-visibility:hidden; 隐藏旋转 div 元素的背面
博客里那个盒子旋转案例就用到了此属性

background-attachment:fixed;
background-image:url(‘smiley.gif’);
background-repeat:no-repeat;
背景图片固定在某一位置，页面滚动但是背景图片不滚动
local 会随着元素内容得滚动而滚动
fixed 不会随着页面的滚动而滚动
background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。
background-blend-mode: luminosity;
background-size: 290px 69px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, green 0%,white 100%), url(‘logo.png’);
multiply 正片叠底模式
screen 滤色模式。。。。等等
background-clip属性指定背景绘制区域
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。
background-Origin属性指定background-position属性应该是相对位置
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平阴影的位置允许负值
v-shadow 垂直阴影的位置允许负值
blur 可选模糊距离
spread 阴影的大小
color 阴影的颜色
inset 从外层的阴影（开始时）改变阴影内侧阴影
caption-side 属性设置表格标题的位置。
clear属性指定段落的左侧或右侧不允许浮动的元素。
clip:rect(0px,60px,200px,0px); 裁剪图像
column-count:3; 把div元素文本划成三列
column-gap:40px; 每列之间的间距
column-rule 列之间的规则：宽度，样式和颜色，在中间加一条线
column-span属性指定某个元素应该跨越多少列。
column-width属性指定列的宽度。与 column-count效果相似
columns 是 column-width 与 column-count 的简写属性。
counter-increment 对部分和子部分进行编号（比如 “Section 1”、“1.1”、“1.2”）的方法：

body
{
    counter-reset:section;
}
 
h1
{
    counter-reset:subsection;
}
 
h1:before
{
    counter-increment:section;
    content:"Section " counter(section) ". ";
}
 
h2:before 
{
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

cursor:wait 鼠标指针形状
direction 设置文字方向
filter: grayscale(100%); 设置图片的滤镜
flex-flow:row-reverse wrap; 让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行：
div:nth-of-type(2) {flex-grow: 3;} 让第二个元素的宽度为其他元素的三倍
flex-wrap: wrap; 拆行
font-variant 属性设置小型大写字母的字体显示文本
letter-spacing:2px 属性增加或减少字符间的空白（字符间距）
line-height:90% 可用百分比可用数字可用像素值但是不能用负值
list-style 简写属性在一个声明中设置所有的列表属性
list-style-image 属性使用图像来替换列表项的标记
list-style-position属性指示如何相对于对象的内容绘制列表项标记
list-style-type 属性设置列表项标记的类型circle、square、upper-roman、lower-alpha
max-height max-width min-height min-width
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度
object-position 属性一般与 object-fit一起使用，用来设置元素的位置
Opacity属性设置一个元素了透明度级别。transparent也可以改变元素的透明度
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。感觉跟Border差不多
outline-offset属性设置轮廓框架在 border 边缘外的偏移。但是ie浏览器不兼容
overflow: scroll、overflow-x: scroll、 overflow-y: scroll
多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。j就是改变查看角度
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
resize:both;resize属性指定一个元素是否是由用户调整大小的。
border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto;
text-align-last 属性规定如何对齐文本的最后一行。text-align-last 属性只有在 text-align 属性设置为 “justify” 时才起作用。
text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。
text-decoration-style 属性规定线条如何显示
text-indent 属性规定文本块中首行文本的缩进
text-justify属性指定文本对齐设置为"justify"的理据。
text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示
其中需要配合以下两个属性使用：
white-space: nowrap; // 设置不换行
overflow: hidden;// 设置超出隐藏
text-overflow:ellipsis;//文本溢出时以省略号显
text-shadow 属性应用于阴影文本。
text-shadow: h-shadow v-shadow blur color;
text-transform 属性控制文本的大小写。
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
transform-Origin属性允许您更改转换元素的位置。
transform–style属性指定嵌套元素是怎样在三维空间中呈现。
transition 属性设置元素当过渡效果，
transition: property duration timing-function delay;

transition-delay 属性指定何时将开始切换效果
transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化）。
transition-timing-function属性指定切换效果的速度。
vertical-align 属性设置一个元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐基线对齐
word-break属性指定非CJK脚本的断行规则。在合适的点换行。break-all 在单词换行 keep-all 只能在半角空格或连字符处换行
word-spacing属性增加或减少字与字之间的空白。
word-wrap属性允许长的内容可以自动换行。break-word：在长单词或 URL 地址内部进行换行。
writing-mode 属性定义了文本在水平或垂直方向上如何排布
grid 是一个 CSS 所有网格容器的简写属性。可以用于页面布局
grid-auto-flow 属性指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
grid-column: 1 / 5;使用 grid-column 属性定义了网格元素列的开始和结束位置。在第一列开始，在第 5 列前结束

制作一个三列网格布局，其中第一行高 150 像素
.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

元素隐藏
通常元素隐藏，我们想到的是display: none; 因为这样隐藏的比较彻底，直接把元素从dom树上移除了。
但是随之而来的问题是如果有其他元素要依赖他的位置那么样式就失效了，这时我们可以考虑另一个属性：opacity: 0; 把元素设置为透明，这样保留了位置。
还有另一种方法：visibility: hidden;这个方法也不会移除元素。如果一个元素的visibility被设置为hidden之后，却想要显示它的某个子孙元素，只要将那个子孙元素的visibility显式设置为visible即可（样式覆盖）

滚动条隐藏

	.ant-layout-sider {
	        position: relative;
	        margin: 10px;
	        margin-top: 0;
	        height: calc(80vh);
	        transition:all 0.2s;
	        -webkit-transition:all 0.2s;
	        -ms-overflow-style: none; //IE滚动条隐藏
	        .trigger {
	            position: absolute;
	            right: 0;
	            top: 50%;
	            margin-top: -10px;
	            text-align: center;
	            width: 20px;
	            height: 20px;
	            font-size: 20px;
	        }
	    }
	    .ant-layout-sider::-webkit-scrollbar {
	        display: none; //Chorme 滚动条隐藏
	    }

我不知道的js

后端传给前端Long类型，前端拿到的数值为四舍五入后的值。但其实不是四舍五入，是精度丢失。
当Long类型数据大于17位时, 前端拿到数据会损失精度，第16位会四舍五入, 17位后的数据自动用0代替。
2^53 是 js 内置的最大的整数值（不安全），2^53 + 1 会被舍入成 2^53

解决办法：需要后端将Long类型数值转成字符串。

做一个列表滚动懒加载
滚动事件
date 对象
setDate();

	startTime.setDate(startTime.getDate() + 1); //日期加1

事件监听与事件清除
事件监听：t.addEventListener(‘click’, func);
事件清除：t.removeEventListener(‘click’, func);
很简单的两行代码，但是你经常会遇到清除不了事件的情况，为什么呢？
因为你func函数不一致，什么情况时func函数不一致呢，就是在内存中不是同一个引用地址的时候，比如匿名函数，比如bind(this)指定this时。很容易出现事件无法清除的情况。
typeof 返回的类型
number, string, boolean, undefined,function ,object, bigInt, symbol
其中Array与null 返回的都是object;
function ) 与class {}返回的都是function
禁用textarea的空格键和回车键（灰常nice）

//监听文本框，禁止输入回车和空格
const handleKeydown=(e)=>{
    if(e.keyCode===32 || e.keyCode===13){
        e.preventDefault();
        return;
    }
}
 
<Input.TextArea 
    placeholder="请输入"    
    //用onkeydown来监听键盘输入
    onKeyDown={(e)=>handleKeydown(e)} 
>
</Input.TextArea>

运算符及其优先级
4<<2 输出： 16
1 && 1 === 0 ？ ‘1’ ： ‘0’

优先级运算类型关联性运算符
20 圆括号 n/a ( … )
19 成员访问从左到右 … . …
19 需计算的成员访问从左到右 …[ … ]
19 new (带参数列表) n/a new … ( … )
19 函数调用从左到右 … ( … )
18 new (无参数列表) 从左到右 new …
17 后置递增（运算符在后） n/a … ++
17 后置递减（运算符在后） n/a … –
16 逻辑非从右到左 ! …
16 按位非从右到左 ~ …
16 一元加法从右到左 + …
16 一元减法从右到左 - …
16 前置递增从右到左 ++ …
16 前置递减从右到左 – …
16 typeof 从右到左 typeof …
16 void 从右到左 void …
16 delete 从右到左 delete …
15 幂从右到左 … ** …
14 乘法从左到右 … * …
14 除法从左到右 … / …
14 取模从左到右 … % …
13 加法从左到右 … + …
13 减法从左到右 … - …
12 按位左移从左到右 … << …
12 按位右移从左到右 … >> …
12 无符号右移从左到右 … >>> …
11 小于从左到右 … < …
11 小于等于从左到右 … <= …
11 大于从左到右 … > …
11 大于等于从左到右 … >= …
11 in 从左到右 … in …
11 instanceof 从左到右 … instanceof …
10 等号从左到右 … == …
10 非等号从左到右 … != …
10 全等号从左到右 … === …
10 非全等号从左到右 … !== …
9 按位与从左到右 … & …
8 按位异或从左到右 … ^ …
7 按位或从左到右 … | …
6 逻辑与从左到右 … && …
5 逻辑或从左到右 … || …
4 条件运算符从右到左 … ? … : …
3 赋值从右到左 … = …
3 赋值从右到左 … += …
3 赋值从右到左 … -= …
3 赋值从右到左 … /= …
3 赋值从右到左 …% = …
3 赋值从右到左 … = …
2 yield 从右到左 yield …
2 yield 从右到左 yield* …
1 展开运算符从左到右 … …
0 逗号从左到右 … , …

【语法糖】
指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。
语法糖可以给我们带来方便，是一种便捷的写法，编译器会帮我们做转换；而且可以提高开发编码的效率，在性能上也不会带来损失。
for 循环和while循环的区别(for是while的语法糖)

一般来说，在循环结构中动态改变循环变量的值时，建议使用while结构，而对于静态的循环变量，则可以考虑使用for结构。但是并不局限于此，因为for结构的效率比较高，所以如果结束条件比较明确的时候用for会更好一点。