2023前端菜鸟笔试血泪史html5-one--找到工作前都更新

Posted 2023-03-08 竹林海中敲代码

1.说说对html语义化的理解

什么的HTML语义化，顾名思义，HTML语义化就是可以不通过了解HTML的内容，就可以知道这个部分所代表的的意义。

HTML语义化的意义：在使用HTML标签构建页面时，避免大篇幅的使用无语义的标签。

语义化的优点如下:

语义化标签优势：

1. 页面内容结构化,利于开发和维护；
2. 代码更加优雅，可读性高。
3. 有利于seo；

常见语义化标签

• <nav>：标记导航。
• <main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
• <article>：定义外部的内容，其中的内容独立于文档的其余部分。
• <section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
• <aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
• <footer>：页脚，只有当父级是body时，才是整个页面的页脚。
• <address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。

2.什么是 HTML5，它与 HTML4 有何不同?

HTML5 是一种最新版本的 HTML (HyperText Markup Language) 标准，用于描述网页内容。它与 HTML4 的主要区别在于：

1. 新元素：HTML5 增加了很多新元素，例如 header、footer、nav、article 等，这些元素可以更准确地描述网页内容，有助于搜索引擎的更好索引。
2. 语义元素：HTML5 新增了语义元素，这些元素可以使代码更具可读性和可维护性，并且可以提高代码的可访问性。
3. 媒体元素：HTML5 支持视频和音频元素，不再需要额外的插件（如 Flash）来播放媒体。
4. 离线存储：HTML5 支持离线存储，这使得网页应用程序可以在用户没有网络连接的情况下正常工作。
5. 多线程：HTML5 支持多线程，这使得网页应用程序可以更有效地利用多核处理器。

总的来说，HTML5 是 HTML4 的一个更新版本，拥有更多的功能和更强的性能。

3.HTML5 中有哪些新元素

1. header：表示文档或部分的页眉。
2. footer：表示文档或部分的页脚。
3. nav：表示导航链接的容器。
4. article：表示独立的、可独立于其他内容分发的内容。
5. section：表示文档的独立部分，例如章节、标题等。
6. aside：表示与主内容相关的辅助内容，例如侧栏、广告等。
7. canvas：表示图形，可用于绘制图形、创建动画等。
8. video：表示视频。
9. audio：表示音频。
10. datalist：表示下拉列表。
11. output：表示计算结果。
12. progress：表示任务的进度。
13. meter：表示度量值。

这仅是 HTML5 中的一些新元素，它还有很多其他的新元素。

4.HTML5 中“localStorage”和“sessionStorage”的区别?

"localStorage" 和 "sessionStorage" 都是 HTML5 中用于存储数据的技术。然而，它们在存储的时间、生存周期、作用域等方面有很大的不同。

"localStorage"：

• 数据存储在浏览器端，不会随着浏览器的关闭而消失，直到手动清除或用户数据存储限制。
• 作用域为整个域，所有页面都可以访问这些数据。

"sessionStorage"：

• 数据存储在浏览器端，但只在当前浏览器会话期间存在，关闭浏览器即消失。
• 作用域为当前页面会话，不同标签页或窗口中的页面无法访问这些数据。

因此，如果你需要存储数据并在多个浏览器会话之间共享数据，请使用 localStorage；如果你需要存储数据仅供当前浏览器会话使用，请使用 sessionStorage。

5.如何在 HTML5 中嵌入视频或音频

在 HTML5 中嵌入视频或音频非常简单，可以使用 "video" 或 "audio" 元素。

以下是嵌入视频的示例代码：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

以下是嵌入音频的示例代码:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

在上面的代码中，使用了 "width" 和 "height" 属性设置视频的宽度和高度，使用了 "controls" 属性为视频提供播放控件。

使用 "source" 元素，您可以提供多种视频或音频格式，并且浏览器将自动选择最适合的格式进行播放。

