面试 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!

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

相关推荐
new出一个对象23 分钟前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥1 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
emmm4594 小时前
html兼容性问题处理
html
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html