当前位置：
  1. 首页
  2. html
  3. 正文
本文介绍: HTML5 是一种最新版本的 HTML (HyperText Markup Language) 标准，用于描述网页内容。而我们用来面试先，过了再说。啊啊啊

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

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

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

语义化的优点如下:

语义化标签优势：

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

常见语义化标签

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 用于嵌入外部资源,故会导致阻塞，而 href 用于链接其他资源，不会引起阻塞。

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

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

简而言之，如果你希望脚本在页面其他内容加载完成后执行，使用 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 在语法和功能上都有了很大的改进。其中一些重要的改进如下：

总的来说，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。

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 来设置锚点。

原文地址:https://blog.csdn.net/m0_45953836/article/details/129306168

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_33636.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 Html5 学前须知
下一篇 在vue3+ts的项目中，如何解决vant组件自带表单校验不生效?

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。