【HTML HTML5】前端八股文面试题

前言

总结了一些前端八股文的面试题，咱们就是八股文确实不能不背。

文章目录

前言
HTML部分（包含Html5的内容）
- - 1.html中前缀为 data- 开头的元素属性是什么？
  - - - 1）属性名必须以 data- 开头。
      - 2）后面的部分可以使用小写字母，并用短横线分隔。例如：`data-user-id`、`data-info` 等。
      - 3）可以通过 `JavaScript` 访问这些属性，比如使用 `element.dataset` 对象。例如：
  - 2. iframe 是什么？有哪些优缺点？
  - - 优点：
    - - 1）内容分离：
      - 2）跨域内容展示：
      - 3）独立性：
      - 4）重用性：
      - 5）异步加载：
    - 缺点：
    - - 1）性能问题：
      - 2）安全性：
      - 3）SEO 影响：
      - 4）浏览器兼容性：
      - 5）内容互动难度：
  - 3. `<!DOCTYPE html>`标签有什么用？
  - - - 1）标准模式渲染：
      - 2）兼容性：
      - 3）性能优化：
      - 4）HTML5 支持：
  - 4.HTML5 有哪些 drag 相关的 API？
  - - - 1）基本概念：
      - 2）以下是一些主要的拖放相关 API：
  - 5. 说说对 SEO 的理解？
  - - - 1）SEO 的关键组件：
      - 2）SEO 的重要性：
  - 6. link和 @import 的区别是什么？
  - - - 1）基本语法
      - 2）加载顺序
      - 3）可维护性
      - 4）媒体查询支持
  - 7. `<img>`标签中的 `title`属性与`alt`属性的区别是什么？
  - - - 1）目的和用法
      - 2）对搜索引擎优化（SEO）的影响
      - 3）用户体验
  - 8.行内元素有哪些？块级元素有哪些？内敛块级元素有哪些？空元素有哪些？
  - - - 1）行内元素（Inline Elements）
      - 2）块级元素（Block-level Elements）
      - 3）内联块级元素（Inline-block Elements）
      - 4）空元素（Void Elements）
  - 9.Canvas 和 SVG 有什么区别？
  - - - 1）绘图方式
      - 2）文件大小与性能
      - 3）交互性
      - 4）渲染性能
      - 5）编辑与缩放
      - 6）使用场景
  - 10. HTML5 有哪些新特性?
  - - - 1）新的语义元素
      - 2）增强的表单功能
      - 3）音频和视频支持
      - 4） Canvas绘图
      - 5）`SVG`和`MathML`支持
      - 6）地理定位
      - 7）拖放功能
      - 8）Web存储
      - 9）Web Workers
      - 10）WebSocket
      - 11）新的API
      - 12）改进的语法
  - 11. SPA 应用怎么进行 SEO？
  - - - 1）服务器端渲染（SSR）
      - 2）预渲染
      - 3）利用哈希或路径路由
      - 4）提供企业级标记（比如meta标签）
      - 5）使用结构化数据
      - 6）确保内部链接结构清晰
      - 7）优化加载时间
      - 8）提供一个 sitemap.xml 文件
      - 9）合理处理404页面
      - 10）使用 Google Search Console 等工具
      - 11）避免使用纯 Ajax 加载内容
  - 12. HTML5 的离线储存怎么使用，它的工作原理是什么？
  - - - 1）Local Storage
      - 2）Session Storage
      - 3）IndexedDB
  - 13.一台设备的dpr，是否可变？
  - - - 1）`DPR` 的基本特点
  - 14.对 DOM 树的理解
  - - - 1）DOM 树的结构
      - 2）DOM 树的特点
  - 15.a标签合法的几种target属性
  - 16.form表单只有一个的时候自动提交怎么阻止？
  - - - 1）在表单元素中添加 `οnsubmit="return false;"` 属性。
      - 2）使用 JavaScript 监听表单的提交事件，并阻止其默认行为。
  - 17.怎么阻止表单的默认提交行为？
  - - - 1）方法一：在表单的 onsubmit 事件处理函数中返回 false 。
      - 2）方法二：使用 JavaScript 来监听表单的 submit 事件，并调用 preventDefault() 方法来阻止默认行为。
      - 3）方法三：使用 jQuery 库，例如：
  - 18.按钮提交地址的属性是?
  - - - 1）使用 `<input>` 元素：
      - 2）使用 `<button>` 元素：
  - 19.sessionStorage，localStorage，cookie的区别
  - 20. Session，Cookie，localhost区别

HTML部分（包含Html5的内容）

1.html中前缀为 data- 开头的元素属性是什么？

在 HTML 中，前缀为 data- 开头的属性被称为自定义数据属性（Custom Data Attributes）。
这些属性可以用来存储额外的信息，这些信息与页面的内容无关，但可能对网页的 JavaScript 交互非常有用。

