刷题总结820

在html中，

<article>

标签是html5新增标签，是使用来定义独立于文档且有意义的来自外部的内容，比如：一些投稿文章、新闻记者的文章，或者是摘自其它博客、论坛的信息等。

marquee是HTML标签，但已经被废弃，尽管还有些浏览器支持，但尽量不要再使用

h5的data-*属性

1. h5中新增了

   data-*

   属性，

   data-

   之后的属性是开发者自定义的属性名称，里面可以放置想存储的数据，然后通过数据集

   dataset

   来使用

1.1

var id=document.getElementsByClassName('one')[0].dataset.id

;

// 如果浏览器不支持

dataset

属性,可以通过

setAttribute

方法获取

1.2

var id=document.getElementsByClassName('one')[0].getAttribute('data-id')

1. 可以在列表

   li

   中使用

   data-id

   ,然后每个元素使用方法传递

   event

   的时候就会自动传递自己的

   id

   ，方便选择
2. 如果是触发事件(常问的事件委托应用，通过给

   ul

   绑定点击事件，可以确定点击的是哪个

   li

   元素)

   想要获取

   ul>li

   的索引知道点击了哪个

   li

   元素，那就先给每个

   li

   添加

   data-index

   属性，然后通过

   e.target.dataset.index

   来获取

   

   不是所有标签都需要结束标签，例如-；单标签如

   br

   不需要结束标签。 换行可以不需要结束符。

   doctype类型会影响页面的展示效果；doctype告诉浏览器用什么html或xhtml规范来解析html文档，如果不指定浏览器将会使用一种怪异模式来进行解析。

   HTML标签对大小写不敏感，为了规范，推荐小写。

jQuery通过哪个方法可以设置或返回表单字段的值：

.value()

用在表单元素上，用来设置获取 input 或 select 的值

.html()

设置或返回的是源代码

.text()

设置或返回的是纯文本内容

.attr()

设置或返回被选元素的属性值

要运用css3动画，需要运用

@keyframes规则

和

animation属性

font-style

设置字体样式

normal:正常字体

italic:显示文字为斜体（该字体有斜体样式时使用）

oblique:显示文字为斜体（该字体没有斜体样式时使用，文字斜体显示）

inherit:从父亲哪里继承样式

font-weight

:改变文字粗细 属性值有normal bold 100~900 inherit

在CSS中，html中的标签元素大体被分为三种不同的类型：

块状元素

、

内联元素(又叫行内元素)

和

内联块状元素

。

常用的块状元素有：

<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

什么是块级元素？

在html中

<div>、<p>、<h1>、<form>、<ul>和<li>

就是块级元素。设置

display:block

就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

canvas

是一个画布,

p

元素是一个段落所以是块级元素

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

在html中，

<span>、<a>、<label>、<strong> 和<em

>就是典型的内联元素（行内元素）（inline）元素。

当然块状元素也可以通过代码

display:inline

将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使div 元素具有内联元素特点。

div{ display:inline; }

…

<div>我要变成内联元素</div>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置； （这是答案-）

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用的内联块状元素有：

<img>、<input>

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码

display:inline-block

就是将元素设置为内联块状元素。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

for(var i=0;i<3;++i){
setTimeout(function(){
console.log(i)；
},100);
}
           

每次for循环的时候setTimeout都会执行，因为setTimeout是异步函数，里面的function则不会立即执行，而是会被放入任务队列，因此放了3次；for循环的3次执行完之后,，i变为3，也就是每次循环，i都会被后一个i值覆盖，然后全部执行任务队列中的函数，所以就是输出3个3。

这道题涉及了异步、作用域、闭包

settimeout是异步执行，

100ms

后往任务队列里面添加一个任务，只有主线上的全部执行完，才会执行任务队列里的任务，当主线执行完成后，i是3，所以此时再去执行任务队列里的任务时，i全部是3了。对于打印3次是：

