2021-09-13 刷题错题踩坑知识点

data-* 属性

用于存储页面或应用程序的私有自定义数据。存储的/自定义的数据能够被页面的 JavaScript 中利用，以创建更好的用户体验。（不进行 Ajax 调用或服务器端数据库查询）

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>//喜鹊是一种鸟类。
</ul>
<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
    alert(animal.innerHTML + "是一种" + animalType + "。");
}
</script>

h5常用新增标签

<article> 定义文章
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<canvas> 定义图形。
<command> 定义命令按钮。
<datalist> 定义下拉列表。
<nav> 定义导航链接。
<output> 定义输出的一些类型。
<section> 定义网页的中的“区块”（比p多出语意“区块”）
<datalist> 定义下拉列表。
<embed> 定义插入的内容（媒体内容）
<figure> 定义媒介内容的分组，以及它们的标题。
<progress> 定义任何类型的任务的进度。
<source> 定义媒介源。

canvas性能优化

将渲染阶段的开销转嫁到计算阶段之上。
使用多个分层的 Canvas 绘制复杂场景。
不要频繁设置绘图上下文的 font 属性。
不在动画中使用 putImageData 方法。
通过计算和判断，避免无谓的绘制操作。
将固定的内容预先绘制在离屏 Canvas 上以提高性能。
使用 Worker 和拆分任务的方法避免复杂算法阻塞动画运行

tabindex 属性

规定元素的 tab 键控制次序（当 tab 键用于导航时）。

<element tabindex="number">

display属性

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inherit 规定应该从父元素继承 display 属性的值。

清除浮动

子元素浮动会导致父元素的内部高度为0，使得后面的元素浮上来与浮动元素在一行
方法一：使用带clear属性的空元素。在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动
方法二：使用邻接元素处理。什么都不做，给浮动元素后面的元素添加clear属性。
方法三：给浮动元素的容器添加overflow:hidden;或overflow:auto，将所有溢出盒子的内容，隐藏掉。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
方法四：结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素），给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动，要使用以下属性：

content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;

position 属性

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
inherit 规定应该从父元素继承 position 属性的值。

易混淆属性

transform:旋转 div 元素;
translate:移动，是transform的一个方法;
transition:属性是一个简写属性，用于设置四个过渡：
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。属性：

事件属性

event.initEvent通过DocumentEvent的接口给被创建的事件初始化某些值。
event.preventBubble防止事件冒泡。已弃用，请使用 event.stopPropagation 代替它。
event.preventCapture 已弃用，请使用 event.stopPropagation代替它。
event.preventDefault阻止事件默认行为
event.stopImmediatePropagation这个事件既不会添加到相同的元素上，也不会添加到以后将要遍历的元素上（例如在捕获阶段）。
event.stopPropagation停止事件冒泡。

addEventListener()和removeEventListener()

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
它们都接受3个参数：如addEventListener(“事件名” , “事件处理函数” , “布尔值”); (注：事件名不含"on",如“click”)
现在的版本可以省略第三个参数，默认值为false
布尔值参数是true，表示在捕获阶段调用事件处理程序；就是最不具体的节点先接收事件，最具体的节点最后接收事件
如果是false，在冒泡阶段调用事件处理程序;则是先寻找指定的位置，由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点
捕获过程要先于冒泡过程，即 true的触发顺序在false前面

const实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据而言，值就保存在变量指向的内存地址中，因此等同于常量。但对于复合类型的数据，变量指向的内存地址保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，则完全不能控制。

{x:1} === {x:1}\\false,左右各自创建了对象，类型相同但是对象指针不同，要想表示值相同应该用left.x===right.x
Symbol(1) === Symbol(1) \\false, symbol创建的值都是唯一的,如果想采用相同的symbol 使用Symbol.for

把数组或者对象赋值给一个变量，其实是把它们指向的内存地址复制了一份，不是新开辟一块内存空间，内存里面的内容没变，所以不管谁改了内容，它们的内容都会变

通常font、文本、可见性的相关的属性都具有继承性，还有列表布局属性list-style：列表风格，包括list-style-type、list-style-image等、光标属性cursor：光标显示为何种形态。

padding不允许为负值