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

摘要

马上就要毕业啦,没有参加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:事件主体是被拖放元素,在整个拖放操作结束时触发。

渐进增强和优雅降级

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/593047.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TypeScript 语法 + 工具封装

环境配置 安装 npm install typescript -g 查看版本 tsc --version 1.初识typescript 邂逅typescript&#xff0c;typescript的基本使用 新建ts 文件 &#xff08;记得导出&#xff09; typescript 定义时可指定 变量类型 在名称后面加引号 和 类型 格式为 let 名称: 类型 …

Java学习,一文掌握Java之SpringBoot框架学习文集(2)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

Docker 安装Mysql

目录 Docker Mysql安装 ✨安装和配置mysql ✨远程连接mysql远程连接 MySQL 是世界上最流行的开源数据库。根据 DB-Engines的调查数据&#xff0c;MySQL 是第二受欢迎的数据库&#xff0c;仅次于 Oracle 数据库。MySQL在过去由于性能高、成本低、可靠性好&#xff0c;已经成…

Redis缓存保卫战:拒绝缓存击穿的进攻【redis问题 三】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Redis缓存保卫战&#xff1a;拒绝缓存击穿的进攻 前言缓存击穿的定义和原理为何会发生缓存击穿缓存击穿的危害防范缓存击穿结语: 前言 你是否曾经遇到过系统在高并发情况下出现严重性能问题&#xff…

2023.12.31力扣每日一题——一年中的第几天

2023.12.31 题目来源我的题解方法一 模拟 题目来源 力扣每日一题&#xff1b;题序&#xff1a;1154 我的题解 方法一 模拟 如果月份大于2,&#xff0c;需要判断当年是否是闰年&#xff0c;如果是闰年2月份需要多算一天。 具体计算&#xff1a; 先计算月的贡献&#xff08;注…

微信养号指南:提高账号权重

在如今的社交媒体时代&#xff0c;微信成为了人们生活中必不可少的一部分。它不仅是一个即时通讯工具&#xff0c;更是一个方便快捷的社交平台。然而&#xff0c;要想让自己的微信号保持活跃并吸引更多的关注&#xff0c;需要一些技巧和策略。下面将为大家分享一些微信养号指南…

云卷云舒:基于业务逻辑关联度实现数据预加载

云卷云舒&#xff1a;算力网络云原生&#xff08;下&#xff09;&#xff1a;云数据库发展的新篇章-CSDN博客 一、现有技术的技术方案 在实现一个具有复杂业务逻辑的应用系统时&#xff0c;大多数情况下&#xff0c;编码过程中必定会包含着较多的数据访问方法&#xff08;java…

MES是什么?有了MES还要上ERP或MES吗?

MES是什么 MES是Manufacturing Execution System&#xff08;制造执行系统&#xff09;的简称&#xff0c;是一套面向制造企业车间执行层的生产信息化管理系统&#xff0c;负责承接ERP系统下达的生产计划&#xff0c;与ERP关系密切。MES能通过信息传递&#xff0c;做到生产追溯…

亚马逊、速卖通等跨境平台如何利用自养号测评提升销量

一、自然排名&#xff1a;链接成功的关键 自然排名的重要性不言而喻。一个链接的成功与否&#xff0c;关键在于其自然排名是否能够打上来。无论是搜索流量还是关联流量的自然排名&#xff0c;亦或是BSR排行榜&#xff0c;都应时刻关注这些自然排名的变化。 二、自然排名的位置…

Java使用camerax的例子

在github&#xff0c;自己看吧 https://github.com/7eau/CameraXDemo_Java camerax版本 def camerax_version "1.1.0-beta01" implementation "androidx.camera:camera-core:${camerax_version}" implementation "androidx.camera:camera-camera2:…

Unity 2022 版本 寻路 NavMesh