自定义数据属性遵循以下规则：

1）属性名必须以 data- 开头。

2）后面的部分可以使用小写字母，并用短横线分隔。例如：`data-user-id`、`data-info` 等。

3）可以通过 `JavaScript` 访问这些属性，比如使用 `element.dataset` 对象。例如：

<div id="myDiv" data-user-id="123" data-role="admin"></div>

<script>
  const div = document.getElementById('myDiv');
  console.log(div.dataset.userId); // 输出 "123"
  console.log(div.dataset.role); // 输出 "admin"
</script>

这种方式非常灵活，允许开发者为 HTML 元素添加额外信息，而不需要修改 DOM 结构或使用全局 JavaScript 变量。

2. iframe 是什么？有哪些优缺点？

<iframe> 标签是 HTML 的一种元素，用于在一个网页中嵌入另一个网页。
iframe 的全称是 "inline frame"，它可以用来显示其他文档，比如其他网页、视频、地图等。
使用 iframe 可以将外部内容整合到一个页面中，而不需要重新加载整个页面。

<iframe src="https://example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>

优点：

1）内容分离：

可以将外部内容嵌入主页面，而不需要将其直接集成到 HTML 中，方便分离不同来源的内容。

2）跨域内容展示：

可以显示来自其他域的内容，这对集成外部服务（如第三方广告、社交媒体内容等）非常有用。

3）独立性：

iframe 中的内容和主文档是相互独立的，外部内容的JavaScript、CSS 不会影响主页面。

4）重用性：

可以在多个页面中重复使用同一个 iframe，减小开发工作量。

5）异步加载：

iframe 的内容在主页面加载时可以延迟加载，从而优化主页面的性能。

缺点：

1）性能问题：

使用 iframe 增加了页面的复杂性，会导致更多的 HTTP 请求、DOM 操作和内存占用，可能影响性能。

2）安全性：

嵌入外部页面可能引发安全性问题，如跨站脚本（XSS）攻击。如果嵌入的内容不可信，需非常小心。

3）SEO 影响：

搜索引擎可能不会索引 iframe 中的内容。在某些情况下，使用 iframe 嵌入的资源可能不会对 SEO 产生积极影响。

4）浏览器兼容性：

虽然大多数现代浏览器支持 iframe，但有些老旧或特殊的浏览器可能不支持其某些特性。

5）内容互动难度：

由于 iframe 中的内容与主文档是相互隔离的，跨文档通信需要借助 JavaScript 的 postMessage 方法，这增加了实现的复杂性。

使用场景：

嵌入视频或音乐（如 YouTube、Spotify）。
直接显示地图（如 Google Maps）。
嵌入第三方内容（如外部广告、社交媒体分享按钮等）。
在不同域的应用程序之间集成内容。

3. `<!DOCTYPE html>`标签有什么用？

<!DOCTYPE html>标签是 HTML5 文档类型声明的一部分，它的主要作用是告诉浏览器这是一个 HTML5 文档。
虽然它本身不是一个 HTML 标签，而是一个文档类型声明，但它对于确保浏览器以标准模式渲染页面至关重要。

其关键作用：

1）标准模式渲染：

通过声明 <!DOCTYPE html>，浏览器会以标准模式（也称为“严格模式”）来渲染页面，这意味着浏览器会尽可能遵循 HTML 和 CSS 的规范来解析和显示页面内容。

2）兼容性：

不同的浏览器可能会有不同的渲染模式，包括怪异模式（ Quirks Mode ）和标准模式。
使用 <!DOCTYPE html> 可以确保大多数现代浏览器以一致的方式渲染页面，避免因不同渲染模式导致的兼容性问题。

3）性能优化：

标准模式通常会启用更多的优化和性能提升，因为它假设开发者遵循标准编写代码，浏览器可以更高效地解析和渲染页面。

4）HTML5 支持：

<!DOCTYPE html> 是 HTML5 的文档类型声明，它简洁明了，易于记忆，并且向后兼容。
即使在不完全支持 HTML5 的旧浏览器中，它也能正常工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

4.HTML5 有哪些 drag 相关的 API？

HTML5 提供了一些与拖放（drag and drop）相关的 API，使得开发者能够在网页上实现拖放功能。

1）基本概念：

拖拽源 ( Drag Source )：可以被拖拽的元素。
通过设置 draggable 属性为 true ，元素可以成为拖拽源。
拖拽目标 ( Drop Target )：接受被拖拽元素的区域。
拖拽源元素被拖拽到目标区域时，目标区域会处理拖拽操作。

2）以下是一些主要的拖放相关 API：

draggable 属性：指定该元素是否可以被拖动。例如：

<div draggable="true">This element can be dragged.</div>

处理拖拽事件： dragstart drag dragend

