HTML5面试题集

HTML5是互联网的新一代Web内容构建标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。查看HTML文档

1、行内元素和块级元素都有哪些？√

（1）块级元素：div、h1~h6、hr、p、li、ul、ol、table、from、blockquote；
（2）行内元素：a、span、img、input、textarea、select；

2、HTML5的拖拽如何实现，有哪些API？√

被拖放元素API：

dragstart: 事件主体为被拖拽元素，在开始拖放元素时触发
dragend: 事件主体是被拖放元素，整个拖拽操作结束时触发
drag: 事件主体是被拖放元素，正在拖放元素时触发

目标元素API

dragenter: 事件主体是目标元素，被拖放元素进入时触发
dragover: 事件主体是目标元素，被拖放元素在目标元素内移动时触发
dragleave: 事件主体是目标元素，被拖放元素移出时触发
drop: 事件主体是目标元素，整个拖放操作完全结束时触发

<div id="draggable" draggable="true">Drag me!</div>
<div id="dropzone">Drop here!</div>

// 获取拖拽的元素和放置的区域
var dragItem = document.getElementById('draggable');
var dropZone = document.getElementById('dropzone');
 
// 添加拖拽事件监听
dragItem.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData("text/plain", event.target.id);
});
 
// 添加放置事件监听
dropZone.addEventListener('dragover', function(event) {
  event.preventDefault(); // 阻止默认行为
  event.dataTransfer.dropEffect = 'move'; // 设置可拖动的视觉效果
});

3、HTML5新增的标签有那些？√

H5新增的标签包括：

<video>

、

<audio>

、

<source>

、

<section>

、

<header>

、

<footer>

、

<aside>

、

<article>

、

<canvas>

、

<progress>

<section>

定义文档中的节、

<header>

定义 section 或 document 的页眉、

<footer>

定义 section 或 document 的页脚、

<article>

定义外部的内容、

<aside>

定义 article 以外的内容、

<audio>

定义声音如音乐或其他音频流、

<canvas>

定义画布，比如矢量图表和其他图像、

<video>

定义视频如电影片段或其他视频流、

<source>

为媒介元素（比如

<video>

和

 <audio>

）定义媒介资源、

<time>

定义日期或时间，或者两者、

<progress>

显示 JavaScript 中耗费时间的函数的进程;

CSS3面试题集

CSS3 是CSS（层叠样式表）技术的最新标准。主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局、过渡动画、2D/3D转换等模块。查看CSS文档

1、px/em/rem的区别？√

px：绝对单位长度，相对于显示器屏幕分辨率来定义，大小固定，不随浏览器的缩放而改变；
em：相对单位长度，相对于当前元素的父元素字体大小定义；
rem：CSS3引入的一种相对单位长度，它相对于HTML根元素的字体大小，优点是可以通过直接修改根元素字体大小来控制长度比例；初始：
```
1em = 1rem = 16px
```

2、什么是回流和重绘？√

（1）定义及区别：
① 回流指的是浏览器重新计算元素属性，然后绘制经修改后的元素的过程，并重新渲染页面，元素的几何属性发生改变（比如修改元素的宽、高或隐藏元素等）‌；
② 重绘指的是浏览器根据元素的样式信息重新绘制页面，‌但没有改变元素的几何属性（比如修改了颜色或背景色）。
（2）如何避免：
① 尽量使用class属性来批量修改样式；
② 使用CSS3动画或

transition

、

transform

和

animation

来实现动画效果，因为这些属性通常会在GPU层面处理，而不会引起回流，性能更好；
③ 避免频繁读取布局信息，如获取

offsetTop

、

offsetLeft

等信息；
注意： 重绘不一定导致回流，回流一定会导致重绘，回流的性能开销更大

3、CSS常用的伪元素有哪些，如何使用√

常用的伪元素有：

::before

（在元素之前插入内容并修改样式）、

::after

（在元素之后插入内容并修改样式）、

::first-letter

（设置第一个字符的样式）、

::first-line

（设置第一行的样式）、

::placeholder

（设置输入字段的占位符）

4、CSS选择器的优先级

!important > 内联样式1000 > Id选择器100 > 属性选择器10 > 伪类选择器10 > Class选择器10 > 伪元素选择器1 > 元素选择器1

