前端知识点(面试可看) —— HTML

2024-01-03 14:27:52

摘要

马上就要毕业啦,没有参加2023年的秋招,准备在最近开始找全职或者实习工作,然后也马上过年了,总结和理一下自己的知识要点,参加2024年的春招。

页面缩放

meta viewport 如何去使用,怎么使用?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />

主要功能:不给移动端的用户缩放页面

HTML 新特性

  1. 语义化标签
  2. 增强型表单
  3. canvas
  4. svg
  5. 地理位置
  6. 拖放API
  7. Storage
  8. worker
  9. socket
  10. dom
  11. 视频和音频

如何使用Canvas

Canvas是HTML5中新增的一种特性,简要意思来说是画布,通过JS来绘制2D图形。

详细可以看我这篇文章:把Canvas捡起来吧!

cookie、sessionStorage和localStorage的区别

cookiesesstionStoragelocalStorage
初始化客户端或者服务器客户端客户端
过期时间手动设置关闭页面过期永不过期
在当前浏览器会话中是否保持不变取决于是否过了过期时间
是否会随着HTTP请求发送给服务器
大小4kb5MB5MB
访问权限任意任意当前页面

script、script async 和 defer 区别

script HTML中解析,被提取后立即执行
script async 脚本提取、执行与HTML解析过程并行,有可能在HTML解析完成之前执行完毕。
script defer 仅提取过程和HTML解析并行,如果包含多个defer,将会顺序执行。

perogressive rendering

perogressive rendering也叫做渐进式渲染,用于提高网页性能,提高用户感知力。

如何做到呢?

  • 图片懒加载
  • 异步加载HTML片段
  • 确定显示内容的优先级,可以使用DOMContentLoaded/load事件加载其他资源和内容。

为什么把CSS样式链接放在head之间

首先,是规范要修。其次,这种做法可以让页面逐步呈现,提高用户体验。可以防止页面阻塞时没有央视,或者空白。

为什么把JS标签放在body之前

script标签在解析时,会阻塞HTML的执行,所以放在底部,让HTML先出现在页面中给用户看,提高体验度。最好的做法是使用defer属性,放在head中。

DOCTYPE的作用

DOCTYPE是HTML5中一种标准通用标记语言的文档声明类型,主要是告诉浏览器应该以什么样的文档类型来解析文档。(主要有html和xhtml两种)

此外浏览器页面渲染模式有两种(通过document.compatMode获取)

  1. CSS1Compat:标准模式,也是默认的模式。
  2. BackCompat:怪异模式(混杂模式),页面以一种比较宽松的向后兼容的方式显示。

Web Worker

web worker 是运行在后台的js,独立于其他脚本,不会影响页面性能。并且看可以通过postMessage将结果回传到主线程。这样在进行比较复杂的操作的时候,不会阻塞到主线程。

如何使用:

  1. 检测浏览器是否支持
  2. 创建web worker 文件
  3. 创建web worker 对象

离线存储

使用场景: 在用户没有与因特网链接时,可以正常访问站点或应用,如果有网,更行用户机器上的缓存文件。

原理: HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。

使用方法:

  1. 创建一个和 html 同名的 manifest 文件,然后在页面头部加入 manifest 属性
  2. 在manifest文件中编写需要离线存储的资源
  3. 在离线状态时,操作 window.applicationCache 进行离线缓存的操作

iframe 的优点和缺点

优点:

  1. 用来加载速度比较慢的内容
  2. 可以使脚本并行下载
  3. 可以跨子域通信

缺点:

  1. iframe会阻塞主页面onload事件
  2. 无法被一些搜索引擎识别
  3. 会产生多页面不好管理

drag API

  • dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。
  • darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。
  • dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。
  • dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。
  • dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。
  • drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。
  • dragend:事件主体是被拖放元素,在整个拖放操作结束时触发。

渐进增强和优雅降级

  • 渐进增强:就是针对低版本页面重构,保证基本功能,针对高级浏览器进行效果、交互等方面的改进和追加功能,以达到更好的用户体验
  • 优雅降级:构建完整的功能,再对低版本的浏览器进行兼容

文章来源:https://blog.csdn.net/weixin_44694641/article/details/135358638
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。