面试 HTML 框架八股文十问十答第一期

面试 HTML 框架八股文十问十答第一期

作者:程序员小白条个人博客

相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!

⭐点赞⭐收藏⭐不迷路!⭐

1)src和href的区别

  1. src和href的区别:
    • src(source):
      • 用于外部资源的引入,比如<script>标签的src属性用于引入外部JavaScript文件。
      • 浏览器会根据src的值发起请求,并执行相应的资源。
      • 用于替代内嵌内容。
    • href(hypertext reference):
      • 用于建立当前元素与外部资源之间的关系,比如<link>标签的href属性用于引入外部样式表。
      • 浏览器不会像src一样去获取资源,而是根据href的值建立元素与外部资源的关联。
      • 用于链接到外部资源,例如CSS文件或超链接。

2)对HTML语义化的理解

HTML语义化是指在编写HTML代码时,使用具有含义的标签,使文档结构清晰、易读、有助于理解。语义化的优点包括:

  • 提升可访问性: 有意义的标签可以提高页面在辅助技术(如屏幕阅读器)中的表现,使页面更容易理解。
  • 搜索引擎优化(SEO): 搜索引擎能够更好地理解文档结构,提高网页在搜索结果中的排名。
  • 便于维护: 具有语义的HTML使代码更易于理解和维护,降低团队合作的难度。
  • 跨平台兼容性: 语义化的HTML有助于在不同设备和平台上获得一致的显示效果。

3)DOCTYPE(⽂档类型) 的作⽤

DOCTYPE声明用于指定HTML文档的版本和类型,告诉浏览器使用哪个HTML规范来解析文档。它的作用包括:

  • 触发标准模式: 通过正确声明DOCTYPE,可以让浏览器以标准模式(standards mode)来渲染页面,确保浏览器按照规范进行渲染。
  • 确保浏览器正确解析文档: DOCTYPE声明告诉浏览器使用哪个HTML版本的规范解析文档,以确保正确显示页面。
  • 提高浏览器渲染性能: 标准模式下的渲染更符合规范,有助于提高页面的性能。

例子:<!DOCTYPE html>

4)script标签中defer和async的区别

  • defer:
    • 告诉浏览器立即下载文件,但延迟执行脚本,即在文档解析完成后才执行。
    • 多个带有defer属性的脚本按照它们在文档中的顺序执行。
    • 适用于脚本之间没有依赖关系,且需要在文档解析完成后执行的情况。
  • async:
    • 告诉浏览器立即下载文件,下载完成后立即执行脚本,不等待其他脚本和文档解析。
    • 多个带有async属性的脚本不能保证执行顺序,谁先下载完成就先执行谁。
    • 适用于独立的脚本,彼此之间没有依赖关系。

使用示例:

js 复制代码
<script defer src="script1.js"></script>
<script async src="script2.js"></script>

5)常⽤的meta标签有哪些

  • <meta charset="UTF-8"> 指定文档使用UTF-8字符集。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> 针对移动设备设置视口,以确保页面在不同设备上的显示效果良好。
  • <meta name="description" content="描述内容"> 提供页面的描述,用于搜索引擎显示搜索结果摘要。
  • <meta name="keywords" content="关键词1, 关键词2, ..."> 指定页面的关键词,有助于搜索引擎优化。
  • <meta name="author" content="作者"> 指定页面的作者信息。
  • <meta http-equiv="X-UA-Compatible" content="IE=edge"> 设置IE浏览器使用最新的引擎渲染页面。
  • <meta name="robots" content="index, follow"> 控制搜索引擎爬虫的行为。

这些meta标签有助于提高网页的可访问性、搜索引擎优化和用户体验。

6)HTML5有哪些更新

  1. HTML5引入了许多新特性和API,其中一些主要的更新包括:
    • 语义化标签: 引入了一系列新的语义化标签,如<header><nav><article><section><footer>等,以更清晰地描述文档结构。
    • 多媒体支持: 新增了<audio><video>标签,提供原生的音频和视频支持。
    • Canvas绘图: 引入了<canvas>标签,使得通过JavaScript脚本可以进行动态绘图。
    • 新表单特性: 引入了一些新的表单元素和属性,如<input type="date"><input type="email"><input type="url">等,以及placeholderrequired等属性。
    • 本地存储: 提供了localStorage和sessionStorage,用于在客户端存储数据。
    • Web Workers: 支持在后台运行的多线程脚本,提高前端性能。
    • WebSockets: 提供了基于WebSocket协议的API,支持实时双向通信。