5、标准盒模型和怪异盒模型的区别√

标准盒模型：width = content + margin

怪异盒模型：width = content + border + padding + margin

6、Flex弹性布局常用属性有哪些√

flex-direction: 弹性容器中子元素排列方式,其包含的值有：row、row-reverse、column、column-reverse

flex-warp: 设置弹性盒子的子元素的换行

flex-flow: 上面这两种属性的简写形式

align-item: 设置弹性盒子元素在侧轴上的对齐方式

align-content: 设置行对齐

justify-content: 设置弹性盒子元素在主轴上的对齐方式

flex-basis: 设置子元素在主轴上的初始大小，其值有：auto、%、px

flex-grow: 设置flex的增长系数，与flex-basis类似，以比例设置

7、对于BFC的理解√

BFC（块级格式化上下文）可以理解为CSS元素的一个属性，它属于普通流元素，可以创建一个隔离的/独立的渲染容器。并且可以用于处理外边距重叠现象，可用于清除浮动、阻止元素被浮动元素覆盖等问题；

触发BFC的方式有：html根元素、浮动元素、

绝对定位元素

、

overflow属性元素等

；

8、import和require的区别，加载模块的区别√

‌require

和

import

的主要区别在于它们所属的``模块化规范不同

，

加载时机不同

，以及

动态绑定和缓存方式的不同`。

(1) 所属规范不同： import是ES6（ECMAScript 2015）引入的关键字，属于ES模块化语法规范，主要用于浏览器端；require是CommonJS规范的一部分，主要用于Node.js环境，无法直接用于浏览器端；

(2) 加载时机不同： import是

静态引入

，必须在文件的顶部使用，提高了加载效率，但也限制了其使用位置，

编译时加载

；require是

动态引入

，可以在代码的任何位置使用，

运行时加载

，更加灵活但可能影响性能‌。

(3) 动态绑定和缓存方式不同： import提供静态分析，支持宏类型检验，但无法实现动态绑定；require提供动态绑定，适合服务器或浏览器环境，多次要求相同的模块时，只会执行一次，因为

缓存机制

的存在‌。

9、CSS加载是阻塞的吗√

CSS加载不会阻塞DOM的解析，但是会阻塞DOM的渲染，因为解析过程两者是独立并行的，而渲染过程这是两者合并进行的；所以要避免CSS加载时间过长，因此就需要对CSS进行包括

合并css文件或压缩

、

减少请求数

等性能优化操作；

CSS加载会堵塞JS运行，因为浏览器中的渲染进程是多线程的，分为GUI渲染线程、JS引擎线程、事件触发线程、定时器线程、异步http请求线程等等，由于JS可以操作DOM和CSS样式，因此为了避免出现冲突，CSS加载会阻塞JS的执行；

HTML5面试题集

HTML5是互联网的新一代Web内容构建标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。查看HTML文档

1、行内元素和块级元素都有哪些？√

（1）块级元素：div、h1~h6、hr、p、li、ul、ol、table、from、blockquote；
（2）行内元素：a、span、img、input、textarea、select；

2、HTML5的拖拽如何实现，有哪些API？√

被拖放元素API：

dragstart: 事件主体为被拖拽元素，在开始拖放元素时触发
dragend: 事件主体是被拖放元素，整个拖拽操作结束时触发
drag: 事件主体是被拖放元素，正在拖放元素时触发

目标元素API

dragenter: 事件主体是目标元素，被拖放元素进入时触发
dragover: 事件主体是目标元素，被拖放元素在目标元素内移动时触发
dragleave: 事件主体是目标元素，被拖放元素移出时触发
drop: 事件主体是目标元素，整个拖放操作完全结束时触发

<div id="draggable" draggable="true">Drag me!</div>
<div id="dropzone">Drop here!</div>

// 获取拖拽的元素和放置的区域
var dragItem = document.getElementById('draggable');
var dropZone = document.getElementById('dropzone');
 
// 添加拖拽事件监听
dragItem.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData("text/plain", event.target.id);
});
 
// 添加放置事件监听
dropZone.addEventListener('dragover', function(event) {
  event.preventDefault(); // 阻止默认行为
  event.dataTransfer.dropEffect = 'move'; // 设置可拖动的视觉效果
});

3、HTML5新增的标签有那些？√

H5新增的标签包括：

<video>

、

<audio>

、

<source>

、

<section>

、

<header>

、

<footer>

、

<aside>

、

<article>

、

<canvas>

、

<progress>

<section>

定义文档中的节、

<header>

定义 section 或 document 的页眉、

<footer>

定义 section 或 document 的页脚、

<article>

定义外部的内容、

<aside>

定义 article 以外的内容、

<audio>

定义声音如音乐或其他音频流、

<canvas>

定义画布，比如矢量图表和其他图像、

<video>

定义视频如电影片段或其他视频流、

<source>

为媒介元素（比如

<video>

和

 <audio>

）定义媒介资源、

<time>

定义日期或时间，或者两者、

<progress>

显示 JavaScript 中耗费时间的函数的进程;

CSS3面试题集

1、px/em/rem的区别？√

px：绝对单位长度，相对于显示器屏幕分辨率来定义，大小固定，不随浏览器的缩放而改变；
em：相对单位长度，相对于当前元素的父元素字体大小定义；
rem：CSS3引入的一种相对单位长度，它相对于HTML根元素的字体大小，优点是可以通过直接修改根元素字体大小来控制长度比例；初始：
```
1em = 1rem = 16px
```

2、什么是回流和重绘？√

transition

、

transform

和

animation

来实现动画效果，因为这些属性通常会在GPU层面处理，而不会引起回流，性能更好；
③ 避免频繁读取布局信息，如获取

offsetTop

、

offsetLeft

等信息；
注意： 重绘不一定导致回流，回流一定会导致重绘，回流的性能开销更大

3、CSS常用的伪元素有哪些，如何使用√

常用的伪元素有：

::before

（在元素之前插入内容并修改样式）、

::after

（在元素之后插入内容并修改样式）、

::first-letter

（设置第一个字符的样式）、

::first-line

（设置第一行的样式）、

::placeholder

（设置输入字段的占位符）

flex-flow: 上面这两种属性的简写形式

align-item: 设置弹性盒子元素在侧轴上的对齐方式

align-content: 设置行对齐

justify-content: 设置弹性盒子元素在主轴上的对齐方式

flex-basis: 设置子元素在主轴上的初始大小，其值有：auto、%、px

flex-grow: 设置flex的增长系数，与flex-basis类似，以比例设置

7、对于BFC的理解√

触发BFC的方式有：html根元素、浮动元素、

绝对定位元素

、

overflow属性元素等

；

8、import和require的区别，加载模块的区别√

‌require

和

import

的主要区别在于它们所属的``模块化规范不同

，

加载时机不同

，以及

动态绑定和缓存方式的不同`。