官方教程地址 https://docs.unity3d.com/Packages/com.unity.ai.navigation1.1/manual/index.html 首先装包 先给地图 和 阻挡 设置为静态 然后给地上行走的地方 添加组件 可以直接bake 然后会显示蓝色的可行走路径 player 添加插件 然后给角色添加脚本 using System.Co…

Keil调试STM32卡死在文件startup_stm32f10x_hd.s的B处

———————Keil调试卡死——————— &#x1f384;问题说明 在移植代码完成后调试时候程序卡死在startup_stm32f10x_hd.s文件的B处 &#x1f384;复现场景 &#x1f384;解决办法 经过查资料&#xff0c;发现是移植的时候&#xff0c;漏掉了终端函数&#xff0c;加上…

MySQL的安装网络配置

目录 一. MySQL5.7的安装 二. MySQL8.0的安装 三. 配置网络访问 思维导图 一. MySQL5.7的安装 1. 解压 2. 将my.ini文件放入到解压文件中 3. 编辑my.ini文件&#xff0c;将路径改为当前路径 4. 进到bin目录下&#xff0c;以管理员身份打开cmd命令窗口 5. 安装MySQL服务 my…

kbdnecat.DLL文件缺失,软件或游戏无法启动运营,快速修复方法

“kbdnecat.DLL文件是什么&#xff1f;为什么一起动游戏或软件&#xff0c;Windows就报错“kbdnecat.DLL文件缺失&#xff0c;软件无法启动””&#xff0c;应该怎么修复呢&#xff1f; 首先&#xff0c;先来了解“kbdnecat.DLL文件”是什么&#xff1f; kbdnecat.DLL是一个动…

LeetCode 45

和跳跃游戏I差不多&#xff5e; class Solution { public:int jump(vector<int>& nums) {const int N1e410;int dp[N]{0};for(int i1;i<nums.size();i){dp[i]0x3f3f3f3f;}//init操作for(int i0;i<nums.size();i){for(int j1;j<nums[i];j){if(ij<nums.siz…

Vue中全局事件总线的配置和原理

实现任意组件之间的通信 任意组件通信的原理&#xff1a; 1、实现任意组件之间的通信,需要一个傀儡。这个傀儡既能被vm访问到,也能被VueComponent访问。 2、VueComponent.prototype.proto Vue.prototype为图上1.0黄色的线路。是Vue让组件实例对象VueComponent可以访问到Vue原…

Invalid options in vue.config.js: “plugins“ is not allowed

项目场景&#xff1a; 安装并配置elementPlus报错。 问题描述 "plugins" is not allowed. plugins不被允许。参考官网修改配置文件vue.config.js。 解决方案&#xff1a; const AutoImport require(unplugin-auto-import/webpack) const Components require(un…

阿里云Alibaba Cloud Linux 3镜像版本清单2024更新

Alibaba Cloud Linux阿里云打造的Linux服务器操作系统发行版&#xff0c;Alibaba Cloud Linux完全兼容完全兼容CentOS/RHEL生态和操作方式&#xff0c;目前已经推出Alibaba Cloud Linux 3&#xff0c;阿里云百科aliyunbaike.com分享Alibaba Cloud Linux 3版本特性说明&#xff…

即时通讯技术文集(第30期):IM开发综合技术合集(Part3) [共16篇]

为了更好地分类阅读 52im.net 总计1000多篇精编文章&#xff0c;我将在每周三推送新的一期技术文集&#xff0c;本次是第30 期。 ​[- 1 -] 全面掌握移动端主流图片格式的特点、性能、调优等 [链接] http://www.52im.net/thread-1802-1-1.html [摘要] 本文我们一起全面分析学…

HCIA-Datacom题库(自己整理分类的)——其他网络协议【完】

&#xff08;一&#xff09;单选 下列属于链路状态协议的是? Direct static FTP OSPF 解析&#xff1a; FTP&#xff1a;文件传输协议 OSPF&#xff1a;链路状态路由协议 如下图所示的网络主机A通过Telnet登录到路由器A然后在远程的界面通过FTP获取路由器的配置文件&…