7)img的srcset属性的作⽤?

srcset属性是<img>标签的一个属性,用于指定多个图像源,以便根据不同的屏幕尺寸和分辨率选择最合适的图像进行显示。主要作用包括:

  • 响应式图像: 根据设备的屏幕尺寸和分辨率,选择合适的图像,以优化页面加载速度和显示效果。
  • 节省带宽: 避免在高分辨率设备上加载过大的图像,节省用户的带宽和提高页面加载性能。
  • 提高用户体验: 显示适合设备屏幕的图像,提高用户体验和页面的可读性。

示例:

html 复制代码
<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" alt="描述">

8)行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

  • 行内元素:
    • <span><a><strong><em><img><br>等。
    • 默认在一行内显示,不会独占一行,只占据自身的宽度。
  • 块级元素:
    • <div><p><h1><h6><ul><ol><li>等。
    • 默认独占一行,占据整个可用的宽度。
  • 空(void)元素:
    • 指没有内容的元素,只有一个开始标签,没有结束标签。
    • <br><img><input><hr>等。

9)说一下 web worker

Web Worker是HTML5引入的一项技术,允许在浏览器中创建后台线程,使得脚本能够在主线程之外运行。主要特点包括:

  • 多线程执行: 允许在后台线程中执行脚本,避免阻塞主线程,提高页面性能和响应速度。
  • 独立的全局对象: Web Worker拥有自己独立的全局对象,与主线程的全局对象相互独立,无法直接访问主线程中的变量和DOM。
  • 通过消息传递通信: 主线程和Web Worker之间通过消息传递进行通信,通过postMessage和onmessage实现。
  • 不可操作DOM: Web Worker无法直接操作DOM,主要用于处理计算密集型任务和异步操作。

示例:

js 复制代码
// 主线程
const worker = new Worker('worker.js');
worker.postMessage('Hello from main thread!');
worker.onmessage = (event) => {
  console.log('Received message from Web Worker:', event.data);
};

// Web Worker (worker.js)
onmessage = (event) => {
  console.log('Received message in Web Worker:', event.data);
  postMessage('Hello from Web Worker!');
};

10)HTML5的离线储存怎么使用,它的工作原理是什么

HTML5的离线储存通过Application Cache实现。使用离线储存,可以使网页在没有网络连接时仍然能够访问并加载。使用步骤包括:

  1. 创建一个Manifest文件: 在Manifest文件中列出需要离线存储的资源,如HTML文件、CSS、JavaScript、图片等。

  2. 在HTML文件中引用Manifest文件: 在HTML文件的<html>标签中通过manifest属性引用Manifest文件。

    <!DOCTYPE html> <html manifest="example.appcache"> </html>
  3. Manifest文件示例(example.appcache):

    CACHE MANIFEST

    版本号

    注释行,以#开头

    明确指定需要缓存的资源

    CACHE:
    /css/style.css
    /js/script.js
    /images/logo.png

    明确指定需要在线获取的资源

    NETWORK:
    /api/data

    明确指定不缓存的资源

    FALLBACK:
    /offline.html

  • 浏览器首次访问页面时,会下载Manifest文件中列出的资源,并将它们存储在离线缓存中。
  • 之后,如果用户再次访问页面且处于离线状态,浏览器将从离线缓存中加载页面所需的资源,而不需要发起网络请求。
  • 如果资源在离线缓存中发生变化,浏览器会在下一次在线访问时检测到,并更新离线缓存中的资源。
  • 注意,Manifest文件中的每一行都可能以特定的符号开头,如CACHENETWORKFALLBACK,它们分别表示缓存的资源、需要在线获取的资源和指定的备用页面。

使用HTML5离线储存有助于提高应用程序的性能和用户体验,特别是在网络连接不稳定或者处于离线状态时。然而,也要注意谨慎使用,确保及时更新资源,以防止用户访问过期或过时的内容。

开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star!

⭐点赞⭐收藏⭐不迷路!⭐

相关推荐
Martin -Tang25 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发26 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
吾店云建站5 小时前
WordPress 6.7 “Rollins”发布
科技·程序人生·职场和发展·创业创新·程序员创富