每一次for循环的时候，settimeout都执行一次，但是里面的函数没有被执行，而是被放到了任务队列里面，等待执行，for循环了3次，就放了3次，当主线程执行完成后，才进入任务队列里面执行。

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

您还能够设定对所接受的数字的限定：

button	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox	定义复选框。
color	定义拾色器。
date	定义日期字段（带有 calendar 控件）
datetime	定义日期字段（带有 calendar 和 time 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地址的文本字段
file	定义输入字段和 “浏览…” 按钮，供文件上传
hidden	定义隐藏输入字段
image	定义图像作为提交按钮
number	定义带有 spinner 控件的数字字段
password	定义带有 spinner 控件的数字字段
radio	定义单选按钮。
range	定义带有 slider 控件的数字字段。
reset	定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search	定义用于搜索的文本字段。
submit	定义提交按钮。提交按钮向服务器发送数据。
tel	定义用于电话号码的文本字段。
text	定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url	定义用于 URL 的文本字段。

我的理解是，js解释代码前会对代码进行编译，这过程会将变量声明，函数声明提升，这 过程foo的变化为:foo:undefined（变量提升）->foo:function fon(x,y){return x+y}(函数提升，由于名称一样，覆盖了前foo),所以开始执行代码前，foo指向的是return x+y函数，如果是在第一行执行var num =fon(1,2),结果num会为3，之所以为-1，是由于执行了foo=function(x,y){return x-y}(赋值不会被提升)，将编译结果覆盖了，所以后面执行的结果就为-1了，

规则

1. 变量声明、函数声明都会被提升到作用域顶处；