dragstart 事件：当用户开始拖动一个元素时触发。
通过监听这个事件来设置拖动数据。

element.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', 'Some data');
});

drag 事件：在拖动过程中持续触发。

element.addEventListener('drag', function(event) {
  // 处理拖动过程中的逻辑
});

dragend 事件：当拖动操作结束时触发，无论是否成功放置。

element.addEventListener('dragend', function(event) {
  // 处理拖动结束后的逻辑
});

处理拖拽目标： dragenter dragover dragleave drop

dragenter 事件：当被拖动的元素进入一个有效的放置目标时触发。

targetElement.addEventListener('dragenter', function(event) {
  // 处理拖动元素进入目标时的逻辑
});

dragover 事件：当被拖动的元素在有效放置目标上移动时持续触发。

targetElement.addEventListener('dragover', function(event) {
  event.preventDefault(); // 阻止默认行为以允许放置
});

dragleave 事件：当被拖动的元素离开一个有效的放置目标时触发。

targetElement.addEventListener('dragleave', function(event) {
  // 处理拖动元素离开目标时的逻辑
});

drop 事件：当被拖动的元素放置在有效放置目标上时触发。

targetElement.addEventListener('drop', function(event) {
  event.preventDefault(); // 阻止默认行为
  var data = event.dataTransfer.getData('text/plain');
  // 处理放置后的逻辑
});

5. 说说对 SEO 的理解？

SEO :“搜索引擎优化”（Search Engine Optimization）。
旨在提高网站在搜索引擎结果页面（SERP）中可见性和排名的技术和策略。
主要目标是增加有机（非付费）流量，也就是通过自然搜索结果吸引访问者，而不是通过付费广告获取流量。

1）SEO 的关键组件：

关键词研究：
识别用户在搜索时使用的相关关键词和短语，并将这些信息应用于内容、标题和元标签中。
内容优化：
通过创建高质量、相关、有价值的内容来吸引用户并满足他们的搜索意图。这包括文本、图像、视频等多媒体内容的优化。
页面优化（On-page SEO）：
通过优化标题标签、元描述、URL结构、图像标签和内部链接等元素来改善单个网页的可见性。
站外优化（Off-page SEO）：
包括提高网站权威性和信誉的策略，例如反向链接建设（通过其他网站链接到你的网站）。
技术性 SEO：
包括确保网站技术结构良好，如网站速度、移动友好性、安全性（HTTPS）等，以确保搜索引擎能够有效地抓取和索引网页。
用户体验（UX）：
确保网站的可用性和导航良好，以提高用户留存率和降低跳出率，这也有助于搜索引擎的排名。
当地 SEO：
针对地理位置的搜索做优化，例如 Google 我的商家（Google My Business）的注册和本地关键词的使用。

2）SEO 的重要性：

提高可见性：
好的 SEO 策略能帮助网站在搜索引擎中获得更高的排名，从而吸引更多的流量。
增强信任感：
搜索引擎通常将排名较高的网站视为更可靠，从而提高用户信任。
长期效果：
与付费广告不同，SEO 的效果是长期的，能够持续为网站带来流量。
竞争优势：
在竞争激烈的市场中，良好的 SEO 可以帮助企业在同行中脱颖而出。

6. link和 @import 的区别是什么？

<link> 和 @import 是两种在网页中引入 CSS（层叠样式表）的方式，它们各自有不同的特性和使用场景。

主要区别：

1）基本语法

<link> 标签：

<link rel="stylesheet" href="styles.css">

使用 <link> 标签是在 HTML 文档的 <head> 部分直接引入 CSS 文件。

@import 语句：

@import url("styles.css");

使用 @import 是在 CSS 文件内部引入另一个 CSS 文件。这通常放在另一个 CSS 文件的开头。

2）加载顺序

<link> 标签：
使用 <link> 引入的 CSS 文件会在浏览器加载 HTML 时，同时并行加载，通常速度较快。
<link> 标签的样式会立即生效，加载时不会影响页面的渲染。
@import 语句：
用 @import 引入的 CSS 文件是在包含它的 CSS 文件加载完成后再进行加载的，因此会产生一段延迟。这可能导致页面在样式加载完成之前会出现闪烁或抖动的现象。
@import 只能在 CSS 文件中使用，而且只能用于引入同样的样式表类型。

（例如，不能在 CSS 文件中用 @import 引入 JavaScript）

3）可维护性

<link> 标签：
提高了 HTML 的可读性和可维护性，让依赖的样式表在页面结构中一目了然。
@import 语句：
用于在 CSS 文件内部组织和管理样式，使得样式结构更为清晰。
【注意】如果过度使用 @import，可能导致多个 CSS 文件的链式加载，从而增加页面加载时间。

4）媒体查询支持

<link> 标签：
可以通过属性设置不同的媒体查询，选择性加载样式。

