android h5 面试 h5面试题2021

目录

H5新特性有哪些

H5移除的元素有哪些

说一下 HTML5 drag API

行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？

页面导入样式时，使用link和@import有什么区别？

title与h1的区别、b与strong的区别、i与em的区别？

1.title与h1的区别

2.b与strong的区别

3.i与em的区别

img标签的title和alt有什么区别

伪类和伪元素的区别

什么是语义化标签

script 标签中 defer 和 async 的区别

浏览器渲染机制的理解

介绍下重绘和回流（Repaint & Reflow）

1.重绘

2.回流

3.二者的关系

减少重绘和回流的方法

1. CSS

2.Javascript

怎么让Chrome支持小于12px的文字

rem和em的区别

weblit表单输入框placeholder的颜色值能改变吗

自适应，适配 

响应式

网页布局方案

png、jpg、gif图片格式的理解，什么时候用

什么是webp

浏览器如何判断是否支持 webp 格式图片

浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

Canvas 和 SVG 的区别

1.SVG

2.Canvas

3.二者区别

什么是矢量图

---

H5新特性有哪些

1. 新增选择器 document.querySelector、document.querySelectorAll
2. 拖拽释放(Drag and drop) API
3. 媒体播放的 video 和 audio
4. 本地存储 localStorage 和 sessionStorage
5. 离线应用 manifest
6. 桌面通知 Notifications
7. 语意化标签 article、footer、header、nav、section
8. 增强表单控件 calendar、date、time、email、url、search
9. 地理位置 Geolocation
10. 多任务 webworker
11. 全双工通信协议 websocket
12. 历史管理 history
13. 跨域资源共享(CORS) Access-Control-Allow-Origin
14. 页面可见性改变事件 visibilitychange
15. 跨窗口通信 PostMessage
16. Form Data 对象
17. 绘画 canvas

H5移除的元素有哪些

1. 纯表现的元素：basefont、big、center、font、s、strike、tt、u
2. 对可用性产生负面影响的元素：frame、frameset、noframes

说一下 HTML5 drag API

1. dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
2. darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
3. dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
4. dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
5. dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触 发。
6. drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
7. dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？

1. 行内元素：：a ，b ，span， img， input， select， strong
2. 块级元素：div， ul， ol， li ，dl， dt， dd， h1~h6， p；
3. 空元素：即没有内容的 HTML 元素。空元素是在开始标签中关闭的， 也就是空元素没有闭合标签，常见的有：br，hr，img，input，link，meta，其他有：area，base，col，colgroup，command，embed，keygen，param，source，track，wbr

元素之间的转换问题：

display: inline;            把某元素转换成了行内元素      ===>不独占一行的，并且不能设置宽高

display: inline-block;  把某元素转换成了行内块元素        ===>不独占一行的，可以设置宽高

display: block;                 把某元素转换成了块元素            ===>独占一行，并且可以设置宽高

页面导入样式时，使用link和@import有什么区别？

区别一：引入的内容不同

link 除了引用样式文件，还可以引用图片等资源文件，而 @import 只引用样式文件

区别二：加载顺序不同

link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载

区别三：兼容性不同

link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持

区别四：对 JS 的支持不同

link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持
 

title与h1的区别、b与strong的区别、i与em的区别？

1.title与h1的区别

定义：

    title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么

    h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么

区别：

    title他是显示在网页标题上、h1是显示在网页内容上

    title比h1添加的重要 (title > h1 ) ==》对于seo的了解

场景：

    网站的logo都是用h1标签包裹的

2.b与strong的区别

定义：

    b：实体标签，用来给文字加粗的。

    strong：逻辑标签，用来加强字符语气的。

区别：

    b标签只有加粗的样式，没有实际含义。

    strong表示标签内字符比较重要，用以强调的。

PS：为了符合css3的规范，b尽量少用该用strong就行了

3.i与em的区别

定义：

    i:实体标签，用来做文字倾斜的。

    em：是逻辑标签，用来强调文字内容的

区别：

    i只是一个倾斜标签，没有实际含义。

    em表示标签内字符重要，用以强调的。

场景：

    i更多的用在字体图标，em术语上（医药，生物）

img标签的title和alt有什么区别

区别一：

    title ： 鼠标移入到图片显示的值

    alt   ： 图片无法加载时显示的值

区别二：

    在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

伪类和伪元素的区别

区别：1.在于是否创造了新的元素，2.表示方法（css 规范中用双冒号 :: 表示伪元素，用一个冒号）

伪类：存在DOM文档中，用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。

伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。

什么是语义化标签

• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便其他设备解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
• IE8不兼容HTML5 =》通过html5shiv.js处理

语义化标签如下：

header	页眉通常包括网站标志、主导航、全站链接以及搜索框
nav	标记导航，仅对文档中重要的链接群使用
main	页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能
article	定义外部的内容，其中的内容独立于文档的其余部分
section	定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
aside	定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等
footer	页脚，只有当父级是body时，才是整个页面的页脚

title	页面主体内容
hn	h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化
ul	无序列表
li	有序列表
small	呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权
em	将其中的文本表示为强调的内容，表现为斜体
strong	和 em 标签一样，用于强调文本，但它强调的程度更强一些
mark	使用黄色突出显示部分文本
figure	规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin
figcaption	定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置
cite	表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题
blockquoto	定义块引用，块引用拥有它们自己的空间
q	短的引述（跨浏览器问题，尽量避免使用）
time	datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式
abbr	简称或缩写
dfn	定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用
address	作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）
del	移除的内容
ins	添加的内容
code	标记代码
meter	定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
progress	定义运行中的进度（进程