此外，您还可以使用其他属性，例如 "autoplay"、"loop" 等，以自定义视频和音频的行为。

6.你能描述一下“canvas”元素在 HTML5 中的作用吗？

"canvas" 元素是 HTML5 中的一个新元素，它是一个可以编程绘图的图形区域。它允许开发人员使用 javascript 编写代码在网页上动态创建图形，例如线条、圆形、曲线、图像等。

可以使用 "canvas" 元素实现很多有趣的图形和动画效果，例如：

• 动态生成图表和图形
• 创建游戏
• 实现图像处理和过滤效果

以下是简单的使用 "canvas" 元素绘制一个圆形的示例代码：

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

  context.beginPath();
  context.arc(95, 50, 40, 0, 2 * Math.PI);
  context.stroke();
</script>

在上面的代码中，使用 "getContext" 方法获取 "canvas" 元素的上下文，然后使用 "arc" 方法绘制一个圆形，最后使用 "stroke" 方法显示出圆形的轮廓。

总的来说，"canvas" 元素是 HTML5 中一个非常强大和灵活的工具，可以为 Web 开发带来更多创意和灵活性。

7.如何确保 HTML5 网站中旧浏览器的向后兼容性

为了确保 HTML5 网站中旧浏览器的向后兼容性，可以使用以下方法：

1. 使用 JavaScript 库或框架：例如，使用 Modernizr 库可以检测浏览器是否支持 HTML5 元素，并在不支持的浏览器中使用替代方案。
2. 在不支持 HTML5 特性的浏览器中使用 Polyfill->用来为旧浏览器提供它没有原生支持的较新的功能：例如，可以使用 HTML5 Shiv 库来支持 HTML5 元素在旧版 Internet Explorer 中的渲染。
3. 使用浏览器前缀：例如，对于 CSS3 属性，可以使用浏览器前缀（例如，-webkit-，-moz-，-ms-等）以确保浏览器的兼容性。
4. 使用替代方案：对于不支持 HTML5 特性的浏览器，可以使用替代方案，例如使用 Flash 和 Silverlight 插件来代替 HTML5 视频和音频元素。

总的来说，使用上述方法可以确保 HTML5 网站在旧版浏览器中的兼容性，并确保网站的正常工作。

8.常用的meta元素有哪些？

1. "charset"：定义网页使用的字符集。
2. "viewport"：定义移动设备如何显示网页。
3. "description"：定义网页的简短描述，常用于搜索引擎优化。
4. "keywords"：定义网页的关键字，常用于搜索引擎优化。
5. "robots"：定义搜索引擎如何爬取和索引网页。
6. "revisit-after"：定义搜索引擎多长时间后重新爬取网页。
7. "author"：定义网页作者的姓名。
8. "generator"：定义使用的 HTML 生成器。
9. "theme-color"：定义移动设备的主题颜色。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="这是一个描述网页内容的例子">
<meta name="keywords" content="网页, 关键字, 例子">
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="7 days">
<meta name="author" content="作者的名字">
<meta name="generator" content="HTML生成器的名字">
<meta name="theme-color" content="#4285f4">

9.HTML标签中的src和href有什么区别

src 和 href 都是 HTML 标签中常见的属性，但它们的作用是不同的。

• src：是用于在 HTML 文档中嵌入外部资源（例如图像、脚本、插件等）的属性。它与标签相关联，并告诉浏览器在哪里加载该资源。例如，<img src="image.jpg"> 用于嵌入图像资源。
• href：是用于在 HTML 文档中链接其他资源（例如另一个网页、邮件地址、文件等）的属性。它与链接相关联，并告诉浏览器链接的位置。例如，<a href="https://www.example.com">Example</a> 用于创建链接。

简而言之，src 用于嵌入外部资源,故会导致阻塞，而 href 用于链接其他资源，不会引起阻塞。

10.script标签中，async和defer两个属性有什么用途和区别

async 和 defer 是 <script> 标签中的两个常见属性，它们的目的是影响脚本的加载和执行顺序。