<link rel="stylesheet" href="styles.css" media="screen and (max-width: 600px)">

@import 语句：
也可以通过媒体查询引入特定的样式。

@import url("styles.css") screen and (max-width: 600px);

结论
在性能和加载速度方面，推荐使用 <link> 标签；
在更高级的样式组织和结构管理中，可以使用@import，但应该注意它可能带来的页面加载性能问题。

7. `<img>`标签中的 `title`属性与`alt`属性的区别是什么？

<img> 标签中的 title 属性和 alt 属性都是用于描述图像的信息。

主要区别：

1）目的和用法

	`alt` 属性	`title` 属性
作用	用于提供图像的替代文本	用于提供额外的信息或提示
主要目的	改善无障碍性（可访问性），使得无法看到图像的用户（例如视觉障碍人士）能够理解图像的内容	为用户提供补充信息而不是替代图像内容
补充说明	当图像无法显示时，浏览器会显示 alt 文本作为替代	title 文本并不会在图像无法加载时显示，也不会被屏幕阅读器读取为主要信息
示例代码	`<img src="example.jpg" alt="示例图像的描述">`	`<img src="example.jpg" alt="示例图像的描述" title="这是一个示例图像的工具提示">`

2）对搜索引擎优化（SEO）的影响

alt 属性：
对 SEO 有重要影响，因为搜索引擎使用 alt 文本来理解图像的内容，从而对页面内容进行更好的索引。
使用相关的关键词作为 alt 文本可以帮助提升网页在搜索结果中的可见性。
title 属性：
对 SEO 的影响相对较小，主要用于用户体验，而不是提高搜索引擎的索引能力。

3）用户体验

alt 属性：
提高了网页的可访问性，使图像即使在不可用的情况下依然能够传达信息。
title 属性：
提供额外提示，能够帮助用户理解图像含义或获取相关信息，提升用户体验。

总结

alt 属性:
用来替代内容的，强调图像的功能和信息，适用于搜索引擎优化和可访问性。
title 属性:
是用来提供额外的提示信息，主要用于增强用户体验。

在使用 <img> 标签时，通常建议始终提供 alt 属性，而 title 属性则可以根据需要添加。

8.行内元素有哪些？块级元素有哪些？内敛块级元素有哪些？空元素有哪些？

在HTML中，元素可以根据其默认的显示行为被分类为行内元素（inline elements）、块级元素（block-level elements）、内联块级元素（inline-block elements）和空元素（void elements）。

1）行内元素（Inline Elements）

行内元素在页面中通常不会开始新的一行，它们只占据必要的宽度，不会强制换行。常见的行内元素包括：

<span>
<a>
<strong>
<em>
<img>
<input>
<label>
<select>
<textarea>
<button>
<code>
<cite>
<abbr>
<dfn>
<kbd>
<samp>
<var>
<sub>
<sup>
<i>
<b>
<u>
<s>
<small>
<big>
<q>
<mark>
<ruby>
<rt>
<rp>
<bdo>
<bdi>
<wbr>
<time>
<data>
<meter>
<progress>
<output>

2）块级元素（Block-level Elements）

块级元素通常开始新的一行，并且会占据其父容器的整个宽度。常见的块级元素包括：

<div>
<p>
<h1> 到 <h6>
<ul>
<ol>
<li>
<dl>
<dt>
<dd>
<table>
<form>
<pre>
<hr>
<blockquote>
<address>
<article>
<aside>
<footer>
<header>
<main>
<nav>
<section>
<video>
<audio>
<canvas>
<figure>
<figcaption>
<fieldset>
<legend>
<details>
<summary>
<dialog>

3）内联块级元素（Inline-block Elements）

内联块级元素结合了行内元素和块级元素的特性。它们不会开始新的一行，但可以设置宽度和高度。
CSS属性 display: inline-block; 可以用来创建内联块级元素。
HTML元素本身没有默认是内联块级的，但可以通过CSS设置。

4）空元素（Void Elements）

空元素是指没有内容的元素，它们通常不需要闭合标签。常见的空元素包括：

<br>
<hr>
<img>
<input>
<link>
<meta>
<base>
<col>
<embed>
<keygen>（HTML5中已废弃）
<param>
<source>
<track>
<wbr>

9.Canvas 和 SVG 有什么区别？

Canvas 和 SVG（可缩放矢量图形）是两种用于在网页上绘制图形的方法，各自有不同的特点和适用场景。

以下是它们之间的一些主要区别：

1）绘图方式

Canvas：是一个基于像素的绘图方法，可以使用JavaScript在一个画布上绘制图形。绘制完成后，图形被“栅格化”为位图，不再是可重用的图形元素。因此，Canvas适合需要频繁更新或动画的场景。

