html常见面试题及答案/事件流

1、h5新增的内容是什么？

1. 新增了语义化标签：header，nav，body，main，article，aside，footer。
2. 新增了多媒体标签属性：video，auto。
3. 新增了表单控件：number，search，email，tel，date，time，URL。
4. 新增了本地离线存储local-storage长期存储数据。
5. 新增了自定义属性：data-*。
6. 新增了画布canvas API。
7. 拖拽释放（rap）API on drop
8. 新的技术文本WebSocket，一种在单个tcp链接上进行全双工通讯的协议，浏览器通过JavaScript向服务器发出建立webSocket连接的请求，连接建立以后，客户端和服务端就可以通过TCP连接直接交换数据，当你获取WebSocket连接后，就可以通过send()方法向服务器发送数据，并通过onmessage事件来接受服务器返回的数据。
9. 新增了地理位置（Geo location） API。

2、css3新增内容

2.1.1 块级标签行内标签和行内块标签的区别？

块级标签：div p h1-h6 ul li header footer main nav section artical
块状标签能独占一行，能设置宽高
行内标签：a span em strong i
行内标签不能独占一行，默认在同一行排列，不能设置宽高
行内块标签：img ,textarea, input 表单元素类标签
行内块状标签同时具备行内块的特点

三种标签如何转化：display：block ； display：inline ; display:inline-block;
block：会独占一行 可设置宽高
inline：不会独占一行 会一直排列 宽高无效
inline-block：排列到一起 可设置宽高
display除了上面那些还有什么？
display:none; display:table;display:flex;
display:none;能隐藏还有什么可以隐藏？
visibility：hidden 。display：none；不渲染到页面，但是存在。visibility：none。不显示但是占据了位置。

2.0script标签中添加defer和async的作用

defer：延迟执行

defer表示延迟执行引入的jsavascript标签，即这段javascript加载的时候html并未停止解析，这两个过程是并行的。整个 document 解析完毕且 defer-script 也加载完成之后（这两件事情的顺序无关），会执行所有由 defer-script 加载的 JavaScript 代码，如果有多个defer的script标签，会按顺序执行，然后触发 DOMContentLoaded 事件。

async：异步加载

async表示异步执行引入的javascript标签，即javaScript下载时html并未停止解析，等到javaScript下载完成，html就停止解析，执行javaScript代码，等待javaScript执行完毕，浏览器再继续渲染。需要注意的是，这种方式加载的 JavaScript 依然会阻塞 load 事件。换句话说，async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。如果有多个js脚本，哪个先下载完成就先执行哪个，跟书写顺序没有关系。

2.0.1 CSS页面布局单位总结

1、绝对长度单位
绝对长度单位视借质而定，不依赖与环境(显示器、分辨率等)绝对场地单位相互之间是固定的，并固定在一些物理测量中。

单位	描述
cm	厘米 1cm = 96 / 2.54
mm	毫米 1mm = 1/10cm
in	英寸 1in = 96px = 2.54cm
px	像素 1px = 1/96 in
pt	point 1pt = 1/72 in
pc	pica,1pc = 6pt

2、相对长度单位
相对长度单位指定一个长度相对于另一个长度的属性。使用相对单位的样式表可以更容易地从一个输出环境扩展到另一个输出环境。

单位	描述
em	他是描述相对于应用在当前元素的字体尺寸，所以他是相对长度单位。一般浏览器默认大小为16px
rem	根据当前根元素(html) 的font-size
vw	viewpoint width， 视图宽度 ， 1vw==视图宽度的1%
vh	viewpoint height ， 视图高度 ， 1vh == 视图高度的 1%
vmin	vw 和 vh 中较小的那个
vmax	vw 和 vh 中 较大的那个
ex	依赖于英文字母小x的高度
ch	数字0的宽度，只写一个0的话为12px
%	font-size:120%，根据你的上层字体大小

2.1新增选择器：

2.1.1属性选择器

a[href^=‘http’] :查找含有href属性为http的a元素

2.1.2伪类选择器

选择	功能描述
:root	选择匹配文档的根元素
E:nth-child(n)	选择所有在其父元素中的第n个位置的匹配E的子元素
E:nth-last-child(n)	选择所有在其父元素中倒数第n个位置的匹配E的子元素
E:nth-of-type(n)	选择所有在其父元素中同类型第n个位置的匹配E的子元素
E:nth-last-of-type(n)	选择所有在其父元素中同类型倒数第n个位置的匹配E的子元素
E:last-child	选择位于其父元素中最后一个位置，且匹配E的子元素 ，与E:nth-last-child(1)等同
E:fisrt-child	选择位于其父元素中第一个位置，且匹配E的子元素 ，与E:nth-child(1)等同
E:empty	选择匹配E的元素，且该元素不包含子元素。
E:first-of-type	选择在其父元素中匹配E的第一个同类型子元素

