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

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

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

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

语义化的优点如下:

语义化标签优势:

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

常见语义化标签

  • :页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
  • :定义外部的内容,其中的内容独立于文档的其余部分。
  • :定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
  • :页脚,只有当父级是body时,才是整个页面的页脚。
  • :作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。

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" 元素。

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


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

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

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

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

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

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

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

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

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



在上面的代码中,使用 "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":定义移动设备的主题颜色。









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

srchref 都是 HTML 标签中常见的属性,但它们的作用是不同的。

  • src:是用于在 HTML 文档中嵌入外部资源(例如图像、脚本、插件等)的属性。它与标签相关联,并告诉浏览器在哪里加载该资源。例如, 用于嵌入图像资源。
  • href:是用于在 HTML 文档中链接其他资源(例如另一个网页、邮件地址、文件等)的属性。它与链接相关联,并告诉浏览器链接的位置。例如,Example 用于创建链接。

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

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

asyncdefer

你可能感兴趣的:(前端面试题,前端,html,搜索引擎)