SVG：是基于矢量的绘图方法，图形是通过XML来描述的。每个图形元素（如圆形、矩形、路径等）都是独立的，可以通过CSS和JavaScript进行操作。SVG适合静态图形或需要动态交互和样式的图形。

2）文件大小与性能

Canvas：Canvas图像的文件大小通常较小，尤其是对复杂图形来说，因为它是基于像素的，而不是矢量的。但绘制复杂图形时，性能可能会下降，尤其是在频繁重绘时。

SVG：SVG图像的文件大小取决于图形的复杂性，因为所有的元素都被描述为文本。对于简单的图形，SVG的文件大小可以很小，但对于复杂图形，文件大小可能会变大。SVG在高分辨率显示器上具有优势，因为它不会失去清晰度。

3）交互性

Canvas：在Canvas上添加交互操作通常涉及更多的编程工作，开发者需要手动管理事件，因为Canvas图形不是DOM元素，不能直接使用传统的DOM事件处理。

SVG：SVG图形是DOM元素，可以直接通过JavaScript或CSS进行操作和样式设置。因此，SVG的交互性相对更高，使用起来更方便。

4）渲染性能

Canvas：在渲染动态内容（如游戏）时，Canvas通常表现更好，因为它是基于像素的，可以快速绘制和更新。

SVG：对于静态或变化不大的图形，SVG表现良好。然而，当图形数量增加时，SVG的性能可能会受到影响，因为浏览器需要处理大量的DOM元素。

5）编辑与缩放

Canvas：由于Canvas是基于像素的，缩放可能会导致失真，而不能轻易地编辑图形元素。

SVG：SVG图形是可缩放的，不论缩放到多大，都不会失真。每个元素都可以单独编辑和修改。

6）使用场景

Canvas：适合实时图形、游戏、数据可视化等动态场景。

SVG：适合图标、图形设计、数据可视化中的静态和可交互元素。

10. HTML5 有哪些新特性?

1）新的语义元素

HTML5引入了一些新的语义元素，使得网页的结构更加清晰，有助于搜索引擎优化（SEO）和可访问性。这些新元素包括：

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

2）增强的表单功能

HTML5为表单控件引入了新的类型和属性，使得表单更加丰富和用户友好。例如：

新的输入类型：
<input type="email">, 
<input type="url">, 
<input type="number">, 
<input type="range">, 
<input type="date">, 
<input type="month">, 
<input type="week">, 
<input type="time">, 
<input type="datetime-local">, 
<input type="color">

新的表单属性：
placeholder, 
required, 
pattern, 
autofocus, 
autocomplete, 
novalidate

3）音频和视频支持

HTML5提供了内置的音频和视频播放支持，无需依赖第三方插件（如Flash）。新的标签包括：

<audio>
<video>

4） Canvas绘图

HTML5引入了<canvas>元素，允许通过JavaScript在网页上绘制图形、动画和游戏。

5）`SVG`和`MathML`支持

HTML5直接支持可缩放矢量图形（SVG）和数学标记语言（MathML），使得在网页上显示矢量图形和数学公式变得更加容易

6）地理定位

HTML5提供了获取用户地理位置的API，使得开发基于位置的应用和服务成为可能。

7）拖放功能

HTML5引入了原生的拖放API，使得在网页上拖放元素变得更加容易和直观。

8）Web存储

HTML5提供了两种新的存储机制：

localStorage：用于长期存储数据，浏览器关闭后数据不丢失。
sessionStorage：用于临时存储数据，浏览器关闭后数据丢失。

9）Web Workers

HTML5引入了Web Workers，允许在后台线程中运行JavaScript，从而不会阻塞用户界面，提高了网页的响应性能。

10）WebSocket

HTML5提供了WebSocket API，使得在客户端和服务器之间建立持久连接成为可能，实现了实时通信。

11）新的API

HTML5还引入了许多新的API，如：

Canvas API：用于2D绘图。
WebGL：用于3D绘图。
History API：用于操作浏览器的历史记录。
File API：用于处理文件。

12）改进的语法

HTML5简化了HTML的语法，允许省略某些标签（如结束标签），并且引入了新的文档类型声明：

<!DOCTYPE html>

11. SPA 应用怎么进行 SEO？

单页应用（Single Page Application，SPA）通常使用JavaScript动态加载内容，可能会对搜索引擎优化（SEO）带来挑战，因为传统的搜索引擎爬虫在处理JavaScript时可能无法获取动态内容。要有效优化SPA的SEO，可以考虑以下几种策略：

1）服务器端渲染（SSR）

SSR：服务器端渲染意味着在服务器上预先生成HTML内容并将其发送到浏览器，这样搜索引擎和用户在初次加载时都能够获取到完整的页面内容。

实现方法：使用框架（如 Next.js、Nuxt.js）来实现SSR，让用户和爬虫都能直接看到完整的HTML内容。

2）预渲染