2.1.3UI伪类选择器

E:enabled : 选择匹配E的所有可用UI元素。
E：disabled：选择所有E的不可见元素。
E：:required ： 用于匹配设置了’required’属性的元素。

2.1.4：伪元素选择符:

选择器	功能描述
first:letter	设置对象内的第一个字符的样式
first-line	设置对象内的第一行的样式
before	设置对象前发生的内容，用来和content属性一起使用
after	设置对象后发生的内容，用来和content属性一起使用
placeholder	设置对象文字占位符的样式
selection	设置对象被选时的颜色

2.2关于文本:

文本的阴影：text-shadow 文本换行：Word-wrap 、 Word-break 文本字体 @font-face使用。

2.3背景:

1. background-image
2. background-size
3. background-origin:属性指定了背景图像的位置区域。
4. background-clip属性指定背景绘制区域。

2.4动画：

5. transform变换效果：
6. animation动画效果：

2.5过渡效果：

7. transition过渡效果：

2.6边框效果：

8. border-color：为边框设置多种颜色。
9. border-image：图片边框。
10. border-radius：圆角边框。
11. box-shadow：阴影效果。

3、盒子模型

3.1盒子模型有：

css盒子模型有：content-box border-box padding-box。
content-box:测量只包括内容，不包padding、border、margin。
padding-box:width和height属性包括padding大小，不包括border，margin。
border-box：width和height属性包括padding、border大小，不包括margin
3.1IE怪异盒子模型
IE怪异盒子模型：width = padding + width + border
IE盒子模型box-sizing:border-box;
W3C标准盒子模型：width = content
box-sizing：content-box

3.、flex布局。

3.1 flex-deirection：设置主轴方向。

• flex-direction：row | row-reverse | column | column-reverse
• row：默认值，表示沿水平方向，自左向右。
• row-reverse：表示沿水平方向 ， 自右向左。
• column：表示垂直方向，自上而下。
• column-reverse：表示垂直方向：自下而上。

3.2 flex-wrap属性

• flex-wrap：nowrap | wrap | wrap-reverse
• nowrap：表示不换行 有多少都是一行排列
• wrap：正常换行
• wrap-reverse：向上换行，第一行位于下面

3.3 justify-content属性

• justify-content:flex-start | flex-end | center | space-between | space-around。
• flex-start:默认值 ， 左对齐。
• flex-end:右对齐。
• center：居中对齐。
• pace-between：两端对齐。
• space-around：每个项目的两侧的间距相等。

3.4 align-items属性

• align-items：flex-start | flex-end | center | baseline | stretch。
• flex-start：左对齐 x轴。
• flex-end：右对齐 x轴。
• center：居中对齐 x轴。
• baseline：项目的第一行文字的基线对齐。
• stretch：默认值：如果未设置高度和宽度为auto。

4、position属性

position有五个属性：static ， relative ， absolute ， fixed ， sticky。

5、简述 href 和 src 的区别和作用？

1. href

href:识别超文本引用，主要用在a、link标签中，href是引用和页面关联，表示当前元素和外部资源之间建立联系。

2. src

src:用于资源引用，表示替换当前标签，常用在img script iframe中。指向的内部会迁移到当前标签中所在的位置，在请求src资源时会将其指定的资源下载并应用到当前文档中。同时在请求src资源时会暂停其他资源的下载，这也是为什么放在后面。

简述link 和 import引入的区别和优缺点。

1. link是xhtml语言标签，不仅可以引入css，还可以定义其他的rss内容(比如：rel=“author”),而import只能引入css
2. 加载顺序方面：link标签同浏览器同步加载，import是html标签渲染完毕才加载。
3. 兼容性方面：link兼容所以浏览器，import是css2才有的语法，不兼容ie5以下。
4. dom操作方面：link可以通过js创造出来，动态加载，而import不可js操作。

6、CSS优先级计算规则是怎样的？

5. ！important的优先级为最高。
6. ID > class > 元素选择器
7. 但是外联样式不一定低于内联样式。
8. 一般的时候行内样式大于外联样式和内联样式。

7、重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？

重置（Resetting）： 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像margin、padding、font-size这些样式全部置成一样。你将必须重新定义各种元素的样式。
标准化（Normalizing）： 标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。
（我的选择）当需要实现非常个性化的网页设计时，我会选择重置的方式，因为我要写很多自定义的样式以满足设计需求，这时候就不再需要标准化的默认样式了。