(2) 加载时机不同： import是

静态引入

，必须在文件的顶部使用，提高了加载效率，但也限制了其使用位置，

编译时加载

；require是

动态引入

，可以在代码的任何位置使用，

运行时加载

，更加灵活但可能影响性能‌。

缓存机制

的存在‌。

9、CSS加载是阻塞的吗√

合并css文件或压缩

、

减少请求数

等性能优化操作；

HTML5面试题集

HTML5面试题集

1、行内元素和块级元素都有哪些？√

2、HTML5的拖拽如何实现，有哪些API？√

3、HTML5新增的标签有那些？√

CSS3面试题集

1、px/em/rem的区别？√

2、什么是回流和重绘？√

3、CSS常用的伪元素有哪些，如何使用√

4、CSS选择器的优先级

5、标准盒模型和怪异盒模型的区别√

6、Flex弹性布局常用属性有哪些√

7、对于BFC的理解√

8、import和require的区别，加载模块的区别√

9、CSS加载是阻塞的吗√

Related Skills

Nano Banana Pro

Markdown Converter

1password

HTML5面试题集

1、行内元素和块级元素都有哪些？√

2、HTML5的拖拽如何实现，有哪些API？√

3、HTML5新增的标签有那些？√

CSS3面试题集

1、px/em/rem的区别？√

2、什么是回流和重绘？√

3、CSS常用的伪元素有哪些，如何使用√

4、CSS选择器的优先级

5、标准盒模型和怪异盒模型的区别√

6、Flex弹性布局常用属性有哪些√

7、对于BFC的理解√

8、import和require的区别，加载模块的区别√

9、CSS加载是阻塞的吗√