预渲染：预渲染是在构建时间生成静态HTML文件，适用于内容相对静态或者更新频率较低的SPA。

工具：使用工具如 Prerender.io、Rendertron 或者一些构建工具（如 webpack）来提前生成HTML。

3）利用哈希或路径路由

哈希路由：虽然使用哈希（如 example.com/#/page）通常对SEO不利，但它可以确保快速加载，并避免在每次点击时进行页面重新加载。搜索引擎对这种路径的支持有限，因此尽量使用现代的路径路由。

路径路由：使用基于路径的路由（如 example.com/page），有助于搜索引擎正确识别和索引网页。

4）提供企业级标记（比如meta标签）

确保每个页面都有独特的<title>和<meta>标签（如描述和关键字）。这些内容应当在用户访问任何特定路由时能够动态更新。

5）使用结构化数据

通过使用Schema.org结构化数据标记，可以帮助搜索引擎更好地理解页面内容，并可能增强搜索结果中的展示效果（如富文本结果）。

6）确保内部链接结构清晰

使用内部链接方便爬虫抓取和索引新的内容。确保所有重要的页面都可以通过有效的导航轻松访问。

7）优化加载时间

减少首次渲染时间（First Contentful Paint，FCP），使用懒加载（Lazy Loading）技术和代码拆分（Code Splitting）来提升用户体验，改善SEO反馈信号。

8）提供一个 sitemap.xml 文件

创建并提交sitemap.xml文件，让搜索引擎更容易找到和抓取你的所有页面。

9）合理处理404页面

确保处理404页未找到的情况时友好，并提供返回主页或相关内容的选项，可以改善用户体验和SEO。

10）使用 Google Search Console 等工具

监控搜索表现和抓取错误，在Google Search Console中检查爬虫的索引情况，以确保所有页面都被正确索引。

11）避免使用纯 Ajax 加载内容

尽量避免通过Ajax请求从无头模式获取页面内容，因为这可能会导致搜索引擎无法抓取和索引这些内容。

12. HTML5 的离线储存怎么使用，它的工作原理是什么？

HTML5 提供了多种机制用于离线存储和数据持久化，最常用的有 Local Storage 和 Session Storage，以及 IndexedDB。

以下是它们的工作原理及使用方法的详细说明：

1）Local Storage

工作原理：
Local Storage 是一种持久化存储方式，数据存储在浏览器中，直到用户明确地删除它。它的存储量通常为每个源（domain）约 5-10MB，不随浏览器窗口的关闭而消失。
使用方法:

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();

2）Session Storage

工作原理：
- Session Storage 与 Local Storage 类似，但数据仅在浏览器会话存活期间存在。
- 关闭标签页或浏览器会话后，数据会被清除。
- 存储量通常与 Local Storage 相同。
使用方法:

// 存储数据
sessionStorage.setItem('key', 'value');

// 获取数据
const value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

// 清空所有数据
sessionStorage.clear();

3）IndexedDB

工作原理：
- IndexedDB 是一种更高级的存储方法，允许你在浏览器中存储大量结构化数据。
- IndexedDB 提供了事务支持、一致性、同步和异步访问等功能。
- 适用于大数据量的存储，如存储大量记录或文件。
使用方法:

// 打开（或创建）数据库
const request = indexedDB.open('myDatabase', 1);

// 数据库创建和升级时调用
request.onupgradeneeded = function(event) {
    const db = event.target.result;

    // 创建一个对象存储空间
    const objectStore = db.createObjectStore('myStore', { keyPath: 'id' });
};

// 打开数据库成功时调用
request.onsuccess = function(event) {
    const db = event.target.result;

    // 增加数据
    const transaction = db.transaction('myStore', 'readwrite');
    const objectStore = transaction.objectStore('myStore');

    const newItem = { id: 1, name: 'Item 1' };
    objectStore.add(newItem);

    // 读取数据
    const getRequest = objectStore.get(1);
    getRequest.onsuccess = function(event) {
        console.log(event.target.result); // 输出读取到的数据
    };

    // 关闭数据库
    transaction.oncomplete = function() {
        db.close();
    };
};

总结

Local Storage 适合存储希望长期存在的数据；
Session Storage 适合存储会话期间临时数据；
IndexedDB 适合需要存储大量结构化数据的应用。

这些存储机制都是基于异步 API，避免了阻塞用户界面，从而提供更流畅的用户体验。
通过这些 API，可以在不依赖于服务器的情况下，创建更灵活的用户体验，并实现离线功能。

13.一台设备的dpr，是否可变？

设备的 DPR（Device Pixel Ratio，设备像素比）是一个表示设备屏幕物理像素与 CSS 像素的比例的数值。
DPR 的值通常是固定的，取决于特定设备的屏幕特性。
然而，在某些情况下，DPR 可能会有变化。

1）`DPR` 的基本特点