2. 当出现相同名称时，优先级为：变量声明(foo#1) < 函数声明(foo#2) < 变量赋值(foo#3)

   考察 js 解析顺序

// 变量提升
var foo; 
var name;
// 函数声明提升
function foo(){
    return x+y;
}
 
foo = function(x,y) {
    return x-y;
}
name = foo(1,2);
           

//js预解析机制，
//js会预解析var和function这两个关键字，并给var赋值undefined，即
var foo = undefined
function foo(x,y){
    return x+y
}
var num = undefined

//解析结束后运行程序
var foo = function(x,y){
    return x-y
} //给foo赋值

var num = foo(1,2)

//所以foo赋值的是x-y这个函数
           

Array 对象方法 方法

concat()

连接两个或更多的数组，并返回结果。

join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop()

删除并返回数组的最后一个元素

push()

向数组的末尾添加一个或更多元素，并返回新的长度。

reverse()

颠倒数组中元素的顺序。

shift()

删除并返回数组的第一个元素

slice()

从某个已有的数组返回选定的元素

sort()

对数组的元素进行排序

splice()

删除元素，并向数组添加新元素。

toSource()

返回该对象的源代码。

toString()

把数组转换为字符串，并返回结果。

toLocaleString()

把数组转换为本地数组，并返回结果。

unshift()

向数组的开头添加一个或更多元素，并返回新的长度。

valueOf()

返回数组对象的原始值

使用

@media

查询，你可以针对不同的媒体类型定义不同的样式。

@media

可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

html语言中加粗的标签有

<b>

和

<strong>

,或者使用css设置

｛font-weight:bold｝

blod font-weight是属性值

html加粗的标签

b

斜体

i

下划线

u

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

标准盒模型的宽度：（margin+padding+border）*2 + width

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

BFC 定义

MDN 的解释

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

听起来云里雾里，这是文档的一个问题，用一堆不理解的概念名词来解释不理解的概念名词。

简单的来说 BFC 是一块独立的渲染区域，它规定在该区域内，常规流的 块盒 的布局，且创建 BFC 的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部。

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与

BFC：是一个隔离的容器，容器里的子元素不会影响到外面的元素

BFC 的作用

创建 BFC 的元素，它的自动高度需要计算浮动元素

创建 BFC 的元素，它的边框盒不会与浮动元素重叠

创建 BFC 的元素，不会和它的子元素进行外边距合并

创建 块格式化上下文 BFC 的方式：

1. 根元素(

   <html>

   )
2. 浮动元素（元素的 float 不是 none）
3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
4. 行内块元素（元素的 display 为 inline-block）
5. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
6. 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）

7. 匿名表格单元格元素（元素的 display为 table、table-row、

   table-row-group、table-header-group、table-footer-group（分别是HTML

   table、row、tbody、thead、tfoot的默认属性）或 inline-table）

8. overflow 值不为 visible 的块元素
9. display 值为 flow-root 的元素
10. contain 值为 layout、content或 paint 的元素
11. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
12. 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
13. 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）

14. column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome

    bug）。

    参考

    总结起来就是以下

15. 根元素html标签
16. float属性不为none的时候
17. overflow属性不为visible的时候
18. display属性为inline-block、table-cell、table-caption、flex、inline-flex（其余不常见不需要记忆）的时候
19. position属性为absolute或fixed的时候
20. contain 值为 layout, content, paint 的时候

给要清除浮动的元素添加一个伪元素，这样写的目的也是为了把未知的影响降到最低，我们知道这里最关键的一个属性是 clear:both ，（clear是用来清除浮动用到，可选值有 float,left,both）, 但是如果我们直接这样子写：

.clearfix::after {
  content :'';
  display: block;
  clear: both;
}
           

无疑改变了原有的 DOM 结构，所以我们使用 伪元素

::after

，因为伪元素是 CSS 渲染是才加上去的，而且不会改变原有的 DOM 结构，简单的说就是 伪元素不算 DOM元素。

在 CSS 规范中，有4种类型的可用视口单位：

vw — 1vw 等于视口宽度的 1%

vh — 1vh 等于视口高度的 1%

vmin — vw 和 vh 中的较小值

vmax — vw 和 vh 中的较大值 视口，即浏览器屏幕大小，1vw 等于浏览器宽度的 1%，100vw 即整个浏览器的宽度。

vm未被纳入w3c标准，仅浏览器中ie9支持，为长度单位，表示相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm。

1.rem

rem是相对于根元素的字体大小的单位 rem能等比例适配所有的屏幕，根据html的字体的大小来控制rem的大小

2.dpr设备像素比

dpr = 物理像素 / 逻辑像素

物理像素：设计图量出的px（设备显示的px）

逻辑像素：css中设置的px

如果设计图的宽度是640px 或者 750px dpr = 2

如果设计图的宽度是1080px dpr = 3

3.vw

视窗宽度

1vw 等于视窗宽度的1%

100vw 等于视窗宽度的100%

4.vw 与 px 之间的换算

如果设计图的宽度是640px 则 dpr = 2

逻辑像素 = 640px /2 = 320px

320px = 100vw

1vw = 3.2px

31.25vw = 100px = 1rem

如果设计图的宽度是750px 则 dpr = 2

所以：逻辑像素 = 750px /2 = 375px

375px = 100vw

1vw = 3.75px

26.67vw = 100px = 1rem

如果设计图的宽度是1080px 则 dpr = 3

所以：逻辑像素 = 1080px / 3 = 360px

所以：360px = 100vw

1vw = 3.6px

27.78vw = 100px

A.“#div .red”就是选择CSS class属性中包括red的所有

Id

为div元素

B.

{"name": "John"， "age": 18}

,json数据中的键都需要添加

""(双引号）

D.不同浏览器提供的编程环境不一致，所以在编程时才要使用 -ms、-webkit、-moz来实现不同浏览器的兼容性

E.JS文件按在HTML中引入的顺序依次载入（不是最后载入），在载入后马上执行，执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）

F.箭头函数不能调用Funciton的bind、apply、call方法（Function类具有的方法），没有继承Function类

A：

<h1> - <h6>

标签表示 HTML 标题，默认加粗

B：

<caption>

标签表示表格标题，标题一般被居中表格之上，但不加粗文本

C：

<em>

标签表示强调内容，显示为斜体，但不加粗文本

D：

<th>

标签表示表格的表头，默认加粗文本

nav元素

表示导航部分

<div>
 <input type="button"id ="button1"value="1"onclick="moveBtn(this);">
 <input type="button"id ="button2"value="2"/>
 </div>
 <script type="text/javascript">
 function moveBtn(obj) {
     var clone = obj.cloneNode(true); // 复制一个button1结点
     var parent = obj.parentNode; // 找到button1的父节点
     parent.appendChild(clone); // 将复制的结点加入到父节点，也就是button1的复制结点现在在button2后面了
     parent.removeChild(obj); // 移除原来的button1
 }
 </script>
           

1.函数调用时，指向window

2.以方法调用时，指向调用该方法的对象

3.使用new创建一个对象时，指向该对象

4.call,apply ,bind可以改变this指向 区别，传参不同

btn.onclick = function(e){
    //1
    setTimeout(function(){
        //2
    })
}
           

对于c答案应该可以这么理解，1指的是事件对象，2指的是内部函数对象

事件触发时，this指向绑定事件的元素，不一定是触发事件的元素

var value = 8;

var obj = {
  value: 5,
  fun: () => {
    console.log(this.value);
  }
}

obj.fun(); // 8

           

箭头函数中的this指向window, 而不指向函数的直接调用者obj

d选项，this不一定在函数内部使用，也可以通过闭包将函数内部的this暴露给函数外部，也可以说是错的

根本原则：函数的调用者是谁，this就是谁 this对象的注意事项： HTML 级事件：this指向window DOM0级事件：this指向绑定事件的这个元素 DOM2级事件：this指向绑定事件的这个元素（非IE）this指向window（IE）

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、

!important

，加在样式属性值后，权重值为

10000

2、内联样式，如：

style=””

，权重值为1000

3、ID选择器，如：

#content

，权重值为100

4、类，伪类和属性选择器，如：

content

、

:hover

权重值为10

5、标签选择器和伪元素选择器，如：

div

、

p

、

:before

权重值为1

6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

css的优先级分为4个等级，分别是A,B,C,D（A代表是否有内联样式，有为1，无为0；B代表ID选择器个数；C代表类选择器、属性选择器和伪类总个数；D代表标签选择器和伪元素总个数），比较规则就是从左往右比较。本题中，

(选项) A B C D (等级)

A 0 0 1 1

B 0 1 0 0

C 0 0 1 1

D 0 1 0 1

综上，选项D的优先级最高

什么是SVG?

1、SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

2、SVG 用来定义用于网络的基于矢量的图形

3、SVG 使用 XML 格式定义图形

4、SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

5、SVG 是万维网联盟的标准

6、SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

7、SVG是HTML下的一个分支

以下那些是css属性position可以设置的值：

百分比单位始终根据父元素相应值来计算

这是错误的，一时间说不出所有的情况，就举两个特例：

1. line-height 的百分比是相对于自身的字体大小
2. position: fixed 元素（如宽高等）的百分比是相对于视口的
3. transform: translate(50%,50%)对自身

onchange是文本框（input或者textarea）内容改变并且失去焦点（鼠标点击文本框外）时触发事件

onblur是当页面或者元素失去焦点时在window及相关元素上触发，和onchange很像，有一个区别是onchange必须更改内容

Web Storage又分为两种：

1，sessionStorage

session，指的是一次会话，其时间作用于你访问开始一个网站到你关闭这个网站。

所以你用sessionStorage保存的数据在你关闭网站页面的时候就会被销毁，一般用于临时的数据保存

2，localStorage

local，指的是本地，它会把数据保存到你的硬盘中，即是浏览器被关闭了，下次访问也能读取到已经保存了的数据。

值得注意的是，由于不同浏览器数据存储的位置不一样，所以每个浏览器所存储的数据都是独立的，不能在其他浏览器中获取

我们来看看最简单的实现代码：

我准备了一个p标签，一个输入框，两个按钮。分别用于显示读取出来的数据，提供内容的输入，提交保存，读取数据。

代码中用到了2个方法，setItem和getItem，对应的是保存和读取，

当然你也可以用sessionStorage.[key] = value;的方式去保存，取数据的时候也非常简单，直接用sessionStorage.[key]，你会得到你想到的东西的，

需要注意的是，用session保存的数据用local是取不到的，反过来也一样。

font-weight:bold 这个是可以使字体变粗的样式

A：能使字体变粗的css样式为

font-weight:bold

，其中font-weight的值有

bolder

（特粗体）、

bold

（加粗）、

normal

（正常）、

lighter

（细体），当然font-weight的值还可以用数值（100~900，必须为整百）进行表示

B：

text-direction

是对文字添加修饰的属性，值为：

none

（ 默认值，没有修饰）、

underline

（在文本下面添加下划线）,常用的就这两个当然还有其他不常用的值，可以自行查阅；

C：

text-transform

用来设置文本的大小写，值为：

none

（默认值，不设置）、

capitalize

（使文本中的每个单词的首字母大写）、

uppercase

（将文本中的内容转换成大写）、

lowercase

（ 将文本中的内容转换成小写）；

D：border-weight的4个值代表的是分别是上边框、右边框、下边框、左边框的宽度

在html中通过

<a>

标签打开一个链接，通过

<a>

标签的

target

属性规定在何处打开链接文档。

如果在标签

<a>

中写入

target

属性，则浏览器会根据target的属性值去打开与其命名或名称相符的 框架

<frame>

或者窗口.

在target中还存在四个保留的属性值如下，

属性值

这些

target

的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

在HTML中，通过

<a>

标签打开一个新链接，而

<a>

标签的

target

属性是指打开的新链接是以什么样的形式打开的；

target

属性的值为：

_blank

时——以新弹出一个浏览器窗口打开一个新链接页面；

_self

——在原有的浏览器窗口打开新连接的页面；

若

<form>

和

<a>

标签同时出现该属性，form中的

target

起作用；

<br>

可插入一个简单的换行符。

<br>

标签是空标签（意味着它没有结束标签，因此这是错误的：

<br></br>

）。在 XHTML 中，把结束标签放在开始标签中，也就是

<br />

。

请注意，

<br>

标签只是简单地开始新的一行，而当浏览器遇到

<p>

标签时，通常会在相邻的段落之间插入一些垂直的间距。

multiple

用于

select

的多选或者上传多个文件

reflow：几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint：如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow

下面情况会导致reflow发生

1：改变窗口大小

2：改变文字大小

3：内容的改变，如用户在输入框中敲字

4：激活伪类，如:hover

5：操作class属性

6：脚本操作DOM

7：计算offsetWidth和offsetHeight

8：设置style属性

那么为了减少回流要注意哪些方式呢？

1：不要通过父级来改变子元素样式，最好直接改变子元素样式，改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸

2：尽量通过class来设计元素样式，切忌用style

C选项：visibility保留物理空间，即使设置了visibility:hidden但页面结构没有改变

HTML5 中的

<canvas>

元素用于：是对 flash 的回应，原生直接支持绘图

HTML5 的正确 doctype 是？

html5，不在需要定义 HTML4 中的 PUBLIC 部分，

只有

<!DOCTYPE html>

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

Firefox 、 Chrome 以及 Safari 支持所有新的边框属性。

注释：对于 border-image ， Safari 5 以及更老的版本需要前缀 -webkit- 。

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-

getElementByClassName方法返回的是一个数组，需要通过下标获取特定元素。

通过.style.xxx设置的css样式中，将采用驼峰命名法来实现。

除了ID选择器的唯一性和querySelector返回单个节点，其余返回节点列表。

caption是表格的标题

col是作为colgroup(定义表格中的列)的子元素存在的