script 标签中 defer 和 async 的区别

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。 它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样 就阻塞了后续文档的加载

区别一：执行顺序

• 多个带 async 属性的标签，不能保证加载的顺序；
• 多个带 defer 属性的标签，按照加载顺序执行

区别二：脚本是否并行执行

• async 属性，表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的，即异步执行
• defer 属性，加载后 续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有元素解析完成之后才执行， DOMContentLoaded 事件触发执行之前

浏览器渲染机制的理解

1. 浏览器采用流式布局模型（Flow Based Layout）；
2. 浏览器会把 HTML 解析成 DOM，把 CSS 解析成 CSSOM,DOM 和 CSSOM 合并就产 生了渲染树（Render Tree）；
3. 有了 RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上 的大小和位置，最后把节点绘制到页面上；
4. 由于浏览器使用流式布局，对 Render Tree 的计算通常只需要遍历一次就 可以完成，但 table 及其内部元素除外，他们可能需要多次计算，通常要 花 3 倍于同等元素的时间，这也是为什么要避免使用 table 布局的原因 之一

介绍下重绘和回流（Repaint & Reflow）

1.重绘

由于节点的集合属性发生改变或者由于样式改变而不会影响布局的，称为重绘，例如 outline、visibility、color、background-color 等，重绘的代价是高昂 的，因此浏览器必须验证 DOM 树上其他节点元素的可见性。

2.回流

回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关 键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的 回流可能会导致其素有子元素以及 DOM 中紧随其后的节点、祖先节点元素的随后 的回流。大部分的回流将导致页面的重新渲染。

3.二者的关系

回流必定会发生重绘，重绘不一定会引发回流。

减少重绘和回流的方法

1. CSS

• 使用 transform 代替 top；
• 使用 visibility 替换 display: none，前者引起重绘，后者引发回流；
• 避免使用 table 布局；
• 尽可能在 DOM 树的最末端改变 class； 
• 避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级 过多；
• 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上，避免影 响其他元素的布局；
• 避免使用 CSS 表达式，可能会引发回流；
• CSS 硬件加速；

2.Javascript

• 避免频繁操作样式，修改 class 最好；
• 避免频繁操作 DOM，合并多次修改为一次；
• 避免频繁读取会引发回流/重绘的属性，将结果缓存；
• 对具有复杂动画的元素使用绝对定位，使它脱离文档流

怎么让Chrome支持小于12px的文字

每个浏览器默认字体大小都不一样，Chrome浏览器默认字体大小是16px，就算设置了font-size，文字最小尺寸也是12px，无法再小

解决办法：

rem和em的区别

em是针对父元素的font-size，rem是针对根元素（html）

weblit表单输入框placeholder的颜色值能改变吗

自适应，适配 

由于电脑和手机的屏幕分辨率不同，但我们做的页面是需要在这种复制的环境下提供给用户使用，这时候就产生了自适应的思维。

自适应这种特性，在很多前端页面框架都是支持的。最简单的自适应是按照百分比去设置宽高，这样屏幕也能按照百分比去显示。

 还有一种比较好的处理方式，我们获取到当前屏幕的分辨率，然后按照分辨率的大小进行动态布局，发现屏幕过小的时候，把其中一个往下显示。但这种方式的技术复杂度也比较大，自适应目前是使用框架去处理的居多。

响应式

浏览器窗口大小、PC端与移动端的视口区别，页面布局会相应的发生一些改变，但是有些（比如淘宝PC端与移动端视图不太一样）就不是完全的响应式

 网页布局方案

 

png、jpg、gif图片格式的理解，什么时候用

png：无损压缩，尺寸体积比jpg/jpge的大，适合做小图标

jpg：采用压缩算法，有些失真，比png体积小，适合做中大图片

gif：动图

webp：同时支持有损或无损压缩，相同质量的图片，webp体积更小

什么是webp

WebP 是谷歌开发的一种新图片格式，它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用 webp 格式的最大优点是是，在相同质量的文件下， 它拥有更小的文件体积。因此它非常适合于网络图片的传输，因为图片体积的减 少，意味着请求时间的减少，这样会提高用户的体验。

浏览器如何判断是否支持 webp 格式图片

通过创建 Image 对象，将其 src 属性设置为 webp 格式的图片，然后在 onload 事件中获取图片的宽高，如果能够获取，则说明浏览器支持 webp 格式 图片。如果不能获取或者触发了 onerror 函数，那么就说明浏览器不支持 webp 格式的图片

浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面 ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经 访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线 的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文 件改变了，就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器会直接使用离线存储的资源

Canvas 和 SVG 的区别

1.SVG

SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标 记语言 XML 描述的 2D 图形的语言，SVG 基于 XML 就意味着 SVG DOM 中的每个元素都是可用的，可以为某个元素附加 Javascript 事件处 理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象 的属性发生变化，那么浏览器能够自动重现图形。

其特点如下： 不依赖分辨率， 支持事件处理器， 最适合带有大型渲染区域的应用程序（比如谷歌地图）， 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）， 不适合游戏应用

2.Canvas

Canvas 是画布，通过 Javascript 来绘制 2D 图形，是逐像素进行渲 染的。其位置发生改变，就会重新进行绘制。

其特点如下： 依赖分辨率 ，不支持事件处理器， 弱的文本渲染能力， 能够以 .png 或 .jpg 格式保存结果图像， 最适合图像密集型的游戏（其中的许多对象会被频繁重绘）

3.二者区别

区别一：基于的语言不同

区别二：浏览器重新绘制图形的依据不同

区别三：是否依赖分辨率不同

区别四：是否支持事件处理器不同

区别五：是否支持游戏应用不同

什么是矢量图

矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一 系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等 属性。