固定性：每个设备在出厂时都有一个特定的 DPR 值。
例如，许多手机和平板电脑的 DPR 会高于 1，以便在高分辨率的屏幕上显示更细腻的图像。
计算方式：
例如，一台具有 1920x1080 像素的设备，如果 CSS 像素为 960x540，那么 DPR 的计算方式为：

[ \text{DPR} = \frac{\text{物理像素}}{\text{CSS 像素}} = \frac{1920 \times 1080}{960 \times 540} = 2 ]

DPR 的可变性:
设备的 DPR 本身通常是固定的，以下情况可能会影响它的显示效果：
- 缩放设置：
  某些操作系统（如 Windows 和 macOS）允许用户调整全局缩放设置。此时，在屏幕上显示的内容可能会被放大或缩小，从而影响实际使用中的视觉体验，但这不改变设备的DPR 度量。
- 浏览器的缩放：
  用户在浏览器中按下 Ctrl/+ 或 Ctrl/- 键进行缩放会影响网页内容的显示，但这也是一种视觉层面的变化，而不是实际的 DPR 改变。
- 媒体查询和响应式设计：
  在开发中使用的 CSS 媒体查询能够针对不同的 DPR 制定不同的视觉样式。例如，可以为高 DPR 设备提供高分辨率图像，但这也是根据设备的 DPR 进行适配，而不是设备 DPA 的变化。
- 辅助功能设置：
  某些设备提供的辅助功能，如放大镜，可以在操作时更改显示内容的缩放比率，但这仍然是视觉上的，而不会改变底层的 DPR。

结论
设备的 DPR 是由硬件决定的，一个特定设备的 DPR在正常情况下是固定的，但用户可以通过操作系统、浏览器或设置来影响内容呈现的方式，导致实际显示效果在视觉上有所不同。

14.对 DOM 树的理解

DOM（Document Object Model，文档对象模型）是 HTML 和 XML 文档的编程接口。它提供了一个结构化的表示方法，允许开发者通过脚本语言（如 JavaScript）来动态地访问、修改文档的内容、结构和样式。
DOM 树是 DOM 的核心概念，它将文档表示为一个树状结构，其中每个节点都是一个对象，代表文档的一个组成部分。

1）DOM 树的结构

根节点：
DOM 树的顶端是根节点，通常是 document 对象，它代表整个文档。
元素节点：
HTML 中的每个标签（如 <div>、<p>、<span> 等）在 DOM 树中都是一个元素节点。元素节点可以包含其他元素节点或文本节点。
文本节点：
元素节点中的文本内容（如 <p>Hello World</p> 中的 "Hello World"）在 DOM 树中是一个文本节点。
属性节点：
HTML 标签的属性（如 <a href="https://example.com">Link</a> 中的 href）在 DOM 树中是一个属性节点。属性节点通常是元素节点的一部分。
注释节点：
HTML 中的注释（如 ）在 DOM 树中是一个注释节点。

2）DOM 树的特点

层级结构：
DOM 树是一个层级结构，节点之间存在父子关系。例如，一个 <div> 元素可以包含多个 <p> 元素，每个 <p> 元素又可以包含文本或其他元素。
动态性：
DOM 树是动态的，可以通过 JavaScript 进行修改。例如，可以添加、删除或修改节点，从而改变页面的内容和结构。
跨平台和语言：
DOM 是一个标准，由 W3C（World Wide Web Consortium）制定，因此它可以在不同的平台和浏览器上工作，并且可以与多种编程语言（如 JavaScript、Python、Java 等）一起使用。
操作 DOM 树：
通过 JavaScript，开发者可以操作 DOM 树来实现各种功能，例如：
- 访问节点：使用 getElementById、getElementsByClassName、querySelector 等方法来查找特定的节点。
- 修改节点：使用 innerHTML、textContent、setAttribute 等属性或方法来修改节点的内容或属性。
- 创建和删除节点：使用 createElement、createTextNode、appendChild、removeChild 等方法来创建新节点或删除现有节点。
- 事件处理：使用 addEventListener 和 removeEventListener 来添加或移除事件监听器，从而响应用户的交互。

总结
DOM 树是网页结构的核心表示形式，它使得开发者能够以编程方式与网页内容进行交互。
理解 DOM树的结构和操作方法对于前端开发至关重要，它是实现动态网页和交互式用户界面的基础。

15.a标签合法的几种target属性

_blank ：在新窗口中打开链接。
_self ：在当前窗口中打开链接（默认值）。
_parent ：在父框架中打开链接。
_top ：在整个浏览器窗口中打开链接，忽略任何框架。

16.form表单只有一个的时候自动提交怎么阻止？

1）在表单元素中添加 `onsubmit="return false;"` 属性。

例如： <form onsubmit="return false;"> 这样在提交表单时，将不会执行默认的提交操作。