• async：当脚本设置为 async 时，浏览器会异步加载该脚本，并在它加载完成后立即执行。使用 async 属性时，不会等待页面其他内容完成加载，也不会影响页面其他内容的加载。
• defer：当脚本设置为 defer 时，浏览器会异步加载该脚本，但会等待页面其他内容完成加载之后再执行。使用 defer 属性可以确保脚本在页面其他内容之后执行，并且不会影响页面其他内容的加载。

简而言之，如果你希望脚本在页面其他内容加载完成后执行，使用 defer 属性；如果你希望脚本在下载完成后立即执行，不管页面其他内容的加载状态，使用 async 属性。

async 和 defer 有一个共同点：加载这样的脚本都不会阻塞页面的渲染。因此，用户可以立即阅读并了解页面内容。但是，它们之间也存在一些本质的区别：

async ：加载优先顺序。脚本在文档中的顺序不重要 —— 先加载完成的先执行，就后面的小脚本可能比前面的脚本先执行, DOMContentLoaded 不需要等待async脚本执行完成。

defer：按照文档顺序执行 ，在文档加载和解析完成之后（需要等待前面的脚本按顺序执行），即在 DOMContentLoaded 之前执行。

11.DOCTYPE标签有什么作用

DOCTYPE (Document Type Declaration) 标签用于声明 HTML 文档的类型和版本。它告诉浏览器如何解析和渲染文档的内容。

在 HTML 文档的开头，DOCTYPE 标签必须是文档中的第一行。它充当了一个指示，告诉浏览器使用哪种文档类型定义 (DTD) 解析和渲染文档。

比如，下面是一个 HTML5 的 DOCTYPE 标签：

<!DOCTYPE html>

在 HTML4 和 XHTML 中，DOCTYPE 标签是更复杂的，并且需要引用一个外部 DTD。

在 HTML5 中，DOCTYPE 标签更简单，因为它不需要引用外部 DTD。

总的来说，DOCTYPE 标签是非常重要的，因为它影响了浏览器如何渲染文档，并且确保了文档的兼容性和可靠性。

12.简述html页面渲染过程

HTML 页面的渲染过程包括以下步骤：

1. 解析HTM，创建DOM树。
2. 解析CSS，创建CSSOM树。
3. 合并DOM树和CSSOM树，生成渲染树 (Render Tree)。渲染树是一种树形结构，描述了页面的结构和布局，以及每个元素的样式和尺寸。
4. 布局：浏览器通过计算每个元素的位置和大小，完成布局。
5. 绘制: 最后，浏览器绘制页面，将渲染树中的元素绘制到屏幕上。
6. 以上五个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。

渲染过程是浏览器的核心功能，因此引出在改变DOM树和CSSOM树时，如何优化性能减少重绘和重排（回流）是至关重要的 !

13.什么是HTML5，以及和HTML的区别是什么?

HTML5 是 HTML的第五个版本。

与早期版本 HTML 相比，HTML5 在语法和功能上都有了很大的改进。其中一些重要的改进如下：

• 新增了语义化标签，如 <article>、<section>、<nav> 等，使得页面结构更加清晰。
• 对于多媒体的支持更加完善，比如新增了 <video> 和 <audio> 标签，可以在网页上直接播放视频和音频。
• 支持了离线存储和数据库基于Web Storage API和IndexedDB实现，其实我们常用到Web Storage的API 方法localStorage和sessionStorage，可以提高网页的可用性和速度。
• 对于表单的支持更加完善，比如input新增了 placeholder 和 required 属性等。
• 对于游戏开发和动画的支持也更加完善，比如新增了 Canvas 元素。

总的来说，HTML5 更加现代化，支持了更多的功能，使得网页开发更加简便和高效。

14.如何禁用HTML中a标签的默认事件?

HTML方法

<a href="" οnclick="return false;">
  return false;
</a>
<a href="#" οnclick="return false;">
  return false;