8、iframe框架的优缺点？

优点：

• iframe能够原封不动的把嵌入的网页展现出来。
• 如果遇到了加载缓慢的第三方内容如图标或者广告，可以使用iframe解决。
• 方便了页面的更改，如果多个页面引用，改一次就可以了。

缺点：

• 出现各种滚动条。
• iframe会阻塞主页面的Onlaod事件函数。
• 搜索引擎无法解读这一部分，不利于seo。
• iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

9、每个 HTML 文件头里都有个很重要的东西，Doctype，知道这是干什么的么？

1.用于告知浏览器文档使用那种xhtml或者html规范。
2.doctype是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要用什么样的文档类型定义来解析文档。
3.浏览器本身有两种模式：一种标准模式，一种怪异模式，浏览器通过doctype来区分这两种模式，doctype在html中的作用就是触发浏览器的标准模式，如果html中省略了doctyope，浏览器就会进入Quirks模式的怪异状态，在这种状态下，有些样式和标准样式存在差异，而html标准和dom标准值规定了标准模式下的行为，没有对怪异模式下做出规定，因此不同浏览器在怪异模式下处理也是不同的，所以需要命名开头使用。

10、为什么多个域名存储资源更加有效。

1、CDN缓存更加方便。

什么是cdn缓存？
CDN：Content Delivery Network，即内容分发网络。
各地部署多套静态存储服务，本质上是空间换时间，自动选择最近的节点内容，不存在在请求原始服务器，适合存储更新很少的静态页面。
简单理解就是：cdn为本地缓存(看时间有没有过期)的那种。

2、突破了浏览器并非限制。

what fuck 这是什么意思？看下面白话理解。
这个限制指的是，浏览器并发连接数是有限的， 一般是4到6个，在10个以内。
也就是说一个域名在同一时间内最多只能同时下载10个文件，但是我们有100个文件，还要同时下载怎么办？这就需要分布资源文件了，把资源文件放在10个域名下不就可以了。这也就是为什么facebook可以通过多个域名访问的原理了。虽然是多个域名但是指向同一个ip地址。

3、节约了cookie宽带。

因为一个域名下最多也就是20个cookie。

4、节约主域名链接次数，优化页面响应速度。
5、防止不必要的安全问题。

11、meta viewport的原理。

回答：
meta viewport标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户进行手动缩放。
viewport的原理：移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是 viewport; 目的是正常展示没有做移动端适配的网页，让他们完整的展示给用户；
解析：
在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。
举个例子：如果我们的屏幕是 320 像素 * 480 像素的大小（iPhone4），假设在浏览器中，320 像素的屏幕宽度能够展示 980 像素宽度的内容。那么 320 像素的宽度就是可见视口的宽度，而能够显示的 980 像素的宽度就是视窗视口的宽度。

为了显示更多的内容，大多数的浏览器会把自己的视窗视口扩大，简易的理解，就是让原本 320 像素的屏幕宽度能够容下 980 像素甚至更宽的内容（将网页等比例缩小）。
Viewport 属性值

width 设置 layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置 layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

事件流（enevt flow）

事件流event flow描述的是从页面中接收事件的顺序。在浏览器中，事件流分为三个阶段，捕获节点、目标阶段、冒泡阶段。
默认事件流式从外到内进行的（即从祖元素到子孙元素）进行事件捕获，然后再目标元素上触发事件，最后从内带外（即从子孙元素到祖先元素）进行冒泡。

• 捕获、冒泡：是由Netscape（网景通信公司）于1996年引入的概念。
• 目标阶段：是由w3c组织提出来的。

<div id="outer">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>

当在 #inner 元素上触发一个事件时，事件的传播顺序为：先捕获到 #outer 元素，然后捕获到 #middle 元素，再捕获到 #inner 元素；接着在 #inner 元素上触发事件；最后从 #inner 元素开始冒泡，到 #middle 元素，最后到 #outer 元素。

可以使用 addEventListener() 方法来添加事件监听器，并通过第三个参数指定事件是否在捕获阶段监听（设置为 true）或在冒泡阶段监听（设置为 false 或省略）。默认情况下，addEventListener() 添加的事件监听器是在冒泡阶段执行的。

addEventListener() 方法可以用于监听捕获阶段的事件，只需要将第三个参数设置为 true 即可。例如，以下代码在捕获阶段监听 click 事件：

const div = document.querySelector('div');
div.addEventListener('click', function() {
  console.log('冒泡阶段');
});
div.addEventListener('click', function() {
  console.log('目标阶段');
}, true);
div.addEventListener('click', function() {
  console.log('捕获阶段');
}, true);