2）使用 JavaScript 监听表单的提交事件，并阻止其默认行为。

示例代码如下：

<form id="myForm">
  <!-- 表单内容 -->
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
});
</script>

17.怎么阻止表单的默认提交行为？

1）方法一：在表单的 onsubmit 事件处理函数中返回 false 。

<form onsubmit="return false;">
  <!-- 表单元素 -->
</form>

2）方法二：使用 JavaScript 来监听表单的 submit 事件，并调用 preventDefault() 方法来阻止默认行为。

<form id="myForm">
  <!-- 表单元素 -->
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
});
</script>

3）方法三：使用 jQuery 库，例如：

<form id="myForm">
  <!-- 表单元素 -->
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('#myForm').submit(function(event) {
  event.preventDefault();
});
</script>

18.按钮提交地址的属性是?

在 HTML 中，如果要创建一个提交表单数据的按钮，通常使用 <input> 元素或 <button> 元素，并将其 type 属性设置为 submit 。

以下是示例：

1）使用 `<input>` 元素：

<input type="submit" value="提交">

2）使用 `<button>` 元素：

<button type="submit">提交</button>

当点击这类按钮时，如果它们位于 <form> 标签内，就会将表单中的数据提交到 <form> 元素的 action 属性所指定的地址。

submit：定义提交按钮，提交按钮会把表单数据发送给服务器。
reset: 定义重置按钮，重置按钮会清除表单中的所有数据。
button：普通按钮。

19.sessionStorage，localStorage，cookie的区别

sessionStorage、localStorage 和 cookie 都是客户端存储数据的机制，但它们在存储期限、容量、用途和访问方式等方面有所不同。

以下是它们之间的主要区别：

	sessionStorage	localStorage	cookie
存储期限	数据仅在当前会话期间有效。当用户关闭浏览器标签页或窗口时，数据会被清除。	数据是持久化的，除非用户手动清除（如通过浏览器设置或使用 JavaScript 代码），否则数据会一直保留在浏览器中。	可以设置过期时间，可以是会话级别的（关闭浏览器时清除），也可以是持久化的（在指定的日期或时间后过期）。
容量	通常每个域名下可以存储 5MB 到 10MB 的数据，具体取决于浏览器实现		通常每个域名下可以存储大约 4KB 的数据，并且每个域名通常最多可以有 20 个左右的 cookie
用途	适用于存储会话期间需要的数据，如用户的临时设置或状态信息。	适用于存储长期需要的数据，如用户的偏好设置、本地缓存等。	适用于存储用户身份验证信息、跟踪用户行为、存储小量的配置数据等。cookie 可以被服务器和客户端共同访问，因此常用于会话管理和服务器端的状态保持。
访问方式	只能通过 JavaScript 在客户端访问，服务器端无法直接访问		既可以通过 JavaScript 在客户端访问，也可以通过 HTTP 头在服务器端访问。每次 HTTP 请求时，cookie 都会被自动发送到服务器。
数据传输	数据不会自动传输到服务器，仅在客户端使用		数据会随着每个 HTTP 请求自动发送到服务器，这可能会增加网络流量和延迟。
安全性	存储的数据不会自动发送到服务器，因此相对安全，但如果数据包含敏感信息，仍需注意保护		可以设置 Secure 属性，确保 cookie 只在 HTTPS 连接中传输；可以设置 HttpOnly 属性，防止通过 JavaScript 访问 cookie，从而防止 XSS 攻击。

总结

sessionStorage 适用于临时存储会话数据。
localStorage 适用于持久化存储本地数据。
cookie 适用于存储需要与服务器共享的数据，尤其是会话管理和用户跟踪。
选择使用哪种存储机制取决于具体的应用需求和数据的使用场景。

20. Session，Cookie，localhost区别

Session 、 Cookie 和 localhost 是三个不同的概念，具有不同的用途和特点。

Session （会话）：
- 是服务器端用于存储和跟踪用户会话状态的一种机制。
- 数据存储在服务器端，通常与一个唯一的会话标识相关联，该标识通过 Cookie 或在 URL 中传递给客户端。
- 相对于 Cookie 更安全，因为敏感信息不会暴露在客户端。
Cookie ：
- 是存储在客户端（浏览器）的一小段数据。
- 由服务器发送给客户端，并由客户端在后续请求中自动携带回服务器。
- 可以用于存储用户偏好、会话标识等信息，但由于存储在客户端，存在一定的安全风险，且存储容量有限。
localhost ：
- 不是与 Session 和 Cookie 同一类的概念。
- 是一个主机名，通常用于指代本地计算机，在网络编程和开发中用于表示本地服务器的地址。

总的来说， Session 和 Cookie 用于在客户端和服务器之间传递和存储与用户相关的信息，而 localhost
是用于标识本地计算机的名称。