</a>

CSS方法

pointer-events: none;

JavaScript 方法：

const link = document.querySelector("a");
link.addEventListener("click", function (event) 
  event.preventDefault();
);

15.前端页面有哪三层结构?

1. 结构层（Structure Layer）：也叫标记层（Markup Layer），通常使用HTML来描述页面的结构和内容，包括标题、段落、列表、图像、表格等。
2. 表示层（Presentation Layer）：也叫样式层（Style Layer），通常使用CSS来描述页面的样式和布局，包括字体、颜色、边框、背景等。
3. 行为层（Behavior Layer）：也叫脚本层（Script Layer），通常使用JavaScript来描述页面的交互和动态效果，包括响应用户事件、操作DOM元素、修改样式等。

这种分层结构有助于前端页面的模块化和维护，可以提高页面的可读性、可扩展性和可维护性。

16.请描述下 SEO 中的 TDK？

在 SEO 中，所谓的 TDK 其实就是 title、description、keywords。

• title：浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到，搜索引擎在抓取网页时，最先读取的就是网页标题，所以 title 是否正确设置极其重要。title 一般不超过 80 个字符，而且词语间要用英文 “-” 隔开，因为计算机只对英语的敏感性较高，对汉语的敏感性不高。
• description：也就是网页的内容摘要，这是对于一个网页的简要内容概况。description 一般不超过 150 个字符，描述内容要和页面内容相关。
• keywords：主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此 keywords 的每个词都要能在内容中找到相应匹配，才有利于排名。keywords 一般不超过 3 个，每个关键词不宜过长，而且词语间要用英文 “,” 隔开，尽量将重要的关键字靠前放。

17.frame 用来干什么的？有哪些优缺点？

iframe 也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。

优点:

1. 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
2. 方便制作导航栏

缺点:

1. 会产生很多页面，不容易管理
2. 调用外部页面，需要额外调用 CSS，给页面带来额外的请求次数
3. 会阻塞页面的加载，window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发
4. 浏览器的后退按钮无效
5. 无法被一些搜索引擎索引到
6. 多数小型的移动设备（PDA 手机）无法完全显示框架

由于上面诸多缺点，因此不符合标准网页设计的理念，已经被标准网页设计抛弃，目前框架的所有优点完全可以使用 Ajax 实现，因此已经没有必要使用 iframe 框架了。

18.什么是可替换元素，什么是非可替换元素，它们各自有什么特点？

可替换元素是指这样一种元素，它在页面中的大部分展现效果不由 CSS 决定。

比如 img 元素就是一个可替换元素，它在页面中显示出的效果主要取决于你连接的是什么图片，图片是什么它就展示什么，CSS 虽然可以控制图片的尺寸位置，但永远无法控制图片本身。

再比如，select 元素也是一个典型的可替换元素，它在页面上呈现的是用户操作系统上的下拉列表样式，因此，它的展现效果是由操作系统决定的。所以，同一个 select 元素，放到不同操作系统的电脑上会呈现不同的外观。img、video、audio、大部分表单元素都属于可替换元素。

非可替换元素就是指的普通元素，它具体在页面上呈现什么，完全由 CSS 来决定。

19.页面可见性（Page Visibility）API 可以有哪些用途？

所谓页面可见性，就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换，然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性（Page Visibility）API 来判断当前页面是显示状态还是隐藏状态。

常用的 API 有三个，document.hidden 返回一个布尔值，如果是 true，表示当前页面隐藏，false 则表示页面可见。不同页面之间来回切换，会触发 visibilitychange 事件，还有一个 document.visibilityState，表示页面所处的状态。

常见的用途：

• 网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片。
• 显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
• 页面想要检测是否正在渲染，以便可以准确的计算网页浏览量
• 当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）

20.什么是锚点？

锚点（anchor）是一种特殊连接，能定位到 HTML 文档中某个特定位置，通过 HTML 元素的 id 来设置锚点。